@punkbit/cui 0.0.251-rc.16 → 0.2.0

package/dist/cjs/components/Icon/SvgImageElement.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponents = require('styled-components');
+
+const SvgImageElement = styledComponents.styled.svg.withConfig({
+  componentId: "sc-ddlgro-0"
+})(["display:flex;align-items:center;", ""], ({
+  theme,
+  $size
+}) => `
+      ${$size ? `
+        width: ${theme.click.image[$size].size.width};
+        height: ${theme.click.image[$size].size.height};
+      ` : ""}
+  `);
+
+exports.SvgImageElement = SvgImageElement;
+//# sourceMappingURL=SvgImageElement.cjs.map

package/dist/cjs/components/Icon/SvgImageElement.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgImageElement.cjs","sources":["../../../../src/components/Icon/SvgImageElement.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport type { AssetSize } from '@/types';\n\nexport const SvgImageElement = styled.svg<{\n  $size?: AssetSize;\n}>`\n  display: flex;\n  align-items: center;\n\n  ${({ theme, $size }) => `\n      ${\n        $size\n          ? `\n        width: ${theme.click.image[$size].size.width};\n        height: ${theme.click.image[$size].size.height};\n      `\n          : ''\n      }\n  `}\n`;\n"],"names":["SvgImageElement","styled","svg","withConfig","componentId","theme","$size","click","image","size","width","height"],"mappings":";;;;;;AAGO,MAAMA,eAAAA,GAAkBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,kCAAA,EAAA,EAAA,GAMrC,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC;AAAM,CAAA,KAAM;AAAA,MAAA,EAElBA,KAAAA,GACI;AAAA,eAAA,EACKD,MAAME,KAAAA,CAAMC,KAAAA,CAAMF,KAAK,CAAA,CAAEG,KAAKC,KAAK,CAAA;AAAA,gBAAA,EAClCL,MAAME,KAAAA,CAAMC,KAAAA,CAAMF,KAAK,CAAA,CAAEG,KAAKE,MAAM,CAAA;AAAA,MAAA,CAAA,GAE1C,EAAE;AAAA,EAAA,CAEX;;;;"}

