@commercetools/nimbus 0.0.9-rc8 → 0.0.11

package/dist/chunks/number-input.recipe-8gbsGnLJ.js

@@ -1,209 +0,0 @@
-import { defineSlotRecipe as r } from "@chakra-ui/react";
-const e = /* @__PURE__ */ r({
-  // Unique class name prefix for the component
-  className: "nimbus-number-input",
-  // Define the slots for this multi-part component
-  slots: ["root", "input", "incrementButton", "decrementButton"],
-  // Base styles applied to all instances of the component
-  base: {
-    root: {
-      display: "inline-block",
-      position: "relative",
-      // Apply input hover styles when buttons are hovered
-      "&:has(button:hover) input": {
-        backgroundColor: "primary.2"
-      }
-    },
-    input: {
-      "--border-width": "sizes.25",
-      "--border-color": "colors.neutral.7",
-      display: "block",
-      borderRadius: "200",
-      colorPalette: "neutral",
-      focusVisibleRing: "outside",
-      bg: "transparent",
-      outline: "none",
-      appearance: "textfield",
-      width: "full",
-      _placeholder: {
-        opacity: 0.5,
-        color: "currentColor"
-      },
-      _disabled: {
-        layerStyle: "disabled"
-      },
-      "&[data-invalid='true']": {
-        "--border-color": "colors.critical.7",
-        color: "critical.11"
-      }
-    },
-    incrementButton: {
-      "--border-width": "sizes.25",
-      "--border-color": "colors.neutral.7",
-      w: 600,
-      h: "50%",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      cursor: "button",
-      bg: "transparent",
-      _hover: {
-        bg: "primary.2"
-      },
-      _active: {
-        bg: "neutral.4"
-      },
-      _disabled: {
-        opacity: 0.5,
-        cursor: "not-allowed"
-      },
-      "& svg": {
-        fill: "primary.9"
-      },
-      borderTopRightRadius: "200",
-      "&[data-invalid='true']": {
-        "--border-color": "colors.critical.7"
-      }
-    },
-    decrementButton: {
-      "--border-width": "sizes.25",
-      "--border-color": "colors.neutral.7",
-      w: 600,
-      h: "50%",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      cursor: "button",
-      bg: "transparent",
-      _hover: {
-        bg: "primary.2"
-      },
-      _active: {
-        bg: "neutral.4"
-      },
-      _disabled: {
-        opacity: 0.5,
-        cursor: "not-allowed"
-      },
-      "& svg": {
-        fill: "primary.9"
-      },
-      borderBottomRightRadius: "200",
-      "&[data-invalid='true']": {
-        "--border-color": "colors.critical.7"
-      }
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        input: {
-          h: 800,
-          textStyle: "sm",
-          px: 300,
-          paddingRight: 800
-        }
-      },
-      md: {
-        input: {
-          h: 1e3,
-          textStyle: "md",
-          px: 400,
-          paddingRight: 800
-        }
-      }
-    },
-    variant: {
-      solid: {
-        root: {
-          // Apply input hover styles when buttons are hovered for solid variant
-          "&:has(button:hover) input": {
-            backgroundColor: "primary.2"
-          }
-        },
-        input: {
-          "&[data-invalid='true']": {
-            boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-            "--border-width": "sizes.50"
-          },
-          boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-          backgroundColor: "neutral.1",
-          _hover: {
-            backgroundColor: "primary.2"
-          }
-        },
-        incrementButton: {
-          "&[data-invalid='true']": {
-            borderTop: "2px solid var(--border-color)",
-            borderRight: "2px solid var(--border-color)"
-          },
-          borderTop: "var(--border-width) solid var(--border-color)",
-          borderRight: "var(--border-width) solid var(--border-color)",
-          borderLeft: "var(--border-width) solid var(--border-color)",
-          // Half-pixel shadow to create the illusion of a complete border when paired with the other button
-          boxShadow: "inset 0 -0.5px 0 0 var(--border-color)",
-          _hover: {
-            backgroundColor: "primaryAlpha.3"
-          }
-        },
-        decrementButton: {
-          "&[data-invalid='true']": {
-            borderBottom: "2px solid var(--border-color)",
-            borderRight: "2px solid var(--border-color)"
-          },
-          borderBottom: "var(--border-width) solid var(--border-color)",
-          borderRight: "var(--border-width) solid var(--border-color)",
-          borderLeft: "var(--border-width) solid var(--border-color)",
-          // Half-pixel shadow to create the illusion of a complete border when paired with the other button
-          boxShadow: "inset 0 0.5px 0 0 var(--border-color)",
-          _hover: {
-            backgroundColor: "primaryAlpha.3"
-          }
-        }
-      },
-      ghost: {
-        root: {
-          // Apply input hover styles when buttons are hovered for ghost variant
-          "&:has(button:hover) input": {
-            backgroundColor: "primary.2"
-          }
-        },
-        input: {
-          "&[data-invalid='true']": {
-            boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-            "--border-width": "sizes.50"
-          },
-          _hover: {
-            backgroundColor: "primary.2"
-          }
-        },
-        incrementButton: {
-          "&[data-invalid='true']": {
-            borderTop: "2px solid var(--border-color)",
-            borderRight: "2px solid var(--border-color)"
-          },
-          _hover: {
-            backgroundColor: "primaryAlpha.3"
-          }
-        },
-        decrementButton: {
-          "&[data-invalid='true']": {
-            borderBottom: "2px solid var(--border-color)",
-            borderRight: "2px solid var(--border-color)"
-          },
-          _hover: {
-            backgroundColor: "primaryAlpha.3"
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "solid"
-  }
-});
-export {
-  e as n
-};
-//# sourceMappingURL=number-input.recipe-8gbsGnLJ.js.map

package/dist/chunks/number-input.recipe-8gbsGnLJ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"number-input.recipe-8gbsGnLJ.js","sources":["../../src/components/number-input/number-input.recipe.tsx"],"sourcesContent":["import { defineSlotRecipe } from \"@chakra-ui/react\";\n\n/**\n * Recipe configuration for the NumberInput component.\n * Defines the styling variants and base styles using Chakra UI's slot recipe system.\n */\nexport const numberInputRecipe = defineSlotRecipe({\n  // Unique class name prefix for the component\n  className: \"nimbus-number-input\",\n\n  // Define the slots for this multi-part component\n  slots: [\"root\", \"input\", \"incrementButton\", \"decrementButton\"],\n\n  // Base styles applied to all instances of the component\n  base: {\n    root: {\n      display: \"inline-block\",\n      position: \"relative\",\n      // Apply input hover styles when buttons are hovered\n      \"&:has(button:hover) input\": {\n        backgroundColor: \"primary.2\",\n      },\n    },\n    input: {\n      \"--border-width\": \"sizes.25\",\n      \"--border-color\": \"colors.neutral.7\",\n      display: \"block\",\n      borderRadius: \"200\",\n      colorPalette: \"neutral\",\n      focusVisibleRing: \"outside\",\n      bg: \"transparent\",\n      outline: \"none\",\n      appearance: \"textfield\",\n      width: \"full\",\n      _placeholder: {\n        opacity: 0.5,\n        color: \"currentColor\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n      \"&[data-invalid='true']\": {\n        \"--border-color\": \"colors.critical.7\",\n        color: \"critical.11\",\n      },\n    },\n    incrementButton: {\n      \"--border-width\": \"sizes.25\",\n      \"--border-color\": \"colors.neutral.7\",\n      w: 600,\n      h: \"50%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      cursor: \"button\",\n      bg: \"transparent\",\n      _hover: {\n        bg: \"primary.2\",\n      },\n      _active: {\n        bg: \"neutral.4\",\n      },\n      _disabled: {\n        opacity: 0.5,\n        cursor: \"not-allowed\",\n      },\n      \"& svg\": {\n        fill: \"primary.9\",\n      },\n      borderTopRightRadius: \"200\",\n      \"&[data-invalid='true']\": {\n        \"--border-color\": \"colors.critical.7\",\n      },\n    },\n    decrementButton: {\n      \"--border-width\": \"sizes.25\",\n      \"--border-color\": \"colors.neutral.7\",\n      w: 600,\n      h: \"50%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      cursor: \"button\",\n      bg: \"transparent\",\n      _hover: {\n        bg: \"primary.2\",\n      },\n      _active: {\n        bg: \"neutral.4\",\n      },\n      _disabled: {\n        opacity: 0.5,\n        cursor: \"not-allowed\",\n      },\n      \"& svg\": {\n        fill: \"primary.9\",\n      },\n      borderBottomRightRadius: \"200\",\n      \"&[data-invalid='true']\": {\n        \"--border-color\": \"colors.critical.7\",\n      },\n    },\n  },\n\n  variants: {\n    size: {\n      sm: {\n        input: {\n          h: 800,\n          textStyle: \"sm\",\n          px: 300,\n          paddingRight: 800,\n        },\n      },\n      md: {\n        input: {\n          h: 1000,\n          textStyle: \"md\",\n          px: 400,\n          paddingRight: 800,\n        },\n      },\n    },\n\n    variant: {\n      solid: {\n        root: {\n          // Apply input hover styles when buttons are hovered for solid variant\n          \"&:has(button:hover) input\": {\n            backgroundColor: \"primary.2\",\n          },\n        },\n        input: {\n          \"&[data-invalid='true']\": {\n            boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n            \"--border-width\": \"sizes.50\",\n          },\n          boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n          backgroundColor: \"neutral.1\",\n          _hover: {\n            backgroundColor: \"primary.2\",\n          },\n        },\n        incrementButton: {\n          \"&[data-invalid='true']\": {\n            borderTop: \"2px solid var(--border-color)\",\n            borderRight: \"2px solid var(--border-color)\",\n          },\n          borderTop: \"var(--border-width) solid var(--border-color)\",\n          borderRight: \"var(--border-width) solid var(--border-color)\",\n          borderLeft: \"var(--border-width) solid var(--border-color)\",\n          // Half-pixel shadow to create the illusion of a complete border when paired with the other button\n          boxShadow: \"inset 0 -0.5px 0 0 var(--border-color)\",\n          _hover: {\n            backgroundColor: \"primaryAlpha.3\",\n          },\n        },\n        decrementButton: {\n          \"&[data-invalid='true']\": {\n            borderBottom: \"2px solid var(--border-color)\",\n            borderRight: \"2px solid var(--border-color)\",\n          },\n          borderBottom: \"var(--border-width) solid var(--border-color)\",\n          borderRight: \"var(--border-width) solid var(--border-color)\",\n          borderLeft: \"var(--border-width) solid var(--border-color)\",\n          // Half-pixel shadow to create the illusion of a complete border when paired with the other button\n          boxShadow: \"inset 0 0.5px 0 0 var(--border-color)\",\n          _hover: {\n            backgroundColor: \"primaryAlpha.3\",\n          },\n        },\n      },\n      ghost: {\n        root: {\n          // Apply input hover styles when buttons are hovered for ghost variant\n          \"&:has(button:hover) input\": {\n            backgroundColor: \"primary.2\",\n          },\n        },\n        input: {\n          \"&[data-invalid='true']\": {\n            boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n            \"--border-width\": \"sizes.50\",\n          },\n          _hover: {\n            backgroundColor: \"primary.2\",\n          },\n        },\n        incrementButton: {\n          \"&[data-invalid='true']\": {\n            borderTop: \"2px solid var(--border-color)\",\n            borderRight: \"2px solid var(--border-color)\",\n          },\n          _hover: {\n            backgroundColor: \"primaryAlpha.3\",\n          },\n        },\n        decrementButton: {\n          \"&[data-invalid='true']\": {\n            borderBottom: \"2px solid var(--border-color)\",\n            borderRight: \"2px solid var(--border-color)\",\n          },\n          _hover: {\n            backgroundColor: \"primaryAlpha.3\",\n          },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: \"md\",\n    variant: \"solid\",\n  },\n});\n"],"names":["numberInputRecipe","defineSlotRecipe"],"mappings":"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"}

package/dist/chunks/password-input-BD5GZKX7.js

@@ -1,2 +0,0 @@
-"use strict";const s=require("react/jsx-runtime"),e=require("react"),n=require("./box-FU6tRPFs.js"),b=require("./icon-button-Ds1Wzyc1.js"),r=require("./tooltip-C-K5iatf.js"),j=require("./text-input-CtJ2FHJ3.js"),a=require("@commercetools/nimbus-icons"),c=e.forwardRef((i,d)=>{const{size:t="md",isDisabled:l}=i,[o,u]=e.useState(!1),p=()=>u(!o),x=t==="md"?"xs":"2xs",w=t==="md"?{top:"100",right:"400"}:{top:"50",right:"400"},h=t==="md"?"1400":"1100";return s.jsxs(n.Box,{display:"inline-block",position:"relative",children:[s.jsx(j.TextInput,{width:"full",ref:d,type:o?"text":"password",...i,pr:h}),s.jsx(n.Box,{position:"absolute",...w,children:s.jsxs(r.Tooltip.Root,{children:[s.jsx(b.IconButton,{size:x,variant:"ghost",tone:"primary","aria-label":o?"Hide password":"Show password",onPress:p,isDisabled:l,children:o?s.jsx(a.VisibilityOff,{}):s.jsx(a.Visibility,{})}),s.jsx(r.Tooltip.Content,{children:o?"Hide password":"Show Password"})]})})]})});c.displayName="PasswordInput";exports.PasswordInput=c;
-//# sourceMappingURL=password-input-BD5GZKX7.js.map

package/dist/chunks/password-input-BD5GZKX7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"password-input-BD5GZKX7.js","sources":["../../src/components/password-input/password-input.tsx"],"sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { Box, IconButton, Tooltip } from \"@/components\";\nimport { TextInput } from \"@/components/text-input\";\nimport { Visibility, VisibilityOff } from \"@commercetools/nimbus-icons\";\nimport type { PasswordInputProps } from \"./password-input.types\";\n\n/**\n * PasswordInput\n * ============================================================\n * An input component that takes in password as input with toggleable visibility\n *\n * Features:\n *\n * - Based on TextInput with added password visibility toggle\n * - Allows toggling between type=\"password\" and type=\"text\"\n * - Positions the toggle button at the right edge of the input\n * - Inherits all TextInput features and props\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  (props, forwardedRef) => {\n    const { size = \"md\", isDisabled } = props;\n    const [showPassword, setShowPassword] = useState(false);\n    const toggleVisibility = () => setShowPassword(!showPassword);\n\n    /** size icon based on input size */\n    const iconSize = size === \"md\" ? \"xs\" : \"2xs\";\n    /**\n     * position the icon button at the right edge of the input based on\n     * the size of the input\n     */\n    const iconPositionProps =\n      size === \"md\"\n        ? {\n            top: \"100\",\n            right: \"400\",\n          }\n        : {\n            top: \"50\",\n            right: \"400\",\n          };\n\n    /** safe space between the text within the input and the icon button */\n    const iconButtonSafeSpace = size === \"md\" ? \"1400\" : \"1100\";\n\n    return (\n      <Box display=\"inline-block\" position=\"relative\">\n        <TextInput\n          width=\"full\"\n          ref={forwardedRef}\n          type={showPassword ? \"text\" : \"password\"}\n          {...props}\n          pr={iconButtonSafeSpace}\n        />\n        <Box position=\"absolute\" {...iconPositionProps}>\n          <Tooltip.Root>\n            <IconButton\n              size={iconSize}\n              variant=\"ghost\"\n              tone=\"primary\"\n              aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n              onPress={toggleVisibility}\n              isDisabled={isDisabled}\n            >\n              {showPassword ? <VisibilityOff /> : <Visibility />}\n            </IconButton>\n            <Tooltip.Content>\n              {showPassword ? \"Hide password\" : \"Show Password\"}\n            </Tooltip.Content>\n          </Tooltip.Root>\n        </Box>\n      </Box>\n    );\n  }\n);\n\nPasswordInput.displayName = \"PasswordInput\";\n"],"names":["PasswordInput","forwardRef","props","forwardedRef","size","isDisabled","showPassword","setShowPassword","useState","toggleVisibility","iconSize","iconPositionProps","iconButtonSafeSpace","jsxs","Box","jsx","TextInput","Tooltip","IconButton","VisibilityOff","Visibility"],"mappings":"6PAkBaA,EAAgBC,EAAA,WAC3B,CAACC,EAAOC,IAAiB,CACvB,KAAM,CAAE,KAAAC,EAAO,KAAM,WAAAC,CAAe,EAAAH,EAC9B,CAACI,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EAChDC,EAAmB,IAAMF,EAAgB,CAACD,CAAY,EAGtDI,EAAWN,IAAS,KAAO,KAAO,MAKlCO,EACJP,IAAS,KACL,CACE,IAAK,MACL,MAAO,KAAA,EAET,CACE,IAAK,KACL,MAAO,KACT,EAGAQ,EAAsBR,IAAS,KAAO,OAAS,OAErD,OACGS,EAAAA,KAAAC,EAAAA,IAAA,CAAI,QAAQ,eAAe,SAAS,WACnC,SAAA,CAAAC,EAAA,IAACC,EAAA,UAAA,CACC,MAAM,OACN,IAAKb,EACL,KAAMG,EAAe,OAAS,WAC7B,GAAGJ,EACJ,GAAIU,CAAA,CACN,EACAG,EAAAA,IAACD,OAAI,SAAS,WAAY,GAAGH,EAC3B,SAAAE,OAACI,EAAAA,QAAQ,KAAR,CACC,SAAA,CAAAF,EAAA,IAACG,EAAA,WAAA,CACC,KAAMR,EACN,QAAQ,QACR,KAAK,UACL,aAAYJ,EAAe,gBAAkB,gBAC7C,QAASG,EACT,WAAAJ,EAEC,SAAeC,EAAAS,MAACI,EAAAA,cAAc,CAAA,CAAA,QAAMC,EAAAA,WAAW,CAAA,CAAA,CAAA,CAClD,QACCH,EAAQ,QAAA,QAAR,CACE,SAAAX,EAAe,gBAAkB,eACpC,CAAA,CAAA,CAAA,CACF,CACF,CAAA,CAAA,EACF,CAAA,CAGN,EAEAN,EAAc,YAAc"}

