@punkbit/cui 0.0.248-rc.1 → 0.2.0-rc.3

package/dist/esm/components/Icon/index.js

@@ -0,0 +1,79 @@
+import { jsx } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+import { ICONS_MAP } from './IconCommon.js';
+import { Flag } from '../Assets/Flags/system/Flag.js';
+import FlagsLight from '../Assets/Flags/system/FlagsLight.js';
+import { Logo } from '../Assets/Logos/system/Logo.js';
+import LogosLight from '../Assets/Logos/system/LogosLight.js';
+import { Payment } from '../Assets/Payments/system/Payment.js';
+import PaymentsLight from '../Assets/Payments/system/PaymentsLight.js';
+
+const SVGIcon = ({
+  name,
+  color,
+  width,
+  height,
+  state,
+  className,
+  size,
+  ...props
+}) => {
+  const Component = ICONS_MAP[name];
+  if (!Component) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size, className, state, children: /* @__PURE__ */ jsx(Component, { ...props }) });
+};
+const SvgWrapper = 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).includes(name)) {
+    return /* @__PURE__ */ jsx(Flag, { name, size, ...props });
+  }
+  if (Object.keys(LogosLight).includes(name)) {
+    return /* @__PURE__ */ jsx(Logo, { name, theme, size, ...props });
+  }
+  if (Object.keys(PaymentsLight).includes(name)) {
+    return /* @__PURE__ */ jsx(Payment, { name, size, ...props });
+  }
+  return /* @__PURE__ */ jsx(SVGIcon, { name, size, role: "img", "aria-label": name, ...props });
+};
+SvgImage.displayName = "Icon";
+
+export { SvgImage as Icon };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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","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","LogosLight","PaymentsLight","displayName"],"mappings":"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"}