package/dist/cjs/components/Icon/index.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+const IconCommon = require('./IconCommon.cjs');
+const Flag = require('../Assets/Flags/system/Flag.cjs');
+const FlagsLight = require('../Assets/Flags/system/FlagsLight.cjs');
+const Logo = require('../Assets/Logos/system/Logo.cjs');
+const LogosLight = require('../Assets/Logos/system/LogosLight.cjs');
+const Payment = require('../Assets/Payments/system/Payment.cjs');
+const PaymentsLight = require('../Assets/Payments/system/PaymentsLight.cjs');
+
+const SVGIcon = ({
+  name,
+  color,
+  width,
+  height,
+  state,
+  className,
+  size,
+  ...props
+}) => {
+  const Component = IconCommon.ICONS_MAP[name];
+  if (!Component) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size, className, state, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
+};
+const SvgWrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-17lqab4-0"
+})(["display:flex;align-items:center;", " ", ""], ({
+  theme,
+  $color = "currentColor",
+  $width,
+  $height,
+  $size
+}) => `
+    & path[stroke], & svg[stroke]:not([stroke="none"]), & rect[stroke], & circle[fill] {
+      stroke: ${$color};
+    }
+
+    & path[fill], & svg[fill]:not([fill="none"]), & rect[fill], & circle[fill] {
+      fill: ${$color};
+    }
+
+    & svg {
+      width: ${$width || theme.click.image[$size || "md"].size.width || "24px"};
+      height: ${$height || theme.click.image[$size || "md"].size.height || "24px"};
+    }
+  `, ({
+  theme,
+  $color = "currentColor",
+  state = "default",
+  $size = "md"
+}) => `
+    background: ${theme.click.icon.color.background[state]};
+    border-radius: ${theme.border.radii.full};
+    padding: ${state === "default" ? "none" : theme.click.icon.space[$size].all};
+    color: ${state === "default" ? $color : theme.click.icon.color.text[state]};
+  `);
+const SvgImage = ({
+  name,
+  size,
+  theme,
+  ...props
+}) => {
+  if (Object.keys(FlagsLight.default).includes(name)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Flag.Flag, { name, size, ...props });
+  }
+  if (Object.keys(LogosLight.default).includes(name)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Logo.Logo, { name, theme, size, ...props });
+  }
+  if (Object.keys(PaymentsLight.default).includes(name)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Payment.Payment, { name, size, ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(SVGIcon, { name, size, role: "img", "aria-label": name, ...props });
+};
+SvgImage.displayName = "Icon";
+
+exports.Icon = SvgImage;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport type { AssetSize } from '@/types';\nimport { IconName, IconProps, IconState, ImageType } from './Icon.types';\nimport { ICONS_MAP } from '@/components/Icon/IconCommon';\nimport { Flag } from '@/components/Assets/Flags/system/Flag';\nimport FlagsLight from '@/components/Assets/Flags/system/FlagsLight';\nimport { FlagName } from '@/components/Assets/Flags/system/types';\nimport { Logo } from '@/components/Assets/Logos/system/Logo';\nimport LogosLight from '@/components/Assets/Logos/system/LogosLight';\nimport { LogoName } from '@/components/Assets/Logos/system/types';\nimport { Payment } from '@/components/Assets/Payments/system/Payment';\nimport { PaymentName } from '@/components/Assets/Payments/system/types';\nimport PaymentsLight from '@/components/Assets/Payments/system/PaymentsLight';\n\nconst SVGIcon = ({\n  name,\n  color,\n  width,\n  height,\n  state,\n  className,\n  size,\n  ...props\n}: IconProps) => {\n  const Component = ICONS_MAP[name];\n\n  if (!Component) {\n    return null;\n  }\n\n  return (\n    <SvgWrapper\n      $color={color}\n      $width={width}\n      $height={height}\n      $size={size}\n      className={className}\n      state={state}\n    >\n      <Component {...props} />\n    </SvgWrapper>\n  );\n};\n\nconst SvgWrapper = styled.div<{\n  $color?: string;\n  $width?: number | string;\n  $height?: number | string;\n  $size?: AssetSize;\n  state?: IconState;\n}>`\n  display: flex;\n  align-items: center;\n\n  ${({ theme, $color = 'currentColor', $width, $height, $size }) => `\n    & path[stroke], & svg[stroke]:not([stroke=\"none\"]), & rect[stroke], & circle[fill] {\n      stroke: ${$color};\n    }\n\n    & path[fill], & svg[fill]:not([fill=\"none\"]), & rect[fill], & circle[fill] {\n      fill: ${$color};\n    }\n\n    & svg {\n      width: ${$width || theme.click.image[$size || 'md'].size.width || '24px'};\n      height: ${$height || theme.click.image[$size || 'md'].size.height || '24px'};\n    }\n  `}\n\n  ${({ theme, $color = 'currentColor', state = 'default', $size = 'md' }) => `\n    background: ${theme.click.icon.color.background[state]};\n    border-radius: ${theme.border.radii.full};\n    padding: ${state === 'default' ? 'none' : theme.click.icon.space[$size].all};\n    color: ${state === 'default' ? $color : theme.click.icon.color.text[state]};\n  `}\n`;\n\nconst SvgImage = ({ name, size, theme, ...props }: ImageType) => {\n  if (Object.keys(FlagsLight).includes(name)) {\n    return (\n      <Flag\n        name={name as FlagName}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  if (Object.keys(LogosLight).includes(name)) {\n    return (\n      <Logo\n        name={name as LogoName}\n        theme={theme}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  if (Object.keys(PaymentsLight).includes(name)) {\n    return (\n      <Payment\n        name={name as PaymentName}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  return (\n    <SVGIcon\n      name={name as IconName}\n      size={size}\n      role=\"img\"\n      aria-label={name}\n      {...props}\n    />\n  );\n};\n\nSvgImage.displayName = 'Icon';\n\nexport { SvgImage as Icon };\n"],"names":["SVGIcon","name","color","width","height","state","className","size","props","Component","ICONS_MAP","jsx","SvgWrapper","styled","div","withConfig","componentId","theme","$color","$width","$height","$size","click","image","icon","background","border","radii","full","space","all","text","SvgImage","Object","keys","FlagsLight","includes","Flag","LogosLight","Logo","PaymentsLight","Payment","displayName"],"mappings":"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"}

package/dist/cjs/components/IconButton/index.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const styledComponents = require('styled-components');
+const Icon = require('../Icon/index.cjs');
+
+const IconButton = react.forwardRef(({
+  type = "primary",
+  icon,
+  size,
+  disabled,
+  ...props
+}, ref) => {
+  const iconName = icon ? icon.toString() : "unknown icon";
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { ...props, $styleType: type, $size: size, disabled, ref, role: "button", "aria-label": iconName, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }) });
+});
+IconButton.displayName = "IconButton";
+const Button = styledComponents.styled.button.withConfig({
+  componentId: "sc-kyytfg-0"
+})(["", ""], ({
+  theme,
+  $size,
+  $styleType = "primary"
+}) => `
+  border-radius: ${theme.click.button.iconButton.radii.all};
+  border: ${theme.click.button.stroke} solid ${theme.click.button.iconButton.color[$styleType].stroke.default};
+  cursor: pointer;
+  padding: ${$size ? `${theme.click.button.iconButton[$size].space.y} ${theme.click.button.iconButton[$size].space.x}` : `${theme.click.button.iconButton.default.space.y} ${theme.click.button.iconButton.default.space.x}`};
+
+  background-color: ${theme.click.button.iconButton.color[$styleType].background.default};
+
+  color: ${theme.click.button.iconButton.color[$styleType].text.default};
+  &:not([disabled]) {
+    &:hover {
+      background-color: ${theme.click.button.iconButton.color[$styleType].background.hover};
+      color: ${theme.click.button.iconButton.color[$styleType].text.hover};
+      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.hover};
+    }
+
+    &:focus, &:active, &:focus-within {
+      background-color: ${theme.click.button.iconButton.color[$styleType].background.active};
+      color: ${theme.click.button.iconButton.color[$styleType].text.active};
+      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.active};
+    }
+  }
+  &:visited {
+    background-color: ${theme.click.button.iconButton.color[$styleType].background.default};
+  }
+
+  &[disabled] {
+    background-color: ${theme.click.button.iconButton.color.disabled.background.default};
+    color: ${theme.click.button.iconButton.color.disabled.text.default};
+    cursor: not-allowed;
+  }
+  `);
+
+exports.IconButton = IconButton;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ type = 'primary', icon, size, disabled, ...props }, ref) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <Button\n        {...props}\n        $styleType={type}\n        $size={size}\n        disabled={disabled}\n        ref={ref}\n        role=\"button\"\n        aria-label={iconName}\n      >\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      </Button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n\nconst Button = styled.button<{\n  $styleType?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'info';\n  $size?: 'default' | 'sm' | 'xs';\n}>`\n  ${({ theme, $size, $styleType = 'primary' }) => `\n  border-radius: ${theme.click.button.iconButton.radii.all};\n  border: ${theme.click.button.stroke} solid ${\n    theme.click.button.iconButton.color[$styleType].stroke.default\n  };\n  cursor: pointer;\n  padding: ${\n    $size\n      ? `${theme.click.button.iconButton[$size].space.y} ${theme.click.button.iconButton[$size].space.x}`\n      : `${theme.click.button.iconButton.default.space.y} ${theme.click.button.iconButton.default.space.x}`\n  };\n\n  background-color: ${theme.click.button.iconButton.color[$styleType].background.default};\n\n  color: ${theme.click.button.iconButton.color[$styleType].text.default};\n  &:not([disabled]) {\n    &:hover {\n      background-color: ${theme.click.button.iconButton.color[$styleType].background.hover};\n      color: ${theme.click.button.iconButton.color[$styleType].text.hover};\n      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.hover};\n    }\n\n    &:focus, &:active, &:focus-within {\n      background-color: ${\n        theme.click.button.iconButton.color[$styleType].background.active\n      };\n      color: ${theme.click.button.iconButton.color[$styleType].text.active};\n      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.active};\n    }\n  }\n  &:visited {\n    background-color: ${\n      theme.click.button.iconButton.color[$styleType].background.default\n    };\n  }\n\n  &[disabled] {\n    background-color: ${theme.click.button.iconButton.color.disabled.background.default};\n    color: ${theme.click.button.iconButton.color.disabled.text.default};\n    cursor: not-allowed;\n  }\n  `}\n`;\n"],"names":["IconButton","forwardRef","type","icon","size","disabled","props","ref","iconName","toString","jsx","Icon","displayName","Button","styled","button","withConfig","componentId","theme","$size","$styleType","click","iconButton","radii","all","stroke","color","default","space","y","x","background","text","hover","active"],"mappings":"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"}