package/dist/chunks/password-input-fiypX-6w.js

@@ -1,50 +0,0 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { forwardRef as f, useState as w } from "react";
-import { B as e } from "./box-DD4jYgS7.js";
-import { I as h } from "./icon-button-DVBfoOHT.js";
-import { b as n } from "./tooltip-DvoZxHgo.js";
-import { T as u } from "./text-input-SYXEV4sT.js";
-import { VisibilityOff as P, Visibility as S } from "@commercetools/nimbus-icons";
-const b = /* @__PURE__ */ f(
-  (t, a) => {
-    const { size: i = "md", isDisabled: p } = t, [s, d] = w(!1), l = () => d(!s), c = i === "md" ? "xs" : "2xs", m = i === "md" ? {
-      top: "100",
-      right: "400"
-    } : {
-      top: "50",
-      right: "400"
-    };
-    return /* @__PURE__ */ r(e, { display: "inline-block", position: "relative", children: [
-      /* @__PURE__ */ o(
-        u,
-        {
-          width: "full",
-          ref: a,
-          type: s ? "text" : "password",
-          ...t,
-          pr: i === "md" ? "1400" : "1100"
-        }
-      ),
-      /* @__PURE__ */ o(e, { position: "absolute", ...m, children: /* @__PURE__ */ r(n.Root, { children: [
-        /* @__PURE__ */ o(
-          h,
-          {
-            size: c,
-            variant: "ghost",
-            tone: "primary",
-            "aria-label": s ? "Hide password" : "Show password",
-            onPress: l,
-            isDisabled: p,
-            children: s ? /* @__PURE__ */ o(P, {}) : /* @__PURE__ */ o(S, {})
-          }
-        ),
-        /* @__PURE__ */ o(n.Content, { children: s ? "Hide password" : "Show Password" })
-      ] }) })
-    ] });
-  }
-);
-b.displayName = "PasswordInput";
-export {
-  b as P
-};
-//# sourceMappingURL=password-input-fiypX-6w.js.map