package/dist/esm/components/IconButton/index.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { styled } from 'styled-components';
+import { Icon as SvgImage } from '../Icon/index.js';
+
+const IconButton = forwardRef(({
+  type = "primary",
+  icon,
+  size,
+  disabled,
+  ...props
+}, ref) => {
+  const iconName = icon ? icon.toString() : "unknown icon";
+  return /* @__PURE__ */ jsx(Button, { ...props, $styleType: type, $size: size, disabled, ref, role: "button", "aria-label": iconName, children: /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm" }) });
+});
+IconButton.displayName = "IconButton";
+const Button = 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;
+  }
+  `);
+
+export { IconButton };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/IconButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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","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":";;;;;AAKO,MAAMA,UAAAA,GAAaC,WACxB,CAAC;AAAA,EAAEC,IAAAA,GAAO,SAAA;AAAA,EAAWC,IAAAA;AAAAA,EAAMC,IAAAA;AAAAA,EAAMC,QAAAA;AAAAA,EAAU,GAAGC;AAAM,CAAA,EAAGC,GAAAA,KAAQ;AAC7D,EAAA,MAAMC,QAAAA,GAAWL,IAAAA,GAAOA,IAAAA,CAAKM,QAAAA,EAAS,GAAI,cAAA;AAE1C,EAAA,uBACE,GAAA,CAAC,UACC,GAAIH,KAAAA,EACJ,YAAYJ,IAAAA,EACZ,KAAA,EAAOE,MACP,QAAA,EACA,GAAA,EACA,MAAK,QAAA,EACL,YAAA,EAAYI,UAEZ,QAAA,kBAAA,GAAA,CAACE,QAAA,EAAA,EACC,MAAMP,IAAAA,EACN,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAEJ,CACF;AAEAH,UAAAA,CAAWW,WAAAA,GAAc,YAAA;AAEzB,MAAMC,MAAAA,GAASC,MAAAA,CAAOC,MAAAA,CAAMC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAIxB,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,KAAAA;AAAAA,EAAOC,UAAAA,GAAa;AAAU,CAAA,KAAM;AAAA,iBAAA,EAC/BF,KAAAA,CAAMG,KAAAA,CAAMN,MAAAA,CAAOO,UAAAA,CAAWC,MAAMC,GAAG,CAAA;AAAA,UAAA,EAC9CN,KAAAA,CAAMG,KAAAA,CAAMN,MAAAA,CAAOU,MAAM,CAAA,OAAA,EACjCP,KAAAA,CAAMG,KAAAA,CAAMN,MAAAA,CAAOO,UAAAA,CAAWI,KAAAA,CAAMN,UAAU,CAAA,CAAEK,OAAOE,OAAO,CAAA;AAAA;AAAA,WAAA,EAI9DR,QACI,CAAA,EAAGD,KAAAA,CAAMG,KAAAA,CAAMN,MAAAA,CAAOO,WAAWH,KAAK,CAAA,CAAES,KAAAA,CAAMC,CAAC,IAAIX,KAAAA,CAAMG,KAAAA,CAAMN,MAAAA,CAAOO,UAAAA,CAAWH,KAAK,CAAA,CAAES,KAAAA,CAAME,CAAC,CAAA,CAAA,GAC/F,GAAGZ,KAAAA,CAAMG,KAAAA,CAAMN,MAAAA,CAAOO,UAAAA,CAAWK,QAAQC,KAAAA,CAAMC,CAAC,CAAA,CAAA,EAAIX,KAAAA,CAAMG,MAAMN,MAAAA,CAAOO,UAAAA,CAAWK,OAAAA,CAAQC,KAAAA,CAAME,CAAC,CAAA,CAAE,CAAA;;AAAA,oBAAA,EAGrFZ,KAAAA,CAAMG,MAAMN,MAAAA,CAAOO,UAAAA,CAAWI,MAAMN,UAAU,CAAA,CAAEW,WAAWJ,OAAO,CAAA;;AAAA,SAAA,EAE7ET,KAAAA,CAAMG,MAAMN,MAAAA,CAAOO,UAAAA,CAAWI,MAAMN,UAAU,CAAA,CAAEY,KAAKL,OAAO,CAAA;AAAA;AAAA;AAAA,wBAAA,EAG7CT,KAAAA,CAAMG,MAAMN,MAAAA,CAAOO,UAAAA,CAAWI,MAAMN,UAAU,CAAA,CAAEW,WAAWE,KAAK,CAAA;AAAA,aAAA,EAC3Ef,KAAAA,CAAMG,MAAMN,MAAAA,CAAOO,UAAAA,CAAWI,MAAMN,UAAU,CAAA,CAAEY,KAAKC,KAAK,CAAA;AAAA,oBAAA,EACnDf,KAAAA,CAAMG,MAAMN,MAAAA,CAAOO,UAAAA,CAAWI,MAAMN,UAAU,CAAA,CAAEK,OAAOQ,KAAK,CAAA;AAAA;;AAAA;AAAA,wBAAA,EAK1Ef,KAAAA,CAAMG,MAAMN,MAAAA,CAAOO,UAAAA,CAAWI,MAAMN,UAAU,CAAA,CAAEW,WAAWG,MAAM,CAAA;AAAA,aAAA,EAE1DhB,KAAAA,CAAMG,MAAMN,MAAAA,CAAOO,UAAAA,CAAWI,MAAMN,UAAU,CAAA,CAAEY,KAAKE,MAAM,CAAA;AAAA,oBAAA,EACpDhB,KAAAA,CAAMG,MAAMN,MAAAA,CAAOO,UAAAA,CAAWI,MAAMN,UAAU,CAAA,CAAEK,OAAOS,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA,sBAAA,EAK7EhB,KAAAA,CAAMG,MAAMN,MAAAA,CAAOO,UAAAA,CAAWI,MAAMN,UAAU,CAAA,CAAEW,WAAWJ,OAAO,CAAA;AAAA;;AAAA;AAAA,sBAAA,EAKhDT,MAAMG,KAAAA,CAAMN,MAAAA,CAAOO,WAAWI,KAAAA,CAAMpB,QAAAA,CAASyB,WAAWJ,OAAO,CAAA;AAAA,WAAA,EAC1ET,MAAMG,KAAAA,CAAMN,MAAAA,CAAOO,WAAWI,KAAAA,CAAMpB,QAAAA,CAAS0B,KAAKL,OAAO,CAAA;AAAA;AAAA;AAAA,EAAA,CAGnE,CAAA;;;;"}

package/dist/esm/components/IconWrapper/index.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Container } from '../Container/index.js';
+import { Icon as SvgImage } from '../Icon/index.js';
+import { EllipsisContent } from '../EllipsisContent/index.js';
+
+const IconWrapper = ({
+  icon,
+  iconDir = "start",
+  size = "sm",
+  width,
+  height,
+  children,
+  ellipsisContent = true,
+  gap = "sm",
+  isResponsive = true,
+  ...props
+}) => {
+  const TextWrapper = ellipsisContent ? EllipsisContent : "div";
+  return /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap, overflow: "hidden", isResponsive, ...props, children: [
+    icon && iconDir === "start" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size, width, height }),
+    /* @__PURE__ */ jsx(TextWrapper, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`, children }),
+    icon && iconDir === "end" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size, width, height })
+  ] });
+};
+
+export { IconWrapper };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/IconWrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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","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,eAAAA,GAAkB,KAAA;AACxD,EAAA,uBACE,IAAA,CAAC,aACC,WAAA,EAAY,YAAA,EACZ,KACA,QAAA,EAAS,QAAA,EACT,YAAA,EACA,GAAIF,KAAAA,EAEHT,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,OAAAA,KAAY,2BACnB,GAAA,CAACW,QAAA,EAAA,EACC,MAAMZ,IAAAA,EACN,IAAA,EACA,OACA,MAAA,EAAe,CAAA;AAAA,oBAGnB,GAAA,CAAC,eACC,aAAA,EAAa,CAAA,EAAGM,kBAAkB,UAAA,GAAa,QAAQ,sBAEtDD,QAAAA,EACH,CAAA;AAAA,IACCL,IAAAA,IAAQC,YAAY,KAAA,oBACnB,GAAA,CAACW,YACC,IAAA,EAAMZ,IAAAA,EACN,IAAA,EACA,KAAA,EACA,MAAA,EAAe;AAAA,GAAA,EAGrB,CAAA;AAEJ;;;;"}

