@intlayer/design-system 2.0.12 → 3.0.0

package/dist/components/Select/Select.mjs

@@ -0,0 +1,135 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { ChevronsUpDown, ChevronUpIcon, ChevronDownIcon, CheckIcon } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.mjs";
+const SelectRoot = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = forwardRef(({ validationStyleEnabled = false, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all",
+      "border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
+      "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
+      validationStyleEnabled && "valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUpDown, { className: "size-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDownIcon, {})
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-1 py-0.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, { className: "size-4" }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-red-300", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+const Select = SelectRoot;
+Select.Group = SelectGroup;
+Select.Value = SelectValue;
+Select.Trigger = SelectTrigger;
+Select.ScrollUpButton = SelectScrollUpButton;
+Select.ScrollDownButton = SelectScrollDownButton;
+Select.Content = SelectContent;
+Select.Label = SelectLabel;
+Select.Item = SelectItem;
+Select.Separator = SelectSeparator;
+export {
+  Select,
+  SelectContent,
+  SelectLabel,
+  SelectSeparator
+};
+//# sourceMappingURL=Select.mjs.map

package/dist/components/Select/Select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n  ChevronsUpDown,\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n} from 'lucide-react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  forwardRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = forwardRef<\n  ElementRef<typeof SelectPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n    validationStyleEnabled?: boolean;\n  }\n>(({ validationStyleEnabled = false, className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n      'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n      'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n      'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n      validationStyleEnabled &&\n        'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronsUpDown className=\"size-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = forwardRef<\n  ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-1',\n      className\n    )}\n    {...props}\n  >\n    <ChevronUpIcon />\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = forwardRef<\n  ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-1',\n      className\n    )}\n    {...props}\n  >\n    <ChevronDownIcon />\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName;\n\nexport const SelectContent = forwardRef<\n  ElementRef<typeof SelectPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md',\n        position === 'popper' &&\n          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          'p-1',\n          position === 'popper' &&\n            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport const SelectLabel = forwardRef<\n  ElementRef<typeof SelectPrimitive.Label>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n    {...props}\n  />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = forwardRef<\n  ElementRef<typeof SelectPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      'focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"size-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nexport const SelectSeparator = forwardRef<\n  ElementRef<typeof SelectPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\ntype SelectType = typeof SelectRoot & {\n  Group: typeof SelectGroup;\n  Value: typeof SelectValue;\n  Trigger: typeof SelectTrigger;\n  ScrollUpButton: typeof SelectScrollUpButton;\n  ScrollDownButton: typeof SelectScrollDownButton;\n  Content: typeof SelectContent;\n  Label: typeof SelectLabel;\n  Item: typeof SelectItem;\n  Separator: typeof SelectSeparator;\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Select>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Theme\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"light\">Light</Select.Item>\n *     <Select.Item value=\"dark\">Dark</Select.Item>\n *     <Select.Item value=\"system\">System</Select.Item>\n *   </Select.Content>\n * </Select>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/dist/components/Select/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_Select_Multiselect = require("./Multiselect.cjs");
+const components_Select_Select = require("./Select.cjs");
+exports.MultiSelect = components_Select_Multiselect.MultiSelect;
+exports.Select = components_Select_Select.Select;
+exports.SelectContent = components_Select_Select.SelectContent;
+exports.SelectLabel = components_Select_Select.SelectLabel;
+exports.SelectSeparator = components_Select_Select.SelectSeparator;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Select/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/components/Select/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Multiselect';
+export * from './Select';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}

package/dist/components/Select/index.mjs

@@ -0,0 +1,10 @@
+import { MultiSelect } from "./Multiselect.mjs";
+import { Select, SelectContent, SelectLabel, SelectSeparator } from "./Select.mjs";
+export {
+  MultiSelect,
+  Select,
+  SelectContent,
+  SelectLabel,
+  SelectSeparator
+};
+//# sourceMappingURL=index.mjs.map

package/dist/components/Select/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/SwitchSelector/index.cjs