package/dist/chunks/password-input-fiypX-6w.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"password-input-fiypX-6w.js","sources":["../../src/components/password-input/password-input.tsx"],"sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { Box, IconButton, Tooltip } from \"@/components\";\nimport { TextInput } from \"@/components/text-input\";\nimport { Visibility, VisibilityOff } from \"@commercetools/nimbus-icons\";\nimport type { PasswordInputProps } from \"./password-input.types\";\n\n/**\n * PasswordInput\n * ============================================================\n * An input component that takes in password as input with toggleable visibility\n *\n * Features:\n *\n * - Based on TextInput with added password visibility toggle\n * - Allows toggling between type=\"password\" and type=\"text\"\n * - Positions the toggle button at the right edge of the input\n * - Inherits all TextInput features and props\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  (props, forwardedRef) => {\n    const { size = \"md\", isDisabled } = props;\n    const [showPassword, setShowPassword] = useState(false);\n    const toggleVisibility = () => setShowPassword(!showPassword);\n\n    /** size icon based on input size */\n    const iconSize = size === \"md\" ? \"xs\" : \"2xs\";\n    /**\n     * position the icon button at the right edge of the input based on\n     * the size of the input\n     */\n    const iconPositionProps =\n      size === \"md\"\n        ? {\n            top: \"100\",\n            right: \"400\",\n          }\n        : {\n            top: \"50\",\n            right: \"400\",\n          };\n\n    /** safe space between the text within the input and the icon button */\n    const iconButtonSafeSpace = size === \"md\" ? \"1400\" : \"1100\";\n\n    return (\n      <Box display=\"inline-block\" position=\"relative\">\n        <TextInput\n          width=\"full\"\n          ref={forwardedRef}\n          type={showPassword ? \"text\" : \"password\"}\n          {...props}\n          pr={iconButtonSafeSpace}\n        />\n        <Box position=\"absolute\" {...iconPositionProps}>\n          <Tooltip.Root>\n            <IconButton\n              size={iconSize}\n              variant=\"ghost\"\n              tone=\"primary\"\n              aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n              onPress={toggleVisibility}\n              isDisabled={isDisabled}\n            >\n              {showPassword ? <VisibilityOff /> : <Visibility />}\n            </IconButton>\n            <Tooltip.Content>\n              {showPassword ? \"Hide password\" : \"Show Password\"}\n            </Tooltip.Content>\n          </Tooltip.Root>\n        </Box>\n      </Box>\n    );\n  }\n);\n\nPasswordInput.displayName = \"PasswordInput\";\n"],"names":["PasswordInput","forwardRef","props","forwardedRef","size","isDisabled","showPassword","setShowPassword","useState","toggleVisibility","iconSize","iconPositionProps","jsxs","Box","jsx","TextInput","Tooltip","IconButton","VisibilityOff","Visibility"],"mappings":";;;;;;;AAkBO,MAAMA,IAAgB,gBAAAC;AAAA,EAC3B,CAACC,GAAOC,MAAiB;AACvB,UAAM,EAAE,MAAAC,IAAO,MAAM,YAAAC,EAAe,IAAAH,GAC9B,CAACI,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChDC,IAAmB,MAAMF,EAAgB,CAACD,CAAY,GAGtDI,IAAWN,MAAS,OAAO,OAAO,OAKlCO,IACJP,MAAS,OACL;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,IAAA,IAET;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,IACT;AAKN,WACG,gBAAAQ,EAAAC,GAAA,EAAI,SAAQ,gBAAe,UAAS,YACnC,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,KAAKZ;AAAA,UACL,MAAMG,IAAe,SAAS;AAAA,UAC7B,GAAGJ;AAAA,UACJ,IATsBE,MAAS,OAAO,SAAS;AAAA,QAS3C;AAAA,MACN;AAAA,MACA,gBAAAU,EAACD,KAAI,UAAS,YAAY,GAAGF,GAC3B,UAAA,gBAAAC,EAACI,EAAQ,MAAR,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,MAAMP;AAAA,YACN,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,cAAYJ,IAAe,kBAAkB;AAAA,YAC7C,SAASG;AAAA,YACT,YAAAJ;AAAA,YAEC,UAAeC,IAAA,gBAAAQ,EAACI,GAAc,CAAA,CAAA,sBAAMC,GAAW,CAAA,CAAA;AAAA,UAAA;AAAA,QAClD;AAAA,0BACCH,EAAQ,SAAR,EACE,UAAAV,IAAe,kBAAkB,gBACpC,CAAA;AAAA,MAAA,EAAA,CACF,EACF,CAAA;AAAA,IAAA,GACF;AAAA,EAAA;AAGN;AAEAN,EAAc,cAAc;"}