package/dist/esm/components/InputWrapper/index.js

@@ -0,0 +1,214 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+import { FormRoot } from '../FormContainer/FormRoot.js';
+import { FormElementContainer } from '../FormContainer/FormElementContainer.js';
+import { Error } from '../FormContainer/Error.js';
+import { Label } from '../Label/index.js';
+
+const Wrapper = 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 = styled(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__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
+    /* @__PURE__ */ jsxs(FormElementContainer, { children: [
+      /* @__PURE__ */ jsx(Wrapper, { $error: !!error, $resize: resize, "data-resize": resize, className: disabled ? `disabled ${className}` : className, children }),
+      !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
+    ] }),
+    label && /* @__PURE__ */ jsx(StyledLabel, { htmlFor: id, disabled, error: !!error, $labelColor: labelColor, children: label })
+  ] });
+};
+const InputElement = 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 = 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 = 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 = 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;
+  `);
+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 = 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 = 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;
+  `);
+
+export { IconButton, InputElement, InputEndContent, InputStartContent, InputWrapper, NumberInputElement, TextAreaElement };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/InputWrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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","InputElement","input","$hasStartContent","$hasEndContent","y","x","placeholder","NumberInputElement","$hideControls","TextAreaElement","textarea","IconButton","button","svg","InputStartContent","InputEndContent"],"mappings":";;;;;;;AAKA,MAAMA,OAAAA,GAAUC,MAAAA,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,MAAAA,CAAOyB,KAAK,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,4BACG,QAAA,EAAA,EACC,YAAA,EAAcF,aACd,IAAA,EAAMC,GAAAA,EACN,kBAAgB,IAAA,EAEhB,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,oBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAA,EAAA,EACC,MAAA,EAAQ,CAAC,CAACb,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,oBAAQ,GAAA,CAAC,SAAOA,QAAAA,EAAAA,KAAAA,EAAM;AAAA,KAAA,EAC9C,CAAA;AAAA,IACCS,KAAAA,oBACC,GAAA,CAAC,WAAA,EAAA,EACC,OAAA,EAASD,EAAAA,EACT,QAAA,EACA,KAAA,EAAO,CAAC,CAACR,KAAAA,EACT,WAAA,EAAaU,UAAAA,EAEZD,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,MAAMM,YAAAA,GAAepC,MAAAA,CAAOqC,KAAAA,CAAKnC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,wFAAA,EAAA,EAAA,GAUpC,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOkC,gBAAAA;AAAAA,EAAkBC;AAAe,CAAA,KAAM;AAAA,aAAA,EACtCnC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAM+B,CAAC,CAAA;AAAA,kBAAA,EACpBF,mBAAmB,GAAA,GAAMlC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,MAAMgC,CAAC,CAAA;AAAA,mBAAA,EACjDF,iBAAiB,GAAA,GAAMnC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,MAAMgC,CAAC,CAAA;AAAA;AAAA,aAAA,EAEtDrC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAM0B,YAAY3B,OAAO,CAAA;AAAA;;AAAA;AAAA;AAAA,aAAA,EAK3CX,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAM0B,YAAYnB,QAAQ,CAAA;AAAA;AAAA,EAAA,CAExD;AAGI,MAAMoB,kBAAAA,GAAqB3C,MAAAA,CAAOoC,YAAY,CAAA,CAAClC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAClD,CAAC;AAAA,EAAEyC;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,GAAkB7C,MAAAA,CAAO8C,QAAAA,CAAQ5C,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,CAAM+B,CAAC,IAAIpC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMgC,CAAC,CAAA;AAAA;AAAA;AAAA,aAAA,EAGtDrC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMQ,KAAAA,CAAM0B,YAAY3B,OAAO,CAAA;AAAA;AAAA,EAAA,CAEvD;AAGI,MAAMgC,UAAAA,GAAa/C,MAAAA,CAAOgD,MAAAA,CAAM9C,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,CAAM+B,CAAC,CAAA;AAAA,EAAA,CACvC;AAGwBxC,MAAAA,CAAOiD,GAAAA,CAAG/C,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,CAAMgC,CAAC,CAAA;AAAA;AAAA,EAAA,CAE7C;AAGI,MAAMS,iBAAAA,GAAoBlD,MAAAA,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,CAAMgC,CAAC,CAAA;AAAA;AAAA,SAAA,EAElCrC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,GAAG,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAInC;AAGI,MAAMyC,eAAAA,GAAkBnD,MAAAA,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,CAAMgC,CAAC,CAAA;AAAA,SAAA,EACnCrC,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,GAAG,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAInC;;;;"}

