@razorpay/blade 12.68.0 → 12.89.1

package/build/lib/web/production/components/QuickFilters/QuickFilter.js

@@ -2,7 +2,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import './QuickFilterGroup/index.js';
-import '../Card/index.js';
+import { StyledQuickFilterWrapper } from './StyledQuickFilterWrapper.js';
 import '../Box/index.js';
 import '../Typography/index.js';
 import '../Radio/index.js';
@@ -18,7 +18,6 @@ import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeA
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { Text } from '../Typography/Text/Text.js';
 import { useQuickFilterGroupContext } from './QuickFilterGroup/QuickFilterContext.js';
-import { Card, CardBody } from '../Card/Card.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 
 var _excluded = ["value", "title", "trailing", "selectionType", "isSelected"],
@@ -34,6 +33,7 @@ var QuickFilterContent = function QuickFilterContent(_ref) {
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var isSingleSelection = selectionType === 'single';
   return /*#__PURE__*/jsxs(BaseBox, {
     display: "flex",
     flexDirection: "row",
@@ -42,25 +42,41 @@ var QuickFilterContent = function QuickFilterContent(_ref) {
     justifyContent: "center",
     alignItems: "center",
     paddingY: "spacing.3",
-    paddingLeft: "spacing.3",
+    paddingLeft: isSingleSelection ? 'spacing.4' : 'spacing.3',
     paddingRight: "spacing.4",
     children: [/*#__PURE__*/jsxs(Box, {
       display: "flex",
       flexDirection: "row",
-      gap: "spacing.2",
+      gap: isSingleSelection ? 'spacing.0' : 'spacing.2',
       justifyContent: "center",
       alignItems: "center",
-      children: [selectionType === 'single' ? /*#__PURE__*/jsx(Radio, _objectSpread({
+      children: [isSingleSelection ? /*#__PURE__*/jsx(Radio, _objectSpread({
         value: value,
         _hideRadioIcon: true
       }, makeAnalyticsAttribute(rest))) : /*#__PURE__*/jsx(Checkbox, _objectSpread({
         value: value
-      }, makeAnalyticsAttribute(rest))), /*#__PURE__*/jsx(Text, {
-        variant: "body",
-        size: "medium",
-        color: isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle',
-        weight: "medium",
-        children: title
+      }, makeAnalyticsAttribute(rest))), /*#__PURE__*/jsxs(BaseBox, {
+        display: 'grid',
+        children: [/*#__PURE__*/jsx(BaseBox, {
+          gridArea: '1 / 1',
+          visibility: 'hidden',
+          "aria-hidden": true,
+          children: /*#__PURE__*/jsx(Text, {
+            variant: "body",
+            size: "medium",
+            weight: "semibold",
+            children: title
+          })
+        }), /*#__PURE__*/jsx(BaseBox, {
+          gridArea: '1 / 1',
+          children: /*#__PURE__*/jsx(Text, {
+            variant: "body",
+            size: "medium",
+            color: isSelected ? 'interactive.text.gray.normal' : 'interactive.text.gray.subtle',
+            weight: isSelected ? 'semibold' : 'medium',
+            children: title
+          })
+        })]
       })]
     }), trailing]
   });
@@ -75,29 +91,24 @@ var QuickFilter = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     selectedQuickFilters = _useQuickFilterGroupC.selectedQuickFilters,
     selectionType = _useQuickFilterGroupC.selectionType;
   var isQuickFilterSelected = selectedQuickFilters.includes(value);
-  return /*#__PURE__*/jsx(Card, _objectSpread(_objectSpread(_objectSpread({
-    padding: "spacing.0",
+  return /*#__PURE__*/jsx(StyledQuickFilterWrapper, _objectSpread(_objectSpread(_objectSpread({
     as: "label",
-    accessibilityLabel: title,
-    borderRadius: "medium",
-    elevation: "none",
-    isSelected: isQuickFilterSelected,
-    ref: ref
-    // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff
-    ,
-    marginRight: "spacing.1"
+    ref: ref,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    borderRadius: "small",
+    isSelected: isQuickFilterSelected
   }, makeAnalyticsAttribute(rest)), metaAttribute({
     testID: testID
   })), {}, {
-    children: /*#__PURE__*/jsx(CardBody, {
-      children: /*#__PURE__*/jsx(QuickFilterContent, _objectSpread({
-        value: value,
-        title: title,
-        trailing: trailing,
-        selectionType: selectionType,
-        isSelected: isQuickFilterSelected
-      }, rest))
-    })
+    children: /*#__PURE__*/jsx(QuickFilterContent, _objectSpread({
+      value: value,
+      title: title,
+      trailing: trailing,
+      selectionType: selectionType,
+      isSelected: isQuickFilterSelected
+    }, rest))
   }));
 });
 

package/build/lib/web/production/components/QuickFilters/QuickFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickFilter.js","sources":["../../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n  value,\n  title,\n  trailing,\n  selectionType = 'single',\n  isSelected = false,\n  ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      gap=\"spacing.3\"\n      width=\"fit-content\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      paddingY=\"spacing.3\"\n      paddingLeft=\"spacing.3\"\n      paddingRight=\"spacing.4\"\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        gap=\"spacing.2\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n      >\n        {selectionType === 'single' ? (\n          <Radio value={value} _hideRadioIcon {...makeAnalyticsAttribute(rest)} />\n        ) : (\n          <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n        )}\n        <Text\n          variant=\"body\"\n          size=\"medium\"\n          color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n          weight=\"medium\"\n        >\n          {title}\n        </Text>\n      </Box>\n\n      {trailing}\n    </BaseBox>\n  );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n  ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n    const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n    const isQuickFilterSelected = selectedQuickFilters.includes(value);\n    return (\n      <Card\n        padding=\"spacing.0\"\n        as=\"label\"\n        accessibilityLabel={title}\n        borderRadius=\"medium\"\n        elevation=\"none\"\n        isSelected={isQuickFilterSelected}\n        ref={ref}\n        // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff\n        marginRight=\"spacing.1\"\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ testID })}\n      >\n        <CardBody>\n          <QuickFilterContent\n            value={value}\n            title={title}\n            trailing={trailing}\n            selectionType={selectionType}\n            isSelected={isQuickFilterSelected}\n            {...rest}\n          />\n        </CardBody>\n      </Card>\n    );\n  },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","_objectSpread","_hideRadioIcon","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","marginRight","metaAttribute","CardBody"],"mappings":"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"}
+{"version":3,"file":"QuickFilter.js","sources":["../../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { StyledQuickFilterWrapper } from './StyledQuickFilterWrapper';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n  value,\n  title,\n  trailing,\n  selectionType = 'single',\n  isSelected = false,\n  ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n  const isSingleSelection = selectionType === 'single';\n\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      gap=\"spacing.3\"\n      width=\"fit-content\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      paddingY=\"spacing.3\"\n      paddingLeft={isSingleSelection ? 'spacing.4' : 'spacing.3'}\n      paddingRight=\"spacing.4\"\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        gap={isSingleSelection ? 'spacing.0' : 'spacing.2'}\n        justifyContent=\"center\"\n        alignItems=\"center\"\n      >\n        {isSingleSelection ? (\n          <Radio value={value} _hideRadioIcon {...makeAnalyticsAttribute(rest)} />\n        ) : (\n          <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n        )}\n        <BaseBox display={'grid' as never}>\n          {/* Invisible bold text to reserve space and prevent layout shift */}\n          <BaseBox gridArea={'1 / 1' as never} visibility={'hidden' as never} aria-hidden={true}>\n            <Text variant=\"body\" size=\"medium\" weight=\"semibold\">\n              {title}\n            </Text>\n          </BaseBox>\n          {/* Visible text in the same grid cell */}\n          <BaseBox gridArea={'1 / 1' as never}>\n            <Text\n              variant=\"body\"\n              size=\"medium\"\n              color={isSelected ? 'interactive.text.gray.normal' : 'interactive.text.gray.subtle'}\n              weight={isSelected ? 'semibold' : 'medium'}\n            >\n              {title}\n            </Text>\n          </BaseBox>\n        </BaseBox>\n      </Box>\n\n      {trailing}\n    </BaseBox>\n  );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n  ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n    const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n    const isQuickFilterSelected = selectedQuickFilters.includes(value);\n\n    return (\n      <StyledQuickFilterWrapper\n        as=\"label\"\n        ref={ref as React.Ref<HTMLLabelElement>}\n        display=\"flex\"\n        flexDirection=\"column\"\n        alignItems=\"flex-start\"\n        borderRadius=\"small\"\n        isSelected={isQuickFilterSelected}\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ testID })}\n      >\n        <QuickFilterContent\n          value={value}\n          title={title}\n          trailing={trailing}\n          selectionType={selectionType}\n          isSelected={isQuickFilterSelected}\n          {...rest}\n        />\n      </StyledQuickFilterWrapper>\n    );\n  },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","isSingleSelection","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","_objectSpread","_hideRadioIcon","makeAnalyticsAttribute","Checkbox","gridArea","visibility","Text","variant","size","weight","color","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","StyledQuickFilterWrapper","as","borderRadius","metaAttribute"],"mappings":"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"}

package/build/lib/web/production/components/QuickFilters/StyledQuickFilterWrapper.js

@@ -0,0 +1,54 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import styled from 'styled-components';
+import '../Box/BaseBox/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import '../../utils/makeMotionTime/index.web.js';
+import '../../utils/index.js';
+import '../../utils/getFocusRingStyles/index.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { castWebType } from '../../utils/platform/castUtils.js';
+import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
+import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.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; }
+var quickFilterColorTokens = {
+  background: {
+    "default": 'transparent',
+    selected: 'interactive.background.gray.fadedHighlighted',
+    hover: 'interactive.background.gray.faded'
+  }
+};
+var StyledQuickFilterWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "StyledQuickFilterWrapper",
+  componentId: "sc-16cvpgq-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+    isSelected = _ref.isSelected;
+  var easing = getIn(theme.motion, 'easing.standard');
+  var duration = castWebType(makeMotionTime(getIn(theme.motion, 'duration.xquick')));
+  var defaultBackgroundColor = getIn(theme.colors, isSelected ? quickFilterColorTokens.background.selected : quickFilterColorTokens.background["default"]);
+  var hoverBackgroundColor = getIn(theme.colors, isSelected ? quickFilterColorTokens.background.selected : quickFilterColorTokens.background.hover);
+  return {
+    cursor: 'pointer',
+    backgroundColor: defaultBackgroundColor,
+    transitionProperty: 'background-color',
+    transitionTimingFunction: easing,
+    transitionDuration: duration,
+    '&:hover': {
+      backgroundColor: hoverBackgroundColor
+    },
+    '&:has(:focus-visible)': _objectSpread({
+      backgroundColor: hoverBackgroundColor
+    }, getFocusRingStyles({
+      theme: theme
+    })),
+    // Remove focus ring from inner Checkbox/Radio since the wrapper handles it
+    '& input:focus-visible + div': {
+      outline: 'none !important'
+    }
+  };
+});
+
+export { StyledQuickFilterWrapper };
+//# sourceMappingURL=StyledQuickFilterWrapper.js.map

package/build/lib/web/production/components/QuickFilters/StyledQuickFilterWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledQuickFilterWrapper.js","sources":["../../../../../../src/components/QuickFilters/StyledQuickFilterWrapper.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport BaseBox from '~components/Box/BaseBox';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { castWebType } from '~utils';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\ntype StyledQuickFilterWrapperProps = {\n  isSelected?: boolean;\n};\n\nconst quickFilterColorTokens = {\n  background: {\n    default: 'transparent',\n    selected: 'interactive.background.gray.fadedHighlighted',\n    hover: 'interactive.background.gray.faded',\n  },\n} as const;\n\nconst StyledQuickFilterWrapper = styled(BaseBox)<StyledQuickFilterWrapperProps>(\n  ({ theme, isSelected }) => {\n    const easing = getIn(theme.motion, 'easing.standard');\n    const duration = castWebType(makeMotionTime(getIn(theme.motion, 'duration.xquick')));\n\n    const defaultBackgroundColor = getIn(\n      theme.colors,\n      isSelected\n        ? quickFilterColorTokens.background.selected\n        : quickFilterColorTokens.background.default,\n    );\n\n    const hoverBackgroundColor = getIn(\n      theme.colors,\n      isSelected\n        ? quickFilterColorTokens.background.selected\n        : quickFilterColorTokens.background.hover,\n    );\n\n    return {\n      cursor: 'pointer',\n      backgroundColor: defaultBackgroundColor,\n      transitionProperty: 'background-color',\n      transitionTimingFunction: easing,\n      transitionDuration: duration,\n      '&:hover': {\n        backgroundColor: hoverBackgroundColor,\n      },\n      '&:has(:focus-visible)': {\n        backgroundColor: hoverBackgroundColor,\n        ...getFocusRingStyles({ theme }),\n      },\n      // Remove focus ring from inner Checkbox/Radio since the wrapper handles it\n      '& input:focus-visible + div': {\n        outline: 'none !important',\n      },\n    };\n  },\n);\n\nexport { StyledQuickFilterWrapper };\n"],"names":["quickFilterColorTokens","background","selected","hover","StyledQuickFilterWrapper","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","isSelected","easing","getIn","motion","duration","castWebType","makeMotionTime","defaultBackgroundColor","colors","hoverBackgroundColor","cursor","backgroundColor","transitionProperty","transitionTimingFunction","transitionDuration","_objectSpread","getFocusRingStyles","outline"],"mappings":";;;;;;;;;;;;;;AAWA,IAAMA,sBAAsB,GAAG;AAC7BC,EAAAA,UAAU,EAAE;AACV,IAAA,SAAA,EAAS,aAAa;AACtBC,IAAAA,QAAQ,EAAE,8CAA8C;AACxDC,IAAAA,KAAK,EAAE,mCAAA;AACT,GAAA;AACF,CAAU,CAAA;AAEV,IAAMC,wBAAwB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,0BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAC9C,CAAA,CAAA,UAAAC,IAAA,EAA2B;AAAA,EAAA,IAAxBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,UAAU,GAAAF,IAAA,CAAVE,UAAU,CAAA;EAClB,IAAMC,MAAM,GAAGC,KAAK,CAACH,KAAK,CAACI,MAAM,EAAE,iBAAiB,CAAC,CAAA;AACrD,EAAA,IAAMC,QAAQ,GAAGC,WAAW,CAACC,cAAc,CAACJ,KAAK,CAACH,KAAK,CAACI,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAA;EAEpF,IAAMI,sBAAsB,GAAGL,KAAK,CAClCH,KAAK,CAACS,MAAM,EACZR,UAAU,GACNZ,sBAAsB,CAACC,UAAU,CAACC,QAAQ,GAC1CF,sBAAsB,CAACC,UAAU,WACvC,CAAC,CAAA;EAED,IAAMoB,oBAAoB,GAAGP,KAAK,CAChCH,KAAK,CAACS,MAAM,EACZR,UAAU,GACNZ,sBAAsB,CAACC,UAAU,CAACC,QAAQ,GAC1CF,sBAAsB,CAACC,UAAU,CAACE,KACxC,CAAC,CAAA;EAED,OAAO;AACLmB,IAAAA,MAAM,EAAE,SAAS;AACjBC,IAAAA,eAAe,EAAEJ,sBAAsB;AACvCK,IAAAA,kBAAkB,EAAE,kBAAkB;AACtCC,IAAAA,wBAAwB,EAAEZ,MAAM;AAChCa,IAAAA,kBAAkB,EAAEV,QAAQ;AAC5B,IAAA,SAAS,EAAE;AACTO,MAAAA,eAAe,EAAEF,oBAAAA;KAClB;AACD,IAAA,uBAAuB,EAAAM,aAAA,CAAA;AACrBJ,MAAAA,eAAe,EAAEF,oBAAAA;AAAoB,KAAA,EAClCO,kBAAkB,CAAC;AAAEjB,MAAAA,KAAK,EAALA,KAAAA;AAAM,KAAC,CAAC,CACjC;AACD;AACA,IAAA,6BAA6B,EAAE;AAC7BkB,MAAAA,OAAO,EAAE,iBAAA;AACX,KAAA;GACD,CAAA;AACH,CAAC;;;;"}

package/build/lib/web/production/components/Radio/RadioIcon/RadioIconWrapperStyles.js

@@ -6,10 +6,12 @@ import '../../../utils/makeSpace/index.js';
 import '../../../utils/makeSize/index.js';
 import '../../../utils/makeBorderSize/index.js';
 import '../../../utils/makeMotionTime/index.web.js';
+import '../../../tokens/global/index.js';
 import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.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';
 import { castWebType } from '../../../utils/platform/castUtils.js';
 import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
 
@@ -20,7 +22,7 @@ var getRadioIconWrapperStyles = function getRadioIconWrapperStyles(_ref) {
     isChecked = _ref.isChecked,
     isDisabled = _ref.isDisabled,
     isNegative = _ref.isNegative,
-    size = _ref.size;
+    size$1 = _ref.size;
   var isReactNative = getPlatformType() === 'react-native';
   var variant = 'default';
   if (isDisabled) variant = 'disabled';
@@ -35,12 +37,13 @@ var getRadioIconWrapperStyles = function getRadioIconWrapperStyles(_ref) {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    minWidth: makeSpace(radioSizes.icon[size].width),
-    width: makeSpace(radioSizes.icon[size].width),
-    height: makeSpace(radioSizes.icon[size].height),
+    minWidth: makeSpace(radioSizes.icon[size$1].width),
+    width: makeSpace(radioSizes.icon[size$1].width),
+    height: makeSpace(radioSizes.icon[size$1].height),
     borderWidth: makeBorderSize(theme.border.width.thick),
     borderStyle: 'solid',
     margin: makeSpace(theme.spacing[1]),
+    marginTop: size$1 === 'small' ? makeSize(size['3']) : undefined,
     borderRadius: makeSize(theme.border.radius.max),
     backgroundColor: backgroundColor,
     borderColor: borderColor

package/build/lib/web/production/components/Radio/RadioIcon/RadioIconWrapperStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioIconWrapperStyles.js","sources":["../../../../../../../src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport { radioIconColors, radioSizes } from '../radioTokens';\nimport type { RadioIconProps } from './RadioIcon';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { castWebType, getPlatformType } from '~utils';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nexport type RadioRectProps = RadioIconProps;\n\nconst getRadioIconWrapperStyles = ({\n  theme,\n  isChecked,\n  isDisabled,\n  isNegative,\n  size,\n}: RadioRectProps & { theme: Theme }): CSSObject => {\n  const isReactNative = getPlatformType() === 'react-native';\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 = radioIconColors.variants[variant].background[checked];\n  const border = radioIconColors.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    minWidth: makeSpace(radioSizes.icon[size].width),\n    width: makeSpace(radioSizes.icon[size].width),\n    height: makeSpace(radioSizes.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.max),\n    backgroundColor,\n    borderColor,\n    ...(!isReactNative && {\n      transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n      transitionTimingFunction: castWebType(theme.motion.easing.exit),\n    }),\n  };\n};\n\nexport { getRadioIconWrapperStyles };\n"],"names":["getRadioIconWrapperStyles","_ref","theme","isChecked","isDisabled","isNegative","size","isReactNative","getPlatformType","variant","checked","background","radioIconColors","variants","border","backgroundColor","getIn","borderColor","_objectSpread","position","display","alignItems","justifyContent","minWidth","makeSpace","radioSizes","icon","width","height","borderWidth","makeBorderSize","thick","borderStyle","margin","spacing","borderRadius","makeSize","radius","max","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","exit"],"mappings":";;;;;;;;;;;;;;;;;AAaA,IAAMA,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAAC,IAAA,EAMqB;AAAA,EAAA,IALlDC,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;AAEJ,EAAA,IAAMC,aAAa,GAAGC,eAAe,EAAE,KAAK,cAAc,CAAA;EAC1D,IAAIC,OAA4C,GAAG,SAAS,CAAA;AAC5D,EAAA,IAAIL,UAAU,EAAEK,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAIJ,UAAU,EAAEI,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAMC,OAAO,GAAGP,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;AACnD,EAAA,IAAMQ,UAAU,GAAGC,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACE,UAAU,CAACD,OAAO,CAAC,CAAA;AACxE,EAAA,IAAMI,MAAM,GAAGF,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACK,MAAM,CAACJ,OAAO,CAAC,CAAA;AAChE,EAAA,IAAMK,eAAe,GAAGC,KAAK,CAACd,KAAK,EAAES,UAAU,CAAC,CAAA;AAChD,EAAA,IAAMM,WAAW,GAAGD,KAAK,CAACd,KAAK,EAAEY,MAAM,CAAC,CAAA;AAExC,EAAA,OAAAI,aAAA,CAAA;AACEC,IAAAA,QAAQ,EAAE,UAAU;AACpBC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;IACxBC,QAAQ,EAAEC,SAAS,CAACC,UAAU,CAACC,IAAI,CAACpB,IAAI,CAAC,CAACqB,KAAK,CAAC;IAChDA,KAAK,EAAEH,SAAS,CAACC,UAAU,CAACC,IAAI,CAACpB,IAAI,CAAC,CAACqB,KAAK,CAAC;IAC7CC,MAAM,EAAEJ,SAAS,CAACC,UAAU,CAACC,IAAI,CAACpB,IAAI,CAAC,CAACsB,MAAM,CAAC;IAC/CC,WAAW,EAAEC,cAAc,CAAC5B,KAAK,CAACY,MAAM,CAACa,KAAK,CAACI,KAAK,CAAC;AACrDC,IAAAA,WAAW,EAAE,OAAO;IACpBC,MAAM,EAAET,SAAS,CAACtB,KAAK,CAACgC,OAAO,CAAC,CAAC,CAAC,CAAC;IACnCC,YAAY,EAAEC,QAAQ,CAAClC,KAAK,CAACY,MAAM,CAACuB,MAAM,CAACC,GAAG,CAAC;AAC/CvB,IAAAA,eAAe,EAAfA,eAAe;AACfE,IAAAA,WAAW,EAAXA,WAAAA;GACI,EAAA,CAACV,aAAa,IAAI;AACpBgC,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,cAAc,CAACvC,KAAK,CAACwC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,CAAC;IAC7EC,wBAAwB,EAAEL,WAAW,CAACtC,KAAK,CAACwC,MAAM,CAACI,MAAM,CAACC,IAAI,CAAA;GAC/D,CAAA,CAAA;AAEL;;;;"}
+{"version":3,"file":"RadioIconWrapperStyles.js","sources":["../../../../../../../src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport { radioIconColors, radioSizes } from '../radioTokens';\nimport type { RadioIconProps } from './RadioIcon';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { castWebType, getPlatformType } from '~utils';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { size as sizeToken } from '~tokens/global';\n\nexport type RadioRectProps = RadioIconProps;\n\nconst getRadioIconWrapperStyles = ({\n  theme,\n  isChecked,\n  isDisabled,\n  isNegative,\n  size,\n}: RadioRectProps & { theme: Theme }): CSSObject => {\n  const isReactNative = getPlatformType() === 'react-native';\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 = radioIconColors.variants[variant].background[checked];\n  const border = radioIconColors.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    minWidth: makeSpace(radioSizes.icon[size].width),\n    width: makeSpace(radioSizes.icon[size].width),\n    height: makeSpace(radioSizes.icon[size].height),\n    borderWidth: makeBorderSize(theme.border.width.thick),\n    borderStyle: 'solid',\n    margin: makeSpace(theme.spacing[1]),\n    marginTop: size === 'small' ? makeSize(sizeToken['3']) : undefined,\n    borderRadius: makeSize(theme.border.radius.max),\n    backgroundColor,\n    borderColor,\n    ...(!isReactNative && {\n      transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n      transitionTimingFunction: castWebType(theme.motion.easing.exit),\n    }),\n  };\n};\n\nexport { getRadioIconWrapperStyles };\n"],"names":["getRadioIconWrapperStyles","_ref","theme","isChecked","isDisabled","isNegative","size","isReactNative","getPlatformType","variant","checked","background","radioIconColors","variants","border","backgroundColor","getIn","borderColor","_objectSpread","position","display","alignItems","justifyContent","minWidth","makeSpace","radioSizes","icon","width","height","borderWidth","makeBorderSize","thick","borderStyle","margin","spacing","marginTop","makeSize","sizeToken","undefined","borderRadius","radius","max","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","exit"],"mappings":";;;;;;;;;;;;;;;;;;;AAcA,IAAMA,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAAC,IAAA,EAMqB;AAAA,EAAA,IALlDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,MAAI,GAAAL,IAAA,CAAJK,IAAI,CAAA;AAEJ,EAAA,IAAMC,aAAa,GAAGC,eAAe,EAAE,KAAK,cAAc,CAAA;EAC1D,IAAIC,OAA4C,GAAG,SAAS,CAAA;AAC5D,EAAA,IAAIL,UAAU,EAAEK,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAIJ,UAAU,EAAEI,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAMC,OAAO,GAAGP,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;AACnD,EAAA,IAAMQ,UAAU,GAAGC,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACE,UAAU,CAACD,OAAO,CAAC,CAAA;AACxE,EAAA,IAAMI,MAAM,GAAGF,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACK,MAAM,CAACJ,OAAO,CAAC,CAAA;AAChE,EAAA,IAAMK,eAAe,GAAGC,KAAK,CAACd,KAAK,EAAES,UAAU,CAAC,CAAA;AAChD,EAAA,IAAMM,WAAW,GAAGD,KAAK,CAACd,KAAK,EAAEY,MAAM,CAAC,CAAA;AAExC,EAAA,OAAAI,aAAA,CAAA;AACEC,IAAAA,QAAQ,EAAE,UAAU;AACpBC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;IACxBC,QAAQ,EAAEC,SAAS,CAACC,UAAU,CAACC,IAAI,CAACpB,MAAI,CAAC,CAACqB,KAAK,CAAC;IAChDA,KAAK,EAAEH,SAAS,CAACC,UAAU,CAACC,IAAI,CAACpB,MAAI,CAAC,CAACqB,KAAK,CAAC;IAC7CC,MAAM,EAAEJ,SAAS,CAACC,UAAU,CAACC,IAAI,CAACpB,MAAI,CAAC,CAACsB,MAAM,CAAC;IAC/CC,WAAW,EAAEC,cAAc,CAAC5B,KAAK,CAACY,MAAM,CAACa,KAAK,CAACI,KAAK,CAAC;AACrDC,IAAAA,WAAW,EAAE,OAAO;IACpBC,MAAM,EAAET,SAAS,CAACtB,KAAK,CAACgC,OAAO,CAAC,CAAC,CAAC,CAAC;AACnCC,IAAAA,SAAS,EAAE7B,MAAI,KAAK,OAAO,GAAG8B,QAAQ,CAACC,IAAS,CAAC,GAAG,CAAC,CAAC,GAAGC,SAAS;IAClEC,YAAY,EAAEH,QAAQ,CAAClC,KAAK,CAACY,MAAM,CAAC0B,MAAM,CAACC,GAAG,CAAC;AAC/C1B,IAAAA,eAAe,EAAfA,eAAe;AACfE,IAAAA,WAAW,EAAXA,WAAAA;GACI,EAAA,CAACV,aAAa,IAAI;AACpBmC,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,cAAc,CAAC1C,KAAK,CAAC2C,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,CAAC;IAC7EC,wBAAwB,EAAEL,WAAW,CAACzC,KAAK,CAAC2C,MAAM,CAACI,MAAM,CAACC,IAAI,CAAA;GAC/D,CAAA,CAAA;AAEL;;;;"}

package/build/lib/web/production/components/Radio/radioTokens.js

@@ -45,7 +45,7 @@ var radioIconColors = {
       },
       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',
@@ -91,7 +91,7 @@ var radioHoverTokens = {
     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/production/components/Radio/radioTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioTokens.js","sources":["../../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\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.4',\n        desktop: 'spacing.4',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n      dotRadius: size[2],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n      dotRadius: size[3],\n    },\n    large: {\n      width: size[20],\n      height: size[20],\n      dotRadius: size[4],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  dot: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype RadioIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst radioIconColors: RadioIconColors = {\n  variants: {\n    default: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\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      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.interactive.icon.onPrimary.normal',\n      },\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      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\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 radioHoverTokens: 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 { radioSizes, radioIconColors, radioHoverTokens };\n"],"names":["radioSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","dotRadius","radioIconColors","variants","dot","checked","unchecked","border","background","disabled","negative","radioHoverTokens"],"mappings":";;;AAKA,IAAMA,UAAU,GAAG;AACjBC,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;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;KAClB;AACDJ,IAAAA,MAAM,EAAE;AACNG,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;KAClB;AACDH,IAAAA,KAAK,EAAE;AACLE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;AACnB,KAAA;AACF,GAAA;AACF,EAAU;AA0BV,IAAMG,eAAgC,GAAG;AACvCC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,oBAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,0CAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,oBAAoB;AAC7BC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDI,IAAAA,QAAQ,EAAE;AACRN,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,oBAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMK,gBAA0C,GAAG;EACjD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVH,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDC,IAAAA,MAAM,EAAE;AACNF,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}
+{"version":3,"file":"radioTokens.js","sources":["../../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\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.4',\n        desktop: 'spacing.4',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n      dotRadius: size[2],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n      dotRadius: size[3],\n    },\n    large: {\n      width: size[20],\n      height: size[20],\n      dotRadius: size[4],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  dot: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype RadioIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst radioIconColors: RadioIconColors = {\n  variants: {\n    default: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\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      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.interactive.icon.onPrimary.normal',\n      },\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      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\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 radioHoverTokens: 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 { radioSizes, radioIconColors, radioHoverTokens };\n"],"names":["radioSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","dotRadius","radioIconColors","variants","dot","checked","unchecked","border","background","disabled","negative","radioHoverTokens"],"mappings":"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"}

package/build/lib/web/production/components/RollingText/RollingText.web.js

@@ -0,0 +1,138 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default from 'react';
+import { m, AnimatePresence } from 'framer-motion';
+import '../../utils/index.js';
+import '../BladeProvider/index.js';
+import { msToSeconds } from '../../utils/msToSeconds.js';
+import { cssBezierToArray } from '../../utils/cssBezierToArray.js';
+import '../BaseMotion/index.js';
+import '../Box/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import useTheme from '../BladeProvider/useTheme.js';
+import { castWebType } from '../../utils/platform/castUtils.js';
+import { Box } from '../Box/Box.js';
+import { BaseMotionBox } from '../BaseMotion/BaseMotion.js';
+
+var ShimmerOverlay = function ShimmerOverlay() {
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var shimmerColor = theme.colors.surface.text.staticWhite.muted;
+  var shimmerDuration = msToSeconds(theme.motion.duration['2xgentle']);
+  var shimmerDelay = msToSeconds(theme.motion.delay.gentle);
+  var shimmerEase = cssBezierToArray(castWebType(theme.motion.easing.standard));
+  return /*#__PURE__*/jsx(m.span, {
+    "aria-hidden": true,
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "linear-gradient(90deg, transparent 0%, ".concat(shimmerColor, " 50%, transparent 100%)"),
+      pointerEvents: 'none'
+    },
+    initial: {
+      x: '-100%'
+    },
+    animate: {
+      x: '100%'
+    },
+    transition: {
+      duration: shimmerDuration,
+      ease: shimmerEase,
+      repeat: Infinity,
+      repeatDelay: shimmerDelay
+    }
+  });
+};
+var RollingText = function RollingText(_ref) {
+  var texts = _ref.texts,
+    children = _ref.children,
+    onIndexChange = _ref.onIndexChange,
+    cycleDurationProp = _ref.cycleDuration,
+    _ref$showShimmer = _ref.showShimmer,
+    showShimmer = _ref$showShimmer === void 0 ? true : _ref$showShimmer;
+  var _useTheme2 = useTheme(),
+    theme = _useTheme2.theme;
+  var _React$useState = React__default.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentIndex = _React$useState2[0],
+    setCurrentIndex = _React$useState2[1];
+  var cycleDuration = cycleDurationProp !== null && cycleDurationProp !== void 0 ? cycleDurationProp : theme.motion.delay.xlong;
+  var slideDuration = msToSeconds(theme.motion.duration.xmoderate);
+  var slideEase = cssBezierToArray(castWebType(theme.motion.easing.emphasized));
+  React__default.useEffect(function () {
+    if (texts.length <= 1) {
+      return undefined;
+    }
+    var id = setInterval(function () {
+      setCurrentIndex(function (prev) {
+        var next = (prev + 1) % texts.length;
+        onIndexChange === null || onIndexChange === void 0 || onIndexChange(next);
+        return next;
+      });
+    }, cycleDuration);
+    return function () {
+      clearInterval(id);
+    };
+  }, [texts.length, cycleDuration, onIndexChange]);
+  var textsString = texts.join('\0');
+  React__default.useEffect(function () {
+    setCurrentIndex(0);
+    onIndexChange === null || onIndexChange === void 0 || onIndexChange(0);
+    // Reset only when the text contents change, not on every render (new array reference)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [textsString]);
+  var renderContent = function renderContent(text) {
+    return children ? children(text) : text;
+  };
+  if (texts.length <= 1) {
+    return /*#__PURE__*/jsx("span", {
+      children: renderContent(texts[0])
+    });
+  }
+  var slideVariants = {
+    initial: {
+      y: 16,
+      opacity: 0,
+      filter: 'blur(4px)'
+    },
+    animate: {
+      y: 0,
+      opacity: 1,
+      filter: 'blur(0px)',
+      transition: {
+        duration: slideDuration,
+        ease: slideEase
+      }
+    },
+    exit: {
+      y: -16,
+      opacity: 0,
+      filter: 'blur(4px)',
+      position: 'absolute',
+      transition: {
+        duration: slideDuration,
+        ease: slideEase
+      }
+    }
+  };
+  return /*#__PURE__*/jsx(Box, {
+    position: "relative",
+    display: "inline-flex",
+    overflow: "hidden",
+    children: /*#__PURE__*/jsx(AnimatePresence, {
+      mode: "popLayout",
+      initial: false,
+      children: /*#__PURE__*/jsx(BaseMotionBox, {
+        motionVariants: slideVariants,
+        children: /*#__PURE__*/jsxs(Box, {
+          position: "relative",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          children: [renderContent(texts[currentIndex]), showShimmer && /*#__PURE__*/jsx(ShimmerOverlay, {})]
+        })
+      }, currentIndex)
+    })
+  });
+};
+
+export { RollingText };
+//# sourceMappingURL=RollingText.web.js.map

package/build/lib/web/production/components/RollingText/RollingText.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RollingText.web.js","sources":["../../../../../../src/components/RollingText/RollingText.web.tsx"],"sourcesContent":["import React from 'react';\nimport { AnimatePresence, m } from 'framer-motion';\nimport { castWebType } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { BaseMotionBox } from '~components/BaseMotion';\nimport type { MotionVariantsType } from '~components/BaseMotion';\nimport { Box } from '~components/Box';\n\nconst ShimmerOverlay = (): React.ReactElement => {\n  const { theme } = useTheme();\n\n  const shimmerColor = theme.colors.surface.text.staticWhite.muted;\n  const shimmerDuration = msToSeconds(theme.motion.duration['2xgentle']);\n  const shimmerDelay = msToSeconds(theme.motion.delay.gentle);\n  const shimmerEase = cssBezierToArray(castWebType(theme.motion.easing.standard));\n\n  return (\n    <m.span\n      aria-hidden\n      style={{\n        position: 'absolute',\n        inset: 0,\n        background: `linear-gradient(90deg, transparent 0%, ${shimmerColor} 50%, transparent 100%)`,\n        pointerEvents: 'none',\n      }}\n      initial={{ x: '-100%' }}\n      animate={{ x: '100%' }}\n      transition={{\n        duration: shimmerDuration,\n        ease: shimmerEase,\n        repeat: Infinity,\n        repeatDelay: shimmerDelay,\n      }}\n    />\n  );\n};\n\ntype RollingTextProps = {\n  /** Array of strings to cycle through with a rolling animation */\n  texts: string[];\n  /** Custom render function for each text item */\n  children?: (text: string) => React.ReactNode;\n  /** Callback fired when the active index changes */\n  onIndexChange?: (index: number) => void;\n  /** Cycle interval in ms (defaults to theme.motion.delay.xlong) */\n  cycleDuration?: number;\n  /** Whether to show the shimmer overlay on each item (defaults to true) */\n  showShimmer?: boolean;\n};\n\nconst RollingText = ({\n  texts,\n  children,\n  onIndexChange,\n  cycleDuration: cycleDurationProp,\n  showShimmer = true,\n}: RollingTextProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const [currentIndex, setCurrentIndex] = React.useState(0);\n\n  const cycleDuration = cycleDurationProp ?? theme.motion.delay.xlong;\n  const slideDuration = msToSeconds(theme.motion.duration.xmoderate);\n  const slideEase = cssBezierToArray(castWebType(theme.motion.easing.emphasized));\n\n  React.useEffect(() => {\n    if (texts.length <= 1) {\n      return undefined;\n    }\n\n    const id = setInterval(() => {\n      setCurrentIndex((prev) => {\n        const next = (prev + 1) % texts.length;\n        onIndexChange?.(next);\n        return next;\n      });\n    }, cycleDuration);\n\n    return (): void => {\n      clearInterval(id);\n    };\n  }, [texts.length, cycleDuration, onIndexChange]);\n\n  const textsString = texts.join('\\0');\n  React.useEffect(() => {\n    setCurrentIndex(0);\n    onIndexChange?.(0);\n    // Reset only when the text contents change, not on every render (new array reference)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [textsString]);\n\n  const renderContent = (text: string): React.ReactNode => {\n    return children ? children(text) : text;\n  };\n\n  if (texts.length <= 1) {\n    return <span>{renderContent(texts[0])}</span>;\n  }\n\n  const slideVariants: MotionVariantsType = {\n    initial: { y: 16, opacity: 0, filter: 'blur(4px)' },\n    animate: {\n      y: 0,\n      opacity: 1,\n      filter: 'blur(0px)',\n      transition: { duration: slideDuration, ease: slideEase },\n    },\n    exit: {\n      y: -16,\n      opacity: 0,\n      filter: 'blur(4px)',\n      position: 'absolute' as const,\n      transition: { duration: slideDuration, ease: slideEase },\n    },\n  };\n\n  return (\n    <Box position=\"relative\" display=\"inline-flex\" overflow=\"hidden\">\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        <BaseMotionBox key={currentIndex} motionVariants={slideVariants}>\n          <Box position=\"relative\" overflow=\"hidden\" whiteSpace=\"nowrap\">\n            {renderContent(texts[currentIndex])}\n            {showShimmer && <ShimmerOverlay />}\n          </Box>\n        </BaseMotionBox>\n      </AnimatePresence>\n    </Box>\n  );\n};\n\nexport { RollingText };\nexport type { RollingTextProps };\n"],"names":["ShimmerOverlay","_useTheme","useTheme","theme","shimmerColor","colors","surface","text","staticWhite","muted","shimmerDuration","msToSeconds","motion","duration","shimmerDelay","delay","gentle","shimmerEase","cssBezierToArray","castWebType","easing","standard","_jsx","m","span","style","position","inset","background","concat","pointerEvents","initial","x","animate","transition","ease","repeat","Infinity","repeatDelay","RollingText","_ref","texts","children","onIndexChange","cycleDurationProp","cycleDuration","_ref$showShimmer","showShimmer","_useTheme2","_React$useState","React","useState","_React$useState2","_slicedToArray","currentIndex","setCurrentIndex","xlong","slideDuration","xmoderate","slideEase","emphasized","useEffect","length","undefined","id","setInterval","prev","next","clearInterval","textsString","join","renderContent","slideVariants","y","opacity","filter","exit","Box","display","overflow","AnimatePresence","mode","BaseMotionBox","motionVariants","_jsxs","whiteSpace"],"mappings":"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"}

package/build/lib/web/production/components/RollingText/index.js

@@ -0,0 +1,2 @@
+export { RollingText } from './RollingText.web.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/production/components/RollingText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/web/production/components/SideNav/SideNavItems/SideNavItem.web.js

@@ -50,7 +50,7 @@ var SideNavItem = function SideNavItem(_ref) {
       paddingX: "spacing.3",
       height: makeSize(NAV_ITEM_HEIGHT),
       backgroundColor: backgroundColor,
-      borderRadius: "medium",
+      borderRadius: "small",
       as: as,
       cursor: as === 'label' ? 'pointer' : undefined
     }, makeAnalyticsAttribute(rest)), {}, {

package/build/lib/web/production/components/SideNav/SideNavItems/SideNavItem.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItem.web.js","sources":["../../../../../../../src/components/SideNav/SideNavItems/SideNavItem.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { classes, getNavItemTransition, NAV_ITEM_HEIGHT } from '../tokens';\nimport type { SideNavItemProps } from '../types';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { makeSize } from '~utils';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { TooltipifyComponent } from '~utils/TooltipifyComponent';\nimport type { IconComponent } from '~components/Icons';\nimport { isIconComponent } from '~utils/isIconComponent';\n\nconst SideNavItemContainer = styled(BaseBox)((props) => {\n  return {\n    transition: getNavItemTransition(props.theme),\n  };\n});\n\nconst SideNavItem = ({\n  leading,\n  trailing,\n  title,\n  backgroundColor,\n  tooltip,\n  as = 'div',\n  ...rest\n}: SideNavItemProps): React.ReactElement => {\n  const isIcon = typeof leading === 'function' && isIconComponent(leading);\n  const Icon: IconComponent | undefined = isIcon ? leading : undefined;\n\n  return (\n    <TooltipifyComponent tooltip={tooltip}>\n      <SideNavItemContainer\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        paddingX=\"spacing.3\"\n        height={makeSize(NAV_ITEM_HEIGHT)}\n        backgroundColor={backgroundColor}\n        borderRadius=\"medium\"\n        as={as}\n        cursor={as === 'label' ? 'pointer' : undefined}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <Box display=\"inline-flex\" alignItems=\"center\" gap=\"spacing.3\">\n          {Icon ? (\n            <BaseBox display=\"flex\" alignItems=\"center\" paddingX=\"spacing.2\">\n              <Icon size=\"medium\" color=\"interactive.icon.gray.subtle\" />\n            </BaseBox>\n          ) : (\n            (leading as React.ReactNode)\n          )}\n          <BaseBox className={classes.HIDE_WHEN_COLLAPSED}>\n            <Text\n              truncateAfterLines={1}\n              weight=\"medium\"\n              size=\"medium\"\n              color=\"surface.text.gray.subtle\"\n            >\n              {title}\n            </Text>\n          </BaseBox>\n        </Box>\n        <BaseBox className={classes.HIDE_WHEN_COLLAPSED}>{trailing}</BaseBox>\n      </SideNavItemContainer>\n    </TooltipifyComponent>\n  );\n};\n\nexport { SideNavItem };\n"],"names":["SideNavItemContainer","styled","BaseBox","withConfig","displayName","componentId","props","transition","getNavItemTransition","theme","SideNavItem","_ref","leading","trailing","title","backgroundColor","tooltip","_ref$as","as","rest","_objectWithoutProperties","_excluded","isIcon","isIconComponent","Icon","undefined","_jsx","TooltipifyComponent","children","_jsxs","_objectSpread","display","flexDirection","justifyContent","alignItems","paddingX","height","makeSize","NAV_ITEM_HEIGHT","borderRadius","cursor","makeAnalyticsAttribute","Box","gap","size","color","className","classes","HIDE_WHEN_COLLAPSED","Text","truncateAfterLines","weight"],"mappings":"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"}
+{"version":3,"file":"SideNavItem.web.js","sources":["../../../../../../../src/components/SideNav/SideNavItems/SideNavItem.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { classes, getNavItemTransition, NAV_ITEM_HEIGHT } from '../tokens';\nimport type { SideNavItemProps } from '../types';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { makeSize } from '~utils';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { TooltipifyComponent } from '~utils/TooltipifyComponent';\nimport type { IconComponent } from '~components/Icons';\nimport { isIconComponent } from '~utils/isIconComponent';\n\nconst SideNavItemContainer = styled(BaseBox)((props) => {\n  return {\n    transition: getNavItemTransition(props.theme),\n  };\n});\n\nconst SideNavItem = ({\n  leading,\n  trailing,\n  title,\n  backgroundColor,\n  tooltip,\n  as = 'div',\n  ...rest\n}: SideNavItemProps): React.ReactElement => {\n  const isIcon = typeof leading === 'function' && isIconComponent(leading);\n  const Icon: IconComponent | undefined = isIcon ? leading : undefined;\n\n  return (\n    <TooltipifyComponent tooltip={tooltip}>\n      <SideNavItemContainer\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        paddingX=\"spacing.3\"\n        height={makeSize(NAV_ITEM_HEIGHT)}\n        backgroundColor={backgroundColor}\n        borderRadius=\"small\"\n        as={as}\n        cursor={as === 'label' ? 'pointer' : undefined}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <Box display=\"inline-flex\" alignItems=\"center\" gap=\"spacing.3\">\n          {Icon ? (\n            <BaseBox display=\"flex\" alignItems=\"center\" paddingX=\"spacing.2\">\n              <Icon size=\"medium\" color=\"interactive.icon.gray.subtle\" />\n            </BaseBox>\n          ) : (\n            (leading as React.ReactNode)\n          )}\n          <BaseBox className={classes.HIDE_WHEN_COLLAPSED}>\n            <Text\n              truncateAfterLines={1}\n              weight=\"medium\"\n              size=\"medium\"\n              color=\"surface.text.gray.subtle\"\n            >\n              {title}\n            </Text>\n          </BaseBox>\n        </Box>\n        <BaseBox className={classes.HIDE_WHEN_COLLAPSED}>{trailing}</BaseBox>\n      </SideNavItemContainer>\n    </TooltipifyComponent>\n  );\n};\n\nexport { SideNavItem };\n"],"names":["SideNavItemContainer","styled","BaseBox","withConfig","displayName","componentId","props","transition","getNavItemTransition","theme","SideNavItem","_ref","leading","trailing","title","backgroundColor","tooltip","_ref$as","as","rest","_objectWithoutProperties","_excluded","isIcon","isIconComponent","Icon","undefined","_jsx","TooltipifyComponent","children","_jsxs","_objectSpread","display","flexDirection","justifyContent","alignItems","paddingX","height","makeSize","NAV_ITEM_HEIGHT","borderRadius","cursor","makeAnalyticsAttribute","Box","gap","size","color","className","classes","HIDE_WHEN_COLLAPSED","Text","truncateAfterLines","weight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,oBAAoB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAAC,CAAA,CAAA,UAACC,KAAK,EAAK;EACtD,OAAO;AACLC,IAAAA,UAAU,EAAEC,oBAAoB,CAACF,KAAK,CAACG,KAAK,CAAA;GAC7C,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAQ2B;AAAA,EAAA,IAP1CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,eAAe,GAAAJ,IAAA,CAAfI,eAAe;IACfC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAAC,OAAA,GAAAN,IAAA,CACPO,EAAE;AAAFA,IAAAA,EAAE,GAAAD,OAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,OAAA;AACPE,IAAAA,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA,CAAA;EAEP,IAAMC,MAAM,GAAG,OAAOV,OAAO,KAAK,UAAU,IAAIW,eAAe,CAACX,OAAO,CAAC,CAAA;AACxE,EAAA,IAAMY,IAA+B,GAAGF,MAAM,GAAGV,OAAO,GAAGa,SAAS,CAAA;EAEpE,oBACEC,GAAA,CAACC,mBAAmB,EAAA;AAACX,IAAAA,OAAO,EAAEA,OAAQ;AAAAY,IAAAA,QAAA,eACpCC,IAAA,CAAC7B,oBAAoB,EAAA8B,aAAA,CAAAA,aAAA,CAAA;AACnBC,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,aAAa,EAAC,KAAK;AACnBC,MAAAA,cAAc,EAAC,eAAe;AAC9BC,MAAAA,UAAU,EAAC,QAAQ;AACnBC,MAAAA,QAAQ,EAAC,WAAW;AACpBC,MAAAA,MAAM,EAAEC,QAAQ,CAACC,eAAe,CAAE;AAClCvB,MAAAA,eAAe,EAAEA,eAAgB;AACjCwB,MAAAA,YAAY,EAAC,OAAO;AACpBrB,MAAAA,EAAE,EAAEA,EAAG;AACPsB,MAAAA,MAAM,EAAEtB,EAAE,KAAK,OAAO,GAAG,SAAS,GAAGO,SAAAA;KACjCgB,EAAAA,sBAAsB,CAACtB,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;MAAAS,QAAA,EAAA,cAEhCC,IAAA,CAACa,GAAG,EAAA;AAACX,QAAAA,OAAO,EAAC,aAAa;AAACG,QAAAA,UAAU,EAAC,QAAQ;AAACS,QAAAA,GAAG,EAAC,WAAW;AAAAf,QAAAA,QAAA,EAC3DJ,CAAAA,IAAI,gBACHE,GAAA,CAACxB,OAAO,EAAA;AAAC6B,UAAAA,OAAO,EAAC,MAAM;AAACG,UAAAA,UAAU,EAAC,QAAQ;AAACC,UAAAA,QAAQ,EAAC,WAAW;UAAAP,QAAA,eAC9DF,GAAA,CAACF,IAAI,EAAA;AAACoB,YAAAA,IAAI,EAAC,QAAQ;AAACC,YAAAA,KAAK,EAAC,8BAAA;WAAgC,CAAA;AAAC,SACpD,CAAC,GAETjC,OACF,eACDc,GAAA,CAACxB,OAAO,EAAA;UAAC4C,SAAS,EAAEC,OAAO,CAACC,mBAAoB;UAAApB,QAAA,eAC9CF,GAAA,CAACuB,IAAI,EAAA;AACHC,YAAAA,kBAAkB,EAAE,CAAE;AACtBC,YAAAA,MAAM,EAAC,QAAQ;AACfP,YAAAA,IAAI,EAAC,QAAQ;AACbC,YAAAA,KAAK,EAAC,0BAA0B;AAAAjB,YAAAA,QAAA,EAE/Bd,KAAAA;WACG,CAAA;AAAC,SACA,CAAC,CAAA;AAAA,OACP,CAAC,eACNY,GAAA,CAACxB,OAAO,EAAA;QAAC4C,SAAS,EAAEC,OAAO,CAACC,mBAAoB;AAAApB,QAAAA,QAAA,EAAEf,QAAAA;AAAQ,OAAU,CAAC,CAAA;KACjD,CAAA,CAAA;AAAC,GACJ,CAAC,CAAA;AAE1B;;;;"}