@@ -0,0 +1,143 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const require$$0 = require("react");
+const classVarianceAuthority = require("class-variance-authority");
+require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
+require("../../hooks/useAsync/useAsyncStateStore.cjs");
+require("../Auth/AuthProvider/index.cjs");
+require("../../libs/intlayer-api/auth.cjs");
+require("../../libs/intlayer-api/dictionary.cjs");
+require("../../libs/intlayer-api/organization.cjs");
+require("../../libs/intlayer-api/project.cjs");
+require("../../libs/intlayer-api/user.cjs");
+const hooks_useItemSelector = require("../../hooks/useItemSelector.cjs");
+require("@intlayer/dictionaries-entry");
+require("deepmerge");
+const utils_cn = require("../../utils/cn.cjs");
+const defaultChoices = [
+  { content: "Off", value: false },
+  { content: "On", value: true }
+];
+const switchSelectorVariant = classVarianceAuthority.cva(
+  "flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]",
+  {
+    variants: {
+      color: {
+        primary: "border-primary text-primary dark:border-primary-dark dark:text-primary-dark",
+        secondary: "border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark",
+        destructive: "border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark",
+        neutral: "border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark",
+        light: "border-white text-white",
+        dark: "border-neutral-800 text-neutral-800",
+        text: "border-text text-text dark:border-text-dark dark:text-text-dark"
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  }
+);
+const choiceVariant = classVarianceAuthority.cva(
+  "z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text",
+  {
+    variants: {
+      size: {
+        sm: "py-1 px-2 text-xs",
+        md: "p-2 text-sm",
+        lg: "p-4 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const indicatorVariant = classVarianceAuthority.cva(
+  "absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
+  {
+    variants: {
+      color: {
+        primary: "bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark",
+        secondary: "bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark",
+        destructive: "bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark",
+        neutral: "bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text",
+        light: "bg-white aria-selected:text-black",
+        dark: "bg-neutral-800 aria-selected:text-white",
+        text: "bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text"
+      }
+    }
+  }
+);
+const SwitchSelector = ({
+  choices = defaultChoices,
+  value,
+  defaultValue,
+  onChange,
+  color = "primary",
+  size = "md",
+  className
+}) => {
+  const [valueState, setValue] = require$$0.useState(
+    value ?? defaultValue ?? choices[0].value
+  );
+  const optionsRefs = require$$0.useRef([]);
+  const indicatorRef = require$$0.useRef(null);
+  const { choiceIndicatorPosition } = hooks_useItemSelector.useItemSelector(optionsRefs);
+  const handleChange = (newValue) => {
+    setValue(newValue);
+    onChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: switchSelectorVariant({
+        color,
+        className
+      }),
+      role: "tablist",
+      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "relative flex size-full flex-row items-center justify-center", children: [
+        choices.map((choice, index) => {
+          const { content, value: value2, ...buttonProps } = choice;
+          const isKeyOfKey = typeof value2 === "string" || typeof value2 === "number";
+          const isSelected = value2 === valueState;
+          return /* @__PURE__ */ require$$0.createElement(
+            "button",
+            {
+              ...buttonProps,
+              className: utils_cn.cn(
+                choiceVariant({
+                  size
+                })
+              ),
+              key: isKeyOfKey ? value2 : index,
+              role: "tab",
+              onClick: () => handleChange(value2),
+              "aria-selected": isSelected,
+              disabled: isSelected,
+              ref: (el) => {
+                optionsRefs.current[index] = el;
+              }
+            },
+            content
+          );
+        }),
+        choiceIndicatorPosition && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: utils_cn.cn(
+              indicatorVariant({
+                color
+              })
+            ),
+            style: choiceIndicatorPosition,
+            ref: indicatorRef
+          }
+        )
+      ] })
+    }
+  );
+};
+exports.SwitchSelector = SwitchSelector;
+//# sourceMappingURL=index.cjs.map