package/dist/esm/components/Label/index.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+
+const FormFieldLabel = 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__ */ jsx(FormFieldLabel, { disabled, $error: error, ...props, children });
+
+export { Label };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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,MAAAA,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,yBACrE,cAAA,EAAA,EACC,QAAA,EACA,QAAQN,KAAAA,EACR,GAAIM,OAEHD,QAAAA,EACH;;;;"}

package/dist/esm/components/Link/common.js

@@ -0,0 +1,24 @@
+import { css } from 'styled-components';
+
+const linkStyles = 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);
+
+export { linkStyles };
+//# sourceMappingURL=common.js.map

package/dist/esm/components/Link/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","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,GAAAA,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/esm/components/Link/index.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { styled } from 'styled-components';
+import { linkStyles } from './common.js';
+import { Icon as SvgImage } from '../Icon/index.js';
+
+const CuiLink = styled.a.withConfig({
+  componentId: "sc-5mckq8-0"
+})(["", ""], linkStyles);
+const IconWrapper = 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__ */ jsxs(CuiLink, { ref, $size: size, $weight: weight, as: component ?? "a", onClick, ...props, children: [
+  children,
+  icon && /* @__PURE__ */ jsx(IconWrapper, { $size: size, children: /* @__PURE__ */ jsx(SvgImage, { name: icon, className: "external-icon", "data-testid": icon }) })
+] });
+const Link = forwardRef(_Link);
+
+export { Link };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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","Icon","Link","forwardRef"],"mappings":";;;;;;AA6BA,MAAMA,OAAAA,GAAUC,MAAAA,CAAOC,CAAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACpBC,UAAU,CAAA;AAGd,MAAMC,WAAAA,GAAcL,MAAAA,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,qBAEA,IAAA,CAAC,OAAA,EAAA,EACC,GAAA,EACA,KAAA,EAAOX,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,oBACC,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAOC,IAAAA,EAClB,QAAA,kBAAA,GAAA,CAACY,QAAA,EAAA,EACC,IAAA,EAAMb,IAAAA,EACN,SAAA,EAAU,eAAA,EACV,aAAA,EAAaA,MAAK,CAAA,EAEtB;AAAA,CAAA,EAEJ,CAAA;AAEK,MAAMc,IAAAA,GAAiCC,WAAWT,KAAK;;;;"}

