@razorpay/blade 12.67.0 → 12.89.0

package/build/lib/web/development/components/ChatMessage/ThumbnailPreview.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailPreview.web.js","sources":["../../../../../../src/components/ChatMessage/ThumbnailPreview.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { ResolvedThumbnailItem, ThumbnailPreviewProps } from './types';\nimport { chatMessageToken } from './token';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { makeSize } from '~utils';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\n\nconst imagePreviewToken = chatMessageToken.imagePreview;\n\ntype CardStyle = {\n  bottom: number;\n  right: number;\n  transform: string;\n  zIndex: number;\n};\n\nconst resolveThumbnailItem = (\n  thumbnail: ResolvedThumbnailItem['originalThumbnail'],\n  originalIndex: number,\n): ResolvedThumbnailItem => {\n  return {\n    id: thumbnail.id ?? `thumbnail-${originalIndex}-${thumbnail.url}`,\n    url: thumbnail.url,\n    alt: thumbnail.alt ?? '',\n    originalIndex,\n    originalThumbnail: thumbnail,\n  };\n};\n\nconst getCardStyle = (stackIndex: number, isSingleThumbnail: boolean): CardStyle => {\n  if (isSingleThumbnail) {\n    return imagePreviewToken.singleCardStyle;\n  }\n\n  return (\n    imagePreviewToken.stackCardStyles[stackIndex] ??\n    imagePreviewToken.stackCardStyles[imagePreviewToken.stackCardStyles.length - 1]\n  );\n};\n\nconst StyledPreviewImage = styled.img({\n  width: '100%',\n  height: '100%',\n  aspectRatio: '1 / 1',\n  objectFit: 'cover',\n  display: 'block',\n});\n\nconst ThumbnailPreview = ({\n  thumbnails,\n  onThumbnailClick,\n}: ThumbnailPreviewProps): React.ReactElement | null => {\n  const resolvedThumbnails: ResolvedThumbnailItem[] = thumbnails.map(resolveThumbnailItem);\n\n  const previewThumbnails = resolvedThumbnails.slice(0, imagePreviewToken.maxVisibleStackImages);\n  const isSingleThumbnail = previewThumbnails.length === 1;\n  const overflowCount = Math.max(\n    resolvedThumbnails.length - imagePreviewToken.maxVisibleStackImages,\n    0,\n  );\n  // Absolutely positioned cards don't affect parent height,\n  // so compute a deterministic min height from card offsets.\n  // For a single card, use the image size directly.\n  // For stacked cards, calculate based on bottom offsets plus image size and stack offset.\n  const stackHeight = isSingleThumbnail\n    ? imagePreviewToken.previewImageSizePx\n    : Math.max(\n        ...previewThumbnails.map(\n          (_, stackIndex) =>\n            getCardStyle(stackIndex, isSingleThumbnail).bottom +\n            imagePreviewToken.previewImageSizePx,\n        ),\n        0,\n      ) + imagePreviewToken.stackHeightOffset;\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.ChatMessageThumbnailPreview })}>\n      <BaseBox\n        as={onThumbnailClick ? 'button' : 'div'}\n        type={onThumbnailClick ? 'button' : undefined}\n        onClick={onThumbnailClick}\n        cursor={onThumbnailClick ? 'pointer' : 'default'}\n        position=\"relative\"\n        width={isSingleThumbnail ? imagePreviewToken.previewImageSize : '188px'}\n        height={makeSize(stackHeight)}\n        border=\"none\"\n        padding=\"spacing.0\"\n        margin=\"spacing.0\"\n        backgroundColor=\"transparent\"\n      >\n        {\n          // Render back cards first and front card last (top-most in DOM paint order).\n          // `reverse()` mutates, so clone first to preserve `previewThumbnails`.\n          // Data mapping example for `previewThumbnails = [A, B, C]`:\n          // - A = thumbnails[0], B = thumbnails[1], C = thumbnails[2]\n          // - Render loop iterates `[C, B, A]`\n          // - Computed stackIndex becomes 2, 1, 0 respectively\n          //   => C uses style slot 2, B uses style slot 1, A uses style slot 0\n          // This preserves stack positioning by original order while controlling paint order.\n          [...previewThumbnails].reverse().map(({ id, url, alt }, reverseIndex) => {\n            const stackIndex = previewThumbnails.length - reverseIndex - 1;\n            const cardStyle = getCardStyle(stackIndex, isSingleThumbnail);\n\n            return (\n              <BaseBox\n                key={`${id}-${stackIndex}`}\n                position=\"absolute\"\n                width={imagePreviewToken.previewImageSize}\n                height={imagePreviewToken.previewImageSize}\n                borderRadius=\"small\"\n                overflow=\"hidden\"\n                padding=\"spacing.0\"\n                bottom={makeSize(cardStyle.bottom)}\n                right={makeSize(cardStyle.right)}\n                transform={cardStyle.transform}\n                zIndex={cardStyle.zIndex}\n                elevation=\"midRaised\"\n                border=\"thin\"\n                borderColor=\"interactive.border.staticWhite.default\"\n                backgroundColor=\"surface.background.gray.moderate\"\n              >\n                <StyledPreviewImage src={url} alt={alt} />\n              </BaseBox>\n            );\n          })\n        }\n\n        {overflowCount > 0 ? (\n          <BaseBox\n            position=\"absolute\"\n            right={makeSize(10)}\n            bottom={makeSize(0)}\n            width={makeSize(40)}\n            height={makeSize(40)}\n            borderRadius=\"max\"\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            backgroundColor=\"surface.background.gray.moderate\"\n            elevation=\"lowRaised\"\n            border=\"thin\"\n            borderColor=\"surface.border.gray.muted\"\n            style={{ zIndex: 4 }}\n          >\n            <Text\n              color=\"surface.text.gray.muted\"\n              size=\"medium\"\n              weight=\"medium\"\n              textAlign=\"center\"\n              marginRight=\"spacing.1\"\n            >\n              +{overflowCount}\n            </Text>\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport { ThumbnailPreview };\n"],"names":["imagePreviewToken","chatMessageToken","imagePreview","resolveThumbnailItem","thumbnail","originalIndex","_thumbnail$id","_thumbnail$alt","id","concat","url","alt","originalThumbnail","getCardStyle","stackIndex","isSingleThumbnail","_imagePreviewToken$st","singleCardStyle","stackCardStyles","length","StyledPreviewImage","styled","img","withConfig","displayName","componentId","width","height","aspectRatio","objectFit","display","ThumbnailPreview","_ref","thumbnails","onThumbnailClick","resolvedThumbnails","map","previewThumbnails","slice","maxVisibleStackImages","overflowCount","Math","max","stackHeight","previewImageSizePx","apply","_toConsumableArray","_","bottom","stackHeightOffset","_jsx","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","ChatMessageThumbnailPreview","children","_jsxs","as","type","undefined","onClick","cursor","position","previewImageSize","makeSize","border","padding","margin","backgroundColor","reverse","_ref2","reverseIndex","cardStyle","borderRadius","overflow","right","transform","zIndex","elevation","borderColor","src","alignItems","justifyContent","style","Text","color","size","weight","textAlign","marginRight"],"mappings":"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"}

package/build/lib/web/development/components/ChatMessage/token.js

@@ -1,16 +1,50 @@
+import '../../tokens/global/index.js';
+import { size } from '../../tokens/global/size.js';
+import { colors } from '../../tokens/global/colors.js';
+
 var chatMessageToken = {
   "default": {},
   self: {
     padding: 'spacing.4',
-    borderTopLeftRadius: 'large',
-    borderTopRightRadius: 'large',
-    borderBottomLeftRadius: 'large',
-    borderBottomRightRadiusForLastMessage: 'none',
-    borderBottomRightRadius: 'large',
     backgroundColor: {
-      "default": 'surface.background.primary.subtle',
+      "default": 'surface.background.gray.intense',
       error: 'feedback.background.negative.subtle'
     }
+  },
+  imagePreview: {
+    maxVisibleStackImages: 3,
+    previewImageSize: '120px',
+    previewImageSizePx: size[120],
+    stackHeightOffset: size[12],
+    singleCardStyle: {
+      bottom: size[0],
+      right: size[0],
+      transform: 'rotate(0deg)',
+      zIndex: 3
+    },
+    stackCardStyles: [{
+      bottom: size[0],
+      right: size[32],
+      transform: 'rotate(0deg)',
+      zIndex: 3
+    }, {
+      bottom: size[59],
+      right: size[10],
+      transform: 'rotate(15deg)',
+      zIndex: 2
+    }, {
+      bottom: size[42],
+      right: size[62],
+      transform: 'rotate(-15deg)',
+      zIndex: 1
+    }]
+  },
+  messageBubble: {
+    boxShadow: '0px 0.5px 4px 0px',
+    boxShadowColor: {
+      light: colors.neutral.blueGrayLight.a906,
+      dark: colors.neutral.black[50]
+    }
   }
 };
 

package/build/lib/web/development/components/ChatMessage/token.js.map

@@ -1 +1 @@
-{"version":3,"file":"token.js","sources":["../../../../../../src/components/ChatMessage/token.ts"],"sourcesContent":["const chatMessageToken = {\n  default: {},\n  self: {\n    padding: 'spacing.4',\n    borderTopLeftRadius: 'large',\n    borderTopRightRadius: 'large',\n    borderBottomLeftRadius: 'large',\n    borderBottomRightRadiusForLastMessage: 'none',\n    borderBottomRightRadius: 'large',\n    backgroundColor: {\n      default: 'surface.background.primary.subtle',\n      error: 'feedback.background.negative.subtle',\n    },\n  },\n} as const;\n\nexport { chatMessageToken };\n"],"names":["chatMessageToken","self","padding","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadiusForLastMessage","borderBottomRightRadius","backgroundColor","error"],"mappings":"AAAA,IAAMA,gBAAgB,GAAG;AACvB,EAAA,SAAA,EAAS,EAAE;AACXC,EAAAA,IAAI,EAAE;AACJC,IAAAA,OAAO,EAAE,WAAW;AACpBC,IAAAA,mBAAmB,EAAE,OAAO;AAC5BC,IAAAA,oBAAoB,EAAE,OAAO;AAC7BC,IAAAA,sBAAsB,EAAE,OAAO;AAC/BC,IAAAA,qCAAqC,EAAE,MAAM;AAC7CC,IAAAA,uBAAuB,EAAE,OAAO;AAChCC,IAAAA,eAAe,EAAE;AACf,MAAA,SAAA,EAAS,mCAAmC;AAC5CC,MAAAA,KAAK,EAAE,qCAAA;AACT,KAAA;AACF,GAAA;AACF;;;;"}
+{"version":3,"file":"token.js","sources":["../../../../../../src/components/ChatMessage/token.ts"],"sourcesContent":["import { size, colors as globalColors } from '~tokens/global';\n\nconst chatMessageToken = {\n  default: {},\n  self: {\n    padding: 'spacing.4',\n    backgroundColor: {\n      default: 'surface.background.gray.intense',\n      error: 'feedback.background.negative.subtle',\n    },\n  },\n  imagePreview: {\n    maxVisibleStackImages: 3,\n    previewImageSize: '120px',\n    previewImageSizePx: size[120],\n    stackHeightOffset: size[12],\n    singleCardStyle: {\n      bottom: size[0],\n      right: size[0],\n      transform: 'rotate(0deg)',\n      zIndex: 3,\n    },\n    stackCardStyles: [\n      {\n        bottom: size[0],\n        right: size[32],\n        transform: 'rotate(0deg)',\n        zIndex: 3,\n      },\n      {\n        bottom: size[59],\n        right: size[10],\n        transform: 'rotate(15deg)',\n        zIndex: 2,\n      },\n      {\n        bottom: size[42],\n        right: size[62],\n        transform: 'rotate(-15deg)',\n        zIndex: 1,\n      },\n    ],\n  },\n  messageBubble: {\n    boxShadow: '0px 0.5px 4px 0px',\n    boxShadowColor: {\n      light: globalColors.neutral.blueGrayLight.a906,\n      dark: globalColors.neutral.black[50],\n    },\n  },\n} as const;\n\nexport { chatMessageToken };\n"],"names":["chatMessageToken","self","padding","backgroundColor","error","imagePreview","maxVisibleStackImages","previewImageSize","previewImageSizePx","size","stackHeightOffset","singleCardStyle","bottom","right","transform","zIndex","stackCardStyles","messageBubble","boxShadow","boxShadowColor","light","globalColors","neutral","blueGrayLight","a906","dark","black"],"mappings":";;;;AAEA,IAAMA,gBAAgB,GAAG;AACvB,EAAA,SAAA,EAAS,EAAE;AACXC,EAAAA,IAAI,EAAE;AACJC,IAAAA,OAAO,EAAE,WAAW;AACpBC,IAAAA,eAAe,EAAE;AACf,MAAA,SAAA,EAAS,iCAAiC;AAC1CC,MAAAA,KAAK,EAAE,qCAAA;AACT,KAAA;GACD;AACDC,EAAAA,YAAY,EAAE;AACZC,IAAAA,qBAAqB,EAAE,CAAC;AACxBC,IAAAA,gBAAgB,EAAE,OAAO;AACzBC,IAAAA,kBAAkB,EAAEC,IAAI,CAAC,GAAG,CAAC;AAC7BC,IAAAA,iBAAiB,EAAED,IAAI,CAAC,EAAE,CAAC;AAC3BE,IAAAA,eAAe,EAAE;AACfC,MAAAA,MAAM,EAAEH,IAAI,CAAC,CAAC,CAAC;AACfI,MAAAA,KAAK,EAAEJ,IAAI,CAAC,CAAC,CAAC;AACdK,MAAAA,SAAS,EAAE,cAAc;AACzBC,MAAAA,MAAM,EAAE,CAAA;KACT;AACDC,IAAAA,eAAe,EAAE,CACf;AACEJ,MAAAA,MAAM,EAAEH,IAAI,CAAC,CAAC,CAAC;AACfI,MAAAA,KAAK,EAAEJ,IAAI,CAAC,EAAE,CAAC;AACfK,MAAAA,SAAS,EAAE,cAAc;AACzBC,MAAAA,MAAM,EAAE,CAAA;AACV,KAAC,EACD;AACEH,MAAAA,MAAM,EAAEH,IAAI,CAAC,EAAE,CAAC;AAChBI,MAAAA,KAAK,EAAEJ,IAAI,CAAC,EAAE,CAAC;AACfK,MAAAA,SAAS,EAAE,eAAe;AAC1BC,MAAAA,MAAM,EAAE,CAAA;AACV,KAAC,EACD;AACEH,MAAAA,MAAM,EAAEH,IAAI,CAAC,EAAE,CAAC;AAChBI,MAAAA,KAAK,EAAEJ,IAAI,CAAC,EAAE,CAAC;AACfK,MAAAA,SAAS,EAAE,gBAAgB;AAC3BC,MAAAA,MAAM,EAAE,CAAA;KACT,CAAA;GAEJ;AACDE,EAAAA,aAAa,EAAE;AACbC,IAAAA,SAAS,EAAE,mBAAmB;AAC9BC,IAAAA,cAAc,EAAE;AACdC,MAAAA,KAAK,EAAEC,MAAY,CAACC,OAAO,CAACC,aAAa,CAACC,IAAI;AAC9CC,MAAAA,IAAI,EAAEJ,MAAY,CAACC,OAAO,CAACI,KAAK,CAAC,EAAE,CAAA;AACrC,KAAA;AACF,GAAA;AACF;;;;"}

package/build/lib/web/development/components/ChatMessage/utils.js

@@ -0,0 +1,13 @@
+import { chatMessageToken } from './token.js';
+
+var getMessageBubbleBoxShadow = function getMessageBubbleBoxShadow(colorScheme) {
+  var _chatMessageToken$mes = chatMessageToken.messageBubble,
+    boxShadow = _chatMessageToken$mes.boxShadow,
+    boxShadowColor = _chatMessageToken$mes.boxShadowColor;
+  return {
+    boxShadow: "".concat(boxShadow, " ").concat(boxShadowColor[colorScheme])
+  };
+};
+
+export { getMessageBubbleBoxShadow };
+//# sourceMappingURL=utils.js.map

package/build/lib/web/development/components/ChatMessage/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/ChatMessage/utils.ts"],"sourcesContent":["import { chatMessageToken } from './token';\nimport type { ColorSchemeNames } from '~tokens/theme';\n\nconst getMessageBubbleBoxShadow = (colorScheme: ColorSchemeNames): { boxShadow: string } => {\n  const { boxShadow, boxShadowColor } = chatMessageToken.messageBubble;\n  return { boxShadow: `${boxShadow} ${boxShadowColor[colorScheme]}` };\n};\n\nexport { getMessageBubbleBoxShadow };\n"],"names":["getMessageBubbleBoxShadow","colorScheme","_chatMessageToken$mes","chatMessageToken","messageBubble","boxShadow","boxShadowColor","concat"],"mappings":";;AAGA,IAAMA,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAIC,WAA6B,EAA4B;AAC1F,EAAA,IAAAC,qBAAA,GAAsCC,gBAAgB,CAACC,aAAa;IAA5DC,SAAS,GAAAH,qBAAA,CAATG,SAAS;IAAEC,cAAc,GAAAJ,qBAAA,CAAdI,cAAc,CAAA;EACjC,OAAO;IAAED,SAAS,EAAA,EAAA,CAAAE,MAAA,CAAKF,SAAS,EAAA,GAAA,CAAA,CAAAE,MAAA,CAAID,cAAc,CAACL,WAAW,CAAC,CAAA;GAAI,CAAA;AACrE;;;;"}

package/build/lib/web/development/components/Checkbox/CheckboxIcon/CheckboxIcon.js

@@ -84,7 +84,7 @@ var CheckboxIcon = function CheckboxIcon(_ref3) {
     size = _ref3.size;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
-  var iconColor = getIn(theme, 'colors.interactive.icon.onPrimary.normal');
+  var iconColor = isDisabled ? getIn(theme, 'colors.interactive.icon.staticWhite.disabled') : getIn(theme, 'colors.interactive.icon.onPrimary.normal');
   return /*#__PURE__*/jsxs(CheckboxIconWrapper, _objectSpread(_objectSpread({
     size: size,
     isIndeterminate: isIndeterminate,

package/build/lib/web/development/components/Checkbox/CheckboxIcon/CheckboxIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIcon.js","sources":["../../../../../../../src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport { CheckboxIconWrapper } from './CheckboxIconWrapper';\nimport { Fade } from './Fade';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport Svg, { Path } from '~components/Icons/_Svg';\nimport { makeSpace } from '~utils/makeSpace';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\n\nconst svgSize = {\n  small: {\n    width: size[8],\n    height: size[8],\n  },\n  medium: {\n    width: size[12],\n    height: size[12],\n  },\n  large: {\n    width: size[16],\n    height: size[16],\n  },\n};\n\nconst CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium' | 'large' }) => {\n  const width = makeSpace(svgSize[size].width);\n  const height = makeSpace(svgSize[size].height);\n\n  return (\n    <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z\"\n        fill={color}\n        stroke={color}\n        strokeWidth=\"0.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </Svg>\n  );\n};\n\nconst IndeterminateIcon = ({\n  color,\n  size,\n}: {\n  color: string;\n  size: 'small' | 'medium' | 'large';\n}) => {\n  const width = makeSpace(svgSize[size].width);\n  const height = makeSpace(svgSize[size].height);\n\n  return (\n    <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z\"\n        fill={color}\n        stroke={color}\n        strokeWidth=\"0.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </Svg>\n  );\n};\n\nexport type CheckboxIconProps = {\n  isDisabled?: boolean;\n  isNegative?: boolean;\n  isChecked?: boolean;\n  isIndeterminate?: boolean;\n  size: 'small' | 'medium' | 'large';\n};\n\nconst CheckboxIcon = ({\n  isChecked,\n  isIndeterminate,\n  isDisabled,\n  isNegative,\n  size,\n}: CheckboxIconProps) => {\n  const { theme } = useTheme();\n  const iconColor = getIn(theme, 'colors.interactive.icon.onPrimary.normal');\n  return (\n    <CheckboxIconWrapper\n      size={size}\n      isIndeterminate={isIndeterminate}\n      isDisabled={isDisabled}\n      isNegative={isNegative}\n      isChecked={!!(isChecked || isIndeterminate)}\n      {...metaAttribute({ name: 'checkbox-icon-wrapper' })}\n    >\n      <Fade show={isIndeterminate} styles={{ position: 'absolute', display: 'flex' }}>\n        <IndeterminateIcon size={size} color={iconColor} />\n      </Fade>\n      <Fade\n        show={Boolean(isChecked) && !isIndeterminate}\n        styles={{ position: 'absolute', display: 'flex' }}\n      >\n        {isChecked ? <CheckedIcon size={size} color={iconColor} /> : null}\n      </Fade>\n    </CheckboxIconWrapper>\n  );\n};\n\nexport { CheckboxIcon };\n"],"names":["svgSize","small","width","size","height","medium","large","CheckedIcon","_ref","color","makeSpace","_jsx","Svg","viewBox","fill","children","Path","fillRule","clipRule","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","IndeterminateIcon","_ref2","CheckboxIcon","_ref3","isChecked","isIndeterminate","isDisabled","isNegative","_useTheme","useTheme","theme","iconColor","getIn","_jsxs","CheckboxIconWrapper","_objectSpread","metaAttribute","name","Fade","show","styles","position","display","Boolean"],"mappings":"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"}
+{"version":3,"file":"CheckboxIcon.js","sources":["../../../../../../../src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport { CheckboxIconWrapper } from './CheckboxIconWrapper';\nimport { Fade } from './Fade';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport Svg, { Path } from '~components/Icons/_Svg';\nimport { makeSpace } from '~utils/makeSpace';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\n\nconst svgSize = {\n  small: {\n    width: size[8],\n    height: size[8],\n  },\n  medium: {\n    width: size[12],\n    height: size[12],\n  },\n  large: {\n    width: size[16],\n    height: size[16],\n  },\n};\n\nconst CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium' | 'large' }) => {\n  const width = makeSpace(svgSize[size].width);\n  const height = makeSpace(svgSize[size].height);\n\n  return (\n    <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z\"\n        fill={color}\n        stroke={color}\n        strokeWidth=\"0.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </Svg>\n  );\n};\n\nconst IndeterminateIcon = ({\n  color,\n  size,\n}: {\n  color: string;\n  size: 'small' | 'medium' | 'large';\n}) => {\n  const width = makeSpace(svgSize[size].width);\n  const height = makeSpace(svgSize[size].height);\n\n  return (\n    <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z\"\n        fill={color}\n        stroke={color}\n        strokeWidth=\"0.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </Svg>\n  );\n};\n\nexport type CheckboxIconProps = {\n  isDisabled?: boolean;\n  isNegative?: boolean;\n  isChecked?: boolean;\n  isIndeterminate?: boolean;\n  size: 'small' | 'medium' | 'large';\n};\n\nconst CheckboxIcon = ({\n  isChecked,\n  isIndeterminate,\n  isDisabled,\n  isNegative,\n  size,\n}: CheckboxIconProps) => {\n  const { theme } = useTheme();\n  const iconColor = isDisabled\n    ? getIn(theme, 'colors.interactive.icon.staticWhite.disabled')\n    : getIn(theme, 'colors.interactive.icon.onPrimary.normal');\n\n  return (\n    <CheckboxIconWrapper\n      size={size}\n      isIndeterminate={isIndeterminate}\n      isDisabled={isDisabled}\n      isNegative={isNegative}\n      isChecked={!!(isChecked || isIndeterminate)}\n      {...metaAttribute({ name: 'checkbox-icon-wrapper' })}\n    >\n      <Fade show={isIndeterminate} styles={{ position: 'absolute', display: 'flex' }}>\n        <IndeterminateIcon size={size} color={iconColor} />\n      </Fade>\n      <Fade\n        show={Boolean(isChecked) && !isIndeterminate}\n        styles={{ position: 'absolute', display: 'flex' }}\n      >\n        {isChecked ? <CheckedIcon size={size} color={iconColor} /> : null}\n      </Fade>\n    </CheckboxIconWrapper>\n  );\n};\n\nexport { CheckboxIcon };\n"],"names":["svgSize","small","width","size","height","medium","large","CheckedIcon","_ref","color","makeSpace","_jsx","Svg","viewBox","fill","children","Path","fillRule","clipRule","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","IndeterminateIcon","_ref2","CheckboxIcon","_ref3","isChecked","isIndeterminate","isDisabled","isNegative","_useTheme","useTheme","theme","iconColor","getIn","_jsxs","CheckboxIconWrapper","_objectSpread","metaAttribute","name","Fade","show","styles","position","display","Boolean"],"mappings":"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"}

package/build/lib/web/development/components/Checkbox/CheckboxIcon/CheckboxIconWrapperStyles.js

@@ -3,16 +3,19 @@ import getIn from '../../../utils/lodashButBetter/get.js';
 import '../../../utils/makeSpace/index.js';
 import '../../../utils/makeSize/index.js';
 import '../../../utils/makeBorderSize/index.js';
+import '../../../tokens/global/index.js';
 import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
 import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
 import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import { size } from '../../../tokens/global/size.js';
 
 var getCheckboxIconWrapperStyles = function getCheckboxIconWrapperStyles(_ref) {
   var theme = _ref.theme,
     isChecked = _ref.isChecked,
     isDisabled = _ref.isDisabled,
     isNegative = _ref.isNegative,
-    size = _ref.size;
+    isIndeterminate = _ref.isIndeterminate,
+    size$1 = _ref.size;
   var variant = 'default';
   if (isDisabled) variant = 'disabled';
   if (isNegative) variant = 'negative';
@@ -21,20 +24,22 @@ var getCheckboxIconWrapperStyles = function getCheckboxIconWrapperStyles(_ref) {
   var border = checkboxIconColors.variants[variant].border[checked];
   var backgroundColor = getIn(theme, background);
   var borderColor = getIn(theme, border);
+  var _borderWidth = size$1 === 'large' ? theme.border.width.thicker : theme.border.width.thick;
   return {
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
-    width: makeSpace(checkboxSizes.icon[size].width),
-    height: makeSpace(checkboxSizes.icon[size].height),
-    borderWidth: makeBorderSize(theme.border.width.thick),
+    width: makeSpace(checkboxSizes.icon[size$1].width),
+    height: makeSpace(checkboxSizes.icon[size$1].height),
+    borderWidth: makeBorderSize(_borderWidth),
     borderStyle: 'solid',
     margin: makeSpace(theme.spacing[1]),
-    borderRadius: makeSize(theme.border.radius.small),
+    borderRadius: makeSize(theme.border.radius.xsmall),
     backgroundColor: backgroundColor,
-    borderColor: borderColor
+    borderColor: borderColor,
+    paddingTop: size$1 === 'small' && !isIndeterminate ? makeSize(size['1']) : 0
   };
 };
 

package/build/lib/web/development/components/Checkbox/CheckboxIcon/CheckboxIconWrapperStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIconWrapperStyles.js","sources":["../../../../../../../src/components/Checkbox/CheckboxIcon/CheckboxIconWrapperStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport { checkboxIconColors, checkboxSizes } from '../checkboxTokens';\nimport type { CheckboxIconProps } from './CheckboxIcon';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\nimport { makeBorderSize } from '~utils/makeBorderSize';\n\nexport type CheckboxRectProps = Omit<CheckboxIconProps, 'state'> & {\n  isChecked: boolean;\n};\n\nconst getCheckboxIconWrapperStyles = ({\n  theme,\n  isChecked,\n  isDisabled,\n  isNegative,\n  size,\n}: CheckboxRectProps & { theme: Theme }): CSSObject => {\n  let variant: 'default' | 'disabled' | 'negative' = 'default';\n  if (isDisabled) variant = 'disabled';\n  if (isNegative) variant = 'negative';\n  const checked = isChecked ? 'checked' : 'unchecked';\n  const background = checkboxIconColors.variants[variant].background[checked];\n  const border = checkboxIconColors.variants[variant].border[checked];\n  const backgroundColor = getIn(theme, background);\n  const borderColor = getIn(theme, border);\n\n  return {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    width: makeSpace(checkboxSizes.icon[size].width),\n    height: makeSpace(checkboxSizes.icon[size].height),\n    borderWidth: makeBorderSize(theme.border.width.thick),\n    borderStyle: 'solid',\n    margin: makeSpace(theme.spacing[1]),\n    borderRadius: makeSize(theme.border.radius.small),\n    backgroundColor,\n    borderColor,\n  };\n};\n\nexport { getCheckboxIconWrapperStyles };\n"],"names":["getCheckboxIconWrapperStyles","_ref","theme","isChecked","isDisabled","isNegative","size","variant","checked","background","checkboxIconColors","variants","border","backgroundColor","getIn","borderColor","position","display","alignItems","justifyContent","flexShrink","width","makeSpace","checkboxSizes","icon","height","borderWidth","makeBorderSize","thick","borderStyle","margin","spacing","borderRadius","makeSize","radius","small"],"mappings":";;;;;;;;;AAaA,IAAMA,4BAA4B,GAAG,SAA/BA,4BAA4BA,CAAAC,IAAA,EAMqB;AAAA,EAAA,IALrDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,IAAI,GAAAL,IAAA,CAAJK,IAAI,CAAA;EAEJ,IAAIC,OAA4C,GAAG,SAAS,CAAA;AAC5D,EAAA,IAAIH,UAAU,EAAEG,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAIF,UAAU,EAAEE,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAMC,OAAO,GAAGL,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;AACnD,EAAA,IAAMM,UAAU,GAAGC,kBAAkB,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACE,UAAU,CAACD,OAAO,CAAC,CAAA;AAC3E,EAAA,IAAMI,MAAM,GAAGF,kBAAkB,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACK,MAAM,CAACJ,OAAO,CAAC,CAAA;AACnE,EAAA,IAAMK,eAAe,GAAGC,KAAK,CAACZ,KAAK,EAAEO,UAAU,CAAC,CAAA;AAChD,EAAA,IAAMM,WAAW,GAAGD,KAAK,CAACZ,KAAK,EAAEU,MAAM,CAAC,CAAA;EAExC,OAAO;AACLI,IAAAA,QAAQ,EAAE,UAAU;AACpBC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;AACxBC,IAAAA,UAAU,EAAE,CAAC;IACbC,KAAK,EAAEC,SAAS,CAACC,aAAa,CAACC,IAAI,CAAClB,IAAI,CAAC,CAACe,KAAK,CAAC;IAChDI,MAAM,EAAEH,SAAS,CAACC,aAAa,CAACC,IAAI,CAAClB,IAAI,CAAC,CAACmB,MAAM,CAAC;IAClDC,WAAW,EAAEC,cAAc,CAACzB,KAAK,CAACU,MAAM,CAACS,KAAK,CAACO,KAAK,CAAC;AACrDC,IAAAA,WAAW,EAAE,OAAO;IACpBC,MAAM,EAAER,SAAS,CAACpB,KAAK,CAAC6B,OAAO,CAAC,CAAC,CAAC,CAAC;IACnCC,YAAY,EAAEC,QAAQ,CAAC/B,KAAK,CAACU,MAAM,CAACsB,MAAM,CAACC,KAAK,CAAC;AACjDtB,IAAAA,eAAe,EAAfA,eAAe;AACfE,IAAAA,WAAW,EAAXA,WAAAA;GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"CheckboxIconWrapperStyles.js","sources":["../../../../../../../src/components/Checkbox/CheckboxIcon/CheckboxIconWrapperStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport { checkboxIconColors, checkboxSizes } from '../checkboxTokens';\nimport type { CheckboxIconProps } from './CheckboxIcon';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport { size as sizeToken } from '~tokens/global';\n\nexport type CheckboxRectProps = Omit<CheckboxIconProps, 'state'> & {\n  isChecked: boolean;\n};\n\nconst getCheckboxIconWrapperStyles = ({\n  theme,\n  isChecked,\n  isDisabled,\n  isNegative,\n  isIndeterminate,\n  size,\n}: CheckboxRectProps & { theme: Theme }): CSSObject => {\n  let variant: 'default' | 'disabled' | 'negative' = 'default';\n  if (isDisabled) variant = 'disabled';\n  if (isNegative) variant = 'negative';\n  const checked = isChecked ? 'checked' : 'unchecked';\n  const background = checkboxIconColors.variants[variant].background[checked];\n  const border = checkboxIconColors.variants[variant].border[checked];\n  const backgroundColor = getIn(theme, background);\n  const borderColor = getIn(theme, border);\n  const _borderWidth = size === 'large' ? theme.border.width.thicker : theme.border.width.thick;\n\n  return {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    width: makeSpace(checkboxSizes.icon[size].width),\n    height: makeSpace(checkboxSizes.icon[size].height),\n    borderWidth: makeBorderSize(_borderWidth),\n    borderStyle: 'solid',\n    margin: makeSpace(theme.spacing[1]),\n    borderRadius: makeSize(theme.border.radius.xsmall),\n    backgroundColor,\n    borderColor,\n    paddingTop: size === 'small' && !isIndeterminate ? makeSize(sizeToken['1']) : 0,\n  };\n};\n\nexport { getCheckboxIconWrapperStyles };\n"],"names":["getCheckboxIconWrapperStyles","_ref","theme","isChecked","isDisabled","isNegative","isIndeterminate","size","variant","checked","background","checkboxIconColors","variants","border","backgroundColor","getIn","borderColor","_borderWidth","width","thicker","thick","position","display","alignItems","justifyContent","flexShrink","makeSpace","checkboxSizes","icon","height","borderWidth","makeBorderSize","borderStyle","margin","spacing","borderRadius","makeSize","radius","xsmall","paddingTop","sizeToken"],"mappings":";;;;;;;;;;;AAcA,IAAMA,4BAA4B,GAAG,SAA/BA,4BAA4BA,CAAAC,IAAA,EAOqB;AAAA,EAAA,IANrDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,eAAe,GAAAL,IAAA,CAAfK,eAAe;IACfC,MAAI,GAAAN,IAAA,CAAJM,IAAI,CAAA;EAEJ,IAAIC,OAA4C,GAAG,SAAS,CAAA;AAC5D,EAAA,IAAIJ,UAAU,EAAEI,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAIH,UAAU,EAAEG,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAMC,OAAO,GAAGN,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;AACnD,EAAA,IAAMO,UAAU,GAAGC,kBAAkB,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACE,UAAU,CAACD,OAAO,CAAC,CAAA;AAC3E,EAAA,IAAMI,MAAM,GAAGF,kBAAkB,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACK,MAAM,CAACJ,OAAO,CAAC,CAAA;AACnE,EAAA,IAAMK,eAAe,GAAGC,KAAK,CAACb,KAAK,EAAEQ,UAAU,CAAC,CAAA;AAChD,EAAA,IAAMM,WAAW,GAAGD,KAAK,CAACb,KAAK,EAAEW,MAAM,CAAC,CAAA;EACxC,IAAMI,YAAY,GAAGV,MAAI,KAAK,OAAO,GAAGL,KAAK,CAACW,MAAM,CAACK,KAAK,CAACC,OAAO,GAAGjB,KAAK,CAACW,MAAM,CAACK,KAAK,CAACE,KAAK,CAAA;EAE7F,OAAO;AACLC,IAAAA,QAAQ,EAAE,UAAU;AACpBC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;AACxBC,IAAAA,UAAU,EAAE,CAAC;IACbP,KAAK,EAAEQ,SAAS,CAACC,aAAa,CAACC,IAAI,CAACrB,MAAI,CAAC,CAACW,KAAK,CAAC;IAChDW,MAAM,EAAEH,SAAS,CAACC,aAAa,CAACC,IAAI,CAACrB,MAAI,CAAC,CAACsB,MAAM,CAAC;AAClDC,IAAAA,WAAW,EAAEC,cAAc,CAACd,YAAY,CAAC;AACzCe,IAAAA,WAAW,EAAE,OAAO;IACpBC,MAAM,EAAEP,SAAS,CAACxB,KAAK,CAACgC,OAAO,CAAC,CAAC,CAAC,CAAC;IACnCC,YAAY,EAAEC,QAAQ,CAAClC,KAAK,CAACW,MAAM,CAACwB,MAAM,CAACC,MAAM,CAAC;AAClDxB,IAAAA,eAAe,EAAfA,eAAe;AACfE,IAAAA,WAAW,EAAXA,WAAW;AACXuB,IAAAA,UAAU,EAAEhC,MAAI,KAAK,OAAO,IAAI,CAACD,eAAe,GAAG8B,QAAQ,CAACI,IAAS,CAAC,GAAG,CAAC,CAAC,GAAG,CAAA;GAC/E,CAAA;AACH;;;;"}

package/build/lib/web/development/components/Checkbox/CheckboxIcon/Fade.web.js

@@ -3,9 +3,12 @@ import 'react';
 import styled, { keyframes, css } from 'styled-components';
 import '../../BladeProvider/index.js';
 import '../../../utils/makeMotionTime/index.web.js';
+import '../../../utils/metaAttribute/index.js';
 import { jsx } from 'react/jsx-runtime';
 import useTheme from '../../BladeProvider/useTheme.js';
 import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
+import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -30,13 +33,16 @@ var Fade = function Fade(_ref2) {
 
   // if show is undefined do not initialize the animation to prevent flash of animation
   var animation = show === undefined ? null : show ? enter : exit;
-  return /*#__PURE__*/jsx(AnimatedFade, {
+  return /*#__PURE__*/jsx(AnimatedFade, _objectSpread(_objectSpread({
     animationType: animation,
     style: _objectSpread({
       opacity: show ? 1 : 0
-    }, styles),
+    }, styles)
+  }, metaAttribute({
+    name: MetaConstants.CheckboxIconFade
+  })), {}, {
     children: children
-  });
+  }));
 };
 
 export { Fade };

package/build/lib/web/development/components/Checkbox/CheckboxIcon/Fade.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fade.web.js","sources":["../../../../../../../src/components/Checkbox/CheckboxIcon/Fade.web.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-useless-fragment */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { FadeProps } from './types';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nconst fadeIn = keyframes`\n  from {\n    transform: scale(.6);\n    opacity: 0;\n  }\n\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nconst fadeOut = keyframes`\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  to {\n    transform: scale(.6);\n    opacity: 0;\n  }\n`;\n\nconst AnimatedFade = styled.div<{ animationType: FlattenSimpleInterpolation | null }>(\n  ({ animationType }) =>\n    animationType === null\n      ? ''\n      : css`\n          ${animationType}\n        `,\n);\n\nconst Fade = ({ show, children, styles }: FadeProps) => {\n  const { theme } = useTheme();\n\n  const duration = theme.motion.duration.xquick;\n  const enter = css`\n    animation: ${fadeIn} ${makeMotionTime(duration)} ${theme.motion.easing.entrance as string};\n  `;\n\n  const exit = css`\n    animation: ${fadeOut} ${makeMotionTime(duration)} ${theme.motion.easing.exit as string};\n  `;\n\n  // if show is undefined do not initialize the animation to prevent flash of animation\n  const animation = show === undefined ? null : show ? enter : exit;\n\n  return (\n    <AnimatedFade\n      animationType={animation}\n      style={{\n        opacity: show ? 1 : 0,\n        ...styles,\n      }}\n    >\n      {children}\n    </AnimatedFade>\n  );\n};\n\nexport { Fade };\n"],"names":["fadeIn","keyframes","fadeOut","AnimatedFade","styled","div","withConfig","displayName","componentId","_ref","animationType","css","Fade","_ref2","show","children","styles","_useTheme","useTheme","theme","duration","motion","xquick","enter","makeMotionTime","easing","entrance","exit","animation","undefined","_jsx","style","_objectSpread","opacity"],"mappings":";;;;;;;;;;;AAUA,IAAMA,MAAM,gBAAGC,SAAS,CAUvB,CAAA,uEAAA,CAAA,CAAA,CAAA;AAED,IAAMC,OAAO,gBAAGD,SAAS,CAUxB,CAAA,uEAAA,CAAA,CAAA,CAAA;AAED,IAAME,YAAY,gBAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,uBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAC7B,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,aAAa,GAAAD,IAAA,CAAbC,aAAa,CAAA;EAAA,OACdA,aAAa,KAAK,IAAI,GAClB,EAAE,GACFC,GAAG,CACCD,CAAAA,EAAAA,EAAAA,EAAAA,CAAAA,EAAAA,aAAa,CAChB,CAAA;AAAA,CACR,CAAA,CAAA;AAED,IAAME,IAAI,GAAG,SAAPA,IAAIA,CAAAC,KAAA,EAA8C;AAAA,EAAA,IAAxCC,IAAI,GAAAD,KAAA,CAAJC,IAAI;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IAAEC,MAAM,GAAAH,KAAA,CAANG,MAAM,CAAA;AACpC,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;EAEb,IAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAACD,QAAQ,CAACE,MAAM,CAAA;AAC7C,EAAA,IAAMC,KAAK,gBAAGZ,GAAG,gCACFX,MAAM,EAAIwB,cAAc,CAACJ,QAAQ,CAAC,EAAID,KAAK,CAACE,MAAM,CAACI,MAAM,CAACC,QAAQ,CAChF,CAAA;AAED,EAAA,IAAMC,IAAI,gBAAGhB,GAAG,gCACDT,OAAO,EAAIsB,cAAc,CAACJ,QAAQ,CAAC,EAAID,KAAK,CAACE,MAAM,CAACI,MAAM,CAACE,IAAI,CAC7E,CAAA;;AAED;AACA,EAAA,IAAMC,SAAS,GAAGd,IAAI,KAAKe,SAAS,GAAG,IAAI,GAAGf,IAAI,GAAGS,KAAK,GAAGI,IAAI,CAAA;EAEjE,oBACEG,GAAA,CAAC3B,YAAY,EAAA;AACXO,IAAAA,aAAa,EAAEkB,SAAU;AACzBG,IAAAA,KAAK,EAAAC,aAAA,CAAA;AACHC,MAAAA,OAAO,EAAEnB,IAAI,GAAG,CAAC,GAAG,CAAA;AAAC,KAAA,EAClBE,MAAM,CACT;AAAAD,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACG,CAAC,CAAA;AAEnB;;;;"}
+{"version":3,"file":"Fade.web.js","sources":["../../../../../../../src/components/Checkbox/CheckboxIcon/Fade.web.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-useless-fragment */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { FadeProps } from './types';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst fadeIn = keyframes`\n  from {\n    transform: scale(.6);\n    opacity: 0;\n  }\n\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nconst fadeOut = keyframes`\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  to {\n    transform: scale(.6);\n    opacity: 0;\n  }\n`;\n\nconst AnimatedFade = styled.div<{ animationType: FlattenSimpleInterpolation | null }>(\n  ({ animationType }) =>\n    animationType === null\n      ? ''\n      : css`\n          ${animationType}\n        `,\n);\n\nconst Fade = ({ show, children, styles }: FadeProps) => {\n  const { theme } = useTheme();\n\n  const duration = theme.motion.duration.xquick;\n  const enter = css`\n    animation: ${fadeIn} ${makeMotionTime(duration)} ${theme.motion.easing.entrance as string};\n  `;\n\n  const exit = css`\n    animation: ${fadeOut} ${makeMotionTime(duration)} ${theme.motion.easing.exit as string};\n  `;\n\n  // if show is undefined do not initialize the animation to prevent flash of animation\n  const animation = show === undefined ? null : show ? enter : exit;\n\n  return (\n    <AnimatedFade\n      animationType={animation}\n      style={{\n        opacity: show ? 1 : 0,\n        ...styles,\n      }}\n      {...metaAttribute({ name: MetaConstants.CheckboxIconFade })}\n    >\n      {children}\n    </AnimatedFade>\n  );\n};\n\nexport { Fade };\n"],"names":["fadeIn","keyframes","fadeOut","AnimatedFade","styled","div","withConfig","displayName","componentId","_ref","animationType","css","Fade","_ref2","show","children","styles","_useTheme","useTheme","theme","duration","motion","xquick","enter","makeMotionTime","easing","entrance","exit","animation","undefined","_jsx","_objectSpread","style","opacity","metaAttribute","name","MetaConstants","CheckboxIconFade"],"mappings":";;;;;;;;;;;;;;AAWA,IAAMA,MAAM,gBAAGC,SAAS,CAUvB,CAAA,uEAAA,CAAA,CAAA,CAAA;AAED,IAAMC,OAAO,gBAAGD,SAAS,CAUxB,CAAA,uEAAA,CAAA,CAAA,CAAA;AAED,IAAME,YAAY,gBAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,uBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAC7B,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,aAAa,GAAAD,IAAA,CAAbC,aAAa,CAAA;EAAA,OACdA,aAAa,KAAK,IAAI,GAClB,EAAE,GACFC,GAAG,CACCD,CAAAA,EAAAA,EAAAA,EAAAA,CAAAA,EAAAA,aAAa,CAChB,CAAA;AAAA,CACR,CAAA,CAAA;AAED,IAAME,IAAI,GAAG,SAAPA,IAAIA,CAAAC,KAAA,EAA8C;AAAA,EAAA,IAAxCC,IAAI,GAAAD,KAAA,CAAJC,IAAI;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IAAEC,MAAM,GAAAH,KAAA,CAANG,MAAM,CAAA;AACpC,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;EAEb,IAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAACD,QAAQ,CAACE,MAAM,CAAA;AAC7C,EAAA,IAAMC,KAAK,gBAAGZ,GAAG,gCACFX,MAAM,EAAIwB,cAAc,CAACJ,QAAQ,CAAC,EAAID,KAAK,CAACE,MAAM,CAACI,MAAM,CAACC,QAAQ,CAChF,CAAA;AAED,EAAA,IAAMC,IAAI,gBAAGhB,GAAG,gCACDT,OAAO,EAAIsB,cAAc,CAACJ,QAAQ,CAAC,EAAID,KAAK,CAACE,MAAM,CAACI,MAAM,CAACE,IAAI,CAC7E,CAAA;;AAED;AACA,EAAA,IAAMC,SAAS,GAAGd,IAAI,KAAKe,SAAS,GAAG,IAAI,GAAGf,IAAI,GAAGS,KAAK,GAAGI,IAAI,CAAA;AAEjE,EAAA,oBACEG,GAAA,CAAC3B,YAAY,EAAA4B,aAAA,CAAAA,aAAA,CAAA;AACXrB,IAAAA,aAAa,EAAEkB,SAAU;AACzBI,IAAAA,KAAK,EAAAD,aAAA,CAAA;AACHE,MAAAA,OAAO,EAAEnB,IAAI,GAAG,CAAC,GAAG,CAAA;AAAC,KAAA,EAClBE,MAAM,CAAA;AACT,GAAA,EACEkB,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,gBAAAA;AAAiB,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAtB,IAAAA,QAAA,EAE1DA,QAAAA;AAAQ,GAAA,CACG,CAAC,CAAA;AAEnB;;;;"}

package/build/lib/web/development/components/Checkbox/checkboxTokens.js

@@ -38,7 +38,7 @@ var checkboxIconColors = {
     "default": {
       border: {
         checked: 'colors.interactive.border.primary.default',
-        unchecked: 'colors.interactive.border.gray.default'
+        unchecked: 'colors.interactive.border.gray.highlighted'
       },
       background: {
         checked: 'colors.interactive.background.primary.default',
@@ -47,7 +47,7 @@ var checkboxIconColors = {
     },
     disabled: {
       border: {
-        checked: 'colors.interactive.border.primary.disabled',
+        checked: 'colors.transparent',
         unchecked: 'colors.interactive.border.gray.disabled'
       },
       background: {
@@ -76,7 +76,7 @@ var checkboxHoverTokens = {
     border: {
       checked: 'colors.interactive.background.primary.highlighted',
       // Intentionally not using border tokens here since we want to match the background color
-      unchecked: 'colors.interactive.border.gray.default'
+      unchecked: 'colors.interactive.border.gray.highlighted'
     }
   }
 };

package/build/lib/web/development/components/Checkbox/checkboxTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxTokens.js","sources":["../../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.2',\n        desktop: 'spacing.2',\n      },\n      medium: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.3',\n      },\n      large: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.3',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n    },\n    large: {\n      width: size[20],\n      height: size[20],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype CheckboxIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n  variants: {\n    default: {\n      border: {\n        checked: 'colors.interactive.border.primary.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n    disabled: {\n      border: {\n        checked: 'colors.interactive.border.primary.disabled',\n        unchecked: 'colors.interactive.border.gray.disabled',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.disabled',\n        unchecked: 'colors.transparent',\n      },\n    },\n    negative: {\n      border: {\n        checked: 'colors.interactive.border.negative.default',\n        unchecked: 'colors.interactive.border.negative.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.negative.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.interactive.background.primary.highlighted',\n      unchecked: 'colors.interactive.background.gray.faded',\n    },\n    border: {\n      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n      unchecked: 'colors.interactive.border.gray.default',\n    },\n  },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","checkboxIconColors","variants","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;AAKA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDE,MAAAA,KAAK,EAAE;AACLH,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDG,EAAAA,IAAI,EAAE;AACJL,IAAAA,KAAK,EAAE;AACLM,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDJ,IAAAA,MAAM,EAAE;AACNG,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDH,IAAAA,KAAK,EAAE;AACLE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;AACjB,KAAA;AACF,GAAA;AACF,EAAU;AAsBV,IAAME,kBAAsC,GAAG;AAC7CC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMI,mBAA6C,GAAG;EACpD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVF,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDF,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}
+{"version":3,"file":"checkboxTokens.js","sources":["../../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.2',\n        desktop: 'spacing.2',\n      },\n      medium: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.3',\n      },\n      large: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.3',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n    },\n    large: {\n      width: size[20],\n      height: size[20],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype CheckboxIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n  variants: {\n    default: {\n      border: {\n        checked: 'colors.interactive.border.primary.default',\n        unchecked: 'colors.interactive.border.gray.highlighted',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n    disabled: {\n      border: {\n        checked: 'colors.transparent',\n        unchecked: 'colors.interactive.border.gray.disabled',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.disabled',\n        unchecked: 'colors.transparent',\n      },\n    },\n    negative: {\n      border: {\n        checked: 'colors.interactive.border.negative.default',\n        unchecked: 'colors.interactive.border.negative.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.negative.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.interactive.background.primary.highlighted',\n      unchecked: 'colors.interactive.background.gray.faded',\n    },\n    border: {\n      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n      unchecked: 'colors.interactive.border.gray.highlighted',\n    },\n  },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","checkboxIconColors","variants","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;AAKA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDE,MAAAA,KAAK,EAAE;AACLH,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDG,EAAAA,IAAI,EAAE;AACJL,IAAAA,KAAK,EAAE;AACLM,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDJ,IAAAA,MAAM,EAAE;AACNG,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDH,IAAAA,KAAK,EAAE;AACLE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;AACjB,KAAA;AACF,GAAA;AACF,EAAU;AAsBV,IAAME,kBAAsC,GAAG;AAC7CC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,oBAAoB;AAC7BC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMI,mBAA6C,GAAG;EACpD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVF,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDF,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,4CAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}

package/build/lib/web/development/components/Chip/Chip.js

@@ -191,23 +191,23 @@ var _Chip = function _Chip(_ref, ref) {
             isDisabled: _isDisabled,
             isPressed: isPressed,
             isDesktop: matchedDeviceType === 'desktop',
+            size: _size,
             children: /*#__PURE__*/jsxs(StyledChipWrapper, {
               borderColor: chipBorderColor,
               isChecked: _isChecked,
               isDisabled: _isDisabled,
               color: chipColor,
+              size: _size,
               display: "flex",
               flexDirection: "row",
               justifyContent: "center",
               alignItems: "center",
               overflow: "hidden",
               backgroundColor: chipBackgroundColor,
-              borderRadius: "max",
               borderWidth: ['xsmall', 'small'].includes(_size) ? 'thinner' : 'thin',
               paddingLeft: chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].left[_size],
               paddingRight: chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].right[_size],
               height: makeSize(chipHeightTokens[_size]),
-              gap: "spacing.3",
               width: "100%",
               children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
                 display: "flex",
@@ -215,11 +215,15 @@ var _Chip = function _Chip(_ref, ref) {
                   color: chipIconColor,
                   size: chipIconSizes[_size]
                 })
-              }) : null, children ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, chipTextSizes[_size]), {}, {
-                truncateAfterLines: 1,
-                color: chipTextColor,
-                children: children
-              })) : null]
+              }) : null, children ? /*#__PURE__*/jsx(BaseBox, {
+                paddingLeft: "spacing.2",
+                paddingRight: "spacing.2",
+                children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, chipTextSizes[_size]), {}, {
+                  truncateAfterLines: 1,
+                  color: chipTextColor,
+                  children: children
+                }))
+              }) : null]
             })
           })]
         })

