@raystack/apsara 0.50.0 → 0.51.0

package/dist/components/callout/callout.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { InfoCircledIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
 import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
-import * as React from 'react';
+import { forwardRef } from 'react';
 import styles from './callout.module.css.js';
 
 const callout = cva(styles.callout, {
@@ -13,23 +14,23 @@ const callout = cva(styles.callout, {
             gradient: styles['callout-gradient'],
             accent: styles['callout-accent'],
             attention: styles['callout-attention'],
-            normal: styles['callout-normal'],
+            normal: styles['callout-normal']
         },
         outline: {
-            true: styles['callout-outline'],
+            true: styles['callout-outline']
         },
         highContrast: {
-            true: styles['callout-high-contrast'],
-        },
+            true: styles['callout-high-contrast']
+        }
     },
     defaultVariants: {
-        type: 'grey',
-    },
+        type: 'grey'
+    }
 });
-const Callout = React.forwardRef(({ className, type = 'grey', outline, highContrast, children, action, dismissible, onDismiss, width, style, icon, ...props }, ref) => {
+const Callout = forwardRef(({ className, type = 'grey', outline, highContrast, children, action, dismissible, onDismiss, width, style, icon = jsx(InfoCircledIcon, {}), ...props }, ref) => {
     const combinedStyle = {
         ...style,
-        ...(width && { width: typeof width === 'number' ? `${width}px` : width }),
+        ...(width && { width: typeof width === 'number' ? `${width}px` : width })
     };
     const getRole = () => {
         switch (type) {
@@ -41,7 +42,7 @@ const Callout = React.forwardRef(({ className, type = 'grey', outline, highContr
                 return 'status';
         }
     };
-    return (jsx("div", { ref: ref, className: `${callout({ type, outline, highContrast })} ${className || ''}`, style: combinedStyle, role: getRole(), "aria-live": type === 'alert' ? 'assertive' : 'polite', ...props, children: jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.messageContainer, children: [icon !== undefined ? (jsx("div", { className: styles.icon, "aria-hidden": "true", children: icon })) : (jsx(InfoCircledIcon, { className: styles.icon, "aria-hidden": "true" })), jsx("div", { className: styles.message, children: children })] }), jsxs("div", { className: styles.actionsContainer, children: [action && (jsx("div", { className: styles.action, children: action })), dismissible && (jsx("button", { className: styles.dismiss, onClick: onDismiss, "aria-label": "Dismiss message", type: "button", children: jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "presentation", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z", fill: "currentColor" }) }) }))] })] }) }));
+    return (jsx("div", { ref: ref, className: `${callout({ type, outline, highContrast })} ${className || ''}`, style: combinedStyle, role: getRole(), "aria-live": type === 'alert' ? 'assertive' : 'polite', ...props, children: jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.messageContainer, children: [icon && (jsx("div", { className: styles.icon, "aria-hidden": 'true', children: icon })), jsx("div", { className: styles.message, children: children })] }), jsxs("div", { className: styles.actionsContainer, children: [action && jsx("div", { className: styles.action, children: action }), dismissible && (jsx("button", { className: styles.dismiss, onClick: onDismiss, "aria-label": 'Dismiss message', type: 'button', children: jsx("svg", { width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', role: 'presentation', children: jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z', fill: 'currentColor' }) }) }))] })] }) }));
 });
 Callout.displayName = 'Callout';
 

package/dist/components/callout/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sources":["../../../components/callout/callout.tsx"],"sourcesContent":["import { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentPropsWithoutRef } from 'react';\nimport * as React from 'react';\n\nimport styles from './callout.module.css';\n\nconst callout = cva(styles.callout, {\n  variants: {\n    type: {\n      grey: styles['callout-grey'],\n      success: styles['callout-success'],\n      alert: styles['callout-alert'],\n      gradient: styles['callout-gradient'],\n      accent: styles['callout-accent'],\n      attention: styles['callout-attention'],\n      normal: styles['callout-normal'],\n    },\n    outline: {\n      true: styles['callout-outline'],\n    },\n    highContrast: {\n      true: styles['callout-high-contrast'],\n    },\n  },\n  defaultVariants: {\n    type: 'grey',\n  },\n});\n\nexport interface CalloutProps extends ComponentPropsWithoutRef<'div'>, VariantProps<typeof callout> {\n  children: React.ReactNode;\n  action?: React.ReactNode;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  width?: string | number;\n  style?: React.CSSProperties;\n  icon?: React.ReactNode;\n}\n\nexport const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(\n  ({ \n    className,\n    type = 'grey',\n    outline,\n    highContrast,\n    children,\n    action,\n    dismissible,\n    onDismiss,\n    width,\n    style,\n    icon,\n    ...props\n  }, ref) => {\n    const combinedStyle = {\n      ...style,\n      ...(width && { width: typeof width === 'number' ? `${width}px` : width }),\n    };\n\n    const getRole = () => {\n      switch (type) {\n        case 'alert':\n          return 'alert';\n        case 'success':\n          return 'status';\n        default:\n          return 'status';\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={`${callout({ type, outline, highContrast })} ${className || ''}`}\n        style={combinedStyle}\n        role={getRole()}\n        aria-live={type === 'alert' ? 'assertive' : 'polite'}\n        {...props}\n      >\n        <div className={styles.container}>\n          <div className={styles.messageContainer}>\n            {icon !== undefined ? (\n              <div className={styles.icon} aria-hidden=\"true\">\n                {icon}\n              </div>\n            ) : (\n              <InfoCircledIcon \n                className={styles.icon} \n                aria-hidden=\"true\"\n              />\n            )}\n            <div className={styles.message}>{children}</div>\n          </div>\n          \n          <div className={styles.actionsContainer}>\n            {action && (\n              <div className={styles.action}>\n                {action}\n              </div>\n            )}\n            {dismissible && (\n              <button \n                className={styles.dismiss} \n                onClick={onDismiss}\n                aria-label=\"Dismiss message\"\n                type=\"button\"\n              >\n                <svg \n                  width=\"12\" \n                  height=\"12\" \n                  viewBox=\"0 0 12 12\" \n                  fill=\"none\" \n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  aria-hidden=\"true\"\n                  role=\"presentation\"\n                >\n                  <path \n                    fillRule=\"evenodd\" \n                    clipRule=\"evenodd\" \n                    d=\"M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z\" \n                    fill=\"currentColor\"\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nCallout.displayName = 'Callout';"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"callout.js","sources":["../../../components/callout/callout.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport {\n  CSSProperties,\n  type HTMLAttributes,\n  ReactNode,\n  forwardRef\n} from 'react';\n\nimport styles from './callout.module.css';\n\nconst callout = cva(styles.callout, {\n  variants: {\n    type: {\n      grey: styles['callout-grey'],\n      success: styles['callout-success'],\n      alert: styles['callout-alert'],\n      gradient: styles['callout-gradient'],\n      accent: styles['callout-accent'],\n      attention: styles['callout-attention'],\n      normal: styles['callout-normal']\n    },\n    outline: {\n      true: styles['callout-outline']\n    },\n    highContrast: {\n      true: styles['callout-high-contrast']\n    }\n  },\n  defaultVariants: {\n    type: 'grey'\n  }\n});\n\nexport interface CalloutProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof callout> {\n  children: ReactNode;\n  action?: ReactNode;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  width?: string | number;\n  style?: CSSProperties;\n  icon?: ReactNode;\n}\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>(\n  (\n    {\n      className,\n      type = 'grey',\n      outline,\n      highContrast,\n      children,\n      action,\n      dismissible,\n      onDismiss,\n      width,\n      style,\n      icon = <InfoCircledIcon />,\n      ...props\n    },\n    ref\n  ) => {\n    const combinedStyle = {\n      ...style,\n      ...(width && { width: typeof width === 'number' ? `${width}px` : width })\n    };\n\n    const getRole = () => {\n      switch (type) {\n        case 'alert':\n          return 'alert';\n        case 'success':\n          return 'status';\n        default:\n          return 'status';\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={`${callout({ type, outline, highContrast })} ${className || ''}`}\n        style={combinedStyle}\n        role={getRole()}\n        aria-live={type === 'alert' ? 'assertive' : 'polite'}\n        {...props}\n      >\n        <div className={styles.container}>\n          <div className={styles.messageContainer}>\n            {icon && (\n              <div className={styles.icon} aria-hidden='true'>\n                {icon}\n              </div>\n            )}\n            <div className={styles.message}>{children}</div>\n          </div>\n\n          <div className={styles.actionsContainer}>\n            {action && <div className={styles.action}>{action}</div>}\n            {dismissible && (\n              <button\n                className={styles.dismiss}\n                onClick={onDismiss}\n                aria-label='Dismiss message'\n                type='button'\n              >\n                <svg\n                  width='12'\n                  height='12'\n                  viewBox='0 0 12 12'\n                  fill='none'\n                  xmlns='http://www.w3.org/2000/svg'\n                  aria-hidden='true'\n                  role='presentation'\n                >\n                  <path\n                    fillRule='evenodd'\n                    clipRule='evenodd'\n                    d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'\n                    fill='currentColor'\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nCallout.displayName = 'Callout';\n"],"names":[],"mappings":";;;;;;;AAaA;AACE;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAcY;AAkBT;AACE;;;;;AAME;AACE;AACF;AACE;AACF;AACE;;AAEN;AAEA;AAkDF;AAGF;;"}

package/dist/components/checkbox/checkbox.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/components/checkbox/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["import { VariantProps, cva, cx } from 'class-variance-authority';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst checkbox = cva(styles.checkbox);\n\ntype CheckboxVariants = VariantProps<typeof checkbox>;\ntype CheckedState = boolean | 'indeterminate';\n\nexport interface CheckboxProps\n  extends Omit<\n      ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n      keyof CheckboxVariants\n    >,\n    CheckboxVariants {\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  onCheckedChange?: (checked: CheckedState) => void;\n}\n\nexport const Checkbox = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    { className, disabled, checked, defaultChecked, onCheckedChange, ...props },\n    forwardedRef\n  ) => {\n    const isIndeterminate =\n      checked === 'indeterminate' || defaultChecked === 'indeterminate';\n\n    return (\n      <CheckboxPrimitive.Root\n        className={checkbox({\n          className: cx(className, {\n            [styles['checkbox-disabled']]: disabled,\n            [styles['checkbox-indeterminate']]: isIndeterminate\n          })\n        })}\n        checked={isIndeterminate || checked === true}\n        defaultChecked={defaultChecked === true}\n        onCheckedChange={value => {\n          if (onCheckedChange) {\n            // If it's currently indeterminate, next state will be unchecked\n            if (checked === 'indeterminate') {\n              onCheckedChange(false);\n            } else {\n              onCheckedChange(value);\n            }\n          }\n        }}\n        disabled={disabled}\n        ref={forwardedRef}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className={styles.indicator}>\n          {isIndeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["_jsx","styles","cva","forwardRef","CheckboxPrimitive.Root","cx","CheckboxPrimitive.Indicator"],"mappings":";;;;;;;;AAMA,MAAM,aAAa,GAAG,OACpBA,cACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAEC,uBAAM,CAAC,IAAI,EAAA,QAAA,EAEtBD,yBACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+WAA+W,EACjX,IAAI,EAAC,cAAc,EAAA,CACnB,EACE,CAAA,CACP,CAAC;AAEF,MAAM,iBAAiB,GAAG,OACxBA,cACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAEC,uBAAM,CAAC,IAAI,EAAA,QAAA,EAEtBD,yBACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yIAAyI,EAC3I,IAAI,EAAC,cAAc,EAAA,CACnB,EACE,CAAA,CACP,CAAC;AAEF,MAAM,QAAQ,GAAGE,WAAG,CAACD,uBAAM,CAAC,QAAQ,CAAC,CAAC;AAgBzB,MAAA,QAAQ,GAAGE,gBAAU,CAIhC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,KAAK,EAAE,EAC3E,YAAY,KACV;IACF,MAAM,eAAe,GACnB,OAAO,KAAK,eAAe,IAAI,cAAc,KAAK,eAAe,CAAC;IAEpE,QACEH,eAACI,cAAsB,EACrB,EAAA,SAAS,EAAE,QAAQ,CAAC;AAClB,YAAA,SAAS,EAAEC,UAAE,CAAC,SAAS,EAAE;AACvB,gBAAA,CAACJ,uBAAM,CAAC,mBAAmB,CAAC,GAAG,QAAQ;AACvC,gBAAA,CAACA,uBAAM,CAAC,wBAAwB,CAAC,GAAG,eAAe;aACpD,CAAC;AACH,SAAA,CAAC,EACF,OAAO,EAAE,eAAe,IAAI,OAAO,KAAK,IAAI,EAC5C,cAAc,EAAE,cAAc,KAAK,IAAI,EACvC,eAAe,EAAE,KAAK,IAAG;YACvB,IAAI,eAAe,EAAE;;AAEnB,gBAAA,IAAI,OAAO,KAAK,eAAe,EAAE;oBAC/B,eAAe,CAAC,KAAK,CAAC,CAAC;iBACxB;qBAAM;oBACL,eAAe,CAAC,KAAK,CAAC,CAAC;iBACxB;aACF;AACH,SAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,YAAY,EACb,GAAA,KAAK,YAETD,cAAC,CAAAM,uBAA2B,EAAA,EAAC,SAAS,EAAEL,uBAAM,CAAC,SAAS,YACrD,eAAe,GAAGD,eAAC,iBAAiB,EAAA,EAAA,CAAG,GAAGA,cAAC,CAAA,aAAa,KAAG,EAChC,CAAA,EAAA,CACP,EACzB;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"checkbox.cjs","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst checkbox = cva(styles.checkbox);\n\ntype CheckboxVariants = VariantProps<typeof checkbox>;\ntype CheckedState = boolean | 'indeterminate';\n\nexport interface CheckboxProps\n  extends Omit<\n      ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n      keyof CheckboxVariants\n    >,\n    CheckboxVariants {\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  onCheckedChange?: (checked: CheckedState) => void;\n}\n\nexport const Checkbox = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    { className, disabled, checked, defaultChecked, onCheckedChange, ...props },\n    forwardedRef\n  ) => {\n    const isIndeterminate =\n      checked === 'indeterminate' || defaultChecked === 'indeterminate';\n\n    return (\n      <CheckboxPrimitive.Root\n        className={checkbox({\n          className: cx(className, {\n            [styles['checkbox-disabled']]: disabled,\n            [styles['checkbox-indeterminate']]: isIndeterminate\n          })\n        })}\n        checked={isIndeterminate || checked === true}\n        defaultChecked={defaultChecked === true}\n        onCheckedChange={value => {\n          if (onCheckedChange) {\n            // If it's currently indeterminate, next state will be unchecked\n            if (checked === 'indeterminate') {\n              onCheckedChange(false);\n            } else {\n              onCheckedChange(value);\n            }\n          }\n        }}\n        disabled={disabled}\n        ref={forwardedRef}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className={styles.indicator}>\n          {isIndeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":[],"mappings":";;;;;;;;;AAQA;AAkBA;AAkBA;AAgBa;;;AAcH;AACE;AACA;;AAEH;;;AAMG;;;;;;;AAMJ;AAUN;AAGF;;"}

package/dist/components/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAA0B,MAAM,OAAO,CAAC;AAwCzE,QAAA,MAAM,QAAQ,oFAAuB,CAAC;AAEtC,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AACtD,KAAK,YAAY,GAAG,OAAO,GAAG,eAAe,CAAC;AAE9C,MAAM,WAAW,aACf,SAAQ,IAAI,CACR,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACvD,MAAM,gBAAgB,CACvB,EACD,gBAAgB;IAClB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ,6GAyCpB,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAA0B,MAAM,OAAO,CAAC;AAwCzE,QAAA,MAAM,QAAQ,oFAAuB,CAAC;AAEtC,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AACtD,KAAK,YAAY,GAAG,OAAO,GAAG,eAAe,CAAC;AAE9C,MAAM,WAAW,aACf,SAAQ,IAAI,CACR,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACvD,MAAM,gBAAgB,CACvB,EACD,gBAAgB;IAClB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ,6GAyCpB,CAAC"}

package/dist/components/checkbox/checkbox.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { cx, cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import { forwardRef } from 'react';

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["import { VariantProps, cva, cx } from 'class-variance-authority';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst checkbox = cva(styles.checkbox);\n\ntype CheckboxVariants = VariantProps<typeof checkbox>;\ntype CheckedState = boolean | 'indeterminate';\n\nexport interface CheckboxProps\n  extends Omit<\n      ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n      keyof CheckboxVariants\n    >,\n    CheckboxVariants {\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  onCheckedChange?: (checked: CheckedState) => void;\n}\n\nexport const Checkbox = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    { className, disabled, checked, defaultChecked, onCheckedChange, ...props },\n    forwardedRef\n  ) => {\n    const isIndeterminate =\n      checked === 'indeterminate' || defaultChecked === 'indeterminate';\n\n    return (\n      <CheckboxPrimitive.Root\n        className={checkbox({\n          className: cx(className, {\n            [styles['checkbox-disabled']]: disabled,\n            [styles['checkbox-indeterminate']]: isIndeterminate\n          })\n        })}\n        checked={isIndeterminate || checked === true}\n        defaultChecked={defaultChecked === true}\n        onCheckedChange={value => {\n          if (onCheckedChange) {\n            // If it's currently indeterminate, next state will be unchecked\n            if (checked === 'indeterminate') {\n              onCheckedChange(false);\n            } else {\n              onCheckedChange(value);\n            }\n          }\n        }}\n        disabled={disabled}\n        ref={forwardedRef}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className={styles.indicator}>\n          {isIndeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["_jsx","CheckboxPrimitive.Root","CheckboxPrimitive.Indicator"],"mappings":";;;;;;AAMA,MAAM,aAAa,GAAG,OACpBA,GACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EAEtBA,cACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+WAA+W,EACjX,IAAI,EAAC,cAAc,EAAA,CACnB,EACE,CAAA,CACP,CAAC;AAEF,MAAM,iBAAiB,GAAG,OACxBA,GACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EAEtBA,cACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yIAAyI,EAC3I,IAAI,EAAC,cAAc,EAAA,CACnB,EACE,CAAA,CACP,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAgBzB,MAAA,QAAQ,GAAG,UAAU,CAIhC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,KAAK,EAAE,EAC3E,YAAY,KACV;IACF,MAAM,eAAe,GACnB,OAAO,KAAK,eAAe,IAAI,cAAc,KAAK,eAAe,CAAC;IAEpE,QACEA,IAACC,UAAsB,EACrB,EAAA,SAAS,EAAE,QAAQ,CAAC;AAClB,YAAA,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE;AACvB,gBAAA,CAAC,MAAM,CAAC,mBAAmB,CAAC,GAAG,QAAQ;AACvC,gBAAA,CAAC,MAAM,CAAC,wBAAwB,CAAC,GAAG,eAAe;aACpD,CAAC;AACH,SAAA,CAAC,EACF,OAAO,EAAE,eAAe,IAAI,OAAO,KAAK,IAAI,EAC5C,cAAc,EAAE,cAAc,KAAK,IAAI,EACvC,eAAe,EAAE,KAAK,IAAG;YACvB,IAAI,eAAe,EAAE;;AAEnB,gBAAA,IAAI,OAAO,KAAK,eAAe,EAAE;oBAC/B,eAAe,CAAC,KAAK,CAAC,CAAC;iBACxB;qBAAM;oBACL,eAAe,CAAC,KAAK,CAAC,CAAC;iBACxB;aACF;AACH,SAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,YAAY,EACb,GAAA,KAAK,YAETD,GAAC,CAAAE,iBAA2B,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,YACrD,eAAe,GAAGF,IAAC,iBAAiB,EAAA,EAAA,CAAG,GAAGA,GAAC,CAAA,aAAa,KAAG,EAChC,CAAA,EAAA,CACP,EACzB;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"checkbox.js","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst checkbox = cva(styles.checkbox);\n\ntype CheckboxVariants = VariantProps<typeof checkbox>;\ntype CheckedState = boolean | 'indeterminate';\n\nexport interface CheckboxProps\n  extends Omit<\n      ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n      keyof CheckboxVariants\n    >,\n    CheckboxVariants {\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  onCheckedChange?: (checked: CheckedState) => void;\n}\n\nexport const Checkbox = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    { className, disabled, checked, defaultChecked, onCheckedChange, ...props },\n    forwardedRef\n  ) => {\n    const isIndeterminate =\n      checked === 'indeterminate' || defaultChecked === 'indeterminate';\n\n    return (\n      <CheckboxPrimitive.Root\n        className={checkbox({\n          className: cx(className, {\n            [styles['checkbox-disabled']]: disabled,\n            [styles['checkbox-indeterminate']]: isIndeterminate\n          })\n        })}\n        checked={isIndeterminate || checked === true}\n        defaultChecked={defaultChecked === true}\n        onCheckedChange={value => {\n          if (onCheckedChange) {\n            // If it's currently indeterminate, next state will be unchecked\n            if (checked === 'indeterminate') {\n              onCheckedChange(false);\n            } else {\n              onCheckedChange(value);\n            }\n          }\n        }}\n        disabled={disabled}\n        ref={forwardedRef}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className={styles.indicator}>\n          {isIndeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":[],"mappings":";;;;;;;AAQA;AAkBA;AAkBA;AAgBa;;;AAcH;AACE;AACA;;AAEH;;;AAMG;;;;;;;AAMJ;AAUN;AAGF;;"}

package/dist/components/chip/chip.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -7,32 +8,32 @@ var chip_module = require('./chip.module.css.cjs');
 const chip = index.cva(chip_module.default.chip, {
     variants: {
         variant: {
-            outline: chip_module.default["chip-variant-outline"],
-            filled: chip_module.default["chip-variant-filled"],
+            outline: chip_module.default['chip-variant-outline'],
+            filled: chip_module.default['chip-variant-filled']
         },
         size: {
-            large: chip_module.default["chip-size-large"],
-            small: chip_module.default["chip-size-small"],
+            large: chip_module.default['chip-size-large'],
+            small: chip_module.default['chip-size-small']
         },
         color: {
-            neutral: chip_module.default["chip-color-neutral"],
-            accent: chip_module.default["chip-color-accent"],
-        },
+            neutral: chip_module.default['chip-color-neutral'],
+            accent: chip_module.default['chip-color-accent']
+        }
     },
     defaultVariants: {
-        variant: "outline",
-        size: "small",
-        color: "neutral",
-    },
+        variant: 'outline',
+        size: 'small',
+        color: 'neutral'
+    }
 });
-const Chip = ({ variant, size, color, trailingIcon, leadingIcon, isDismissible, children, className, onDismiss, onClick, role = "status", ariaLabel, "data-state": dataState, }) => {
+const Chip = ({ variant, size, color, trailingIcon, leadingIcon, isDismissible, children, className, onDismiss, onClick, role = 'status', ariaLabel, 'data-state': dataState }) => {
     const handleDismiss = (e) => {
         e.stopPropagation();
         onDismiss?.();
     };
-    return (jsxRuntime.jsxs("span", { className: chip({ variant, size, color, className }), role: role, "aria-label": ariaLabel || (typeof children === "string" ? children : undefined), onClick: onClick, "data-state": dataState, children: [leadingIcon && (jsxRuntime.jsx("span", { className: chip_module.default["leading-icon"], "aria-hidden": "true", role: "presentation", children: leadingIcon })), children, isDismissible ? (jsxRuntime.jsx("button", { onClick: handleDismiss, className: chip_module.default["dismiss-button"], "aria-label": `Remove ${typeof children === "string" ? children : "item"}`, type: "button", children: jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "presentation", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z", fill: "currentColor" }) }) })) : trailingIcon ? (jsxRuntime.jsx("span", { className: chip_module.default["trailing-icon"], "aria-hidden": "true", role: "presentation", children: trailingIcon })) : null] }));
+    return (jsxRuntime.jsxs("span", { className: chip({ variant, size, color, className }), role: role, "aria-label": ariaLabel || (typeof children === 'string' ? children : undefined), onClick: onClick, "data-state": dataState, children: [leadingIcon && (jsxRuntime.jsx("span", { className: chip_module.default['leading-icon'], "aria-hidden": 'true', role: 'presentation', children: leadingIcon })), children, isDismissible ? (jsxRuntime.jsx("button", { onClick: handleDismiss, className: chip_module.default['dismiss-button'], "aria-label": `Remove ${typeof children === 'string' ? children : 'item'}`, type: 'button', children: jsxRuntime.jsx("svg", { width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', role: 'presentation', children: jsxRuntime.jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z', fill: 'currentColor' }) }) })) : trailingIcon ? (jsxRuntime.jsx("span", { className: chip_module.default['trailing-icon'], "aria-hidden": 'true', role: 'presentation', children: trailingIcon })) : null] }));
 };
-Chip.displayName = "Chip";
+Chip.displayName = 'Chip';
 
 exports.Chip = Chip;
 //# sourceMappingURL=chip.cjs.map

package/dist/components/chip/chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chip.cjs","sources":["../../../components/chip/chip.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { ReactNode } from \"react\";\n\nimport styles from \"./chip.module.css\";\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      outline: styles[\"chip-variant-outline\"],\n      filled: styles[\"chip-variant-filled\"],\n    },\n    size: {\n      large: styles[\"chip-size-large\"],\n      small: styles[\"chip-size-small\"],\n    },\n    color: {\n      neutral: styles[\"chip-color-neutral\"],\n      accent: styles[\"chip-color-accent\"],\n    },\n  },\n  defaultVariants: {\n    variant: \"outline\",\n    size: \"small\",\n    color: \"neutral\",\n  },\n});\n\ntype ChipProps = VariantProps<typeof chip> & {\n  trailingIcon?: ReactNode;\n  leadingIcon?: ReactNode;\n  isDismissible?: boolean;\n  children: ReactNode;\n  className?: string;\n  onDismiss?: () => void;\n  onClick?: () => void;\n  role?: string;\n  ariaLabel?: string;\n  \"data-state\"?: string;\n};\n\nexport const Chip = ({\n  variant,\n  size,\n  color,\n  trailingIcon,\n  leadingIcon,\n  isDismissible,\n  children,\n  className,\n  onDismiss,\n  onClick,\n  role = \"status\",\n  ariaLabel,\n  \"data-state\": dataState,\n}: ChipProps) => {\n  const handleDismiss = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onDismiss?.();\n  };\n\n  return (\n    <span\n      className={chip({ variant, size, color, className })}\n      role={role}\n      aria-label={\n        ariaLabel || (typeof children === \"string\" ? children : undefined)\n      }\n      onClick={onClick}\n      data-state={dataState}\n    >\n      {leadingIcon && (\n        <span\n          className={styles[\"leading-icon\"]}\n          aria-hidden=\"true\"\n          role=\"presentation\"\n        >\n          {leadingIcon}\n        </span>\n      )}\n      {children}\n      {isDismissible ? (\n        <button\n          onClick={handleDismiss}\n          className={styles[\"dismiss-button\"]}\n          aria-label={`Remove ${\n            typeof children === \"string\" ? children : \"item\"\n          }`}\n          type=\"button\"\n        >\n          <svg\n            width=\"12\"\n            height=\"12\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n            role=\"presentation\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n      ) : trailingIcon ? (\n        <span\n          className={styles[\"trailing-icon\"]}\n          aria-hidden=\"true\"\n          role=\"presentation\"\n        >\n          {trailingIcon}\n        </span>\n      ) : null}\n    </span>\n  );\n};\n\nChip.displayName = \"Chip\";\n"],"names":["cva","styles","_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,IAAI,GAAGA,SAAG,CAACC,mBAAM,CAAC,IAAI,EAAE;AAC5B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAEA,mBAAM,CAAC,sBAAsB,CAAC;AACvC,YAAA,MAAM,EAAEA,mBAAM,CAAC,qBAAqB,CAAC;AACtC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,mBAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,KAAK,EAAEA,mBAAM,CAAC,iBAAiB,CAAC;AACjC,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAEA,mBAAM,CAAC,oBAAoB,CAAC;AACrC,YAAA,MAAM,EAAEA,mBAAM,CAAC,mBAAmB,CAAC;AACpC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;AAeU,MAAA,IAAI,GAAG,CAAC,EACnB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,WAAW,EACX,aAAa,EACb,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,YAAY,EAAE,SAAS,GACb,KAAI;AACd,IAAA,MAAM,aAAa,GAAG,CAAC,CAAmB,KAAI;QAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,SAAS,IAAI,CAAC;AAChB,KAAC,CAAC;AAEF,IAAA,QACEC,eACE,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACpD,IAAI,EAAE,IAAI,EAAA,YAAA,EAER,SAAS,KAAK,OAAO,QAAQ,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,EAEpE,OAAO,EAAE,OAAO,gBACJ,SAAS,EAAA,QAAA,EAAA,CAEpB,WAAW,KACVC,cACE,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEF,mBAAM,CAAC,cAAc,CAAC,EAAA,aAAA,EACrB,MAAM,EAClB,IAAI,EAAC,cAAc,EAAA,QAAA,EAElB,WAAW,EACP,CAAA,CACR,EACA,QAAQ,EACR,aAAa,IACZE,2BACE,OAAO,EAAE,aAAa,EACtB,SAAS,EAAEF,mBAAM,CAAC,gBAAgB,CAAC,EAAA,YAAA,EACvB,UACV,OAAO,QAAQ,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAC5C,CAAA,CAAE,EACF,IAAI,EAAC,QAAQ,EAEb,QAAA,EAAAE,cAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA,aAAA,EACtB,MAAM,EAClB,IAAI,EAAC,cAAc,EAAA,QAAA,EAEnBA,yBACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,qgBAAqgB,EACvgB,IAAI,EAAC,cAAc,EAAA,CACnB,GACE,EACC,CAAA,IACP,YAAY,IACdA,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEF,mBAAM,CAAC,eAAe,CAAC,iBACtB,MAAM,EAClB,IAAI,EAAC,cAAc,YAElB,YAAY,EAAA,CACR,IACL,IAAI,CAAA,EAAA,CACH,EACP;AACJ,EAAE;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"chip.cjs","sources":["../../../components/chip/chip.tsx"],"sourcesContent":["'use client';\n\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ReactNode } from 'react';\n\nimport styles from './chip.module.css';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      outline: styles['chip-variant-outline'],\n      filled: styles['chip-variant-filled']\n    },\n    size: {\n      large: styles['chip-size-large'],\n      small: styles['chip-size-small']\n    },\n    color: {\n      neutral: styles['chip-color-neutral'],\n      accent: styles['chip-color-accent']\n    }\n  },\n  defaultVariants: {\n    variant: 'outline',\n    size: 'small',\n    color: 'neutral'\n  }\n});\n\ntype ChipProps = VariantProps<typeof chip> & {\n  trailingIcon?: ReactNode;\n  leadingIcon?: ReactNode;\n  isDismissible?: boolean;\n  children: ReactNode;\n  className?: string;\n  onDismiss?: () => void;\n  onClick?: () => void;\n  role?: string;\n  ariaLabel?: string;\n  'data-state'?: string;\n};\n\nexport const Chip = ({\n  variant,\n  size,\n  color,\n  trailingIcon,\n  leadingIcon,\n  isDismissible,\n  children,\n  className,\n  onDismiss,\n  onClick,\n  role = 'status',\n  ariaLabel,\n  'data-state': dataState\n}: ChipProps) => {\n  const handleDismiss = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onDismiss?.();\n  };\n\n  return (\n    <span\n      className={chip({ variant, size, color, className })}\n      role={role}\n      aria-label={\n        ariaLabel || (typeof children === 'string' ? children : undefined)\n      }\n      onClick={onClick}\n      data-state={dataState}\n    >\n      {leadingIcon && (\n        <span\n          className={styles['leading-icon']}\n          aria-hidden='true'\n          role='presentation'\n        >\n          {leadingIcon}\n        </span>\n      )}\n      {children}\n      {isDismissible ? (\n        <button\n          onClick={handleDismiss}\n          className={styles['dismiss-button']}\n          aria-label={`Remove ${\n            typeof children === 'string' ? children : 'item'\n          }`}\n          type='button'\n        >\n          <svg\n            width='12'\n            height='12'\n            viewBox='0 0 12 12'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-hidden='true'\n            role='presentation'\n          >\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'\n              fill='currentColor'\n            />\n          </svg>\n        </button>\n      ) : trailingIcon ? (\n        <span\n          className={styles['trailing-icon']}\n          aria-hidden='true'\n          role='presentation'\n        >\n          {trailingIcon}\n        </span>\n      ) : null}\n    </span>\n  );\n};\n\nChip.displayName = 'Chip';\n"],"names":[],"mappings":";;;;;;;AAOA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACA;AACD;AACF;AAeY;AAeX;;;AAGA;AAEA;AAyDF;AAEA;;"}

package/dist/components/chip/chip.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from "class-variance-authority";
-import { ReactNode } from "react";
+import { type VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
 declare const chip: (props?: ({
     variant?: "outline" | "filled" | null | undefined;
     size?: "small" | "large" | null | undefined;
@@ -15,10 +15,10 @@ type ChipProps = VariantProps<typeof chip> & {
     onClick?: () => void;
     role?: string;
     ariaLabel?: string;
-    "data-state"?: string;
+    'data-state'?: string;
 };
 export declare const Chip: {
-    ({ variant, size, color, trailingIcon, leadingIcon, isDismissible, children, className, onDismiss, onClick, role, ariaLabel, "data-state": dataState, }: ChipProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, size, color, trailingIcon, leadingIcon, isDismissible, children, className, onDismiss, onClick, role, ariaLabel, "data-state": dataState }: ChipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/chip/chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../components/chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,QAAA,MAAM,IAAI;;;;8EAoBR,CAAC;AAEH,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG;IAC3C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,IAAI;6JAcd,SAAS;;CA+DX,CAAC"}
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../components/chip/chip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,QAAA,MAAM,IAAI;;;;8EAoBR,CAAC;AAEH,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG;IAC3C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,IAAI;4JAcd,SAAS;;CA+DX,CAAC"}

package/dist/components/chip/chip.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import styles from './chip.module.css.js';
@@ -5,32 +6,32 @@ import styles from './chip.module.css.js';
 const chip = cva(styles.chip, {
     variants: {
         variant: {
-            outline: styles["chip-variant-outline"],
-            filled: styles["chip-variant-filled"],
+            outline: styles['chip-variant-outline'],
+            filled: styles['chip-variant-filled']
         },
         size: {
-            large: styles["chip-size-large"],
-            small: styles["chip-size-small"],
+            large: styles['chip-size-large'],
+            small: styles['chip-size-small']
         },
         color: {
-            neutral: styles["chip-color-neutral"],
-            accent: styles["chip-color-accent"],
-        },
+            neutral: styles['chip-color-neutral'],
+            accent: styles['chip-color-accent']
+        }
     },
     defaultVariants: {
-        variant: "outline",
-        size: "small",
-        color: "neutral",
-    },
+        variant: 'outline',
+        size: 'small',
+        color: 'neutral'
+    }
 });
-const Chip = ({ variant, size, color, trailingIcon, leadingIcon, isDismissible, children, className, onDismiss, onClick, role = "status", ariaLabel, "data-state": dataState, }) => {
+const Chip = ({ variant, size, color, trailingIcon, leadingIcon, isDismissible, children, className, onDismiss, onClick, role = 'status', ariaLabel, 'data-state': dataState }) => {
     const handleDismiss = (e) => {
         e.stopPropagation();
         onDismiss?.();
     };
-    return (jsxs("span", { className: chip({ variant, size, color, className }), role: role, "aria-label": ariaLabel || (typeof children === "string" ? children : undefined), onClick: onClick, "data-state": dataState, children: [leadingIcon && (jsx("span", { className: styles["leading-icon"], "aria-hidden": "true", role: "presentation", children: leadingIcon })), children, isDismissible ? (jsx("button", { onClick: handleDismiss, className: styles["dismiss-button"], "aria-label": `Remove ${typeof children === "string" ? children : "item"}`, type: "button", children: jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "presentation", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z", fill: "currentColor" }) }) })) : trailingIcon ? (jsx("span", { className: styles["trailing-icon"], "aria-hidden": "true", role: "presentation", children: trailingIcon })) : null] }));
+    return (jsxs("span", { className: chip({ variant, size, color, className }), role: role, "aria-label": ariaLabel || (typeof children === 'string' ? children : undefined), onClick: onClick, "data-state": dataState, children: [leadingIcon && (jsx("span", { className: styles['leading-icon'], "aria-hidden": 'true', role: 'presentation', children: leadingIcon })), children, isDismissible ? (jsx("button", { onClick: handleDismiss, className: styles['dismiss-button'], "aria-label": `Remove ${typeof children === 'string' ? children : 'item'}`, type: 'button', children: jsx("svg", { width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', role: 'presentation', children: jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z', fill: 'currentColor' }) }) })) : trailingIcon ? (jsx("span", { className: styles['trailing-icon'], "aria-hidden": 'true', role: 'presentation', children: trailingIcon })) : null] }));
 };
-Chip.displayName = "Chip";
+Chip.displayName = 'Chip';
 
 export { Chip };
 //# sourceMappingURL=chip.js.map

package/dist/components/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../components/chip/chip.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { ReactNode } from \"react\";\n\nimport styles from \"./chip.module.css\";\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      outline: styles[\"chip-variant-outline\"],\n      filled: styles[\"chip-variant-filled\"],\n    },\n    size: {\n      large: styles[\"chip-size-large\"],\n      small: styles[\"chip-size-small\"],\n    },\n    color: {\n      neutral: styles[\"chip-color-neutral\"],\n      accent: styles[\"chip-color-accent\"],\n    },\n  },\n  defaultVariants: {\n    variant: \"outline\",\n    size: \"small\",\n    color: \"neutral\",\n  },\n});\n\ntype ChipProps = VariantProps<typeof chip> & {\n  trailingIcon?: ReactNode;\n  leadingIcon?: ReactNode;\n  isDismissible?: boolean;\n  children: ReactNode;\n  className?: string;\n  onDismiss?: () => void;\n  onClick?: () => void;\n  role?: string;\n  ariaLabel?: string;\n  \"data-state\"?: string;\n};\n\nexport const Chip = ({\n  variant,\n  size,\n  color,\n  trailingIcon,\n  leadingIcon,\n  isDismissible,\n  children,\n  className,\n  onDismiss,\n  onClick,\n  role = \"status\",\n  ariaLabel,\n  \"data-state\": dataState,\n}: ChipProps) => {\n  const handleDismiss = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onDismiss?.();\n  };\n\n  return (\n    <span\n      className={chip({ variant, size, color, className })}\n      role={role}\n      aria-label={\n        ariaLabel || (typeof children === \"string\" ? children : undefined)\n      }\n      onClick={onClick}\n      data-state={dataState}\n    >\n      {leadingIcon && (\n        <span\n          className={styles[\"leading-icon\"]}\n          aria-hidden=\"true\"\n          role=\"presentation\"\n        >\n          {leadingIcon}\n        </span>\n      )}\n      {children}\n      {isDismissible ? (\n        <button\n          onClick={handleDismiss}\n          className={styles[\"dismiss-button\"]}\n          aria-label={`Remove ${\n            typeof children === \"string\" ? children : \"item\"\n          }`}\n          type=\"button\"\n        >\n          <svg\n            width=\"12\"\n            height=\"12\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n            role=\"presentation\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n      ) : trailingIcon ? (\n        <span\n          className={styles[\"trailing-icon\"]}\n          aria-hidden=\"true\"\n          role=\"presentation\"\n        >\n          {trailingIcon}\n        </span>\n      ) : null}\n    </span>\n  );\n};\n\nChip.displayName = \"Chip\";\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAKA,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;AAC5B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACvC,YAAA,MAAM,EAAE,MAAM,CAAC,qBAAqB,CAAC;AACtC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AACjC,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,MAAM,CAAC,oBAAoB,CAAC;AACrC,YAAA,MAAM,EAAE,MAAM,CAAC,mBAAmB,CAAC;AACpC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;AAeU,MAAA,IAAI,GAAG,CAAC,EACnB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,WAAW,EACX,aAAa,EACb,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,YAAY,EAAE,SAAS,GACb,KAAI;AACd,IAAA,MAAM,aAAa,GAAG,CAAC,CAAmB,KAAI;QAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,SAAS,IAAI,CAAC;AAChB,KAAC,CAAC;AAEF,IAAA,QACEA,IACE,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACpD,IAAI,EAAE,IAAI,EAAA,YAAA,EAER,SAAS,KAAK,OAAO,QAAQ,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,EAEpE,OAAO,EAAE,OAAO,gBACJ,SAAS,EAAA,QAAA,EAAA,CAEpB,WAAW,KACVC,GACE,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,aAAA,EACrB,MAAM,EAClB,IAAI,EAAC,cAAc,EAAA,QAAA,EAElB,WAAW,EACP,CAAA,CACR,EACA,QAAQ,EACR,aAAa,IACZA,gBACE,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAAA,YAAA,EACvB,UACV,OAAO,QAAQ,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAC5C,CAAA,CAAE,EACF,IAAI,EAAC,QAAQ,EAEb,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA,aAAA,EACtB,MAAM,EAClB,IAAI,EAAC,cAAc,EAAA,QAAA,EAEnBA,cACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,qgBAAqgB,EACvgB,IAAI,EAAC,cAAc,EAAA,CACnB,GACE,EACC,CAAA,IACP,YAAY,IACdA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,iBACtB,MAAM,EAClB,IAAI,EAAC,cAAc,YAElB,YAAY,EAAA,CACR,IACL,IAAI,CAAA,EAAA,CACH,EACP;AACJ,EAAE;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"chip.js","sources":["../../../components/chip/chip.tsx"],"sourcesContent":["'use client';\n\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ReactNode } from 'react';\n\nimport styles from './chip.module.css';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      outline: styles['chip-variant-outline'],\n      filled: styles['chip-variant-filled']\n    },\n    size: {\n      large: styles['chip-size-large'],\n      small: styles['chip-size-small']\n    },\n    color: {\n      neutral: styles['chip-color-neutral'],\n      accent: styles['chip-color-accent']\n    }\n  },\n  defaultVariants: {\n    variant: 'outline',\n    size: 'small',\n    color: 'neutral'\n  }\n});\n\ntype ChipProps = VariantProps<typeof chip> & {\n  trailingIcon?: ReactNode;\n  leadingIcon?: ReactNode;\n  isDismissible?: boolean;\n  children: ReactNode;\n  className?: string;\n  onDismiss?: () => void;\n  onClick?: () => void;\n  role?: string;\n  ariaLabel?: string;\n  'data-state'?: string;\n};\n\nexport const Chip = ({\n  variant,\n  size,\n  color,\n  trailingIcon,\n  leadingIcon,\n  isDismissible,\n  children,\n  className,\n  onDismiss,\n  onClick,\n  role = 'status',\n  ariaLabel,\n  'data-state': dataState\n}: ChipProps) => {\n  const handleDismiss = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onDismiss?.();\n  };\n\n  return (\n    <span\n      className={chip({ variant, size, color, className })}\n      role={role}\n      aria-label={\n        ariaLabel || (typeof children === 'string' ? children : undefined)\n      }\n      onClick={onClick}\n      data-state={dataState}\n    >\n      {leadingIcon && (\n        <span\n          className={styles['leading-icon']}\n          aria-hidden='true'\n          role='presentation'\n        >\n          {leadingIcon}\n        </span>\n      )}\n      {children}\n      {isDismissible ? (\n        <button\n          onClick={handleDismiss}\n          className={styles['dismiss-button']}\n          aria-label={`Remove ${\n            typeof children === 'string' ? children : 'item'\n          }`}\n          type='button'\n        >\n          <svg\n            width='12'\n            height='12'\n            viewBox='0 0 12 12'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-hidden='true'\n            role='presentation'\n          >\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'\n              fill='currentColor'\n            />\n          </svg>\n        </button>\n      ) : trailingIcon ? (\n        <span\n          className={styles['trailing-icon']}\n          aria-hidden='true'\n          role='presentation'\n        >\n          {trailingIcon}\n        </span>\n      ) : null}\n    </span>\n  );\n};\n\nChip.displayName = 'Chip';\n"],"names":[],"mappings":";;;;;AAOA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACA;AACD;AACF;AAeY;AAeX;;;AAGA;AAEA;AAyDF;AAEA;;"}

package/dist/components/color-picker/color-picker-alpha.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/components/color-picker/color-picker-alpha.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-alpha.cjs","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;\n\nexport const ColorPickerAlpha = ({\n  className,\n  ...props\n}: ColorPickerAlphaProps) => {\n  const { alpha = 1, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={100}\n      onValueChange={([alpha]) => setColor({ alpha: alpha / 100 })}\n      step={1}\n      value={[alpha * 100]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>\n        <div className={styles.alphaTrackGradient} />\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":["useColorPicker","_jsxs","Slider.Root","cx","styles","Slider.Track","_jsx","Slider.Range","Slider.Thumb"],"mappings":";;;;;;;;AAQO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACc,KAAI;IAC1B,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAGA,8BAAc,EAAE,CAAC;IACjD,QACEC,gBAACC,UAAW,EACV,EAAA,SAAS,EAAEC,UAAE,CAACC,0BAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC3C,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,GAAG,EAAE,CAAC,EAC5D,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,EAAA,GAChB,KAAK,EAET,QAAA,EAAA,CAAAH,eAAA,CAACI,WAAY,EAAA,EAAC,SAAS,EAAEF,UAAE,CAACC,0BAAM,CAAC,WAAW,EAAEA,0BAAM,CAAC,UAAU,CAAC,EAChE,QAAA,EAAA,CAAAE,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEF,0BAAM,CAAC,kBAAkB,EAAI,CAAA,EAC7CE,eAACC,WAAY,EAAA,EAAC,SAAS,EAAEH,0BAAM,CAAC,WAAW,EAAI,CAAA,CAAA,EAAA,CAClC,EACfE,cAAA,CAACE,WAAY,EAAC,EAAA,SAAS,EAAEJ,0BAAM,CAAC,WAAW,EAAA,CAAI,CACnC,EAAA,CAAA,EACd;AACJ;;;;"}
+{"version":3,"file":"color-picker-alpha.cjs","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;\n\nexport const ColorPickerAlpha = ({\n  className,\n  ...props\n}: ColorPickerAlphaProps) => {\n  const { alpha = 1, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={100}\n      onValueChange={([alpha]) => setColor({ alpha: alpha / 100 })}\n      step={1}\n      value={[alpha * 100]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>\n        <div className={styles.alphaTrackGradient} />\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUO;;;AAqBP;;"}

package/dist/components/color-picker/color-picker-alpha.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-alpha.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAEvE,eAAO,MAAM,gBAAgB,4BAG1B,qBAAqB,4CAkBvB,CAAC"}
+{"version":3,"file":"color-picker-alpha.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAEvE,eAAO,MAAM,gBAAgB,4BAG1B,qBAAqB,4CAkBvB,CAAC"}

package/dist/components/color-picker/color-picker-alpha.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import { useColorPicker } from './color-picker-root.js';

package/dist/components/color-picker/color-picker-alpha.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-alpha.js","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;\n\nexport const ColorPickerAlpha = ({\n  className,\n  ...props\n}: ColorPickerAlphaProps) => {\n  const { alpha = 1, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={100}\n      onValueChange={([alpha]) => setColor({ alpha: alpha / 100 })}\n      step={1}\n      value={[alpha * 100]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>\n        <div className={styles.alphaTrackGradient} />\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":["_jsxs","Slider.Root","Slider.Track","_jsx","Slider.Range","Slider.Thumb"],"mappings":";;;;;;AAQO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACc,KAAI;IAC1B,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACjD,QACEA,KAACC,IAAW,EACV,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC3C,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,GAAG,EAAE,CAAC,EAC5D,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,EAAA,GAChB,KAAK,EAET,QAAA,EAAA,CAAAD,IAAA,CAACE,KAAY,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,CAAC,EAChE,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAI,CAAA,EAC7CA,IAACC,KAAY,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,EAAI,CAAA,CAAA,EAAA,CAClC,EACfD,GAAA,CAACE,KAAY,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI,CACnC,EAAA,CAAA,EACd;AACJ;;;;"}
+{"version":3,"file":"color-picker-alpha.js","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;\n\nexport const ColorPickerAlpha = ({\n  className,\n  ...props\n}: ColorPickerAlphaProps) => {\n  const { alpha = 1, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={100}\n      onValueChange={([alpha]) => setColor({ alpha: alpha / 100 })}\n      step={1}\n      value={[alpha * 100]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>\n        <div className={styles.alphaTrackGradient} />\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAUO;;;AAqBP;;"}

package/dist/components/color-picker/color-picker-area.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/components/color-picker/color-picker-area.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-area.cjs","sources":["../../../components/color-picker/color-picker-area.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport Color from 'color';\nimport {\n  type HTMLAttributes,\n  PointerEvent as ReactPointerEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAreaProps = HTMLAttributes<HTMLDivElement>;\n\nexport const ColorPickerArea = ({\n  className,\n  ...props\n}: ColorPickerAreaProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const thumbRef = useRef<HTMLDivElement>(null);\n  const isDragging = useRef(false);\n  const isThumbVisible = useRef(false);\n\n  const { hue, saturation, lightness, setColor } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness);\n\n  const backgroundGradient = useMemo(() => {\n    return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),\n            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),\n            hsl(${hue}, 100%, 50%)`;\n  }, [hue]);\n\n  // Need to use useEffect as color can change from outside, and we need to sync thumb position\n  useEffect(() => {\n    if (!containerRef.current || !thumbRef.current) return;\n\n    const clamp = (v: number) => Math.max(0, Math.min(1, v));\n    const x = clamp(saturation / 100);\n    const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n    const y = clamp(1 - lightness / topLightness);\n\n    thumbRef.current.style.left = `${x * 100}%`;\n    thumbRef.current.style.top = `${y * 100}%`;\n\n    // This is needed to avoid flickering of the thumb on initial render\n    if (!isThumbVisible.current) {\n      isThumbVisible.current = true;\n      thumbRef.current.style.opacity = '1';\n    }\n  }, [saturation, lightness]);\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!(isDragging.current && containerRef.current && thumbRef.current)) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = Math.max(\n        0,\n        Math.min(1, (event.clientX - rect.left) / rect.width)\n      );\n      const y = Math.max(\n        0,\n        Math.min(1, (event.clientY - rect.top) / rect.height)\n      );\n      const saturation = x * 100;\n      const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n      const lightness = topLightness * (1 - y);\n      setColor({ s: saturation, l: lightness });\n    },\n    [setColor]\n  );\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n    window.removeEventListener('pointermove', handlePointerMove);\n    window.removeEventListener('pointerup', handlePointerUp);\n  }, [handlePointerMove]);\n\n  const handlePointerDown = useCallback(\n    (e: ReactPointerEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      isDragging.current = true;\n      handlePointerMove(e.nativeEvent);\n      window.addEventListener('pointermove', handlePointerMove);\n      window.addEventListener('pointerup', handlePointerUp);\n    },\n    [handlePointerMove, handlePointerUp]\n  );\n\n  return (\n    <div\n      className={cx(styles.selectionRoot, className)}\n      onPointerDown={handlePointerDown}\n      ref={containerRef}\n      style={{\n        background: backgroundGradient\n      }}\n      {...props}\n    >\n      <div\n        className={cx(styles.sliderThumb, styles.selectionThumb)}\n        ref={thumbRef}\n        style={{\n          background: color.hex().toString(),\n          opacity: 0\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["useRef","useColorPicker","Color","useMemo","useEffect","useCallback","_jsx","cx","styles"],"mappings":"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"}
+{"version":3,"file":"color-picker-area.cjs","sources":["../../../components/color-picker/color-picker-area.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport Color from 'color';\nimport {\n  type HTMLAttributes,\n  PointerEvent as ReactPointerEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAreaProps = HTMLAttributes<HTMLDivElement>;\n\nexport const ColorPickerArea = ({\n  className,\n  ...props\n}: ColorPickerAreaProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const thumbRef = useRef<HTMLDivElement>(null);\n  const isDragging = useRef(false);\n  const isThumbVisible = useRef(false);\n\n  const { hue, saturation, lightness, setColor } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness);\n\n  const backgroundGradient = useMemo(() => {\n    return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),\n            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),\n            hsl(${hue}, 100%, 50%)`;\n  }, [hue]);\n\n  // Need to use useEffect as color can change from outside, and we need to sync thumb position\n  useEffect(() => {\n    if (!containerRef.current || !thumbRef.current) return;\n\n    const clamp = (v: number) => Math.max(0, Math.min(1, v));\n    const x = clamp(saturation / 100);\n    const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n    const y = clamp(1 - lightness / topLightness);\n\n    thumbRef.current.style.left = `${x * 100}%`;\n    thumbRef.current.style.top = `${y * 100}%`;\n\n    // This is needed to avoid flickering of the thumb on initial render\n    if (!isThumbVisible.current) {\n      isThumbVisible.current = true;\n      thumbRef.current.style.opacity = '1';\n    }\n  }, [saturation, lightness]);\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!(isDragging.current && containerRef.current && thumbRef.current)) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = Math.max(\n        0,\n        Math.min(1, (event.clientX - rect.left) / rect.width)\n      );\n      const y = Math.max(\n        0,\n        Math.min(1, (event.clientY - rect.top) / rect.height)\n      );\n      const saturation = x * 100;\n      const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n      const lightness = topLightness * (1 - y);\n      setColor({ s: saturation, l: lightness });\n    },\n    [setColor]\n  );\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n    window.removeEventListener('pointermove', handlePointerMove);\n    window.removeEventListener('pointerup', handlePointerUp);\n  }, [handlePointerMove]);\n\n  const handlePointerDown = useCallback(\n    (e: ReactPointerEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      isDragging.current = true;\n      handlePointerMove(e.nativeEvent);\n      window.addEventListener('pointermove', handlePointerMove);\n      window.addEventListener('pointerup', handlePointerUp);\n    },\n    [handlePointerMove, handlePointerUp]\n  );\n\n  return (\n    <div\n      className={cx(styles.selectionRoot, className)}\n      onPointerDown={handlePointerDown}\n      ref={containerRef}\n      style={{\n        background: backgroundGradient\n      }}\n      {...props}\n    >\n      <div\n        className={cx(styles.sliderThumb, styles.selectionThumb)}\n        ref={thumbRef}\n        style={{\n          background: color.hex().toString(),\n          opacity: 0\n        }}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAiBO;AAIL;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAGgB;AAChB;;;;;;;;;AAWE;AACA;;AAGA;AACE;;;AAGJ;AAEA;AAEI;;;;;;AAMA;AAIA;AAIA;;;;AAIF;AAIF;AACE;AACA;AACA;AACF;AAEA;;AAGI;AACA;AACA;AACA;AACF;;AAUI;;AAQE;AACA;;AAKV;;"}

package/dist/components/color-picker/color-picker-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-area.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-area.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,eAAO,MAAM,eAAe,4FAkG3B,CAAC"}
+{"version":3,"file":"color-picker-area.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-area.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,eAAO,MAAM,eAAe,4FAkG3B,CAAC"}

package/dist/components/color-picker/color-picker-area.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import Color from '../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.js';

package/dist/components/color-picker/color-picker-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-area.js","sources":["../../../components/color-picker/color-picker-area.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport Color from 'color';\nimport {\n  type HTMLAttributes,\n  PointerEvent as ReactPointerEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAreaProps = HTMLAttributes<HTMLDivElement>;\n\nexport const ColorPickerArea = ({\n  className,\n  ...props\n}: ColorPickerAreaProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const thumbRef = useRef<HTMLDivElement>(null);\n  const isDragging = useRef(false);\n  const isThumbVisible = useRef(false);\n\n  const { hue, saturation, lightness, setColor } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness);\n\n  const backgroundGradient = useMemo(() => {\n    return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),\n            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),\n            hsl(${hue}, 100%, 50%)`;\n  }, [hue]);\n\n  // Need to use useEffect as color can change from outside, and we need to sync thumb position\n  useEffect(() => {\n    if (!containerRef.current || !thumbRef.current) return;\n\n    const clamp = (v: number) => Math.max(0, Math.min(1, v));\n    const x = clamp(saturation / 100);\n    const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n    const y = clamp(1 - lightness / topLightness);\n\n    thumbRef.current.style.left = `${x * 100}%`;\n    thumbRef.current.style.top = `${y * 100}%`;\n\n    // This is needed to avoid flickering of the thumb on initial render\n    if (!isThumbVisible.current) {\n      isThumbVisible.current = true;\n      thumbRef.current.style.opacity = '1';\n    }\n  }, [saturation, lightness]);\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!(isDragging.current && containerRef.current && thumbRef.current)) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = Math.max(\n        0,\n        Math.min(1, (event.clientX - rect.left) / rect.width)\n      );\n      const y = Math.max(\n        0,\n        Math.min(1, (event.clientY - rect.top) / rect.height)\n      );\n      const saturation = x * 100;\n      const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n      const lightness = topLightness * (1 - y);\n      setColor({ s: saturation, l: lightness });\n    },\n    [setColor]\n  );\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n    window.removeEventListener('pointermove', handlePointerMove);\n    window.removeEventListener('pointerup', handlePointerUp);\n  }, [handlePointerMove]);\n\n  const handlePointerDown = useCallback(\n    (e: ReactPointerEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      isDragging.current = true;\n      handlePointerMove(e.nativeEvent);\n      window.addEventListener('pointermove', handlePointerMove);\n      window.addEventListener('pointerup', handlePointerUp);\n    },\n    [handlePointerMove, handlePointerUp]\n  );\n\n  return (\n    <div\n      className={cx(styles.selectionRoot, className)}\n      onPointerDown={handlePointerDown}\n      ref={containerRef}\n      style={{\n        background: backgroundGradient\n      }}\n      {...props}\n    >\n      <div\n        className={cx(styles.sliderThumb, styles.selectionThumb)}\n        ref={thumbRef}\n        style={{\n          background: color.hex().toString(),\n          opacity: 0\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"color-picker-area.js","sources":["../../../components/color-picker/color-picker-area.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport Color from 'color';\nimport {\n  type HTMLAttributes,\n  PointerEvent as ReactPointerEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAreaProps = HTMLAttributes<HTMLDivElement>;\n\nexport const ColorPickerArea = ({\n  className,\n  ...props\n}: ColorPickerAreaProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const thumbRef = useRef<HTMLDivElement>(null);\n  const isDragging = useRef(false);\n  const isThumbVisible = useRef(false);\n\n  const { hue, saturation, lightness, setColor } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness);\n\n  const backgroundGradient = useMemo(() => {\n    return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),\n            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),\n            hsl(${hue}, 100%, 50%)`;\n  }, [hue]);\n\n  // Need to use useEffect as color can change from outside, and we need to sync thumb position\n  useEffect(() => {\n    if (!containerRef.current || !thumbRef.current) return;\n\n    const clamp = (v: number) => Math.max(0, Math.min(1, v));\n    const x = clamp(saturation / 100);\n    const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n    const y = clamp(1 - lightness / topLightness);\n\n    thumbRef.current.style.left = `${x * 100}%`;\n    thumbRef.current.style.top = `${y * 100}%`;\n\n    // This is needed to avoid flickering of the thumb on initial render\n    if (!isThumbVisible.current) {\n      isThumbVisible.current = true;\n      thumbRef.current.style.opacity = '1';\n    }\n  }, [saturation, lightness]);\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!(isDragging.current && containerRef.current && thumbRef.current)) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = Math.max(\n        0,\n        Math.min(1, (event.clientX - rect.left) / rect.width)\n      );\n      const y = Math.max(\n        0,\n        Math.min(1, (event.clientY - rect.top) / rect.height)\n      );\n      const saturation = x * 100;\n      const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n      const lightness = topLightness * (1 - y);\n      setColor({ s: saturation, l: lightness });\n    },\n    [setColor]\n  );\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n    window.removeEventListener('pointermove', handlePointerMove);\n    window.removeEventListener('pointerup', handlePointerUp);\n  }, [handlePointerMove]);\n\n  const handlePointerDown = useCallback(\n    (e: ReactPointerEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      isDragging.current = true;\n      handlePointerMove(e.nativeEvent);\n      window.addEventListener('pointermove', handlePointerMove);\n      window.addEventListener('pointerup', handlePointerUp);\n    },\n    [handlePointerMove, handlePointerUp]\n  );\n\n  return (\n    <div\n      className={cx(styles.selectionRoot, className)}\n      onPointerDown={handlePointerDown}\n      ref={containerRef}\n      style={{\n        background: backgroundGradient\n      }}\n      {...props}\n    >\n      <div\n        className={cx(styles.sliderThumb, styles.selectionThumb)}\n        ref={thumbRef}\n        style={{\n          background: color.hex().toString(),\n          opacity: 0\n        }}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAiBO;AAIL;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAGgB;AAChB;;;;;;;;;AAWE;AACA;;AAGA;AACE;;;AAGJ;AAEA;AAEI;;;;;;AAMA;AAIA;AAIA;;;;AAIF;AAIF;AACE;AACA;AACA;AACF;AAEA;;AAGI;AACA;AACA;AACA;AACF;;AAUI;;AAQE;AACA;;AAKV;;"}

package/dist/components/color-picker/color-picker-hue.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/components/color-picker/color-picker-hue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-hue.cjs","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;\nexport const ColorPickerHue = ({\n  className,\n  ...props\n}: ColorPickerHueProps) => {\n  const { hue, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={360}\n      onValueChange={([hue]) => setColor({ h: hue })}\n      step={1}\n      value={[hue]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":["useColorPicker","_jsxs","Slider.Root","cx","styles","_jsx","Slider.Track","Slider.Range","Slider.Thumb"],"mappings":";;;;;;;;AAOO,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACY,KAAI;IACxB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAGA,8BAAc,EAAE,CAAC;IAC3C,QACEC,gBAACC,UAAW,EACV,EAAA,SAAS,EAAEC,UAAE,CAACC,0BAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC3C,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAC9C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,GAAG,CAAC,EACR,GAAA,KAAK,aAETC,cAAC,CAAAC,WAAY,EAAA,EAAC,SAAS,EAAEH,UAAE,CAACC,0BAAM,CAAC,WAAW,EAAEA,0BAAM,CAAC,QAAQ,CAAC,EAC9D,QAAA,EAAAC,cAAA,CAACE,WAAY,EAAC,EAAA,SAAS,EAAEH,0BAAM,CAAC,WAAW,EAAI,CAAA,EAAA,CAClC,EACfC,cAAC,CAAAG,WAAY,EAAA,EAAC,SAAS,EAAEJ,0BAAM,CAAC,WAAW,EAAA,CAAI,CACnC,EAAA,CAAA,EACd;AACJ;;;;"}
+{"version":3,"file":"color-picker-hue.cjs","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;\nexport const ColorPickerHue = ({\n  className,\n  ...props\n}: ColorPickerHueProps) => {\n  const { hue, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={360}\n      onValueChange={([hue]) => setColor({ h: hue })}\n      step={1}\n      value={[hue]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASO;;;AAoBP;;"}

package/dist/components/color-picker/color-picker-hue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-hue.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-hue.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AACrE,eAAO,MAAM,cAAc,4BAGxB,mBAAmB,4CAiBrB,CAAC"}
+{"version":3,"file":"color-picker-hue.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-hue.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AACrE,eAAO,MAAM,cAAc,4BAGxB,mBAAmB,4CAiBrB,CAAC"}

package/dist/components/color-picker/color-picker-hue.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import { useColorPicker } from './color-picker-root.js';

package/dist/components/color-picker/color-picker-hue.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-hue.js","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;\nexport const ColorPickerHue = ({\n  className,\n  ...props\n}: ColorPickerHueProps) => {\n  const { hue, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={360}\n      onValueChange={([hue]) => setColor({ h: hue })}\n      step={1}\n      value={[hue]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":["_jsxs","Slider.Root","_jsx","Slider.Track","Slider.Range","Slider.Thumb"],"mappings":";;;;;;AAOO,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACY,KAAI;IACxB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAC3C,QACEA,KAACC,IAAW,EACV,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC3C,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAC9C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,GAAG,CAAC,EACR,GAAA,KAAK,aAETC,GAAC,CAAAC,KAAY,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,QAAQ,CAAC,EAC9D,QAAA,EAAAD,GAAA,CAACE,KAAY,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAI,CAAA,EAAA,CAClC,EACfF,GAAC,CAAAG,KAAY,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI,CACnC,EAAA,CAAA,EACd;AACJ;;;;"}
+{"version":3,"file":"color-picker-hue.js","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;\nexport const ColorPickerHue = ({\n  className,\n  ...props\n}: ColorPickerHueProps) => {\n  const { hue, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={360}\n      onValueChange={([hue]) => setColor({ h: hue })}\n      step={1}\n      value={[hue]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AASO;;;AAoBP;;"}

package/dist/components/color-picker/color-picker-input.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/components/color-picker/color-picker-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-input.cjs","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["import Color from 'color';\nimport { ComponentPropsWithoutRef } from 'react';\nimport { InputField } from '../input-field';\nimport { useColorPicker } from './color-picker-root';\nimport { getColorString } from './utils';\n\nexport const ColorPickerInput = (\n  props: ComponentPropsWithoutRef<typeof InputField>\n) => {\n  const { hue, saturation, lightness, alpha, mode } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);\n\n  return <InputField value={getColorString(color, mode)} readOnly {...props} />;\n};\n"],"names":["useColorPicker","Color","_jsx","InputField","getColorString"],"mappings":";;;;;;;;AAMa,MAAA,gBAAgB,GAAG,CAC9B,KAAkD,KAChD;AACF,IAAA,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAGA,8BAAc,EAAE,CAAC;AACrE,IAAA,MAAM,KAAK,GAAGC,aAAK,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC;AAEhE,IAAA,OAAOC,eAACC,qBAAU,EAAA,EAAC,KAAK,EAAEC,oBAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAK,IAAA,EAAA,GAAA,KAAK,GAAI,CAAC;AAChF;;;;"}
+{"version":3,"file":"color-picker-input.cjs","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["'use client';\n\nimport Color from 'color';\nimport { ComponentPropsWithoutRef } from 'react';\nimport { InputField } from '../input-field';\nimport { useColorPicker } from './color-picker-root';\nimport { getColorString } from './utils';\n\nexport const ColorPickerInput = (\n  props: ComponentPropsWithoutRef<typeof InputField>\n) => {\n  const { hue, saturation, lightness, alpha, mode } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);\n\n  return <InputField value={getColorString(color, mode)} readOnly {...props} />;\n};\n"],"names":[],"mappings":";;;;;;;;;AAQa;AAGX;AACA;AAEA;AACF;;"}

package/dist/components/color-picker/color-picker-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-input.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI5C,eAAO,MAAM,gBAAgB,UACpB,yBAAyB,iBAAiB,CAAC,4CAMnD,CAAC"}
+{"version":3,"file":"color-picker-input.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI5C,eAAO,MAAM,gBAAgB,UACpB,yBAAyB,iBAAiB,CAAC,4CAMnD,CAAC"}

package/dist/components/color-picker/color-picker-input.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import Color from '../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.js';
 import { InputField } from '../input-field/input-field.js';

package/dist/components/color-picker/color-picker-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-input.js","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["import Color from 'color';\nimport { ComponentPropsWithoutRef } from 'react';\nimport { InputField } from '../input-field';\nimport { useColorPicker } from './color-picker-root';\nimport { getColorString } from './utils';\n\nexport const ColorPickerInput = (\n  props: ComponentPropsWithoutRef<typeof InputField>\n) => {\n  const { hue, saturation, lightness, alpha, mode } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);\n\n  return <InputField value={getColorString(color, mode)} readOnly {...props} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAMa,MAAA,gBAAgB,GAAG,CAC9B,KAAkD,KAChD;AACF,IAAA,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,cAAc,EAAE,CAAC;AACrE,IAAA,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC;AAEhE,IAAA,OAAOA,IAAC,UAAU,EAAA,EAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAK,IAAA,EAAA,GAAA,KAAK,GAAI,CAAC;AAChF;;;;"}
+{"version":3,"file":"color-picker-input.js","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["'use client';\n\nimport Color from 'color';\nimport { ComponentPropsWithoutRef } from 'react';\nimport { InputField } from '../input-field';\nimport { useColorPicker } from './color-picker-root';\nimport { getColorString } from './utils';\n\nexport const ColorPickerInput = (\n  props: ComponentPropsWithoutRef<typeof InputField>\n) => {\n  const { hue, saturation, lightness, alpha, mode } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);\n\n  return <InputField value={getColorString(color, mode)} readOnly {...props} />;\n};\n"],"names":[],"mappings":";;;;;;;AAQa;AAGX;AACA;AAEA;AACF;;"}