package/dist/esm/components/MiddleTruncator/index.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+
+const TruncatorContainer = styled.div.withConfig({
+  componentId: "sc-17vzr86-0"
+})(["display:flex;width:auto;min-width:0;overflow:hidden;white-space:nowrap;font:", ";color:", ";"], ({
+  theme
+}) => theme.click.fileUpload.typography.description.default, ({
+  theme
+}) => theme.click.fileUpload.color.title.default);
+const TruncatorStart = styled.span.withConfig({
+  componentId: "sc-17vzr86-1"
+})(["flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+const TruncatorEnd = styled.span.withConfig({
+  componentId: "sc-17vzr86-2"
+})(["flex-shrink:0;white-space:nowrap;"]);
+const MiddleTruncator = ({
+  text,
+  trailingChars = 10
+}) => {
+  const startText = text.slice(0, -trailingChars);
+  const endText = text.slice(-trailingChars);
+  return /* @__PURE__ */ jsxs(TruncatorContainer, { title: text, "aria-label": text, children: [
+    /* @__PURE__ */ jsx(TruncatorStart, { children: startText }),
+    /* @__PURE__ */ jsx(TruncatorEnd, { children: endText })
+  ] });
+};
+
+export { MiddleTruncator };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/MiddleTruncator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/MiddleTruncator/MiddleTruncator.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nconst TruncatorContainer = styled.div`\n  display: flex;\n  width: auto;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  font: ${({ theme }) => theme.click.fileUpload.typography.description.default};\n  color: ${({ theme }) => theme.click.fileUpload.color.title.default};\n`;\n\nconst TruncatorStart = styled.span`\n  flex-shrink: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst TruncatorEnd = styled.span`\n  flex-shrink: 0;\n  white-space: nowrap;\n`;\n\nexport const MiddleTruncator = ({\n  text,\n  trailingChars = 10,\n}: {\n  text: string;\n  trailingChars?: number;\n}) => {\n  const startText = text.slice(0, -trailingChars);\n  const endText = text.slice(-trailingChars);\n\n  return (\n    <TruncatorContainer\n      title={text}\n      aria-label={text}\n    >\n      <TruncatorStart>{startText}</TruncatorStart>\n      <TruncatorEnd>{endText}</TruncatorEnd>\n    </TruncatorContainer>\n  );\n};\n"],"names":["TruncatorContainer","styled","div","withConfig","componentId","theme","click","fileUpload","typography","description","default","color","title","TruncatorStart","span","TruncatorEnd","MiddleTruncator","text","trailingChars","startText","slice","endText"],"mappings":";;;AAEA,MAAMA,kBAAAA,GAAqBC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,8EAAA,EAAA,SAAA,EAAA,GAAA,GAM3B,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWC,UAAAA,CAAWC,WAAAA,CAAYC,SAC5D,CAAC;AAAA,EAAEL;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWI,KAAAA,CAAMC,MAAMF,OAAO,CAAA;AAGpE,MAAMG,cAAAA,GAAiBZ,MAAAA,CAAOa,IAAAA,CAAIX,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0EAAA,CAAA,CAAA;AAOlC,MAAMW,YAAAA,GAAed,MAAAA,CAAOa,IAAAA,CAAIX,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mCAAA,CAAA,CAAA;AAKzB,MAAMY,kBAAkBA,CAAC;AAAA,EAC9BC,IAAAA;AAAAA,EACAC,aAAAA,GAAgB;AAIlB,CAAA,KAAM;AACJ,EAAA,MAAMC,SAAAA,GAAYF,IAAAA,CAAKG,KAAAA,CAAM,CAAA,EAAG,CAACF,aAAa,CAAA;AAC9C,EAAA,MAAMG,OAAAA,GAAUJ,IAAAA,CAAKG,KAAAA,CAAM,CAACF,aAAa,CAAA;AAEzC,EAAA,uBACE,IAAA,CAAC,kBAAA,EAAA,EACC,KAAA,EAAOD,IAAAA,EACP,cAAYA,IAAAA,EAEZ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAgBE,QAAAA,EAAAA,SAAAA,EAAU,CAAA;AAAA,oBAC3B,GAAA,CAAC,gBAAcE,QAAAA,EAAAA,OAAAA,EAAQ;AAAA,GAAA,EACzB,CAAA;AAEJ;;;;"}