package/build/lib/web/development/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { useChipGroupContext } from './ChipGroupContext';\nimport {\n  chipIconSizes,\n  chipTextSizes,\n  chipColorTokens,\n  getChipInputHoverTokens,\n  chipHeightTokens,\n  chipHorizontalPaddingTokens,\n} from './chipTokens';\nimport type { ChipProps } from './types';\nimport { AnimatedChip } from './AnimatedChip';\nimport { StyledChipWrapper } from './StyledChipWrapper';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport type { BladeElementRef } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { useCheckbox } from '~components/Checkbox/useCheckbox';\nimport { useRadio } from '~components/Radio/useRadio';\nimport { isReactNative, makeSize, useBreakpoint } from '~utils';\nimport { Text } from '~components/Typography';\nimport { useTheme } from '~components/BladeProvider';\nimport { getInnerMotionRef, getOuterMotionRef } from '~utils/getMotionRefs';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype OnChange = ({\n  isChecked,\n  event,\n  value,\n}: {\n  isChecked: boolean;\n  event?: React.ChangeEvent;\n  value?: string;\n}) => void;\n\nconst _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (\n  {\n    isDisabled,\n    value,\n    children,\n    icon: Icon,\n    color,\n    testID,\n    _motionMeta,\n    width,\n    maxWidth,\n    minWidth,\n    ...rest\n  },\n  ref,\n) => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const groupProps = useChipGroupContext();\n  const isInsideGroup = !isEmpty(groupProps);\n  const [isPressed, setIsPressed] = React.useState(false);\n\n  if (__DEV__) {\n    if (!isInsideGroup) {\n      throwBladeError({\n        moduleName: 'Chip',\n        message:\n          '<Chip /> component should only be used within the context of a <ChipGroup /> component',\n      });\n    }\n  }\n\n  const hasError = groupProps?.validationState === 'error';\n  const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n  const _isRequired = groupProps?.isRequired || groupProps?.necessityIndicator === 'required';\n  const _name = groupProps?.name;\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n  const _isChecked = groupProps?.state?.isChecked(value!);\n  // Check if the defaultValue property of groupProps is undefined\n  const defaultChecked =\n    typeof groupProps?.defaultValue === 'undefined'\n      ? undefined // If undefined, defaultChecked is also undefined\n      : groupProps?.defaultValue?.includes(value as string); // If multiple selection, check if value is in defaultValue array\n  const useChip = groupProps?.selectionType === 'single' ? useRadio : useCheckbox;\n  const _size = groupProps?.size || 'small';\n  const chipColor = color ?? groupProps?.color ?? 'primary';\n  const handleChange: OnChange = ({ isChecked, value }) => {\n    if (isChecked) {\n      groupProps?.state?.addValue(value!);\n    } else {\n      groupProps?.state?.removeValue(value!);\n    }\n  };\n\n  const { state, inputProps } = useChip({\n    defaultChecked,\n    isChecked: _isChecked,\n    isDisabled: _isDisabled,\n    isRequired: _isRequired,\n    hasError,\n    name: _name,\n    value,\n    onChange: handleChange,\n  });\n\n  const handlePointerPressedIn = React.useCallback(() => {\n    if (_isDisabled) return;\n    setIsPressed(true);\n  }, [_isDisabled]);\n\n  const handlePointerPressedOut = React.useCallback(() => {\n    if (_isDisabled) return;\n    setIsPressed(false);\n  }, [_isDisabled]);\n\n  const handleKeyboardPressedIn = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (_isDisabled) return;\n      if (e.key === ' ') {\n        setIsPressed(true);\n      }\n    },\n    [_isDisabled],\n  );\n\n  const handleKeyboardPressedOut = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (_isDisabled) return;\n      if (e.key === ' ') {\n        setIsPressed(false);\n      }\n    },\n    [_isDisabled],\n  );\n\n  let textVariant = 'unchecked';\n  if (_isChecked && chipColor) {\n    textVariant = chipColor;\n  }\n  if (_isDisabled) {\n    textVariant = 'disabled';\n  }\n  const chipTextColor = chipColorTokens.text[textVariant];\n  const chipIconColor = chipColorTokens.icon[textVariant];\n\n  let colorVariant = 'unchecked';\n  const stateVariant = _isDisabled ? 'disabled' : 'default';\n  if (_isChecked && chipColor) {\n    colorVariant = chipColor;\n  }\n  const chipBackgroundColor = chipColorTokens.background[colorVariant][stateVariant];\n  const chipBorderColor = chipColorTokens.border[colorVariant][stateVariant];\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.Chip, testID })}\n      {...getStyledProps(rest)}\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      ref={getOuterMotionRef({ _motionMeta, ref })}\n      width={width}\n      maxWidth={maxWidth}\n      minWidth={minWidth}\n    >\n      <SelectorLabel\n        componentName={MetaConstants.ChipLabel}\n        onTouchStart={handlePointerPressedIn}\n        onTouchEnd={handlePointerPressedOut}\n        onMouseDown={handlePointerPressedIn}\n        onMouseUp={handlePointerPressedOut}\n        onMouseOut={handlePointerPressedOut}\n        onKeyDown={handleKeyboardPressedIn}\n        onKeyUp={handleKeyboardPressedOut}\n        inputProps={isReactNative() ? inputProps : {}}\n        style={{\n          cursor: _isDisabled ? 'not-allowed' : 'pointer',\n          width: '100%',\n        }}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n          <BaseBox display=\"flex\" alignItems=\"center\" flexDirection=\"row\">\n            <SelectorInput\n              hoverTokens={getChipInputHoverTokens(chipColor)}\n              isChecked={state.isChecked}\n              isDisabled={_isDisabled}\n              inputProps={inputProps}\n              hasError={hasError}\n              ref={getInnerMotionRef({ _motionMeta, ref })}\n              {...makeAnalyticsAttribute(rest)}\n            />\n            <AnimatedChip\n              borderColor={chipBorderColor}\n              isDisabled={_isDisabled}\n              isPressed={isPressed}\n              isDesktop={matchedDeviceType === 'desktop'}\n            >\n              <StyledChipWrapper\n                borderColor={chipBorderColor}\n                isChecked={_isChecked}\n                isDisabled={_isDisabled}\n                color={chipColor}\n                display=\"flex\"\n                flexDirection=\"row\"\n                justifyContent=\"center\"\n                alignItems=\"center\"\n                overflow=\"hidden\"\n                backgroundColor={chipBackgroundColor}\n                borderRadius=\"max\"\n                borderWidth={['xsmall', 'small'].includes(_size) ? 'thinner' : 'thin'}\n                paddingLeft={\n                  chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].left[\n                    _size\n                  ]\n                }\n                paddingRight={\n                  chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].right[\n                    _size\n                  ]\n                }\n                height={makeSize(chipHeightTokens[_size])}\n                gap=\"spacing.3\"\n                width=\"100%\"\n              >\n                {Icon ? (\n                  <BaseBox display=\"flex\">\n                    <Icon color={chipIconColor} size={chipIconSizes[_size]} />\n                  </BaseBox>\n                ) : null}\n                {children ? (\n                  <Text {...chipTextSizes[_size]} truncateAfterLines={1} color={chipTextColor}>\n                    {children}\n                  </Text>\n                ) : null}\n              </StyledChipWrapper>\n            </AnimatedChip>\n          </BaseBox>\n        </BaseBox>\n      </SelectorLabel>\n    </BaseBox>\n  );\n};\n\nconst Chip = assignWithoutSideEffects(React.forwardRef(_Chip), {\n  displayName: 'Chip',\n});\n\nexport { Chip };\nexport type { ChipProps };\n"],"names":["_Chip","_ref","ref","_groupProps$state","_groupProps$defaultVa","_ref2","isDisabled","value","children","Icon","icon","color","testID","_motionMeta","width","maxWidth","minWidth","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","groupProps","useChipGroupContext","isInsideGroup","isEmpty","_React$useState","React","useState","_React$useState2","_slicedToArray","isPressed","setIsPressed","throwBladeError","moduleName","message","hasError","validationState","_isDisabled","_isRequired","isRequired","necessityIndicator","_name","name","_isChecked","state","isChecked","defaultChecked","defaultValue","undefined","includes","useChip","selectionType","useRadio","useCheckbox","_size","size","chipColor","handleChange","_ref3","_groupProps$state2","addValue","_groupProps$state3","removeValue","_useChip","onChange","inputProps","handlePointerPressedIn","useCallback","handlePointerPressedOut","handleKeyboardPressedIn","e","key","handleKeyboardPressedOut","textVariant","chipTextColor","chipColorTokens","text","chipIconColor","colorVariant","stateVariant","chipBackgroundColor","background","chipBorderColor","border","_jsx","BaseBox","_objectSpread","metaAttribute","MetaConstants","Chip","getStyledProps","display","isReactNative","getOuterMotionRef","SelectorLabel","componentName","ChipLabel","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","onMouseOut","onKeyDown","onKeyUp","style","cursor","flexDirection","_jsxs","alignItems","SelectorInput","hoverTokens","getChipInputHoverTokens","getInnerMotionRef","makeAnalyticsAttribute","AnimatedChip","borderColor","isDesktop","StyledChipWrapper","justifyContent","overflow","backgroundColor","borderRadius","borderWidth","paddingLeft","chipHorizontalPaddingTokens","Boolean","left","paddingRight","right","height","makeSize","chipHeightTokens","gap","chipIconSizes","Text","chipTextSizes","truncateAfterLines","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"Chip.js","sources":["../../../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { useChipGroupContext } from './ChipGroupContext';\nimport {\n  chipIconSizes,\n  chipTextSizes,\n  chipColorTokens,\n  getChipInputHoverTokens,\n  chipHeightTokens,\n  chipHorizontalPaddingTokens,\n} from './chipTokens';\nimport type { ChipProps } from './types';\nimport { AnimatedChip } from './AnimatedChip';\nimport { StyledChipWrapper } from './StyledChipWrapper';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport type { BladeElementRef } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { useCheckbox } from '~components/Checkbox/useCheckbox';\nimport { useRadio } from '~components/Radio/useRadio';\nimport { isReactNative, makeSize, useBreakpoint } from '~utils';\nimport { Text } from '~components/Typography';\nimport { useTheme } from '~components/BladeProvider';\nimport { getInnerMotionRef, getOuterMotionRef } from '~utils/getMotionRefs';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype OnChange = ({\n  isChecked,\n  event,\n  value,\n}: {\n  isChecked: boolean;\n  event?: React.ChangeEvent;\n  value?: string;\n}) => void;\n\nconst _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (\n  {\n    isDisabled,\n    value,\n    children,\n    icon: Icon,\n    color,\n    testID,\n    _motionMeta,\n    width,\n    maxWidth,\n    minWidth,\n    ...rest\n  },\n  ref,\n) => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const groupProps = useChipGroupContext();\n  const isInsideGroup = !isEmpty(groupProps);\n  const [isPressed, setIsPressed] = React.useState(false);\n\n  if (__DEV__) {\n    if (!isInsideGroup) {\n      throwBladeError({\n        moduleName: 'Chip',\n        message:\n          '<Chip /> component should only be used within the context of a <ChipGroup /> component',\n      });\n    }\n  }\n\n  const hasError = groupProps?.validationState === 'error';\n  const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n  const _isRequired = groupProps?.isRequired || groupProps?.necessityIndicator === 'required';\n  const _name = groupProps?.name;\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n  const _isChecked = groupProps?.state?.isChecked(value!);\n  // Check if the defaultValue property of groupProps is undefined\n  const defaultChecked =\n    typeof groupProps?.defaultValue === 'undefined'\n      ? undefined // If undefined, defaultChecked is also undefined\n      : groupProps?.defaultValue?.includes(value as string); // If multiple selection, check if value is in defaultValue array\n  const useChip = groupProps?.selectionType === 'single' ? useRadio : useCheckbox;\n  const _size = groupProps?.size || 'small';\n  const chipColor = color ?? groupProps?.color ?? 'primary';\n  const handleChange: OnChange = ({ isChecked, value }) => {\n    if (isChecked) {\n      groupProps?.state?.addValue(value!);\n    } else {\n      groupProps?.state?.removeValue(value!);\n    }\n  };\n\n  const { state, inputProps } = useChip({\n    defaultChecked,\n    isChecked: _isChecked,\n    isDisabled: _isDisabled,\n    isRequired: _isRequired,\n    hasError,\n    name: _name,\n    value,\n    onChange: handleChange,\n  });\n\n  const handlePointerPressedIn = React.useCallback(() => {\n    if (_isDisabled) return;\n    setIsPressed(true);\n  }, [_isDisabled]);\n\n  const handlePointerPressedOut = React.useCallback(() => {\n    if (_isDisabled) return;\n    setIsPressed(false);\n  }, [_isDisabled]);\n\n  const handleKeyboardPressedIn = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (_isDisabled) return;\n      if (e.key === ' ') {\n        setIsPressed(true);\n      }\n    },\n    [_isDisabled],\n  );\n\n  const handleKeyboardPressedOut = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (_isDisabled) return;\n      if (e.key === ' ') {\n        setIsPressed(false);\n      }\n    },\n    [_isDisabled],\n  );\n\n  let textVariant = 'unchecked';\n  if (_isChecked && chipColor) {\n    textVariant = chipColor;\n  }\n  if (_isDisabled) {\n    textVariant = 'disabled';\n  }\n  const chipTextColor = chipColorTokens.text[textVariant];\n  const chipIconColor = chipColorTokens.icon[textVariant];\n\n  let colorVariant = 'unchecked';\n  const stateVariant = _isDisabled ? 'disabled' : 'default';\n  if (_isChecked && chipColor) {\n    colorVariant = chipColor;\n  }\n  const chipBackgroundColor = chipColorTokens.background[colorVariant][stateVariant];\n  const chipBorderColor = chipColorTokens.border[colorVariant][stateVariant];\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.Chip, testID })}\n      {...getStyledProps(rest)}\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      ref={getOuterMotionRef({ _motionMeta, ref })}\n      width={width}\n      maxWidth={maxWidth}\n      minWidth={minWidth}\n    >\n      <SelectorLabel\n        componentName={MetaConstants.ChipLabel}\n        onTouchStart={handlePointerPressedIn}\n        onTouchEnd={handlePointerPressedOut}\n        onMouseDown={handlePointerPressedIn}\n        onMouseUp={handlePointerPressedOut}\n        onMouseOut={handlePointerPressedOut}\n        onKeyDown={handleKeyboardPressedIn}\n        onKeyUp={handleKeyboardPressedOut}\n        inputProps={isReactNative() ? inputProps : {}}\n        style={{\n          cursor: _isDisabled ? 'not-allowed' : 'pointer',\n          width: '100%',\n        }}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n          <BaseBox display=\"flex\" alignItems=\"center\" flexDirection=\"row\">\n            <SelectorInput\n              hoverTokens={getChipInputHoverTokens(chipColor)}\n              isChecked={state.isChecked}\n              isDisabled={_isDisabled}\n              inputProps={inputProps}\n              hasError={hasError}\n              ref={getInnerMotionRef({ _motionMeta, ref })}\n              {...makeAnalyticsAttribute(rest)}\n            />\n            <AnimatedChip\n              borderColor={chipBorderColor}\n              isDisabled={_isDisabled}\n              isPressed={isPressed}\n              isDesktop={matchedDeviceType === 'desktop'}\n              size={_size}\n            >\n              <StyledChipWrapper\n                borderColor={chipBorderColor}\n                isChecked={_isChecked}\n                isDisabled={_isDisabled}\n                color={chipColor}\n                size={_size}\n                display=\"flex\"\n                flexDirection=\"row\"\n                justifyContent=\"center\"\n                alignItems=\"center\"\n                overflow=\"hidden\"\n                backgroundColor={chipBackgroundColor}\n                borderWidth={['xsmall', 'small'].includes(_size) ? 'thinner' : 'thin'}\n                paddingLeft={\n                  chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].left[\n                    _size\n                  ]\n                }\n                paddingRight={\n                  chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].right[\n                    _size\n                  ]\n                }\n                height={makeSize(chipHeightTokens[_size])}\n                width=\"100%\"\n              >\n                {Icon ? (\n                  <BaseBox display=\"flex\">\n                    <Icon color={chipIconColor} size={chipIconSizes[_size]} />\n                  </BaseBox>\n                ) : null}\n                {children ? (\n                  <BaseBox paddingLeft=\"spacing.2\" paddingRight=\"spacing.2\">\n                    <Text {...chipTextSizes[_size]} truncateAfterLines={1} color={chipTextColor}>\n                      {children}\n                    </Text>\n                  </BaseBox>\n                ) : null}\n              </StyledChipWrapper>\n            </AnimatedChip>\n          </BaseBox>\n        </BaseBox>\n      </SelectorLabel>\n    </BaseBox>\n  );\n};\n\nconst Chip = assignWithoutSideEffects(React.forwardRef(_Chip), {\n  displayName: 'Chip',\n});\n\nexport { Chip };\nexport type { ChipProps };\n"],"names":["_Chip","_ref","ref","_groupProps$state","_groupProps$defaultVa","_ref2","isDisabled","value","children","Icon","icon","color","testID","_motionMeta","width","maxWidth","minWidth","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","groupProps","useChipGroupContext","isInsideGroup","isEmpty","_React$useState","React","useState","_React$useState2","_slicedToArray","isPressed","setIsPressed","throwBladeError","moduleName","message","hasError","validationState","_isDisabled","_isRequired","isRequired","necessityIndicator","_name","name","_isChecked","state","isChecked","defaultChecked","defaultValue","undefined","includes","useChip","selectionType","useRadio","useCheckbox","_size","size","chipColor","handleChange","_ref3","_groupProps$state2","addValue","_groupProps$state3","removeValue","_useChip","onChange","inputProps","handlePointerPressedIn","useCallback","handlePointerPressedOut","handleKeyboardPressedIn","e","key","handleKeyboardPressedOut","textVariant","chipTextColor","chipColorTokens","text","chipIconColor","colorVariant","stateVariant","chipBackgroundColor","background","chipBorderColor","border","_jsx","BaseBox","_objectSpread","metaAttribute","MetaConstants","Chip","getStyledProps","display","isReactNative","getOuterMotionRef","SelectorLabel","componentName","ChipLabel","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","onMouseOut","onKeyDown","onKeyUp","style","cursor","flexDirection","_jsxs","alignItems","SelectorInput","hoverTokens","getChipInputHoverTokens","getInnerMotionRef","makeAnalyticsAttribute","AnimatedChip","borderColor","isDesktop","StyledChipWrapper","justifyContent","overflow","backgroundColor","borderWidth","paddingLeft","chipHorizontalPaddingTokens","Boolean","left","paddingRight","right","height","makeSize","chipHeightTokens","chipIconSizes","Text","chipTextSizes","truncateAfterLines","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}