package/dist/components/SwitchSelector/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n        secondary:\n          'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n        destructive:\n          'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n        neutral:\n          'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst choiceVariant = cva(\n  'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n  {\n    variants: {\n      size: {\n        sm: 'py-1 px-2 text-xs',\n        md: 'p-2 text-sm',\n        lg: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n        secondary:\n          'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n        destructive:\n          'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n        neutral:\n          'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n        light: 'bg-white aria-selected:text-black',\n        dark: 'bg-neutral-800 aria-selected:text-white',\n        text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = 'primary',\n  size = 'md',\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\n          );\n        })}\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["cva","useState","useRef","useItemSelector","jsx","jsxs","value","createElement","cn"],"mappings":"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"}

package/dist/components/SwitchSelector/index.d.ts

@@ -0,0 +1,41 @@
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode, HTMLAttributes } from 'react';
+
+export type SwitchSelectorChoice<T = boolean> = {
+    content: ReactNode;
+    value: T;
+} & HTMLAttributes<HTMLButtonElement>;
+export type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];
+type SwitchSelectorProps<T = boolean> = {
+    choices?: SwitchSelectorChoices<T>;
+    value?: T;
+    defaultValue?: T;
+    onChange?: (choice: T) => void;
+    className?: string;
+} & VariantProps<typeof switchSelectorVariant> & VariantProps<typeof choiceVariant>;
+declare const switchSelectorVariant: (props?: ({
+    color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const choiceVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ *
+ * Component that allows the user to select one of the provided choices.
+ *
+ * Example:
+ * ```jsx
+ * <SwitchSelector
+ *   choices={[
+ *     { content: 'Option 1', value: 'option1' },
+ *     { content: 'Option 2', value: 'option2' },
+ *     { content: 'Option 3', value: 'option3' },
+ *   ]}
+ *   value="option1"
+ *   onChange={(choice) => console.log(choice)}
+ * />
+ * ```
+ */
+export declare const SwitchSelector: <T>({ choices, value, defaultValue, onChange, color, size, className, }: SwitchSelectorProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SwitchSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAU,KAAK,SAAS,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AACtC,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;AAOjE,KAAK,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI;IACtC,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC5C,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,QAAA,MAAM,qBAAqB;;8EAsB1B,CAAC;AAEF,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAuBF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,uEAQ7B,mBAAmB,CAAC,CAAC,CAAC,4CAiExB,CAAC"}

package/dist/components/SwitchSelector/index.mjs

@@ -0,0 +1,143 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { useState, useRef, createElement } from "react";
+import { cva } from "class-variance-authority";
+import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
+import "../../hooks/useAsync/useAsyncStateStore.mjs";
+import "../Auth/AuthProvider/index.mjs";
+import "../../libs/intlayer-api/auth.mjs";
+import "../../libs/intlayer-api/dictionary.mjs";
+import "../../libs/intlayer-api/organization.mjs";
+import "../../libs/intlayer-api/project.mjs";
+import "../../libs/intlayer-api/user.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
+import "@intlayer/dictionaries-entry";
+import "deepmerge";
+import { cn } from "../../utils/cn.mjs";
+const defaultChoices = [
+  { content: "Off", value: false },
+  { content: "On", value: true }
+];
+const switchSelectorVariant = cva(
+  "flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]",
+  {
+    variants: {
+      color: {
+        primary: "border-primary text-primary dark:border-primary-dark dark:text-primary-dark",
+        secondary: "border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark",
+        destructive: "border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark",
+        neutral: "border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark",
+        light: "border-white text-white",
+        dark: "border-neutral-800 text-neutral-800",
+        text: "border-text text-text dark:border-text-dark dark:text-text-dark"
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  }
+);
+const choiceVariant = cva(
+  "z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text",
+  {
+    variants: {
+      size: {
+        sm: "py-1 px-2 text-xs",
+        md: "p-2 text-sm",
+        lg: "p-4 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const indicatorVariant = cva(
+  "absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
+  {
+    variants: {
+      color: {
+        primary: "bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark",
+        secondary: "bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark",
+        destructive: "bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark",
+        neutral: "bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text",
+        light: "bg-white aria-selected:text-black",
+        dark: "bg-neutral-800 aria-selected:text-white",
+        text: "bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text"
+      }
+    }
+  }
+);
+const SwitchSelector = ({
+  choices = defaultChoices,
+  value,
+  defaultValue,
+  onChange,
+  color = "primary",
+  size = "md",
+  className
+}) => {
+  const [valueState, setValue] = useState(
+    value ?? defaultValue ?? choices[0].value
+  );
+  const optionsRefs = useRef([]);
+  const indicatorRef = useRef(null);
+  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);
+  const handleChange = (newValue) => {
+    setValue(newValue);
+    onChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: switchSelectorVariant({
+        color,
+        className
+      }),
+      role: "tablist",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex size-full flex-row items-center justify-center", children: [
+        choices.map((choice, index) => {
+          const { content, value: value2, ...buttonProps } = choice;
+          const isKeyOfKey = typeof value2 === "string" || typeof value2 === "number";
+          const isSelected = value2 === valueState;
+          return /* @__PURE__ */ createElement(
+            "button",
+            {
+              ...buttonProps,
+              className: cn(
+                choiceVariant({
+                  size
+                })
+              ),
+              key: isKeyOfKey ? value2 : index,
+              role: "tab",
+              onClick: () => handleChange(value2),
+              "aria-selected": isSelected,
+              disabled: isSelected,
+              ref: (el) => {
+                optionsRefs.current[index] = el;
+              }
+            },
+            content
+          );
+        }),
+        choiceIndicatorPosition && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: cn(
+              indicatorVariant({
+                color
+              })
+            ),
+            style: choiceIndicatorPosition,
+            ref: indicatorRef
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  SwitchSelector
+};
+//# sourceMappingURL=index.mjs.map

package/dist/components/SwitchSelector/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n        secondary:\n          'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n        destructive:\n          'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n        neutral:\n          'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst choiceVariant = cva(\n  'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n  {\n    variants: {\n      size: {\n        sm: 'py-1 px-2 text-xs',\n        md: 'p-2 text-sm',\n        lg: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n        secondary:\n          'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n        destructive:\n          'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n        neutral:\n          'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n        light: 'bg-white aria-selected:text-black',\n        dark: 'bg-neutral-800 aria-selected:text-white',\n        text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = 'primary',\n  size = 'md',\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\n          );\n        })}\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["jsx","jsxs","value"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,iBAAiD;AAAA,EACrD,EAAE,SAAS,OAAO,OAAO,MAAM;AAAA,EAC/B,EAAE,SAAS,MAAM,OAAO,KAAK;AAC/B;AAWA,MAAM,wBAAwB;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAmBO,MAAM,iBAAiB,CAAK;AAAA,EACjC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AACF,MAA8B;AACtB,QAAA,CAAC,YAAY,QAAQ,IAAI;AAAA,IAC7B,SAAS,gBAAgB,QAAQ,CAAC,EAAE;AAAA,EAAA;AAEhC,QAAA,cAAc,OAA4B,CAAA,CAAE;AAC5C,QAAA,eAAe,OAA8B,IAAI;AACvD,QAAM,EAAE,wBAAA,IAA4B,gBAAgB,WAAW;AAEzD,QAAA,eAAe,CAAC,aAAgB;AACpC,aAAS,QAAQ;AACjB,eAAW,QAAQ;AAAA,EAAA;AAInB,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,sBAAsB;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,MAAK;AAAA,MAEL,UAAAC,kCAAA,KAAC,OAAI,EAAA,WAAU,gEACZ,UAAA;AAAA,QAAQ,QAAA,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,EAAE,SAAS,OAAAC,QAAO,GAAG,YAAgB,IAAA;AAE3C,gBAAM,aACJ,OAAOA,WAAU,YAAY,OAAOA,WAAU;AAEhD,gBAAM,aAAaA,WAAU;AAG3B,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,cAAc;AAAA,kBACZ;AAAA,gBAAA,CACD;AAAA,cACH;AAAA,cACA,KAAK,aAAaA,SAAQ;AAAA,cAC1B,MAAK;AAAA,cACL,SAAS,MAAM,aAAaA,MAAK;AAAA,cACjC,iBAAe;AAAA,cACf,UAAU;AAAA,cACV,KAAK,CAAC,OAAO;AACC,4BAAA,QAAQ,KAAK,IAAI;AAAA,cAC/B;AAAA,YAAA;AAAA,YAEC;AAAA,UAAA;AAAA,QACH,CAEH;AAAA,QACA,2BACCF,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YACH;AAAA,YACA,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,QACP;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}