package/dist/chunks/radio-input-4v_6tT94.js

@@ -1,319 +0,0 @@
-import { jsx as D, jsxs as W, Fragment as A } from "react/jsx-runtime";
-import { createSlotRecipeContext as G, useSlotRecipe as j } from "@chakra-ui/react";
-import { r as H } from "./radio-input.recipe-CM9R2ilP.js";
-import { $ as O, f as K, d as U, a as M, b as z, c as J, e as Q } from "./utils-7n9JR4ke.js";
-import { $ as X, a as Y, b as Z } from "./Form-DdaqVtM4.js";
-import { $ as ee } from "./Text-DOcU1ycg.js";
-import { $ as y, c as ae } from "./mergeProps-tCFA9wZ1.js";
-import { $ as F } from "./filterDOMProps-D6KHYVBX.js";
-import { $ as ie } from "./useObjectRef-CaJ5pgjX.js";
-import g, { useMemo as q, useState as de, forwardRef as w, createContext as B } from "react";
-import { $ as re } from "./useFormReset-BgCb2h6r.js";
-import { $ as C } from "./usePress-Dk0M2Js8.js";
-import { $ as te } from "./useFocusable-DBEQCS1T.js";
-import { a as oe, $ as le } from "./useFormValidation-DoG8pVu2.js";
-import { a as se } from "./FocusScope-CsXy0kJw.js";
-import { $ as ne } from "./useFocusWithin-AKRo9mz0.js";
-import { $ as ce } from "./useField-BY58-2Ft.js";
-import { $ as ue } from "./context-CI0Y3O6x.js";
-import { $ as k } from "./useFocusRing-DNviWqC5.js";
-import { $ as fe } from "./useHover-3Zee5Ds5.js";
-import { $ as $e } from "./VisuallyHidden-2REhp9RT.js";
-import { $ as be } from "./useControlledState-u436Wbp1.js";
-import { e as E } from "./extractStyleProps-CxgBrz3O.js";
-import { RadioButtonChecked as pe, RadioButtonUnchecked as ve } from "@commercetools/nimbus-icons";
-const _ = /* @__PURE__ */ new WeakMap();
-function me(a, e, d) {
-  let { value: t, children: o, "aria-label": r, "aria-labelledby": l } = a;
-  const i = a.isDisabled || e.isDisabled;
-  let c = o != null, f = r != null || l != null;
-  !c && !f && process.env.NODE_ENV !== "production" && console.warn("If you do not provide children, you must specify an aria-label for accessibility");
-  let s = e.selectedValue === t, v = (x) => {
-    x.stopPropagation(), e.setSelectedValue(t);
-  }, { pressProps: m, isPressed: P } = C({
-    isDisabled: i
-  }), { pressProps: h, isPressed: b } = C({
-    isDisabled: i,
-    onPress() {
-      var x;
-      e.setSelectedValue(t), (x = d.current) === null || x === void 0 || x.focus();
-    }
-  }), { focusableProps: S } = te(y(a, {
-    onFocus: () => e.setLastFocusedValue(t)
-  }), d), I = y(m, S), V = F(a, {
-    labelable: !0
-  }), p = -1;
-  e.selectedValue != null ? e.selectedValue === t && (p = 0) : (e.lastFocusedValue === t || e.lastFocusedValue == null) && (p = 0), i && (p = void 0);
-  let { name: $, descriptionId: n, errorMessageId: R, validationBehavior: u } = _.get(e);
-  return re(d, e.selectedValue, e.setSelectedValue), oe({
-    validationBehavior: u
-  }, e, d), {
-    labelProps: y(h, {
-      onClick: (x) => x.preventDefault()
-    }),
-    inputProps: y(V, {
-      ...I,
-      type: "radio",
-      name: $,
-      tabIndex: p,
-      disabled: i,
-      required: e.isRequired && u === "native",
-      checked: s,
-      value: t,
-      onChange: v,
-      "aria-describedby": [
-        a["aria-describedby"],
-        e.isInvalid ? R : null,
-        n
-      ].filter(Boolean).join(" ") || void 0
-    }),
-    isDisabled: i,
-    isSelected: s,
-    isPressed: P || b
-  };
-}
-function Pe(a, e) {
-  let { name: d, isReadOnly: t, isRequired: o, isDisabled: r, orientation: l = "vertical", validationBehavior: i = "aria" } = a, { direction: c } = ue(), { isInvalid: f, validationErrors: s, validationDetails: v } = e.displayValidation, { labelProps: m, fieldProps: P, descriptionProps: h, errorMessageProps: b } = ce({
-    ...a,
-    // Radio group is not an HTML input element so it
-    // shouldn't be labeled by a <label> element.
-    labelElementType: "span",
-    isInvalid: e.isInvalid,
-    errorMessage: a.errorMessage || s
-  }), S = F(a, {
-    labelable: !0
-  }), { focusWithinProps: I } = ne({
-    onBlurWithin($) {
-      var n;
-      (n = a.onBlur) === null || n === void 0 || n.call(a, $), e.selectedValue || e.setLastFocusedValue(null);
-    },
-    onFocusWithin: a.onFocus,
-    onFocusWithinChange: a.onFocusChange
-  }), V = ($) => {
-    let n;
-    switch ($.key) {
-      case "ArrowRight":
-        c === "rtl" && l !== "vertical" ? n = "prev" : n = "next";
-        break;
-      case "ArrowLeft":
-        c === "rtl" && l !== "vertical" ? n = "next" : n = "prev";
-        break;
-      case "ArrowDown":
-        n = "next";
-        break;
-      case "ArrowUp":
-        n = "prev";
-        break;
-      default:
-        return;
-    }
-    $.preventDefault();
-    let R = se($.currentTarget, {
-      from: $.target
-    }), u;
-    n === "next" ? (u = R.nextNode(), u || (R.currentNode = $.currentTarget, u = R.firstChild())) : (u = R.previousNode(), u || (R.currentNode = $.currentTarget, u = R.lastChild())), u && (u.focus(), e.setSelectedValue(u.value));
-  }, p = ae(d);
-  return _.set(e, {
-    name: p,
-    descriptionId: h.id,
-    errorMessageId: b.id,
-    validationBehavior: i
-  }), {
-    radioGroupProps: y(S, {
-      // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
-      role: "radiogroup",
-      onKeyDown: V,
-      "aria-invalid": e.isInvalid || void 0,
-      "aria-errormessage": a["aria-errormessage"],
-      "aria-readonly": t || void 0,
-      "aria-required": o || void 0,
-      "aria-disabled": r || void 0,
-      "aria-orientation": l,
-      ...P,
-      ...I
-    }),
-    labelProps: m,
-    descriptionProps: h,
-    errorMessageProps: b,
-    isInvalid: f,
-    validationErrors: s,
-    validationDetails: v
-  };
-}
-let he = /* @__PURE__ */ Math.round(/* @__PURE__ */ Math.random() * 1e10), Re = 0;
-function xe(a) {
-  let e = q(() => a.name || `radio-group-${he}-${++Re}`, [
-    a.name
-  ]);
-  var d;
-  let [t, o] = be(a.value, (d = a.defaultValue) !== null && d !== void 0 ? d : null, a.onChange), [r, l] = de(null), i = le({
-    ...a,
-    value: t
-  }), c = (s) => {
-    !a.isReadOnly && !a.isDisabled && (o(s), i.commitValidation());
-  }, f = i.displayValidation.isInvalid;
-  return {
-    ...i,
-    name: e,
-    selectedValue: t,
-    setSelectedValue: c,
-    lastFocusedValue: r,
-    setLastFocusedValue: l,
-    isDisabled: a.isDisabled || !1,
-    isReadOnly: a.isReadOnly || !1,
-    isRequired: a.isRequired || !1,
-    validationState: a.validationState || (f ? "invalid" : null),
-    isInvalid: f
-  };
-}
-const ye = /* @__PURE__ */ B(null), Ie = /* @__PURE__ */ B(null), N = /* @__PURE__ */ B(null), Ve = /* @__PURE__ */ w(function(e, d) {
-  [e, d] = O(e, d, ye);
-  let { validationBehavior: t } = z(X) || {};
-  var o, r;
-  let l = (r = (o = e.validationBehavior) !== null && o !== void 0 ? o : t) !== null && r !== void 0 ? r : "native", i = xe({
-    ...e,
-    validationBehavior: l
-  }), [c, f] = J(!e["aria-label"] && !e["aria-labelledby"]), { radioGroupProps: s, labelProps: v, descriptionProps: m, errorMessageProps: P, ...h } = Pe({
-    ...e,
-    label: f,
-    validationBehavior: l
-  }, i), b = M({
-    ...e,
-    values: {
-      orientation: e.orientation || "vertical",
-      isDisabled: i.isDisabled,
-      isReadOnly: i.isReadOnly,
-      isRequired: i.isRequired,
-      isInvalid: i.isInvalid,
-      state: i
-    },
-    defaultClassName: "react-aria-RadioGroup"
-  });
-  return /* @__PURE__ */ g.createElement("div", {
-    ...s,
-    ...b,
-    ref: d,
-    slot: e.slot || void 0,
-    "data-orientation": e.orientation || "vertical",
-    "data-invalid": i.isInvalid || void 0,
-    "data-disabled": i.isDisabled || void 0,
-    "data-readonly": i.isReadOnly || void 0,
-    "data-required": i.isRequired || void 0
-  }, /* @__PURE__ */ g.createElement(Q, {
-    values: [
-      [
-        N,
-        i
-      ],
-      [
-        Y,
-        {
-          ...v,
-          ref: c,
-          elementType: "span"
-        }
-      ],
-      [
-        ee,
-        {
-          slots: {
-            description: m,
-            errorMessage: P
-          }
-        }
-      ],
-      [
-        Z,
-        h
-      ]
-    ]
-  }, b.children));
-}), De = /* @__PURE__ */ w(function(e, d) {
-  let { inputRef: t = null, ...o } = e;
-  [e, d] = O(o, d, Ie);
-  let r = g.useContext(N), l = ie(q(() => K(t, e.inputRef !== void 0 ? e.inputRef : null), [
-    t,
-    e.inputRef
-  ])), { labelProps: i, inputProps: c, isSelected: f, isDisabled: s, isPressed: v } = me({
-    ...U(e),
-    // ReactNode type doesn't allow function children.
-    children: typeof e.children == "function" ? !0 : e.children
-  }, r, l), { isFocused: m, isFocusVisible: P, focusProps: h } = k(), b = s || r.isReadOnly, { hoverProps: S, isHovered: I } = fe({
-    ...e,
-    isDisabled: b
-  }), V = M({
-    ...e,
-    defaultClassName: "react-aria-Radio",
-    values: {
-      isSelected: f,
-      isPressed: v,
-      isHovered: I,
-      isFocused: m,
-      isFocusVisible: P,
-      isDisabled: s,
-      isReadOnly: r.isReadOnly,
-      isInvalid: r.isInvalid,
-      isRequired: r.isRequired
-    }
-  }), p = F(e);
-  return delete p.id, /* @__PURE__ */ g.createElement("label", {
-    ...y(p, i, S, V),
-    ref: d,
-    "data-selected": f || void 0,
-    "data-pressed": v || void 0,
-    "data-hovered": I || void 0,
-    "data-focused": m || void 0,
-    "data-focus-visible": P || void 0,
-    "data-disabled": s || void 0,
-    "data-readonly": r.isReadOnly || void 0,
-    "data-invalid": r.isInvalid || void 0,
-    "data-required": r.isRequired || void 0
-  }, /* @__PURE__ */ g.createElement($e, {
-    elementType: "span"
-  }, /* @__PURE__ */ g.createElement("input", {
-    ...y(c, h),
-    ref: l
-  })), V.children);
-}), { withProvider: ge, withContext: Se } = /* @__PURE__ */ G({
-  key: "radioInput"
-}), Fe = /* @__PURE__ */ ge("div", "root"), Be = /* @__PURE__ */ Se("span", "option"), L = (a) => {
-  const e = j({ recipe: H }), [d, t] = e.splitVariantProps(a), [o, r] = E(t);
-  return /* @__PURE__ */ D(Fe, { ...d, ...o, asChild: !0, children: /* @__PURE__ */ D(Ve, { ...r, children: a.children }) });
-};
-L.displayName = "RadioInputRoot";
-const T = ({
-  children: a,
-  value: e,
-  ...d
-}) => {
-  const [t, o] = E(d), { isFocused: r, focusProps: l } = k();
-  return /* @__PURE__ */ D(
-    Be,
-    {
-      ...t,
-      ...l,
-      "data-focus": r || void 0,
-      asChild: !0,
-      children: /* @__PURE__ */ D(De, { value: e, ...o, children: (i) => {
-        const c = typeof a == "function" ? a({
-          ...i
-        }) : a;
-        return /* @__PURE__ */ W(A, { children: [
-          i.isSelected ? /* @__PURE__ */ D(pe, {}) : /* @__PURE__ */ D(ve, {}),
-          c
-        ] });
-      } })
-    }
-  );
-};
-T.displayName = "RadioInputOption";
-const ea = {
-  Root: L,
-  Option: T
-};
-export {
-  ea as R,
-  L as a,
-  T as b
-};
-//# sourceMappingURL=radio-input-4v_6tT94.js.map