package/build/lib/web/development/components/Chip/StyledChipWrapper.web.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import styled from 'styled-components';
-import { chipMotionTokens, chipColorTokens } from './chipTokens.js';
+import { chipMotionTokens, chipBorderRadiusTokens, chipColorTokens } from './chipTokens.js';
 import getIn from '../../utils/lodashButBetter/get.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/makeMotionTime/index.web.js';
@@ -19,12 +19,18 @@ var StyledChipWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     borderColor = _ref.borderColor,
     isChecked = _ref.isChecked,
     isDisabled = _ref.isDisabled,
-    color = _ref.color;
+    color = _ref.color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size;
   var easing = getIn(theme.motion, chipMotionTokens.easing);
   var duration = castWebType(makeMotionTime(getIn(theme.motion, chipMotionTokens.duration)));
+  var borderRadiusKey = chipBorderRadiusTokens[size];
+  var outerRadius = theme.border.radius[borderRadiusKey];
+  var outerBorderWidth = theme.border.width.thin;
   return _objectSpread({
     display: 'flex',
-    borderColor: isChecked ? getIn(theme.colors, borderColor) : 'transparent'
+    borderColor: isChecked ? getIn(theme.colors, borderColor) : 'transparent',
+    borderRadius: "".concat(outerRadius - outerBorderWidth, "px")
   }, !isDisabled && {
     '&:hover': {
       backgroundColor: getIn(theme.colors, chipColorTokens.background[isChecked && color ? color : 'unchecked'].hover),

package/build/lib/web/development/components/Chip/StyledChipWrapper.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledChipWrapper.web.js","sources":["../../../../../../src/components/Chip/StyledChipWrapper.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledChipWrapperProps } from './types';\nimport { chipMotionTokens, chipColorTokens } from './chipTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { castWebType } from '~utils';\n\nconst StyledChipWrapper = styled(BaseBox)<StyledChipWrapperProps>(\n  ({ theme, borderColor, isChecked, isDisabled, color }) => {\n    const easing = getIn(theme.motion, chipMotionTokens.easing);\n    const duration = castWebType(makeMotionTime(getIn(theme.motion, chipMotionTokens.duration)));\n\n    return {\n      display: 'flex',\n      borderColor: isChecked ? getIn(theme.colors, borderColor) : 'transparent',\n\n      ...(!isDisabled && {\n        '&:hover': {\n          backgroundColor: getIn(\n            theme.colors,\n            chipColorTokens.background[isChecked && color ? color : 'unchecked'].hover,\n          ),\n          transitionTimingFunction: easing,\n          transitionDuration: duration,\n        },\n      }),\n    };\n  },\n);\n\nexport { StyledChipWrapper };\n"],"names":["StyledChipWrapper","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","borderColor","isChecked","isDisabled","color","easing","getIn","motion","chipMotionTokens","duration","castWebType","makeMotionTime","_objectSpread","display","colors","backgroundColor","chipColorTokens","background","hover","transitionTimingFunction","transitionDuration"],"mappings":";;;;;;;;;;;;;AAQA,IAAMA,iBAAiB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,yCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACvC,CAAA,CAAA,UAAAC,IAAA,EAA0D;AAAA,EAAA,IAAvDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAEC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK,CAAA;EACjD,IAAMC,MAAM,GAAGC,KAAK,CAACN,KAAK,CAACO,MAAM,EAAEC,gBAAgB,CAACH,MAAM,CAAC,CAAA;AAC3D,EAAA,IAAMI,QAAQ,GAAGC,WAAW,CAACC,cAAc,CAACL,KAAK,CAACN,KAAK,CAACO,MAAM,EAAEC,gBAAgB,CAACC,QAAQ,CAAC,CAAC,CAAC,CAAA;AAE5F,EAAA,OAAAG,aAAA,CAAA;AACEC,IAAAA,OAAO,EAAE,MAAM;IACfZ,WAAW,EAAEC,SAAS,GAAGI,KAAK,CAACN,KAAK,CAACc,MAAM,EAAEb,WAAW,CAAC,GAAG,aAAA;GAExD,EAAA,CAACE,UAAU,IAAI;AACjB,IAAA,SAAS,EAAE;MACTY,eAAe,EAAET,KAAK,CACpBN,KAAK,CAACc,MAAM,EACZE,eAAe,CAACC,UAAU,CAACf,SAAS,IAAIE,KAAK,GAAGA,KAAK,GAAG,WAAW,CAAC,CAACc,KACvE,CAAC;AACDC,MAAAA,wBAAwB,EAAEd,MAAM;AAChCe,MAAAA,kBAAkB,EAAEX,QAAAA;AACtB,KAAA;GACD,CAAA,CAAA;AAEL,CAAC;;;;"}
+{"version":3,"file":"StyledChipWrapper.web.js","sources":["../../../../../../src/components/Chip/StyledChipWrapper.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledChipWrapperProps } from './types';\nimport { chipMotionTokens, chipColorTokens, chipBorderRadiusTokens } from './chipTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { castWebType } from '~utils';\n\nconst StyledChipWrapper = styled(BaseBox)<StyledChipWrapperProps>(\n  ({ theme, borderColor, isChecked, isDisabled, color, size = 'small' as const }) => {\n    const easing = getIn(theme.motion, chipMotionTokens.easing);\n    const duration = castWebType(makeMotionTime(getIn(theme.motion, chipMotionTokens.duration)));\n    const borderRadiusKey = chipBorderRadiusTokens[size];\n    const outerRadius = theme.border.radius[borderRadiusKey];\n    const outerBorderWidth = theme.border.width.thin;\n\n    return {\n      display: 'flex',\n      borderColor: isChecked ? getIn(theme.colors, borderColor) : 'transparent',\n      borderRadius: `${outerRadius - outerBorderWidth}px`,\n\n      ...(!isDisabled && {\n        '&:hover': {\n          backgroundColor: getIn(\n            theme.colors,\n            chipColorTokens.background[isChecked && color ? color : 'unchecked'].hover,\n          ),\n          transitionTimingFunction: easing,\n          transitionDuration: duration,\n        },\n      }),\n    };\n  },\n);\n\nexport { StyledChipWrapper };\n"],"names":["StyledChipWrapper","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","borderColor","isChecked","isDisabled","color","_ref$size","size","easing","getIn","motion","chipMotionTokens","duration","castWebType","makeMotionTime","borderRadiusKey","chipBorderRadiusTokens","outerRadius","border","radius","outerBorderWidth","width","thin","_objectSpread","display","colors","borderRadius","concat","backgroundColor","chipColorTokens","background","hover","transitionTimingFunction","transitionDuration"],"mappings":";;;;;;;;;;;;;AAQA,IAAMA,iBAAiB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,yCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACvC,CAAA,CAAA,UAAAC,IAAA,EAAmF;AAAA,EAAA,IAAhFC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAEC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAAC,SAAA,GAAAN,IAAA,CAAEO,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA,CAAA;EACjE,IAAME,MAAM,GAAGC,KAAK,CAACR,KAAK,CAACS,MAAM,EAAEC,gBAAgB,CAACH,MAAM,CAAC,CAAA;AAC3D,EAAA,IAAMI,QAAQ,GAAGC,WAAW,CAACC,cAAc,CAACL,KAAK,CAACR,KAAK,CAACS,MAAM,EAAEC,gBAAgB,CAACC,QAAQ,CAAC,CAAC,CAAC,CAAA;AAC5F,EAAA,IAAMG,eAAe,GAAGC,sBAAsB,CAACT,IAAI,CAAC,CAAA;EACpD,IAAMU,WAAW,GAAGhB,KAAK,CAACiB,MAAM,CAACC,MAAM,CAACJ,eAAe,CAAC,CAAA;EACxD,IAAMK,gBAAgB,GAAGnB,KAAK,CAACiB,MAAM,CAACG,KAAK,CAACC,IAAI,CAAA;AAEhD,EAAA,OAAAC,aAAA,CAAA;AACEC,IAAAA,OAAO,EAAE,MAAM;AACftB,IAAAA,WAAW,EAAEC,SAAS,GAAGM,KAAK,CAACR,KAAK,CAACwB,MAAM,EAAEvB,WAAW,CAAC,GAAG,aAAa;AACzEwB,IAAAA,YAAY,EAAAC,EAAAA,CAAAA,MAAA,CAAKV,WAAW,GAAGG,gBAAgB,EAAA,IAAA,CAAA;GAE3C,EAAA,CAAChB,UAAU,IAAI;AACjB,IAAA,SAAS,EAAE;MACTwB,eAAe,EAAEnB,KAAK,CACpBR,KAAK,CAACwB,MAAM,EACZI,eAAe,CAACC,UAAU,CAAC3B,SAAS,IAAIE,KAAK,GAAGA,KAAK,GAAG,WAAW,CAAC,CAAC0B,KACvE,CAAC;AACDC,MAAAA,wBAAwB,EAAExB,MAAM;AAChCyB,MAAAA,kBAAkB,EAAErB,QAAAA;AACtB,KAAA;GACD,CAAA,CAAA;AAEL,CAAC;;;;"}