diff --git a/lib/components/Slider/Slider.stories.tsx b/lib/components/Slider/Slider.stories.tsx
new file mode 100644
index 0000000..ee2cac7
--- /dev/null
+++ b/lib/components/Slider/Slider.stories.tsx
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Slider } from './Slider';
+import { fn } from '@storybook/test';
+
+const meta = {
+  title: 'Slider',
+  component: Slider,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const render = (args: Story['args']) => {
+  const { value, onValueChange, ...rest } = args;
+  const [numberValue, setNumberValue] = useState(value);
+  return (
+    <Slider
+      value={numberValue}
+      onValueChange={(newValue) => {
+        setNumberValue(newValue);
+        onValueChange(newValue);
+      }}
+      {...rest}
+    />
+  );
+};
+
+const parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?type=design&node-id=542-7071',
+  },
+};
+
+export const Default: Story = {
+  render,
+  parameters: {
+    ...parameters,
+  },
+  args: {
+    label: 'Osaamiset',
+    icon: 'school',
+    onValueChange: fn(),
+    value: 0,
+  },
+};
diff --git a/lib/components/Slider/Slider.test.tsx b/lib/components/Slider/Slider.test.tsx
new file mode 100644
index 0000000..478efea
--- /dev/null
+++ b/lib/components/Slider/Slider.test.tsx
@@ -0,0 +1,40 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { screen, render, waitFor } from '@testing-library/react';
+import { Slider } from './Slider';
+import userEvent from '@testing-library/user-event';
+
+const { ResizeObserver } = window;
+
+beforeEach(() => {
+  //@ts-expect-error Without this, the following error is introduced: "TypeError: win.ResizeObserver is not a constructor"
+  delete window.ResizeObserver;
+  window.ResizeObserver = vi.fn().mockImplementation(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  }));
+});
+
+afterEach(() => {
+  window.ResizeObserver = ResizeObserver;
+  vi.restoreAllMocks();
+});
+
+describe('Slider', () => {
+  it('should call onValueChange when value changes', async () => {
+    const onValueChangeMock = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Slider label="Target" icon="target" onValueChange={onValueChangeMock} />);
+
+    const [sliderThumb] = screen.getAllByRole('slider', { hidden: true });
+    sliderThumb.focus();
+
+    await user.keyboard('[ArrowRight]');
+    expect(sliderThumb).toHaveAttribute('aria-valuenow', '1');
+    await user.keyboard('[ArrowLeft]');
+    expect(sliderThumb).toHaveAttribute('aria-valuenow', '0');
+
+    await waitFor(() => expect(onValueChangeMock).toHaveBeenCalledTimes(2));
+  });
+});
diff --git a/lib/components/Slider/Slider.tsx b/lib/components/Slider/Slider.tsx
new file mode 100644
index 0000000..b061d98
--- /dev/null
+++ b/lib/components/Slider/Slider.tsx
@@ -0,0 +1,133 @@
+import { useRef, useState } from 'react';
+import {
+  Slider as ArkSlider,
+  SliderValueChangeDetails as ArkValueChangeDetails,
+  SliderFocusChangeDetails as ArkFocusChangeDetails,
+} from '@ark-ui/react';
+import {
+  arrow,
+  autoUpdate,
+  offset,
+  flip,
+  FloatingArrow,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+
+const ARROW_HEIGHT = 12;
+
+export interface SliderProps {
+  /** Label for tooltip */
+  label: string;
+  /** Icon shown on the button */
+  icon: string;
+  /** On slider value change */
+  onValueChange: (value: number) => void;
+  /** Current value of the slider */
+  value: number;
+}
+
+const getThumbClassName = (focused: boolean, value: number) => {
+  return focused ? `${value === 0 ? 'bg-[#DB2C35]' : 'bg-[#25A249]'} ` : 'bg-secondary-gray';
+};
+
+const getThumbBackgroundColor = (focused: boolean, value: number) => {
+  const lightColorSaturation = 41;
+  const lightColorLightness = 85;
+  const darkColorSaturation = 63;
+  const darkColorLightness = 39;
+
+  const saturation = lightColorSaturation + ((darkColorSaturation - lightColorSaturation) * value) / 100;
+  const lightness = lightColorLightness + ((darkColorLightness - lightColorLightness) * value) / 100;
+
+  return focused && value !== 0 ? `hsl(137 ${saturation}% ${lightness}%)` : undefined;
+};
+
+export const Slider = ({ label, icon, onValueChange, value }: SliderProps) => {
+  const [focused, setFocused] = useState(false);
+  const arrowRef = useRef(null);
+  const { refs, floatingStyles, context } = useFloating({
+    open: focused,
+    middleware: [
+      offset(ARROW_HEIGHT + 8),
+      flip(),
+      shift(),
+
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const hover = useHover(context, { move: false });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, {
+    role: 'tooltip',
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+
+  const onValueChangeHandler = (details: ArkValueChangeDetails) => {
+    onValueChange(details.value[0]);
+  };
+
+  const onFocusChangeHandler = (details: ArkFocusChangeDetails) => {
+    setFocused(details.focusedIndex === 0);
+  };
+
+  const thumbClassName = getThumbClassName(focused, value);
+  const thumbColorBackgroundColor = getThumbBackgroundColor(focused, value);
+
+  return (
+    <div className="flex h-[63px] w-[348px] rounded-[100px] bg-bg-gray">
+      <span
+        className={`m-2 size-[55px] rounded-full ${focused ? 'bg-accent' : 'bg-white'} flex items-center justify-center ${focused ? 'text-white' : 'text-primary-gray'} material-symbols-outlined select-none`}
+        aria-hidden
+      >
+        <span className="flex items-center justify-center text-[37px]">{icon}</span>
+      </span>
+      <ArkSlider.Root
+        className="ml-3 mr-5 flex grow flex-col justify-center"
+        onValueChange={onValueChangeHandler}
+        onFocusChange={onFocusChangeHandler}
+      >
+        <ArkSlider.Control className="flex">
+          <ArkSlider.Track className="flex h-[3px] grow bg-white">
+            <ArkSlider.Range className="" />
+          </ArkSlider.Track>
+          <ArkSlider.Thumb
+            ref={refs.setReference}
+            {...getReferenceProps()}
+            index={0}
+            style={thumbColorBackgroundColor ? { backgroundColor: thumbColorBackgroundColor } : undefined}
+            className={`absolute -top-[11px] flex size-[24px] justify-center rounded-full border-[3px] border-white ${thumbClassName}`.trim()}
+          />
+        </ArkSlider.Control>
+      </ArkSlider.Root>
+      {focused && (
+        <div
+          ref={refs.setFloating}
+          className="max-w-[292px] rounded-[20px] bg-primary-gray px-6 py-5 text-button-md text-white sm:text-body-md"
+          style={floatingStyles}
+          {...getFloatingProps()}
+        >
+          {label} {value}%
+          <FloatingArrow
+            ref={arrowRef}
+            context={context}
+            className="fill-primary-gray"
+            width={ARROW_HEIGHT * 2}
+            height={ARROW_HEIGHT}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/package-lock.json b/package-lock.json
index 0c6c666..fbf4106 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "license": "EUPL-1.2",
       "devDependencies": {
+        "@ark-ui/react": "^2.2.3",
         "@floating-ui/react": "^0.26.12",
         "@headlessui/react": "^1.7.18",
         "@storybook/addon-a11y": "^8.0.4",
@@ -99,6 +100,100 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@ark-ui/anatomy": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@ark-ui/anatomy/-/anatomy-2.3.1.tgz",
+      "integrity": "sha512-pfHDkuFRFdzOnZxqNcAld1b03ehvFrOqXery9JHBTchP8+VmAmxg6ZDn4Se1ie4HvcmXD6IU61jltJB/aXYpJg==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/accordion": "0.38.0",
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/avatar": "0.38.0",
+        "@zag-js/carousel": "0.38.0",
+        "@zag-js/checkbox": "0.38.0",
+        "@zag-js/clipboard": "0.38.0",
+        "@zag-js/collapsible": "0.38.0",
+        "@zag-js/color-picker": "0.38.0",
+        "@zag-js/color-utils": "0.38.0",
+        "@zag-js/combobox": "0.38.0",
+        "@zag-js/date-picker": "0.38.0",
+        "@zag-js/date-utils": "0.38.0",
+        "@zag-js/dialog": "0.38.0",
+        "@zag-js/editable": "0.38.0",
+        "@zag-js/file-upload": "0.38.0",
+        "@zag-js/hover-card": "0.38.0",
+        "@zag-js/menu": "0.38.0",
+        "@zag-js/number-input": "0.38.0",
+        "@zag-js/pagination": "0.38.0",
+        "@zag-js/pin-input": "0.38.0",
+        "@zag-js/popover": "0.38.0",
+        "@zag-js/presence": "0.38.0",
+        "@zag-js/progress": "0.38.0",
+        "@zag-js/radio-group": "0.38.0",
+        "@zag-js/rating-group": "0.38.0",
+        "@zag-js/select": "0.38.0",
+        "@zag-js/slider": "0.38.0",
+        "@zag-js/splitter": "0.38.0",
+        "@zag-js/switch": "0.38.0",
+        "@zag-js/tabs": "0.38.0",
+        "@zag-js/tags-input": "0.38.0",
+        "@zag-js/toast": "0.38.0",
+        "@zag-js/toggle-group": "0.38.0",
+        "@zag-js/tooltip": "0.38.0",
+        "@zag-js/tree-view": "0.38.0"
+      }
+    },
+    "node_modules/@ark-ui/react": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@ark-ui/react/-/react-2.2.3.tgz",
+      "integrity": "sha512-W43rbimG1f7v1jk8J+PG/3um8/PaL1lQZEnRPzaXtQjEoiBlXH4yFyJakoEldxoZEQGB8x7SUkjHxZ93cRceuQ==",
+      "dev": true,
+      "dependencies": {
+        "@ark-ui/anatomy": "2.3.1",
+        "@zag-js/accordion": "0.38.0",
+        "@zag-js/avatar": "0.38.0",
+        "@zag-js/carousel": "0.38.0",
+        "@zag-js/checkbox": "0.38.0",
+        "@zag-js/clipboard": "0.38.0",
+        "@zag-js/collapsible": "0.38.0",
+        "@zag-js/color-picker": "0.38.0",
+        "@zag-js/color-utils": "0.38.0",
+        "@zag-js/combobox": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/date-picker": "0.38.0",
+        "@zag-js/date-utils": "0.38.0",
+        "@zag-js/dialog": "0.38.0",
+        "@zag-js/editable": "0.38.0",
+        "@zag-js/file-upload": "0.38.0",
+        "@zag-js/hover-card": "0.38.0",
+        "@zag-js/i18n-utils": "0.38.0",
+        "@zag-js/menu": "0.38.0",
+        "@zag-js/number-input": "0.38.0",
+        "@zag-js/pagination": "0.38.0",
+        "@zag-js/pin-input": "0.38.0",
+        "@zag-js/popover": "0.38.0",
+        "@zag-js/presence": "0.38.0",
+        "@zag-js/progress": "0.38.0",
+        "@zag-js/radio-group": "0.38.0",
+        "@zag-js/rating-group": "0.38.0",
+        "@zag-js/react": "0.38.0",
+        "@zag-js/select": "0.38.0",
+        "@zag-js/slider": "0.38.0",
+        "@zag-js/splitter": "0.38.0",
+        "@zag-js/switch": "0.38.0",
+        "@zag-js/tabs": "0.38.0",
+        "@zag-js/tags-input": "0.38.0",
+        "@zag-js/toast": "0.38.0",
+        "@zag-js/toggle-group": "0.38.0",
+        "@zag-js/tooltip": "0.38.0",
+        "@zag-js/tree-view": "0.38.0",
+        "@zag-js/types": "0.38.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
     "node_modules/@aw-web-design/x-default-browser": {
       "version": "1.4.126",
       "resolved": "https://registry.npmjs.org/@aw-web-design/x-default-browser/-/x-default-browser-1.4.126.tgz",
@@ -2866,6 +2961,24 @@
       "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
       "dev": true
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz",
+      "integrity": "sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==",
+      "dev": true,
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.1.tgz",
+      "integrity": "sha512-N0fPU/nz15SwR9IbfJ5xaS9Ss/O5h1sVXMZf43vc9mxEG48ovglvvzBjF53aHlq20uoR6c+88CrIXipU/LSzwg==",
+      "dev": true,
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -4848,6 +4961,21 @@
       "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
       "dev": true
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.11.tgz",
+      "integrity": "sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@swc/helpers/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
+    },
     "node_modules/@swc/types": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz",
@@ -5921,6 +6049,764 @@
         "node": ">=12 <14 || 14.2 - 14.9 || >14.10.0"
       }
     },
+    "node_modules/@zag-js/accordion": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/accordion/-/accordion-0.38.0.tgz",
+      "integrity": "sha512-qovoN5KKX8kj5IH9N3r5GUHksL6Xa45YU0fbCeoDeMd/erObRKHoA7bnM+rfJLIKCifzO53ooWWYOVZaXOmT8Q==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/anatomy": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/anatomy/-/anatomy-0.38.0.tgz",
+      "integrity": "sha512-VlCOnKCOSFOonvZjdGTRwp3D/A9iQd69WQTI8i5G0JwS0lhq5lK/qJ7pJ0+UHnLcqAWEv5eywbpHOLFrSlr7Nw==",
+      "dev": true
+    },
+    "node_modules/@zag-js/aria-hidden": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/aria-hidden/-/aria-hidden-0.38.0.tgz",
+      "integrity": "sha512-yPdezG+ucZyaDD7p0jB7B6prtNQGyBJSfWlTyo69W+SFxkSdocdFF/dKjoReDEY6AvCc1ZhxgHVR/sd56F50/A==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/dom-query": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/auto-resize": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/auto-resize/-/auto-resize-0.38.0.tgz",
+      "integrity": "sha512-wauqOQwz8fAGzD2cHJEgqkCiNejWSq/Qsa7a0DdBX7BOdLyMloF6kc4YFNfQksUHgRaojLFHYJ5sfqzDO06yBQ==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/dom-query": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/avatar": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/avatar/-/avatar-0.38.0.tgz",
+      "integrity": "sha512-ZJqlwFcEET6OdmFgWPv7YQiYM7CyFTzfEN7wXeourRdkMlgbQvi1V0Ett3LteV2kYtFjFZCmEdxP4VMfOU3w0w==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/mutation-observer": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/carousel": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/carousel/-/carousel-0.38.0.tgz",
+      "integrity": "sha512-5CHRLaD9ZR5aivf1+MwmOYjkGCy8KXWx7XyWiUtlxu8ULJ4mFk6+s3RK12gmPHG7RVX5wPX9xC+2LSuVayXs5w==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/checkbox": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/checkbox/-/checkbox-0.38.0.tgz",
+      "integrity": "sha512-xOjbh35lxffAOyk+JwSxmKCV8wBTPe6O6aknBQkBa7Vd3KCZrgCtf/7fN8BG6cmnVjWmMk5edRt7lvZDHV8IHQ==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0",
+        "@zag-js/visually-hidden": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/clipboard": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/clipboard/-/clipboard-0.38.0.tgz",
+      "integrity": "sha512-YVWdoPuqzqdy0PXzAd66gqbvFv6qRTe84HaPNXZLBeFiL1OFdH9pl+xoa4Zxx5x4zJFPkOjbcd1jeXu0HMn7Ew==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/collapsible": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/collapsible/-/collapsible-0.38.0.tgz",
+      "integrity": "sha512-3FxPKnCSn/sCilKziVXEjrOCeVvPQ4vp1QOFgBiIlM0yjWxsqLv0uMWrFVh6rgc0dKfyVtKEJQgI1oYKwuwjjg==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/collection": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/collection/-/collection-0.38.0.tgz",
+      "integrity": "sha512-q+Y5MhmcbD4FlZSiWuqAXrc8EWziyVAD5LWd8mUI9ljMs0xsLCYSU14B1XkRx2e4FQ8Mi2C6n3lP+sHpa9/eLw==",
+      "dev": true
+    },
+    "node_modules/@zag-js/color-picker": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/color-picker/-/color-picker-0.38.0.tgz",
+      "integrity": "sha512-s6RFvnkjEeZdr6q/bDLUVuNSbJrfc0HnPf6EqJ53dISCV3rQf3LCx9rCyBJvyiM+/iay/rB2UEVlSteF2GVHtQ==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/color-utils": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dismissable": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/popper": "0.38.0",
+        "@zag-js/tabbable": "0.38.0",
+        "@zag-js/text-selection": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0",
+        "@zag-js/visually-hidden": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/color-utils": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/color-utils/-/color-utils-0.38.0.tgz",
+      "integrity": "sha512-lGZ5HDvQKLuMsXdRXzWr3p01zyL8Go7j82yVKNijFOj+2E4HoxQXgU5Tq393kt9DXONYkurISW+AWEUr+gM17Q==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/numeric-range": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/combobox": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/combobox/-/combobox-0.38.0.tgz",
+      "integrity": "sha512-MT+KMH6FAGvlWeKPck/SLV26dxxrGWGvHQoIPZtJyJoUjPdw8vuw7QvUF7YTx+bUoQwDL0nn3EBYJpGPSAJ7/Q==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/aria-hidden": "0.38.0",
+        "@zag-js/collection": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dismissable": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/mutation-observer": "0.38.0",
+        "@zag-js/popper": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/core": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/core/-/core-0.38.0.tgz",
+      "integrity": "sha512-+S5qKvIPiG4CBNFaVSwdUBViiU96cZPzkUttPhl+qP3Xk7HqBV6vL48PhP01nBXfcpmW0nk8FDX1S9PleWm0oQ==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/store": "0.38.0",
+        "klona": "2.0.6"
+      }
+    },
+    "node_modules/@zag-js/date-picker": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/date-picker/-/date-picker-0.38.0.tgz",
+      "integrity": "sha512-FMRnG1IHq7fOElXUGhC32hd09r7XcZ1RBJQsCd4/aJYipNyGJzMVHea/PaUo6iayhuBQ8vHsDDv5WiEWQrYimw==",
+      "dev": true,
+      "dependencies": {
+        "@internationalized/date": "3.5.2",
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/date-utils": "0.38.0",
+        "@zag-js/dismissable": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/live-region": "0.38.0",
+        "@zag-js/popper": "0.38.0",
+        "@zag-js/text-selection": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/date-utils": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/date-utils/-/date-utils-0.38.0.tgz",
+      "integrity": "sha512-H6dR/HcFEJTATKDc19YRg6fabpF26DbCI1o0YmuclKY68jF9XWfbeAwjyr/V71DjB2QHzvODALWWSbNLDKxQDg==",
+      "dev": true,
+      "peerDependencies": {
+        "@internationalized/date": ">=3.0.0"
+      }
+    },
+    "node_modules/@zag-js/dialog": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/dialog/-/dialog-0.38.0.tgz",
+      "integrity": "sha512-DcaEM8VWCVHAdv73y9ez4Sb1RuVMXYWYP/5K3SAeo6QCQVVuBg5pQXnkCqmGLnyE3Rf1wta8dRggu6N3Gghqrw==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/aria-hidden": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dismissable": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/remove-scroll": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0",
+        "focus-trap": "7.5.4"
+      }
+    },
+    "node_modules/@zag-js/dismissable": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/dismissable/-/dismissable-0.38.0.tgz",
+      "integrity": "sha512-4Ipp68QxFmrBeXuLjPpIx7uBrBjhqv3aQFWIvzuEbxVzq3o7afVEMVLlix54EIjkOLmdyW7O20pfTyPBO4lS8w==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/interact-outside": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/dom-event": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/dom-event/-/dom-event-0.38.0.tgz",
+      "integrity": "sha512-YQk23fCV8nLpvYP2G/pzQcggPzfLOkBAmXuGJvvJk7M5fkd3f5I+SSS6XNlWJ//+o1JkiMYQEezVDl7WXM+ITA==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/text-selection": "0.38.0",
+        "@zag-js/types": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/dom-query": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/dom-query/-/dom-query-0.38.0.tgz",
+      "integrity": "sha512-po1HqrEtP9ZfVKHbUzqK4jfHipQVdsfw84B5pnqPo/aPcsZnyzWgHmWE31yRZERmtTZdG6YTlOZdlZ/gQz0FfA==",
+      "dev": true
+    },
+    "node_modules/@zag-js/editable": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/editable/-/editable-0.38.0.tgz",
+      "integrity": "sha512-omOyINSgPX92E5D3RBexMyRvjLa4Zq5UUppG3FlA3kEi6DSU4hEj661vnVwc4ihhyWgWZh6KSKDE2m9fd6KEsA==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/interact-outside": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/element-rect": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/element-rect/-/element-rect-0.38.0.tgz",
+      "integrity": "sha512-Oi19Yhbos+XXxR/CTCs+EhvTcYZ1AKk2EtGzDzJTUzKf+qtl3ki6Ptfam/jZxIy2M59/vv70NpW7fPZOFNAmtw==",
+      "dev": true
+    },
+    "node_modules/@zag-js/element-size": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/element-size/-/element-size-0.38.0.tgz",
+      "integrity": "sha512-flOrHUK732FlU2Q5e5YdH42HxHg727uVmsez95ua97OG/Whsh87qLZRC20RQrqtC061lKOHkBi6LuQlhGxT9Gw==",
+      "dev": true
+    },
+    "node_modules/@zag-js/file-upload": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/file-upload/-/file-upload-0.38.0.tgz",
+      "integrity": "sha512-7XwD9yhTgkLrn/MCgLCcyGfJ/PjAJt5C1Wy7PoKEz3RkAyaT2Vs0qqg8OE2NbtL7pdE/mFzirtCGr2qgZ9JYHg==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/file-utils": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0",
+        "@zag-js/visually-hidden": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/file-utils": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/file-utils/-/file-utils-0.38.0.tgz",
+      "integrity": "sha512-WwZOqk9G+/DhDuvgQaNJuruTY4C0bc31obc1d1xDBvvH9aIl/mg99idAMrNc7bK+nMQSEVtKA5oMt5EobKqR1g==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/i18n-utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/form-utils": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/form-utils/-/form-utils-0.38.0.tgz",
+      "integrity": "sha512-2ziHvspfZ6Ft63AODo/0rkHxNrp37vOjbC+aV7L2r+pCCRnen5G+rzZuq2gwdyaOHeqYLlZSjDfSYbrI3Wfbkw==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/mutation-observer": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/hover-card": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/hover-card/-/hover-card-0.38.0.tgz",
+      "integrity": "sha512-tH6YQqYUwo2LAzpAb7oplMGB/K3teVZ+oL3xmq2kTXCtwVQTzHkxjopaywxljMCBmg+2E5OV26tzIrJFIAgxNg==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dismissable": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/popper": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/i18n-utils": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/i18n-utils/-/i18n-utils-0.38.0.tgz",
+      "integrity": "sha512-uLe6rA3n5MBKz1oGN1cdWHhFN2MU+HAXXpYuSGlUpHrQmjvAl0TxcOcBNz7qd9AwOoR8v7pGyt3OQnG0LC0PQA==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/dom-query": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/interact-outside": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/interact-outside/-/interact-outside-0.38.0.tgz",
+      "integrity": "sha512-9T2sPrgC9zCqS6y+2UlmVLAhFS3Qx/hFMCNAI7IlGFFI8z77NP6lQUaSuLAPqy3B9eG0fUFrBDh/rgBIPnBUDA==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/tabbable": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/live-region": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/live-region/-/live-region-0.38.0.tgz",
+      "integrity": "sha512-ktxJQxOomwUzfzFiwa6OFrV390kKQwHQV485SK5TV24/FNj9ogDlLwwhqzQ7PIHPxS/6JAUVUeW2POcgE6bDqw==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/visually-hidden": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/menu": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/menu/-/menu-0.38.0.tgz",
+      "integrity": "sha512-t0AcniH63zYqfWPnMOHTyJO7cc7uVSszDFZCJUEocO5EWQp0DnUVcdqXwUZNe+nIUvAjWMLdNDkCU3P74aMSMw==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dismissable": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/mutation-observer": "0.38.0",
+        "@zag-js/popper": "0.38.0",
+        "@zag-js/rect-utils": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/mutation-observer": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/mutation-observer/-/mutation-observer-0.38.0.tgz",
+      "integrity": "sha512-S8K3SQwEFPXHYTvn26zpeVl2RmmCmtqUFR0vHWkXyhpB3f+MmCQIk7UmO+6VtZLEBOew9FYfBgEfeuCzl+jgVQ==",
+      "dev": true
+    },
+    "node_modules/@zag-js/number-input": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/number-input/-/number-input-0.38.0.tgz",
+      "integrity": "sha512-tqnUP8Ww9fiLx5jOrirEcceOrspTA23iElvbZsvuB7fCgW2GUSPBeWkn074dyscZQ2JbZgrJVH40MU8l67D9ug==",
+      "dev": true,
+      "dependencies": {
+        "@internationalized/number": "3.5.1",
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/mutation-observer": "0.38.0",
+        "@zag-js/number-utils": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/number-utils": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/number-utils/-/number-utils-0.38.0.tgz",
+      "integrity": "sha512-Ao9aq0PTgM6ObcjlvP45yv/8XzSKO6FmRUsz7UOu2AkChhMztrDMvJMErUXMt/uVn+LReTA9Wf9n29WRKk87Kw==",
+      "dev": true
+    },
+    "node_modules/@zag-js/numeric-range": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/numeric-range/-/numeric-range-0.38.0.tgz",
+      "integrity": "sha512-Qfe0CQhIPVmmAFPi2ySq83AuXchd4uJvcDnQAeKZK9oVqLX8ol3ZOL5iv2ugYtHA1WoQftbNwGx7Zs4/JUWqvQ==",
+      "dev": true
+    },
+    "node_modules/@zag-js/pagination": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/pagination/-/pagination-0.38.0.tgz",
+      "integrity": "sha512-C9xduN6G5ewXugRU4pijtTibSBhOY3IXf/BuFewiPTrxXLAGtxl8UyLJ+8MrlOjMAQgxLT3Q5bbVOUjy2nVdtA==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/pin-input": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/pin-input/-/pin-input-0.38.0.tgz",
+      "integrity": "sha512-2884vhtGw4jAveNCQjpkhhQgWdDj7DU0WpgIml21Gqxx4QjesG5ebBpSG3lft1cGiP0JnhVnARY6EbhP+t/Lyw==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0",
+        "@zag-js/visually-hidden": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/popover": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/popover/-/popover-0.38.0.tgz",
+      "integrity": "sha512-KJG/Ftiluk0Pkf46+Vzx2YXzpi+0tX5QFBc1Ok+uVF4b9iSy9x3WCvj7mwoqVyFBE7w4+o6JKGpD9baXqt3wtw==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/aria-hidden": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dismissable": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/popper": "0.38.0",
+        "@zag-js/remove-scroll": "0.38.0",
+        "@zag-js/tabbable": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0",
+        "focus-trap": "7.5.4"
+      }
+    },
+    "node_modules/@zag-js/popper": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/popper/-/popper-0.38.0.tgz",
+      "integrity": "sha512-6xpG+mvfUJqVapu3LpRdAUuFwsqhVXLOQaBmQYntt6iiFd1+zJxkXW8o176BC2LG5IB8783GZE4+BY1/DB3sDA==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/dom": "1.6.3",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/presence": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/presence/-/presence-0.38.0.tgz",
+      "integrity": "sha512-Rio2mqo98+o0olxzG4MffFizFQRHJzL/HL6AFRi2G0u2HdGTHDGIMfACYGPLrq2JmBW+wIbO37A3KHiSYtfdtw==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/core": "0.38.0",
+        "@zag-js/types": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/progress": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/progress/-/progress-0.38.0.tgz",
+      "integrity": "sha512-7Qzuen0iP9hNRlStgUvuLGdJyx+Sz4vCoGaZkF3cYXyEpEd2rKYFct35cze3oXdg5+ZutbDoKbIZ08xsDtxhag==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/radio-group": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/radio-group/-/radio-group-0.38.0.tgz",
+      "integrity": "sha512-GISABuxOKTu48o5SzxJknc5p0ViB3TeOmkg76/aZaNlWMkURgQ9cvxIR5meXiIISpVsyAtIvOMoCXzmFxvoOmA==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/element-rect": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0",
+        "@zag-js/visually-hidden": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/rating-group": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/rating-group/-/rating-group-0.38.0.tgz",
+      "integrity": "sha512-ToaNzSU8tnDHfPJSHM5Y1o7w6MSq9N1qRCg/4G24orES0rG0qDhJvRKQdqqY08ZWTetCZcHNvPbUyQPzi91fTQ==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/react": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/react/-/react-0.38.0.tgz",
+      "integrity": "sha512-w0epVxXasralAVCWfC2KtQxxSebhhh0R2Cu1PYxU9M2pDsA8zg67Q4w8HyGR1zVKqbn4VXPZbEZZiyLQHOaZPQ==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/core": "0.38.0",
+        "@zag-js/store": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "proxy-compare": "2.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
+    "node_modules/@zag-js/rect-utils": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/rect-utils/-/rect-utils-0.38.0.tgz",
+      "integrity": "sha512-GUabczevwHrCP1fm56otvkushDH8WblXvKrNNSAVyJ1E7r81gsjsoD/aCnIZZ4RabQKrifqDekMfjYMbrRtFkw==",
+      "dev": true
+    },
+    "node_modules/@zag-js/remove-scroll": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/remove-scroll/-/remove-scroll-0.38.0.tgz",
+      "integrity": "sha512-JFcgj0QfUrT/POw/+V2LxuvnUjzLBP7TmCTmuGychEzWOalxxuuStTMa27nBDvgYp4eRNgIP+jjn8Fz3O+UW2g==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/dom-query": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/select": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/select/-/select-0.38.0.tgz",
+      "integrity": "sha512-dQb6gLyPU5dN1qYdMESX5CDgWZurmukE36I7A5r3rQ0/OkP3dhpTY1eqWJeaDg9lxGEcWnERpFiLelxxKc/RLg==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/collection": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dismissable": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/mutation-observer": "0.38.0",
+        "@zag-js/popper": "0.38.0",
+        "@zag-js/tabbable": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0",
+        "@zag-js/visually-hidden": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/slider": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/slider/-/slider-0.38.0.tgz",
+      "integrity": "sha512-D11+GZSGrYQpVSmcM2m2CVGOFk+TKDQL+USxfgY0vHp7fIEBuHbRYM/QPFRtcrCRAMx7y6UqZbxAUy7oqhoklQ==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/element-size": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/numeric-range": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/splitter": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/splitter/-/splitter-0.38.0.tgz",
+      "integrity": "sha512-eeCA+I6hbMvU/Kid0Ea4psfLux/9/UzW3tcVv0t7zH3+6EFOEV6B/TSPzxOqWQpgKvo94ejxpmRTsUKRlhejOQ==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/number-utils": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/store": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/store/-/store-0.38.0.tgz",
+      "integrity": "sha512-XbGfCxOeRLKqSAKsTOdPW8II+aAcLmyaIEDElWPr+Xt6IicANDi/CvksiiuzFiMutxowJzhXOrfIT7A093D2vQ==",
+      "dev": true,
+      "dependencies": {
+        "proxy-compare": "2.6.0"
+      }
+    },
+    "node_modules/@zag-js/switch": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/switch/-/switch-0.38.0.tgz",
+      "integrity": "sha512-2N/2nT5V62JGPvwcsK7mKmsgT2ZiSX8Gt2+zOMY6vuS5SZJnHvI9TxsMP2XuJto9mskFBIdm/Z+27IvM6sPcbg==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0",
+        "@zag-js/visually-hidden": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/tabbable": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/tabbable/-/tabbable-0.38.0.tgz",
+      "integrity": "sha512-hIe0HKBvFV6IJQlZPyPPRMD7v4r8jJ0Hn3ZpMXoYwyRmH0Cfuha03SoLOsqeAQvLAa+EJDSU8UDUCnVrNtHASQ==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/dom-query": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/tabs": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/tabs/-/tabs-0.38.0.tgz",
+      "integrity": "sha512-KYXO8uUeikFiwdGPHxNZg5lWn7z564WKHj4PjBV2iU0H2Itc4313xePbxAA0/rTlEQrIbYutqhAPp65bCa5OVw==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/element-rect": "0.38.0",
+        "@zag-js/tabbable": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/tags-input": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/tags-input/-/tags-input-0.38.0.tgz",
+      "integrity": "sha512-SNqPiAG2Jzhy+0HNYVINvphgIWkPpFkkldbZfEqBFnYs5kHx/iP4FAWeTB4AtY0yxexSAv0Pj9DrQfewz0xkMA==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/auto-resize": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/form-utils": "0.38.0",
+        "@zag-js/interact-outside": "0.38.0",
+        "@zag-js/live-region": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/text-selection": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/text-selection/-/text-selection-0.38.0.tgz",
+      "integrity": "sha512-etNbRs0g4wgB/HETO0GhRziDIKRdRAEV39P4/zEdFMNBkXCjJgX7xWvWiwXkoCzIBFN2FXTFuwWWA+fBt3XfSQ==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/dom-query": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/toast": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/toast/-/toast-0.38.0.tgz",
+      "integrity": "sha512-uCiB5sUuc7/hIZvDR6xcy+fQeE2UJNXpI8i6k/Jg4D1ZYy63iJVm8g9+5mByaPaSVi9Osou/r/A/yIU9qbOSnw==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/toggle-group": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/toggle-group/-/toggle-group-0.38.0.tgz",
+      "integrity": "sha512-9iRMDuUvbQBZ1WzU4sbAC5BhL14Ev5P9AxQSEmexWgV1nJi+vsWEzOrZY+AqoOoeFdg0Ju/c0K0Uk/sLcsKfgA==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/tooltip": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/tooltip/-/tooltip-0.38.0.tgz",
+      "integrity": "sha512-MsgUdozogatPQivWTNINxt1bgx7ndOvxNlG2GuwUwEfMIjZyU4c7SqbhGwVohLJCd6h2056IAM3PxpYZNkXXIg==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/popper": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/tree-view": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/tree-view/-/tree-view-0.38.0.tgz",
+      "integrity": "sha512-N2vOKIZ4NNT4YbkfcywrpOZ4RFX2qQWUkcMGmE936LhWBM/NDHlJ6Wub7UcUcSUkKyQnaAeslJ8zrr1/xMCpgA==",
+      "dev": true,
+      "dependencies": {
+        "@zag-js/anatomy": "0.38.0",
+        "@zag-js/core": "0.38.0",
+        "@zag-js/dom-event": "0.38.0",
+        "@zag-js/dom-query": "0.38.0",
+        "@zag-js/mutation-observer": "0.38.0",
+        "@zag-js/types": "0.38.0",
+        "@zag-js/utils": "0.38.0"
+      }
+    },
+    "node_modules/@zag-js/types": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/types/-/types-0.38.0.tgz",
+      "integrity": "sha512-PaLqLOWSFlnqwyavLuycasx/dFKzbbcoCB/FcDbKPe88ysCZtRPxeUA/Yn8N1roPnF/gvkwCSTO43+VA6cKspA==",
+      "dev": true,
+      "dependencies": {
+        "csstype": "3.1.3"
+      }
+    },
+    "node_modules/@zag-js/utils": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/utils/-/utils-0.38.0.tgz",
+      "integrity": "sha512-u37JTfpbAYtvHwLbHVIRBuzM3+FWDX32Vsyt3LJQ+1GW69BXtWz2zDRVru3xMZ7XGsXlnGxD8xNIjYxOJCJePA==",
+      "dev": true
+    },
+    "node_modules/@zag-js/visually-hidden": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/visually-hidden/-/visually-hidden-0.38.0.tgz",
+      "integrity": "sha512-yOpGmd+4Y2xSzmbTpip9XtJadZmxcW8VYGDPkMKKzDClFxqUcGDh501DT5amJ+iLL+onqhzggvUJJxl7KzV7+g==",
+      "dev": true
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -8999,6 +9885,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/focus-trap": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
+      "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
+      "dev": true,
+      "dependencies": {
+        "tabbable": "^6.2.0"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -10744,6 +11639,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/kolorist": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
@@ -12914,6 +13818,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-compare": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.6.0.tgz",
+      "integrity": "sha512-8xuCeM3l8yqdmbPoYeLbrAXCBWu19XEYc5/F28f5qOaoAIMyfmBUkl5axiK+x9olUvRlcekvnm98AP9RDngOIw==",
+      "dev": true
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/package.json b/package.json
index b782f6d..daf48db 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react": "^18"
   },
   "devDependencies": {
+    "@ark-ui/react": "^2.2.3",
     "@floating-ui/react": "^0.26.12",
     "@headlessui/react": "^1.7.18",
     "@storybook/addon-a11y": "^8.0.4",