package/dist/cjs/components/IconWrapper/index.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const Container = require('../Container/index.cjs');
+const Icon = require('../Icon/index.cjs');
+const EllipsisContent = require('../EllipsisContent/index.cjs');
+
+const IconWrapper = ({
+  icon,
+  iconDir = "start",
+  size = "sm",
+  width,
+  height,
+  children,
+  ellipsisContent = true,
+  gap = "sm",
+  isResponsive = true,
+  ...props
+}) => {
+  const TextWrapper = ellipsisContent ? EllipsisContent.EllipsisContent : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { orientation: "horizontal", gap, overflow: "hidden", isResponsive, ...props, children: [
+    icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size, width, height }),
+    /* @__PURE__ */ jsxRuntime.jsx(TextWrapper, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`, children }),
+    icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size, width, height })
+  ] });
+};
+
+exports.IconWrapper = IconWrapper;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { EllipsisContent } from '@/components/EllipsisContent';\nimport { Icon } from '@/components/Icon';\nimport { IconWrapperProps } from './IconWrapper.types';\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  size = 'sm',\n  width,\n  height,\n  children,\n  ellipsisContent = true,\n  gap = 'sm',\n  isResponsive = true,\n  ...props\n}: IconWrapperProps) => {\n  const TextWrapper = ellipsisContent ? EllipsisContent : 'div';\n  return (\n    <Container\n      orientation=\"horizontal\"\n      gap={gap}\n      overflow=\"hidden\"\n      isResponsive={isResponsive}\n      {...props}\n    >\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n      <TextWrapper\n        data-testid={`${ellipsisContent ? 'ellipsed' : 'normal'}-icon-wrapper-text`}\n      >\n        {children}\n      </TextWrapper>\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n    </Container>\n  );\n};\n"],"names":["IconWrapper","icon","iconDir","size","width","height","children","ellipsisContent","gap","isResponsive","props","TextWrapper","EllipsisContent","jsxs","Container","jsx","Icon"],"mappings":";;;;;;;;;AAKO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC,IAAAA,GAAO,IAAA;AAAA,EACPC,KAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,eAAAA,GAAkB,IAAA;AAAA,EAClBC,GAAAA,GAAM,IAAA;AAAA,EACNC,YAAAA,GAAe,IAAA;AAAA,EACf,GAAGC;AACa,CAAA,KAAM;AACtB,EAAA,MAAMC,WAAAA,GAAcJ,kBAAkBK,+BAAAA,GAAkB,KAAA;AACxD,EAAA,uBACEC,eAAA,CAACC,uBACC,WAAA,EAAY,YAAA,EACZ,KACA,QAAA,EAAS,QAAA,EACT,YAAA,EACA,GAAIJ,KAAAA,EAEHT,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,OAAAA,KAAY,2BACnBa,cAAA,CAACC,SAAA,EAAA,EACC,MAAMf,IAAAA,EACN,IAAA,EACA,OACA,MAAA,EAAe,CAAA;AAAA,oBAGnBc,cAAA,CAAC,eACC,aAAA,EAAa,CAAA,EAAGR,kBAAkB,UAAA,GAAa,QAAQ,sBAEtDD,QAAAA,EACH,CAAA;AAAA,IACCL,IAAAA,IAAQC,YAAY,KAAA,oBACnBa,cAAA,CAACC,aACC,IAAA,EAAMf,IAAAA,EACN,IAAA,EACA,KAAA,EACA,MAAA,EAAe;AAAA,GAAA,EAGrB,CAAA;AAEJ;;;;"}

package/dist/cjs/components/InputWrapper/index.cjs

@@ -0,0 +1,224 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+const FormRoot = require('../FormContainer/FormRoot.cjs');
+const FormElementContainer = require('../FormContainer/FormElementContainer.cjs');
+const Error = require('../FormContainer/Error.cjs');
+const Label = require('../Label/index.cjs');
+
+const Wrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-16fvple-0"
+})(["width:inherit;display:flex;align-items:center;justify-content:space-between;align-items:center;span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", ""], ({
+  theme,
+  $error,
+  $resize
+}) => `
+    gap: ${theme.click.field.space.gap};
+    border-radius: ${theme.click.field.radii.all};
+    font: ${theme.click.field.typography.fieldText.default};
+    color: ${theme.click.field.color.text.default};
+    border: 1px solid ${theme.click.field.color.stroke.default};
+    background: ${theme.click.field.color.background.default};
+
+    *:autofill,
+    *:-webkit-autofill  {
+      -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.default} inset;
+      -webkit-text-fill-color: ${theme.click.field.color.text.default};
+      caret-color: ${theme.click.field.color.text.default};
+    }
+
+    &:hover {
+      border: 1px solid ${theme.click.field.color.stroke.hover};
+      background: ${theme.click.field.color.background.hover};
+      color: ${theme.click.field.color.text.hover};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.hover} inset;
+        -webkit-text-fill-color: ${theme.click.field.color.text.hover};
+        caret-color: ${theme.click.field.color.text.hover};
+      }
+    }
+    ${$resize === "none" ? "" : `
+      resize: ${$resize};
+      overflow: auto;
+    `}
+    ${$error ? `
+      font: ${theme.click.field.typography.fieldText.error};
+      border: 1px solid ${theme.click.field.color.stroke.error};
+      background: ${theme.click.field.color.background.active};
+      color: ${theme.click.field.color.text.error};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;
+        -webkit-text-fill-color: ${theme.click.field.color.text.error};
+        caret-color: ${theme.click.field.color.text.error};
+      }
+
+      &:hover {
+        border: 1px solid ${theme.click.field.color.stroke.error};
+        color: ${theme.click.field.color.text.error};
+        *:autofill,
+        *:-webkit-autofill {
+          -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;
+          -webkit-text-fill-color: ${theme.click.field.color.text.error};
+          caret-color: ${theme.click.field.color.text.error};
+        }
+      }
+    ` : `
+    &:focus-within,
+    &[data-state="open"] {
+      font: ${theme.click.field.typography.fieldText.active};
+      border: 1px solid ${theme.click.field.color.stroke.active};
+      background: ${theme.click.field.color.background.active};
+      color: ${theme.click.field.color.text.active};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.active} inset;
+        -webkit-text-fill-color: ${theme.click.field.color.text.active};
+        caret-color: ${theme.click.field.color.text.active};
+      }
+    }
+    `};
+    &:disabled, &.disabled {
+      font: ${theme.click.field.typography.fieldText.disabled};
+      border: 1px solid ${theme.click.field.color.stroke.disabled};
+      background: ${theme.click.field.color.background.disabled};
+      color: ${theme.click.field.color.text.disabled};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.disabled} inset;
+        -webkit-text-fill-color: ${theme.click.field.color.text.disabled};
+        caret-color: ${theme.click.field.color.text.disabled};
+      }
+    }
+  `);
+const StyledLabel = styledComponents.styled(Label.Label).withConfig({
+  componentId: "sc-16fvple-1"
+})(["", ""], ({
+  $labelColor
+}) => `
+    ${$labelColor ? `color: ${$labelColor};` : ""}
+  `);
+const InputWrapper = ({
+  className,
+  id,
+  label = "",
+  labelColor,
+  error,
+  disabled,
+  children,
+  orientation,
+  dir,
+  resize = "none"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer.FormElementContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { $error: !!error, $resize: resize, "data-resize": resize, className: disabled ? `disabled ${className}` : className, children }),
+      !!error && error !== true && /* @__PURE__ */ jsxRuntime.jsx(Error.Error, { children: error })
+    ] }),
+    label && /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { htmlFor: id, disabled, error: !!error, $labelColor: labelColor, children: label })
+  ] });
+};
+const InputElement = styledComponents.styled.input.withConfig({
+  componentId: "sc-16fvple-2"
+})(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
+  theme,
+  $hasStartContent,
+  $hasEndContent
+}) => `
+    padding: ${theme.click.field.space.y} 0;
+    padding-left: ${$hasStartContent ? "0" : theme.click.field.space.x};
+    padding-right: ${$hasEndContent ? "0" : theme.click.field.space.x};
+    &::placeholder {
+      color: ${theme.click.field.color.placeholder.default};
+    }
+
+    &:disabled, &.disabled {
+      &::placeholder {
+      color: ${theme.click.field.color.placeholder.disabled};
+    }
+  `);
+const NumberInputElement = styledComponents.styled(InputElement).withConfig({
+  componentId: "sc-16fvple-3"
+})(["", ""], ({
+  $hideControls
+}) => `
+    ${$hideControls ? `
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    -moz-appearance: textfield;
+    ` : ""}
+  `);
+const TextAreaElement = styledComponents.styled.textarea.withConfig({
+  componentId: "sc-16fvple-4"
+})(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
+  theme
+}) => `
+    padding: ${theme.click.field.space.y} ${theme.click.field.space.x};
+    align-self: stretch;
+    &::placeholder {
+      color: ${theme.click.field.color.placeholder.default};
+    }
+  `);
+const IconButton = styledComponents.styled.button.withConfig({
+  componentId: "sc-16fvple-5"
+})(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
+  theme
+}) => `
+      padding: ${theme.click.field.space.y} 0;
+  `);
+styledComponents.styled.svg.withConfig({
+  componentId: "sc-16fvple-6"
+})(["", ""], ({
+  theme
+}) => `
+    &:first-of-type {
+      padding-left: ${theme.click.field.space.gap};
+    }
+    &:last-of-type {
+      padding-right: ${theme.click.field.space.x};
+    }
+  `);
+const InputStartContent = styledComponents.styled.div.withConfig({
+  componentId: "sc-16fvple-7"
+})(["", ""], ({
+  theme
+}) => `
+    padding-left: ${theme.click.field.space.x};
+    cursor: text;
+    gap: ${theme.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
+const InputEndContent = styledComponents.styled.div.withConfig({
+  componentId: "sc-16fvple-8"
+})(["white-space:nowrap;flex-shrink:0;", ""], ({
+  theme
+}) => `
+    padding-right: ${theme.click.field.space.x};
+    gap: ${theme.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
+
+exports.IconButton = IconButton;
+exports.InputElement = InputElement;
+exports.InputEndContent = InputEndContent;
+exports.InputStartContent = InputStartContent;
+exports.InputWrapper = InputWrapper;
+exports.NumberInputElement = NumberInputElement;
+exports.TextAreaElement = TextAreaElement;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { Label } from '@/components/Label';\nimport { styled } from 'styled-components';\nimport { ReactNode } from 'react';\n\nconst Wrapper = styled.div<{\n  $error: boolean;\n  $resize: 'none' | 'vertical' | 'horizontal' | 'both';\n}>`\n  width: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  align-items: center;\n\n  span:first-of-type {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  ${({ theme, $error, $resize }) => `\n    gap: ${theme.click.field.space.gap};\n    border-radius: ${theme.click.field.radii.all};\n    font: ${theme.click.field.typography.fieldText.default};\n    color: ${theme.click.field.color.text.default};\n    border: 1px solid ${theme.click.field.color.stroke.default};\n    background: ${theme.click.field.color.background.default};\n\n    *:autofill,\n    *:-webkit-autofill  {\n      -webkit-box-shadow: 0 0 0px 50vh ${\n        theme.click.field.color.background.default\n      } inset;\n      -webkit-text-fill-color: ${theme.click.field.color.text.default};\n      caret-color: ${theme.click.field.color.text.default};\n    }\n\n    &:hover {\n      border: 1px solid ${theme.click.field.color.stroke.hover};\n      background: ${theme.click.field.color.background.hover};\n      color: ${theme.click.field.color.text.hover};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${\n          theme.click.field.color.background.hover\n        } inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.hover};\n        caret-color: ${theme.click.field.color.text.hover};\n      }\n    }\n    ${\n      $resize === 'none'\n        ? ''\n        : `\n      resize: ${$resize};\n      overflow: auto;\n    `\n    }\n    ${\n      $error\n        ? `\n      font: ${theme.click.field.typography.fieldText.error};\n      border: 1px solid ${theme.click.field.color.stroke.error};\n      background: ${theme.click.field.color.background.active};\n      color: ${theme.click.field.color.text.error};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.error};\n        caret-color: ${theme.click.field.color.text.error};\n      }\n\n      &:hover {\n        border: 1px solid ${theme.click.field.color.stroke.error};\n        color: ${theme.click.field.color.text.error};\n        *:autofill,\n        *:-webkit-autofill {\n          -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;\n          -webkit-text-fill-color: ${theme.click.field.color.text.error};\n          caret-color: ${theme.click.field.color.text.error};\n        }\n      }\n    `\n        : `\n    &:focus-within,\n    &[data-state=\"open\"] {\n      font: ${theme.click.field.typography.fieldText.active};\n      border: 1px solid ${theme.click.field.color.stroke.active};\n      background: ${theme.click.field.color.background.active};\n      color: ${theme.click.field.color.text.active};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.active} inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.active};\n        caret-color: ${theme.click.field.color.text.active};\n      }\n    }\n    `\n    };\n    &:disabled, &.disabled {\n      font: ${theme.click.field.typography.fieldText.disabled};\n      border: 1px solid ${theme.click.field.color.stroke.disabled};\n      background: ${theme.click.field.color.background.disabled};\n      color: ${theme.click.field.color.text.disabled};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${\n          theme.click.field.color.background.disabled\n        } inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.disabled};\n        caret-color: ${theme.click.field.color.text.disabled};\n      }\n    }\n  `}\n`;\n\nconst StyledLabel = styled(Label)<{ $labelColor?: string }>`\n  ${({ $labelColor }) => `\n    ${$labelColor ? `color: ${$labelColor};` : ''}\n  `}\n`;\n\nexport interface WrapperProps {\n  className?: string;\n  id: string;\n  label?: ReactNode;\n  labelColor?: string;\n  error?: ReactNode;\n  disabled?: boolean;\n  children: ReactNode;\n  orientation?: 'vertical' | 'horizontal';\n  dir?: 'start' | 'end';\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n}\n\nexport const InputWrapper = ({\n  className,\n  id,\n  label = '',\n  labelColor,\n  error,\n  disabled,\n  children,\n  orientation,\n  dir,\n  resize = 'none',\n}: WrapperProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <Wrapper\n          $error={!!error}\n          $resize={resize}\n          data-resize={resize}\n          className={disabled ? `disabled ${className}` : className}\n        >\n          {children}\n        </Wrapper>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <StyledLabel\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n          $labelColor={labelColor}\n        >\n          {label}\n        </StyledLabel>\n      )}\n    </FormRoot>\n  );\n};\n\nexport const InputElement = styled.input<{\n  $hasStartContent?: boolean;\n  $hasEndContent?: boolean;\n}>`\n  background: transparent;\n  border: none;\n  outline: none;\n  width: 100%;\n  color: inherit;\n  font: inherit;\n  ${({ theme, $hasStartContent, $hasEndContent }) => `\n    padding: ${theme.click.field.space.y} 0;\n    padding-left: ${$hasStartContent ? '0' : theme.click.field.space.x};\n    padding-right: ${$hasEndContent ? '0' : theme.click.field.space.x};\n    &::placeholder {\n      color: ${theme.click.field.color.placeholder.default};\n    }\n\n    &:disabled, &.disabled {\n      &::placeholder {\n      color: ${theme.click.field.color.placeholder.disabled};\n    }\n  `}\n`;\n\nexport const NumberInputElement = styled(InputElement)<{ $hideControls?: boolean }>`\n  ${({ $hideControls }) => `\n    ${\n      $hideControls\n        ? `\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    -moz-appearance: textfield;\n    `\n        : ''\n    }\n  `}\n`;\n\nexport const TextAreaElement = styled.textarea`\n  background: transparent;\n  border: none;\n  outline: none;\n  width: 100%;\n  color: inherit;\n  font: inherit;\n  resize: none;\n  ${({ theme }) => `\n    padding: ${theme.click.field.space.y} ${theme.click.field.space.x};\n    align-self: stretch;\n    &::placeholder {\n      color: ${theme.click.field.color.placeholder.default};\n    }\n  `}\n`;\n\nexport const IconButton = styled.button`\n  background: transparent;\n  color: inherit;\n  border: none;\n  padding: 0;\n  outline: none;\n  &:not(:disabled) {\n    cursor: pointer;\n  }\n  ${({ theme }) => `\n      padding: ${theme.click.field.space.y} 0;\n  `}\n`;\n\nexport const IconWrapper = styled.svg`\n  ${({ theme }) => `\n    &:first-of-type {\n      padding-left: ${theme.click.field.space.gap};\n    }\n    &:last-of-type {\n      padding-right: ${theme.click.field.space.x};\n    }\n  `}\n`;\n\nexport const InputStartContent = styled.div`\n  ${({ theme }) => `\n    padding-left: ${theme.click.field.space.x};\n    cursor: text;\n    gap: ${theme.click.field.space.gap};\n    display: flex;\n    align-self: stretch;\n    align-items: center;\n  `}\n`;\n\nexport const InputEndContent = styled.div`\n  white-space: nowrap;\n  flex-shrink: 0;\n  ${({ theme }) => `\n    padding-right: ${theme.click.field.space.x};\n    gap: ${theme.click.field.space.gap};\n    display: flex;\n    align-self: stretch;\n    align-items: center;\n  `}\n`;\n"],"names":["Wrapper","styled","div","withConfig","componentId","theme","$error","$resize","click","field","space","gap","radii","all","typography","fieldText","default","color","text","stroke","background","hover","error","active","disabled","StyledLabel","Label","$labelColor","InputWrapper","className","id","label","labelColor","children","orientation","dir","resize","FormRoot","jsxs","FormElementContainer","jsx","Error","InputElement","input","$hasStartContent","$hasEndContent","y","x","placeholder","NumberInputElement","$hideControls","TextAreaElement","textarea","IconButton","button","svg","InputStartContent","InputEndContent"],"mappings":";;;;;;;;;;;AAKA,MAAMA,OAAAA,GAAUC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,8LAAA,EAAA,EAAA,GAiBtB,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,MAAAA;AAAAA,EAAQC;AAAQ,CAAA,KAAM;AAAA,SAAA,EACzBF,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,GAAG,CAAA;AAAA,mBAAA,EACjBN,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMG,KAAAA,CAAMC,GAAG,CAAA;AAAA,UAAA,EACpCR,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMK,UAAAA,CAAWC,UAAUC,OAAO,CAAA;AAAA,WAAA,EAC7CX,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKF,OAAO,CAAA;AAAA,sBAAA,EACzBX,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAME,OAAOH,OAAO,CAAA;AAAA,gBAAA,EAC5CX,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMG,WAAWJ,OAAO,CAAA;;AAAA;AAAA;AAAA,uCAAA,EAKpDX,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMG,WAAWJ,OAAO,CAAA;AAAA,+BAAA,EAEjBX,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKF,OAAO,CAAA;AAAA,mBAAA,EAChDX,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKF,OAAO,CAAA;AAAA;;AAAA;AAAA,wBAAA,EAI/BX,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAME,OAAOE,KAAK,CAAA;AAAA,kBAAA,EAC1ChB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMG,WAAWC,KAAK,CAAA;AAAA,aAAA,EAC7ChB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKG,KAAK,CAAA;;AAAA;AAAA;AAAA,yCAAA,EAKvChB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMG,WAAWC,KAAK,CAAA;AAAA,iCAAA,EAEfhB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKG,KAAK,CAAA;AAAA,qBAAA,EAC9ChB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKG,KAAK,CAAA;AAAA;AAAA;AAAA,IAAA,EAInDd,OAAAA,KAAY,SACR,EAAA,GACA;AAAA,cAAA,EACMA,OAAO,CAAA;AAAA;AAAA,IAAA,CAElB;AAAA,IAAA,EAGCD,MAAAA,GACI;AAAA,YAAA,EACID,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMK,UAAAA,CAAWC,UAAUO,KAAK,CAAA;AAAA,wBAAA,EAChCjB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAME,OAAOG,KAAK,CAAA;AAAA,kBAAA,EAC1CjB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMG,WAAWG,MAAM,CAAA;AAAA,aAAA,EAC9ClB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKI,KAAK,CAAA;;AAAA;AAAA;AAAA,yCAAA,EAINjB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMG,WAAWE,KAAK,CAAA;AAAA,iCAAA,EAChDjB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKI,KAAK,CAAA;AAAA,qBAAA,EAC9CjB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKI,KAAK,CAAA;AAAA;;AAAA;AAAA,0BAAA,EAI7BjB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAME,OAAOG,KAAK,CAAA;AAAA,eAAA,EAC/CjB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKI,KAAK,CAAA;AAAA;AAAA;AAAA,2CAAA,EAGNjB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMG,WAAWE,KAAK,CAAA;AAAA,mCAAA,EAChDjB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKI,KAAK,CAAA;AAAA,uBAAA,EAC9CjB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKI,KAAK,CAAA;AAAA;AAAA;AAAA,IAAA,CAAA,GAIjD;AAAA;AAAA;AAAA,YAAA,EAGIjB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMK,UAAAA,CAAWC,UAAUQ,MAAM,CAAA;AAAA,wBAAA,EACjClB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAME,OAAOI,MAAM,CAAA;AAAA,kBAAA,EAC3ClB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMG,WAAWG,MAAM,CAAA;AAAA,aAAA,EAC9ClB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKK,MAAM,CAAA;;AAAA;AAAA;AAAA,yCAAA,EAIPlB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMG,WAAWG,MAAM,CAAA;AAAA,iCAAA,EACjDlB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKK,MAAM,CAAA;AAAA,qBAAA,EAC/ClB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKK,MAAM,CAAA;AAAA;AAAA;AAAA,IAAA,CAGrD,CAAA;AAAA;AAAA,YAAA,EAGSlB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMK,UAAAA,CAAWC,UAAUS,QAAQ,CAAA;AAAA,wBAAA,EACnCnB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAME,OAAOK,QAAQ,CAAA;AAAA,kBAAA,EAC7CnB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMG,WAAWI,QAAQ,CAAA;AAAA,aAAA,EAChDnB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKM,QAAQ,CAAA;;AAAA;AAAA;AAAA,yCAAA,EAK1CnB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMG,WAAWI,QAAQ,CAAA;AAAA,iCAAA,EAElBnB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKM,QAAQ,CAAA;AAAA,qBAAA,EACjDnB,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAMC,KAAKM,QAAQ,CAAA;AAAA;AAAA;AAAA,EAAA,CAGzD,CAAA;AAGH,MAAMC,WAAAA,GAAcxB,uBAAAA,CAAOyB,WAAK,CAAA,CAACvB,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC7B,CAAC;AAAA,EAAEuB;AAAY,CAAA,KAAM;AAAA,IAAA,EACnBA,WAAAA,GAAc,CAAA,OAAA,EAAUA,WAAW,CAAA,CAAA,CAAA,GAAM,EAAE;AAAA,EAAA,CAC9C,CAAA;AAgBI,MAAMC,eAAeA,CAAC;AAAA,EAC3BC,SAAAA;AAAAA,EACAC,EAAAA;AAAAA,EACAC,KAAAA,GAAQ,EAAA;AAAA,EACRC,UAAAA;AAAAA,EACAV,KAAAA;AAAAA,EACAE,QAAAA;AAAAA,EACAS,QAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAC,MAAAA,GAAS;AACG,CAAA,KAAM;AAClB,EAAA,uCACGC,iBAAA,EAAA,EACC,YAAA,EAAcH,aACd,IAAA,EAAMC,GAAAA,EACN,kBAAgB,IAAA,EAEhB,QAAA,EAAA;AAAA,oBAAAG,eAAA,CAACC,yCAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,OAAA,EAAA,EACC,MAAA,EAAQ,CAAC,CAAClB,OACV,OAAA,EAASc,MAAAA,EACT,aAAA,EAAaA,MAAAA,EACb,WAAWZ,QAAAA,GAAW,CAAA,SAAA,EAAYK,SAAS,CAAA,CAAA,GAAKA,WAE/CI,QAAAA,EACH,CAAA;AAAA,MACC,CAAC,CAACX,KAAAA,IAASA,UAAU,IAAA,oBAAQkB,cAAA,CAACC,eAAOnB,QAAAA,EAAAA,KAAAA,EAAM;AAAA,KAAA,EAC9C,CAAA;AAAA,IACCS,KAAAA,oBACCS,cAAA,CAAC,WAAA,EAAA,EACC,OAAA,EAASV,EAAAA,EACT,QAAA,EACA,KAAA,EAAO,CAAC,CAACR,KAAAA,EACT,WAAA,EAAaU,UAAAA,EAEZD,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,MAAMW,YAAAA,GAAezC,uBAAAA,CAAO0C,KAAAA,CAAKxC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,wFAAA,EAAA,EAAA,GAUpC,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOuC,gBAAAA;AAAAA,EAAkBC;AAAe,CAAA,KAAM;AAAA,aAAA,EACtCxC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMoC,CAAC,CAAA;AAAA,kBAAA,EACpBF,mBAAmB,GAAA,GAAMvC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,MAAMqC,CAAC,CAAA;AAAA,mBAAA,EACjDF,iBAAiB,GAAA,GAAMxC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,MAAMqC,CAAC,CAAA;AAAA;AAAA,aAAA,EAEtD1C,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAM+B,YAAYhC,OAAO,CAAA;AAAA;;AAAA;AAAA;AAAA,aAAA,EAK3CX,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAM+B,YAAYxB,QAAQ,CAAA;AAAA;AAAA,EAAA,CAExD;AAGI,MAAMyB,kBAAAA,GAAqBhD,uBAAAA,CAAOyC,YAAY,CAAA,CAACvC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAClD,CAAC;AAAA,EAAE8C;AAAc,CAAA,KAAM;AAAA,IAAA,EAErBA,aAAAA,GACI;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,IAAA,CAAA,GASA,EAAE;AAAA,EAAA,CAET;AAGI,MAAMC,eAAAA,GAAkBlD,uBAAAA,CAAOmD,QAAAA,CAAQjD,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oGAAA,EAAA,EAAA,GAQ1C,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,aAAA,EACJA,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMoC,CAAC,IAAIzC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMqC,CAAC,CAAA;AAAA;AAAA;AAAA,aAAA,EAGtD1C,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAM+B,YAAYhC,OAAO,CAAA;AAAA;AAAA,EAAA,CAEvD;AAGI,MAAMqC,UAAAA,GAAapD,uBAAAA,CAAOqD,MAAAA,CAAMnD,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2GAAA,EAAA,EAAA,GASnC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,eAAA,EACFA,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMoC,CAAC,CAAA;AAAA,EAAA,CACvC;AAGwB7C,uBAAAA,CAAOsD,GAAAA,CAAGpD,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACjC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA;AAAA,oBAAA,EAEGA,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,GAAG,CAAA;AAAA;AAAA;AAAA,qBAAA,EAG1BN,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMqC,CAAC,CAAA;AAAA;AAAA,EAAA,CAE7C;AAGI,MAAMS,iBAAAA,GAAoBvD,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACvC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,kBAAA,EACCA,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMqC,CAAC,CAAA;AAAA;AAAA,SAAA,EAElC1C,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,GAAG,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAInC;AAGI,MAAM8C,eAAAA,GAAkBxD,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mCAAA,EAAA,EAAA,GAGrC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,mBAAA,EACEA,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMqC,CAAC,CAAA;AAAA,SAAA,EACnC1C,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,GAAG,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAInC;;;;;;;;;;"}

package/dist/cjs/components/Label/index.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+
+const FormFieldLabel = styledComponents.styled.label.withConfig({
+  componentId: "sc-jgt1gt-0"
+})(["", ""], ({
+  theme,
+  disabled,
+  $error
+}) => `
+    ${disabled ? `
+    color: ${theme.click.field.color.label.disabled};
+    font: ${theme.click.field.typography.label.disabled};
+    ` : $error ? `
+    color: ${theme.click.field.color.label.error};
+    font: ${theme.click.field.typography.label.error};
+    ` : `
+    color: ${theme.click.field.color.label.default};
+    font: ${theme.click.field.typography.label.default};
+    &:hover {
+      color: ${theme.click.field.color.label.hover};
+      font: ${theme.click.field.typography.label.hover};
+    }
+    &:focus, &:focus-within {
+      color: ${theme.click.field.color.label.active};
+      font: ${theme.click.field.typography.label.active};
+    }
+    `};
+  `);
+const Label = ({
+  disabled,
+  error,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(FormFieldLabel, { disabled, $error: error, ...props, children });
+
+exports.Label = Label;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Label/Label.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { LabelProps } from './Label.types';\n\ninterface FormFieldLableProps {\n  disabled?: boolean;\n  $error?: boolean;\n  htmlFor?: string;\n}\n\nconst FormFieldLabel = styled.label<FormFieldLableProps>`\n  ${({ theme, disabled, $error }) => `\n    ${\n      disabled\n        ? `\n    color: ${theme.click.field.color.label.disabled};\n    font: ${theme.click.field.typography.label.disabled};\n    `\n        : $error\n          ? `\n    color: ${theme.click.field.color.label.error};\n    font: ${theme.click.field.typography.label.error};\n    `\n          : `\n    color: ${theme.click.field.color.label.default};\n    font: ${theme.click.field.typography.label.default};\n    &:hover {\n      color: ${theme.click.field.color.label.hover};\n      font: ${theme.click.field.typography.label.hover};\n    }\n    &:focus, &:focus-within {\n      color: ${theme.click.field.color.label.active};\n      font: ${theme.click.field.typography.label.active};\n    }\n    `\n    };\n  `}\n`;\n\nexport const Label = ({ disabled, error, children, ...props }: LabelProps) => (\n  <FormFieldLabel\n    disabled={disabled}\n    $error={error}\n    {...props}\n  >\n    {children}\n  </FormFieldLabel>\n);\n"],"names":["FormFieldLabel","styled","label","withConfig","componentId","theme","disabled","$error","click","field","color","typography","error","default","hover","active","Label","children","props"],"mappings":";;;;;;;AASA,MAAMA,cAAAA,GAAiBC,uBAAAA,CAAOC,KAAAA,CAAKC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC/B,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,QAAAA;AAAAA,EAAUC;AAAO,CAAA,KAAM;AAAA,IAAA,EAE/BD,QAAAA,GACI;AAAA,WAAA,EACGD,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMI,QAAQ,CAAA;AAAA,UAAA,EACvCD,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMI,QAAQ,CAAA;AAAA,IAAA,CAAA,GAE7CC,MAAAA,GACE;AAAA,WAAA,EACCF,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMU,KAAK,CAAA;AAAA,UAAA,EACpCP,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMU,KAAK,CAAA;AAAA,IAAA,CAAA,GAExC;AAAA,WAAA,EACCP,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMW,OAAO,CAAA;AAAA,UAAA,EACtCR,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMW,OAAO,CAAA;AAAA;AAAA,aAAA,EAEvCR,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMY,KAAK,CAAA;AAAA,YAAA,EACpCT,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMY,KAAK,CAAA;AAAA;AAAA;AAAA,aAAA,EAGvCT,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMa,MAAM,CAAA;AAAA,YAAA,EACrCV,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMa,MAAM,CAAA;AAAA;AAAA,IAAA,CAElD,CAAA;AAAA,EAAA,CAEF,CAAA;AAGI,MAAMC,QAAQA,CAAC;AAAA,EAAEV,QAAAA;AAAAA,EAAUM,KAAAA;AAAAA,EAAOK,QAAAA;AAAAA,EAAU,GAAGC;AAAkB,CAAA,oCACrE,cAAA,EAAA,EACC,QAAA,EACA,QAAQN,KAAAA,EACR,GAAIM,OAEHD,QAAAA,EACH;;;;"}

package/dist/cjs/components/Link/common.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponents = require('styled-components');
+
+const linkStyles = styledComponents.css(["font:", ";color:", ";margin:0;text-decoration:none;display:inline-flex;gap:", ";margin-right:", ";align-items:center;&:hover,&:focus{color:", ";transition:", ";text-decoration:underline;cursor:pointer;}&:visited{color:", ";}"], ({
+  $size,
+  $weight = "normal",
+  theme
+}) => theme.typography.styles.product.text[$weight][$size], ({
+  theme
+}) => theme.click.global.color.text.link.default, ({
+  $size,
+  theme
+}) => $size === "xs" || $size === "sm" ? theme.click.link.space.sm.gap : theme.click.link.space.md.gap, ({
+  $size,
+  theme
+}) => $size === "xs" || $size === "sm" ? theme.click.link.space.sm.gap : theme.click.link.space.md.gap, ({
+  theme
+}) => theme.click.global.color.text.link.hover, ({
+  theme
+}) => theme.transition.default, ({
+  theme
+}) => theme.click.global.color.text.link.default);
+
+exports.linkStyles = linkStyles;
+//# sourceMappingURL=common.cjs.map

package/dist/cjs/components/Link/common.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.cjs","sources":["../../../../src/components/Link/common.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport type StyledLinkProps = { $size: TextSize; $weight: TextWeight };\n\nexport const linkStyles = css<StyledLinkProps>`\n  font: ${({ $size, $weight = 'normal', theme }) =>\n    theme.typography.styles.product.text[$weight][$size]};\n  color: ${({ theme }) => theme.click.global.color.text.link.default};\n  margin: 0;\n  text-decoration: none;\n  display: inline-flex;\n  gap: ${({ $size, theme }) =>\n    $size === 'xs' || $size === 'sm'\n      ? theme.click.link.space.sm.gap\n      : theme.click.link.space.md.gap};\n  margin-right: ${({ $size, theme }) =>\n    $size === 'xs' || $size === 'sm'\n      ? theme.click.link.space.sm.gap\n      : theme.click.link.space.md.gap};\n  align-items: center;\n\n  &:hover,\n  &:focus {\n    color: ${({ theme }) => theme.click.global.color.text.link.hover};\n    transition: ${({ theme }) => theme.transition.default};\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:visited {\n    color: ${({ theme }) => theme.click.global.color.text.link.default};\n  }\n`;\n"],"names":["linkStyles","css","$size","$weight","theme","typography","styles","product","text","click","global","color","link","default","space","sm","gap","md","hover","transition"],"mappings":";;;;;;AAKO,MAAMA,UAAAA,GAAaC,oBAAAA,uOAChB,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,OAAAA,GAAU,QAAA;AAAA,EAAUC;AAAM,CAAA,KAC1CA,KAAAA,CAAMC,WAAWC,MAAAA,CAAOC,OAAAA,CAAQC,KAAKL,OAAO,CAAA,CAAED,KAAK,CAAA,EAC5C,CAAC;AAAA,EAAEE;AAAM,CAAA,KAAMA,MAAMK,KAAAA,CAAMC,MAAAA,CAAOC,MAAMH,IAAAA,CAAKI,IAAAA,CAAKC,SAIpD,CAAC;AAAA,EAAEX,KAAAA;AAAAA,EAAOE;AAAM,CAAA,KACrBF,UAAU,IAAA,IAAQA,KAAAA,KAAU,IAAA,GACxBE,KAAAA,CAAMK,MAAMG,IAAAA,CAAKE,KAAAA,CAAMC,EAAAA,CAAGC,GAAAA,GAC1BZ,MAAMK,KAAAA,CAAMG,IAAAA,CAAKE,KAAAA,CAAMG,EAAAA,CAAGD,KAChB,CAAC;AAAA,EAAEd,KAAAA;AAAAA,EAAOE;AAAM,CAAA,KAC9BF,UAAU,IAAA,IAAQA,KAAAA,KAAU,IAAA,GACxBE,KAAAA,CAAMK,MAAMG,IAAAA,CAAKE,KAAAA,CAAMC,EAAAA,CAAGC,GAAAA,GAC1BZ,MAAMK,KAAAA,CAAMG,IAAAA,CAAKE,KAAAA,CAAMG,EAAAA,CAAGD,KAKrB,CAAC;AAAA,EAAEZ;AAAM,CAAA,KAAMA,MAAMK,KAAAA,CAAMC,MAAAA,CAAOC,MAAMH,IAAAA,CAAKI,IAAAA,CAAKM,OAC7C,CAAC;AAAA,EAAEd;AAAM,CAAA,KAAMA,KAAAA,CAAMe,UAAAA,CAAWN,OAAAA,EAMrC,CAAC;AAAA,EAAET;AAAM,CAAA,KAAMA,MAAMK,KAAAA,CAAMC,MAAAA,CAAOC,KAAAA,CAAMH,IAAAA,CAAKI,KAAKC,OAAO;;;;"}

package/dist/cjs/components/Link/index.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const styledComponents = require('styled-components');
+const common = require('./common.cjs');
+const Icon = require('../Icon/index.cjs');
+
+const CuiLink = styledComponents.styled.a.withConfig({
+  componentId: "sc-5mckq8-0"
+})(["", ""], common.linkStyles);
+const IconWrapper = styledComponents.styled.span.withConfig({
+  componentId: "sc-5mckq8-1"
+})([".external-icon{height:", ";width:", ";}"], ({
+  $size,
+  theme
+}) => $size === "xs" || $size === "sm" ? theme.click.link.icon.size.sm.height : theme.click.link.icon.size.md.height, ({
+  $size,
+  theme
+}) => $size === "xs" || $size === "sm" ? theme.click.link.icon.size.sm.width : theme.click.link.icon.size.md.width);
+const _Link = ({
+  size = "md",
+  weight = "normal",
+  onClick,
+  icon,
+  children,
+  component,
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntime.jsxs(CuiLink, { ref, $size: size, $weight: weight, as: component ?? "a", onClick, ...props, children: [
+  children,
+  icon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { $size: size, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: "external-icon", "data-testid": icon }) })
+] });
+const Link = react.forwardRef(_Link);
+
+exports.Link = Link;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { styled } from 'styled-components';\nimport { linkStyles } from './common';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst CuiLink = styled.a<{ $size: TextSize; $weight: TextWeight }>`\n  ${linkStyles}\n`;\n\nconst IconWrapper = styled.span<{ $size: TextSize }>`\n  .external-icon {\n    height: ${({ $size, theme }) =>\n      $size === 'xs' || $size === 'sm'\n        ? theme.click.link.icon.size.sm.height\n        : theme.click.link.icon.size.md.height};\n    width: ${({ $size, theme }) =>\n      $size === 'xs' || $size === 'sm'\n        ? theme.click.link.icon.size.sm.width\n        : theme.click.link.icon.size.md.width};\n  }\n`;\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof T> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    ...props\n  }: Omit<ComponentProps<T>, keyof T> & LinkProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <CuiLink\n    ref={ref}\n    $size={size}\n    $weight={weight}\n    as={component ?? 'a'}\n    onClick={onClick}\n    {...props}\n  >\n    {children}\n    {icon && (\n      <IconWrapper $size={size}>\n        <Icon\n          name={icon}\n          className=\"external-icon\"\n          data-testid={icon}\n        />\n      </IconWrapper>\n    )}\n  </CuiLink>\n);\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["CuiLink","styled","a","withConfig","componentId","linkStyles","IconWrapper","span","$size","theme","click","link","icon","size","sm","height","md","width","_Link","weight","onClick","children","component","props","ref","jsxs","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;AA6BA,MAAMA,OAAAA,GAAUC,uBAAAA,CAAOC,CAAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACpBC,iBAAU,CAAA;AAGd,MAAMC,WAAAA,GAAcL,uBAAAA,CAAOM,IAAAA,CAAIJ,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,wBAAA,EAAA,SAAA,EAAA,IAAA,GAEjB,CAAC;AAAA,EAAEI,KAAAA;AAAAA,EAAOC;AAAM,CAAA,KACxBD,UAAU,IAAA,IAAQA,KAAAA,KAAU,OACxBC,KAAAA,CAAMC,KAAAA,CAAMC,KAAKC,IAAAA,CAAKC,IAAAA,CAAKC,EAAAA,CAAGC,MAAAA,GAC9BN,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,KAAKC,IAAAA,CAAKG,EAAAA,CAAGD,QAC3B,CAAC;AAAA,EAAEP,KAAAA;AAAAA,EAAOC;AAAM,CAAA,KACvBD,UAAU,IAAA,IAAQA,KAAAA,KAAU,IAAA,GACxBC,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,IAAAA,CAAKC,IAAAA,CAAKC,EAAAA,CAAGG,QAC9BR,KAAAA,CAAMC,KAAAA,CAAMC,KAAKC,IAAAA,CAAKC,IAAAA,CAAKG,GAAGC,KAAK,CAAA;AAS7C,MAAMC,QAAQ,CACZ;AAAA,EACEL,IAAAA,GAAO,IAAA;AAAA,EACPM,MAAAA,GAAS,QAAA;AAAA,EACTC,OAAAA;AAAAA,EACAR,IAAAA;AAAAA,EACAS,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AAC4C,CAAA,EACjDC,GAAAA,qBAEAC,eAAA,CAAC,OAAA,EAAA,EACC,GAAA,EACA,KAAA,EAAOZ,IAAAA,EACP,OAAA,EAASM,MAAAA,EACT,EAAA,EAAIG,SAAAA,IAAa,GAAA,EACjB,OAAA,EACA,GAAIC,KAAAA,EAEHF,QAAAA,EAAAA;AAAAA,EAAAA,QAAAA;AAAAA,EACAT,IAAAA,oBACCc,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAOb,IAAAA,EAClB,QAAA,kBAAAa,cAAA,CAACC,SAAA,EAAA,EACC,IAAA,EAAMf,IAAAA,EACN,SAAA,EAAU,eAAA,EACV,aAAA,EAAaA,MAAK,CAAA,EAEtB;AAAA,CAAA,EAEJ,CAAA;AAEK,MAAMgB,IAAAA,GAAiCC,iBAAWX,KAAK;;;;"}