@razorpay/blade 12.68.0 → 12.89.0

package/build/lib/web/development/components/FileUpload/fileUploadTokens.js

@@ -33,7 +33,7 @@ var fileUploadColorTokens = {
     disabled: 'interactive.border.gray.disabled'
   },
   background: {
-    hover: 'interactive.background.gray.highlighted',
+    hover: 'interactive.background.gray.default',
     active: 'interactive.background.primary.faded'
   },
   icon: {
@@ -47,11 +47,11 @@ var fileUploadColorTokens = {
 };
 var fileUploadItemBackgroundColors = {
   success: {
-    "default": 'interactive.background.gray.faded',
-    hover: 'interactive.background.gray.fadedHighlighted'
+    "default": 'surface.background.gray.intense',
+    hover: 'surface.background.gray.intense'
   },
   error: {
-    "default": 'feedback.background.negative.subtle',
+    "default": 'interactive.background.negative.faded',
     hover: 'interactive.background.negative.fadedHighlighted'
   },
   uploading: {

package/build/lib/web/development/components/FileUpload/fileUploadTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileUploadTokens.js","sources":["../../../../../../src/components/FileUpload/fileUploadTokens.ts"],"sourcesContent":["import type { BladeFile, FileUploadItemBackgroundColors } from './types';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DurationString, EasingString } from '~tokens/global';\nimport { size } from '~tokens/global';\n\nconst getFileUploadInputHoverTokens = (): SelectorInputHoverTokens => {\n  return {\n    default: {\n      background: {\n        checked: 'colors.transparent',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.gray.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n    },\n  };\n};\n\nconst fileUploadMotionTokens: Record<'duration' | 'easing', DurationString | EasingString> = {\n  duration: 'duration.2xquick',\n  easing: 'easing.standard',\n};\n\nconst fileUploadHeightTokens = {\n  medium: size['56'],\n  large: size['64'],\n};\n\nconst fileUploadColorTokens = {\n  text: {\n    default: 'surface.text.gray.subtle',\n    disabled: 'surface.text.gray.disabled',\n  },\n  border: {\n    default: 'interactive.border.gray.default',\n    disabled: 'interactive.border.gray.disabled',\n  },\n  background: {\n    hover: 'interactive.background.gray.highlighted',\n    active: 'interactive.background.primary.faded',\n  },\n  icon: {\n    default: 'interactive.icon.primary.subtle',\n    disabled: 'interactive.icon.primary.disabled',\n  },\n  link: {\n    default: 'interactive.text.primary.subtle',\n    disabled: 'interactive.text.primary.disabled',\n  },\n} as const;\n\nconst fileUploadItemBackgroundColors: Record<\n  NonNullable<BladeFile['status']>,\n  Record<'default' | 'hover', FileUploadItemBackgroundColors>\n> = {\n  success: {\n    default: 'interactive.background.gray.faded',\n    hover: 'interactive.background.gray.fadedHighlighted',\n  },\n  error: {\n    default: 'feedback.background.negative.subtle',\n    hover: 'interactive.background.negative.fadedHighlighted',\n  },\n  uploading: {\n    default: 'surface.background.gray.intense',\n    hover: 'surface.background.gray.intense',\n  },\n};\n\nconst fileUploadLinkBorderTokens = {\n  color: {\n    default: 'surface.border.primary.normal',\n    disabled: 'surface.border.primary.muted',\n  },\n  width: {\n    default: 'thin',\n  },\n} as const;\n\nexport {\n  getFileUploadInputHoverTokens,\n  fileUploadMotionTokens,\n  fileUploadItemBackgroundColors,\n  fileUploadColorTokens,\n  fileUploadLinkBorderTokens,\n  fileUploadHeightTokens,\n};\n"],"names":["getFileUploadInputHoverTokens","background","checked","unchecked","border","fileUploadMotionTokens","duration","easing","fileUploadHeightTokens","medium","size","large","fileUploadColorTokens","text","disabled","hover","active","icon","link","fileUploadItemBackgroundColors","success","error","uploading","fileUploadLinkBorderTokens","color","width"],"mappings":";;;AAKA,IAAMA,6BAA6B,GAAG,SAAhCA,6BAA6BA,GAAmC;EACpE,OAAO;IACL,SAAS,EAAA;AACPC,MAAAA,UAAU,EAAE;AACVC,QAAAA,OAAO,EAAE,oBAAoB;AAC7BC,QAAAA,SAAS,EAAE,oBAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,wCAAwC;AACjDC,QAAAA,SAAS,EAAE,wCAAA;AACb,OAAA;AACF,KAAA;GACD,CAAA;AACH,EAAC;AAED,IAAME,sBAAoF,GAAG;AAC3FC,EAAAA,QAAQ,EAAE,kBAAkB;AAC5BC,EAAAA,MAAM,EAAE,iBAAA;AACV,EAAC;AAED,IAAMC,sBAAsB,GAAG;AAC7BC,EAAAA,MAAM,EAAEC,IAAI,CAAC,IAAI,CAAC;EAClBC,KAAK,EAAED,IAAI,CAAC,IAAI,CAAA;AAClB,EAAC;AAED,IAAME,qBAAqB,GAAG;AAC5BC,EAAAA,IAAI,EAAE;AACJ,IAAA,SAAA,EAAS,0BAA0B;AACnCC,IAAAA,QAAQ,EAAE,4BAAA;GACX;AACDV,EAAAA,MAAM,EAAE;AACN,IAAA,SAAA,EAAS,iCAAiC;AAC1CU,IAAAA,QAAQ,EAAE,kCAAA;GACX;AACDb,EAAAA,UAAU,EAAE;AACVc,IAAAA,KAAK,EAAE,yCAAyC;AAChDC,IAAAA,MAAM,EAAE,sCAAA;GACT;AACDC,EAAAA,IAAI,EAAE;AACJ,IAAA,SAAA,EAAS,iCAAiC;AAC1CH,IAAAA,QAAQ,EAAE,mCAAA;GACX;AACDI,EAAAA,IAAI,EAAE;AACJ,IAAA,SAAA,EAAS,iCAAiC;AAC1CJ,IAAAA,QAAQ,EAAE,mCAAA;AACZ,GAAA;AACF,EAAU;AAEV,IAAMK,8BAGL,GAAG;AACFC,EAAAA,OAAO,EAAE;AACP,IAAA,SAAA,EAAS,mCAAmC;AAC5CL,IAAAA,KAAK,EAAE,8CAAA;GACR;AACDM,EAAAA,KAAK,EAAE;AACL,IAAA,SAAA,EAAS,qCAAqC;AAC9CN,IAAAA,KAAK,EAAE,kDAAA;GACR;AACDO,EAAAA,SAAS,EAAE;AACT,IAAA,SAAA,EAAS,iCAAiC;AAC1CP,IAAAA,KAAK,EAAE,iCAAA;AACT,GAAA;AACF,EAAC;AAED,IAAMQ,0BAA0B,GAAG;AACjCC,EAAAA,KAAK,EAAE;AACL,IAAA,SAAA,EAAS,+BAA+B;AACxCV,IAAAA,QAAQ,EAAE,8BAAA;GACX;AACDW,EAAAA,KAAK,EAAE;IACL,SAAS,EAAA,MAAA;AACX,GAAA;AACF;;;;"}
+{"version":3,"file":"fileUploadTokens.js","sources":["../../../../../../src/components/FileUpload/fileUploadTokens.ts"],"sourcesContent":["import type { BladeFile, FileUploadItemBackgroundColors } from './types';\nimport { size } from '~tokens/global';\nimport type { DurationString, EasingString } from '~tokens/global';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\n\nconst getFileUploadInputHoverTokens = (): SelectorInputHoverTokens => {\n  return {\n    default: {\n      background: {\n        checked: 'colors.transparent',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.gray.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n    },\n  };\n};\n\nconst fileUploadMotionTokens: Record<'duration' | 'easing', DurationString | EasingString> = {\n  duration: 'duration.2xquick',\n  easing: 'easing.standard',\n};\n\nconst fileUploadHeightTokens = {\n  medium: size['56'],\n  large: size['64'],\n};\n\nconst fileUploadColorTokens = {\n  text: {\n    default: 'surface.text.gray.subtle',\n    disabled: 'surface.text.gray.disabled',\n  },\n  border: {\n    default: 'interactive.border.gray.default',\n    disabled: 'interactive.border.gray.disabled',\n  },\n  background: {\n    hover: 'interactive.background.gray.default',\n    active: 'interactive.background.primary.faded',\n  },\n  icon: {\n    default: 'interactive.icon.primary.subtle',\n    disabled: 'interactive.icon.primary.disabled',\n  },\n  link: {\n    default: 'interactive.text.primary.subtle',\n    disabled: 'interactive.text.primary.disabled',\n  },\n} as const;\n\nconst fileUploadItemBackgroundColors: Record<\n  NonNullable<BladeFile['status']>,\n  Record<'default' | 'hover', FileUploadItemBackgroundColors>\n> = {\n  success: {\n    default: 'surface.background.gray.intense',\n    hover: 'surface.background.gray.intense',\n  },\n  error: {\n    default: 'interactive.background.negative.faded',\n    hover: 'interactive.background.negative.fadedHighlighted',\n  },\n  uploading: {\n    default: 'surface.background.gray.intense',\n    hover: 'surface.background.gray.intense',\n  },\n};\n\nconst fileUploadLinkBorderTokens = {\n  color: {\n    default: 'surface.border.primary.normal',\n    disabled: 'surface.border.primary.muted',\n  },\n  width: {\n    default: 'thin',\n  },\n} as const;\n\nexport {\n  getFileUploadInputHoverTokens,\n  fileUploadMotionTokens,\n  fileUploadItemBackgroundColors,\n  fileUploadColorTokens,\n  fileUploadLinkBorderTokens,\n  fileUploadHeightTokens,\n};\n"],"names":["getFileUploadInputHoverTokens","background","checked","unchecked","border","fileUploadMotionTokens","duration","easing","fileUploadHeightTokens","medium","size","large","fileUploadColorTokens","text","disabled","hover","active","icon","link","fileUploadItemBackgroundColors","success","error","uploading","fileUploadLinkBorderTokens","color","width"],"mappings":";;;AAKA,IAAMA,6BAA6B,GAAG,SAAhCA,6BAA6BA,GAAmC;EACpE,OAAO;IACL,SAAS,EAAA;AACPC,MAAAA,UAAU,EAAE;AACVC,QAAAA,OAAO,EAAE,oBAAoB;AAC7BC,QAAAA,SAAS,EAAE,oBAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,wCAAwC;AACjDC,QAAAA,SAAS,EAAE,wCAAA;AACb,OAAA;AACF,KAAA;GACD,CAAA;AACH,EAAC;AAED,IAAME,sBAAoF,GAAG;AAC3FC,EAAAA,QAAQ,EAAE,kBAAkB;AAC5BC,EAAAA,MAAM,EAAE,iBAAA;AACV,EAAC;AAED,IAAMC,sBAAsB,GAAG;AAC7BC,EAAAA,MAAM,EAAEC,IAAI,CAAC,IAAI,CAAC;EAClBC,KAAK,EAAED,IAAI,CAAC,IAAI,CAAA;AAClB,EAAC;AAED,IAAME,qBAAqB,GAAG;AAC5BC,EAAAA,IAAI,EAAE;AACJ,IAAA,SAAA,EAAS,0BAA0B;AACnCC,IAAAA,QAAQ,EAAE,4BAAA;GACX;AACDV,EAAAA,MAAM,EAAE;AACN,IAAA,SAAA,EAAS,iCAAiC;AAC1CU,IAAAA,QAAQ,EAAE,kCAAA;GACX;AACDb,EAAAA,UAAU,EAAE;AACVc,IAAAA,KAAK,EAAE,qCAAqC;AAC5CC,IAAAA,MAAM,EAAE,sCAAA;GACT;AACDC,EAAAA,IAAI,EAAE;AACJ,IAAA,SAAA,EAAS,iCAAiC;AAC1CH,IAAAA,QAAQ,EAAE,mCAAA;GACX;AACDI,EAAAA,IAAI,EAAE;AACJ,IAAA,SAAA,EAAS,iCAAiC;AAC1CJ,IAAAA,QAAQ,EAAE,mCAAA;AACZ,GAAA;AACF,EAAU;AAEV,IAAMK,8BAGL,GAAG;AACFC,EAAAA,OAAO,EAAE;AACP,IAAA,SAAA,EAAS,iCAAiC;AAC1CL,IAAAA,KAAK,EAAE,iCAAA;GACR;AACDM,EAAAA,KAAK,EAAE;AACL,IAAA,SAAA,EAAS,uCAAuC;AAChDN,IAAAA,KAAK,EAAE,kDAAA;GACR;AACDO,EAAAA,SAAS,EAAE;AACT,IAAA,SAAA,EAAS,iCAAiC;AAC1CP,IAAAA,KAAK,EAAE,iCAAA;AACT,GAAA;AACF,EAAC;AAED,IAAMQ,0BAA0B,GAAG;AACjCC,EAAAA,KAAK,EAAE;AACL,IAAA,SAAA,EAAS,+BAA+B;AACxCV,IAAAA,QAAQ,EAAE,8BAAA;GACX;AACDW,EAAAA,KAAK,EAAE;IACL,SAAS,EAAA,MAAA;AACX,GAAA;AACF;;;;"}

package/build/lib/web/development/components/FileUpload/index.js

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

package/build/lib/web/development/components/FileUpload/index.js.map

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

package/build/lib/web/development/components/FilterChip/BaseFilterChip.web.js

@@ -3,19 +3,19 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
 import styled from 'styled-components';
 import { FILTER_CHIP_HEIGHT } from './tokens.js';
+import '../../utils/index.js';
+import '../../utils/metaAttribute/index.js';
+import '../../utils/makeAccessible/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
 import '../Box/index.js';
 import '../Box/BaseBox/index.js';
 import '../Counter/index.js';
 import '../Divider/index.js';
 import '../Icons/index.js';
 import '../Typography/index.js';
-import '../../utils/index.js';
 import '../../utils/getFocusRingStyles/index.js';
 import '../Box/styledProps/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
-import '../../utils/metaAttribute/index.js';
-import '../../utils/makeAccessible/index.js';
-import '../../utils/makeAnalyticsAttribute/index.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
 import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
@@ -64,16 +64,17 @@ var StyledFilterChip = /*#__PURE__*/styled(BaseBox).withConfig({
   componentId: "sc-7fl0tf-0"
 })(function (_ref2) {
   var theme = _ref2.theme,
-    $isDisabled = _ref2.$isDisabled;
+    $isDisabled = _ref2.$isDisabled,
+    $isSelected = _ref2.$isSelected;
   return {
-    borderWidth: makeBorderSize(theme.border.width.thinner),
-    borderColor: theme.colors.interactive.border.gray[$isDisabled ? 'disabled' : 'highlighted'],
+    borderWidth: makeBorderSize(theme.border.width.thin),
+    borderColor: theme.colors.interactive.border.gray[$isDisabled ? 'disabled' : 'faded'],
     height: FILTER_CHIP_HEIGHT,
-    borderRadius: theme.border.radius.max,
+    borderRadius: theme.border.radius.small,
     display: 'flex',
-    borderStyle: 'solid',
+    borderStyle: $isSelected ? 'solid' : 'dashed',
     backgroundColor: theme.colors.surface.background.gray.intense,
-    color: theme.colors.interactive.text.gray[$isDisabled ? 'disabled' : 'normal'],
+    color: theme.colors.interactive.text.gray[$isDisabled ? 'disabled' : 'muted'],
     width: 'fit-content'
   };
 });
@@ -86,9 +87,9 @@ var StyledFilterTrigger = /*#__PURE__*/styled.button.withConfig({
   var spacing = theme.spacing;
   return _objectSpread({
     backgroundColor: theme.colors.transparent,
-    borderRadius: $isSelected ? theme.border.radius.none : theme.border.radius.max,
-    borderTopLeftRadius: theme.border.radius.max,
-    borderBottomLeftRadius: theme.border.radius.max,
+    borderRadius: $isSelected ? theme.border.radius.none : theme.border.radius.small,
+    borderTopLeftRadius: theme.border.radius.small,
+    borderBottomLeftRadius: theme.border.radius.small,
     paddingLeft: makeSpace(spacing[4]),
     paddingRight: $isSelected ? makeSpace(spacing[2]) : makeSpace(spacing[3]),
     gap: makeSpace(spacing[2])
@@ -103,11 +104,12 @@ var StyledFilterCloseButton = /*#__PURE__*/styled.button.withConfig({
   var theme = _ref4.theme;
   return _objectSpread({
     backgroundColor: theme.colors.transparent,
-    borderTopRightRadius: theme.border.radius.max,
-    borderBottomRightRadius: theme.border.radius.max,
-    paddingLeft: makeSpace(theme.spacing[2]),
-    paddingRight: makeSpace(theme.spacing[3]),
-    justifyContent: 'center'
+    borderTopRightRadius: theme.border.radius.small,
+    borderBottomRightRadius: theme.border.radius.small,
+    paddingLeft: makeSpace(theme.spacing[2] + theme.spacing[1]),
+    paddingRight: makeSpace(theme.spacing[2] + theme.spacing[1]),
+    justifyContent: 'center',
+    alignItems: 'center'
   }, getInteractiveFilterItemStyles({
     theme: theme
   }));
@@ -119,16 +121,16 @@ var renderValue = function renderValue(selectionType, value, isDisabled) {
       alignItems: "center",
       children: /*#__PURE__*/jsx(Counter, {
         value: value.length,
-        color: isDisabled ? 'neutral' : 'primary',
+        color: "neutral",
         size: "small"
       })
     });
   }
   return /*#__PURE__*/jsx(Text, {
     as: "span",
-    size: "xsmall",
-    weight: "semibold",
-    color: isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.primary.normal',
+    size: "small",
+    weight: "medium",
+    color: isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.normal',
     children: value
   });
 };
@@ -172,8 +174,9 @@ var _BaseFilterChip = function _BaseFilterChip(_ref5, ref) {
         display: "flex",
         gap: "spacing.2",
         whiteSpace: "nowrap",
+        alignItems: "center",
         children: [/*#__PURE__*/jsxs(Text, {
-          size: "xsmall",
+          size: "small",
           weight: "medium",
           color: "interactive.text.gray.subtle",
           truncateAfterLines: 1,

package/build/lib/web/development/components/FilterChip/BaseFilterChip.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseFilterChip.web.js","sources":["../../../../../../src/components/FilterChip/BaseFilterChip.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { CSSObject } from 'styled-components';\nimport styled from 'styled-components';\nimport { FILTER_CHIP_HEIGHT } from './tokens';\nimport type { BaseFilterChipProps } from './types';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Counter } from '~components/Counter';\nimport { Divider } from '~components/Divider';\nimport { ChevronDownIcon, CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { makeBorderSize, makeSpace } from '~utils';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport type { Theme } from '~components/BladeProvider';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst getInteractiveFilterItemStyles = ({ theme }: { theme: Theme }): CSSObject => {\n  return {\n    display: 'flex',\n    height: '100%',\n    alignItems: 'center',\n    border: 'none',\n    cursor: 'pointer',\n    color: 'currentcolor',\n    '&:not([disabled]):hover': {\n      backgroundColor: theme.colors.interactive.background.gray.faded,\n    },\n    '&[disabled]': {\n      cursor: 'not-allowed',\n    },\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      outlineOffset: makeSpace(theme.spacing[1]),\n    },\n  };\n};\n\nconst StyledFilterChip = styled(BaseBox)<{ $isSelected?: boolean; $isDisabled?: boolean }>(\n  ({ theme, $isDisabled }) => {\n    return {\n      borderWidth: makeBorderSize(theme.border.width.thinner),\n      borderColor: theme.colors.interactive.border.gray[$isDisabled ? 'disabled' : 'highlighted'],\n      height: FILTER_CHIP_HEIGHT,\n      borderRadius: theme.border.radius.max,\n      display: 'flex',\n      borderStyle: 'solid',\n      backgroundColor: theme.colors.surface.background.gray.intense,\n      color: theme.colors.interactive.text.gray[$isDisabled ? 'disabled' : 'normal'],\n      width: 'fit-content',\n    };\n  },\n);\n\nconst StyledFilterTrigger = styled.button<{ $isSelected?: boolean }>(({ theme, $isSelected }) => {\n  const { spacing } = theme;\n  return {\n    backgroundColor: theme.colors.transparent,\n    borderRadius: $isSelected ? theme.border.radius.none : theme.border.radius.max,\n    borderTopLeftRadius: theme.border.radius.max,\n    borderBottomLeftRadius: theme.border.radius.max,\n    paddingLeft: makeSpace(spacing[4]),\n    paddingRight: $isSelected ? makeSpace(spacing[2]) : makeSpace(spacing[3]),\n    gap: makeSpace(spacing[2]),\n    ...getInteractiveFilterItemStyles({ theme }),\n  };\n});\n\nconst StyledFilterCloseButton = styled.button(({ theme }) => {\n  return {\n    backgroundColor: theme.colors.transparent,\n    borderTopRightRadius: theme.border.radius.max,\n    borderBottomRightRadius: theme.border.radius.max,\n    paddingLeft: makeSpace(theme.spacing[2]),\n    paddingRight: makeSpace(theme.spacing[3]),\n    justifyContent: 'center',\n    ...getInteractiveFilterItemStyles({ theme }),\n  };\n});\n\nconst renderValue = (\n  selectionType: BaseFilterChipProps['selectionType'],\n  value: BaseFilterChipProps['value'],\n  isDisabled?: boolean,\n): React.ReactElement => {\n  if (selectionType === 'multiple' && Array.isArray(value)) {\n    return (\n      <Box display=\"flex\" alignItems=\"center\">\n        <Counter value={value.length} color={isDisabled ? 'neutral' : 'primary'} size=\"small\" />\n      </Box>\n    );\n  }\n\n  return (\n    <Text\n      as=\"span\"\n      size=\"xsmall\"\n      weight=\"semibold\"\n      color={isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.primary.normal'}\n    >\n      {value}\n    </Text>\n  );\n};\n\nconst _BaseFilterChip: React.ForwardRefRenderFunction<BladeElementRef, BaseFilterChipProps> = (\n  {\n    value,\n    onClearButtonClick,\n    label,\n    isDisabled,\n    selectionType = 'single',\n    onClick,\n    onKeyDown,\n    accessibilityProps,\n    id,\n    ...rest\n  }: BaseFilterChipProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const isSelected =\n    selectionType === 'multiple' ? Array.isArray(value) && value.length > 0 : !!value;\n\n  return (\n    <StyledFilterChip\n      $isDisabled={isDisabled}\n      $isSelected={isSelected}\n      ref={ref as React.Ref<HTMLDivElement>}\n    >\n      <StyledFilterTrigger\n        $isSelected={isSelected}\n        disabled={isDisabled}\n        id={id}\n        onClick={(e) => {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          onClick?.(e as any);\n        }}\n        onKeyDown={(e) => {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          onKeyDown?.(e as any);\n        }}\n        {...makeAccessible({\n          ...accessibilityProps,\n          role: accessibilityProps?.role ?? 'button',\n        })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ name: 'filter-chip-trigger', testID: rest.testID })}\n      >\n        <Box display=\"flex\" gap=\"spacing.2\" whiteSpace=\"nowrap\">\n          <Text\n            size=\"xsmall\"\n            weight=\"medium\"\n            color=\"interactive.text.gray.subtle\"\n            truncateAfterLines={1}\n          >\n            {label}\n            {isSelected ? ':' : null}\n          </Text>\n          {isSelected ? renderValue(selectionType, value, isDisabled) : null}\n        </Box>\n        <Box display=\"flex\" alignItems=\"center\" paddingRight=\"spacing.1\">\n          <ChevronDownIcon size=\"small\" color=\"interactive.icon.gray.muted\" />\n        </Box>\n      </StyledFilterTrigger>\n      {isSelected ? (\n        <>\n          <Divider orientation=\"vertical\" variant={isDisabled ? 'muted' : 'subtle'} />\n          <StyledFilterCloseButton\n            aria-label={`Clear ${label} value`}\n            // value can never be undefined because when it's undefined the button itself doesn't render/\n            onClick={() => onClearButtonClick?.({ value: value ?? '' })}\n            disabled={isDisabled}\n            {...metaAttribute({ name: 'filter-chip-close-button' })}\n          >\n            <CloseIcon size=\"small\" color=\"interactive.icon.gray.muted\" />\n          </StyledFilterCloseButton>\n        </>\n      ) : null}\n    </StyledFilterChip>\n  );\n};\n\nconst BaseFilterChip = assignWithoutSideEffects(React.forwardRef(_BaseFilterChip), {\n  componentId: MetaConstants.BaseFilterChip,\n});\n\nexport { BaseFilterChip };\n"],"names":["getInteractiveFilterItemStyles","_ref","theme","display","height","alignItems","border","cursor","color","backgroundColor","colors","interactive","background","gray","faded","_objectSpread","getFocusRingStyles","outlineOffset","makeSpace","spacing","StyledFilterChip","styled","BaseBox","withConfig","displayName","componentId","_ref2","$isDisabled","borderWidth","makeBorderSize","width","thinner","borderColor","FILTER_CHIP_HEIGHT","borderRadius","radius","max","borderStyle","surface","intense","text","StyledFilterTrigger","button","_ref3","$isSelected","transparent","none","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","paddingRight","gap","StyledFilterCloseButton","_ref4","borderTopRightRadius","borderBottomRightRadius","justifyContent","renderValue","selectionType","value","isDisabled","Array","isArray","_jsx","Box","children","Counter","length","size","Text","as","weight","_BaseFilterChip","_ref5","ref","_accessibilityProps$r","onClearButtonClick","label","_ref5$selectionType","onClick","onKeyDown","accessibilityProps","id","rest","_objectWithoutProperties","_excluded","isSelected","_jsxs","disabled","e","makeAccessible","role","getStyledProps","makeAnalyticsAttribute","metaAttribute","name","testID","whiteSpace","truncateAfterLines","ChevronDownIcon","_Fragment","Divider","orientation","variant","concat","CloseIcon","BaseFilterChip","assignWithoutSideEffects","React","forwardRef","MetaConstants"],"mappings":"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"}
+{"version":3,"file":"BaseFilterChip.web.js","sources":["../../../../../../src/components/FilterChip/BaseFilterChip.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { CSSObject } from 'styled-components';\nimport styled from 'styled-components';\nimport { FILTER_CHIP_HEIGHT } from './tokens';\nimport type { BaseFilterChipProps } from './types';\nimport { makeBorderSize, makeSpace } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Counter } from '~components/Counter';\nimport { Divider } from '~components/Divider';\nimport { ChevronDownIcon, CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\nconst getInteractiveFilterItemStyles = ({ theme }: { theme: Theme }): CSSObject => {\n  return {\n    display: 'flex',\n    height: '100%',\n    alignItems: 'center',\n    border: 'none',\n    cursor: 'pointer',\n    color: 'currentcolor',\n    '&:not([disabled]):hover': {\n      backgroundColor: theme.colors.interactive.background.gray.faded,\n    },\n    '&[disabled]': {\n      cursor: 'not-allowed',\n    },\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      outlineOffset: makeSpace(theme.spacing[1]),\n    },\n  };\n};\n\nconst StyledFilterChip = styled(BaseBox)<{ $isSelected?: boolean; $isDisabled?: boolean }>(\n  ({ theme, $isDisabled, $isSelected }) => {\n    return {\n      borderWidth: makeBorderSize(theme.border.width.thin),\n      borderColor: theme.colors.interactive.border.gray[$isDisabled ? 'disabled' : 'faded'],\n      height: FILTER_CHIP_HEIGHT,\n      borderRadius: theme.border.radius.small,\n      display: 'flex',\n      borderStyle: $isSelected ? 'solid' : 'dashed',\n      backgroundColor: theme.colors.surface.background.gray.intense,\n      color: theme.colors.interactive.text.gray[$isDisabled ? 'disabled' : 'muted'],\n      width: 'fit-content',\n    };\n  },\n);\n\nconst StyledFilterTrigger = styled.button<{ $isSelected?: boolean }>(({ theme, $isSelected }) => {\n  const { spacing } = theme;\n  return {\n    backgroundColor: theme.colors.transparent,\n    borderRadius: $isSelected ? theme.border.radius.none : theme.border.radius.small,\n    borderTopLeftRadius: theme.border.radius.small,\n    borderBottomLeftRadius: theme.border.radius.small,\n    paddingLeft: makeSpace(spacing[4]),\n    paddingRight: $isSelected ? makeSpace(spacing[2]) : makeSpace(spacing[3]),\n    gap: makeSpace(spacing[2]),\n    ...getInteractiveFilterItemStyles({ theme }),\n  };\n});\n\nconst StyledFilterCloseButton = styled.button(({ theme }) => {\n  return {\n    backgroundColor: theme.colors.transparent,\n    borderTopRightRadius: theme.border.radius.small,\n    borderBottomRightRadius: theme.border.radius.small,\n    paddingLeft: makeSpace(theme.spacing[2] + theme.spacing[1]),\n    paddingRight: makeSpace(theme.spacing[2] + theme.spacing[1]),\n    justifyContent: 'center',\n    alignItems: 'center',\n    ...getInteractiveFilterItemStyles({ theme }),\n  };\n});\n\nconst renderValue = (\n  selectionType: BaseFilterChipProps['selectionType'],\n  value: BaseFilterChipProps['value'],\n  isDisabled?: boolean,\n): React.ReactElement => {\n  if (selectionType === 'multiple' && Array.isArray(value)) {\n    return (\n      <Box display=\"flex\" alignItems=\"center\">\n        <Counter value={value.length} color=\"neutral\" size=\"small\" />\n      </Box>\n    );\n  }\n\n  return (\n    <Text\n      as=\"span\"\n      size=\"small\"\n      weight=\"medium\"\n      color={isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.normal'}\n    >\n      {value}\n    </Text>\n  );\n};\n\nconst _BaseFilterChip: React.ForwardRefRenderFunction<BladeElementRef, BaseFilterChipProps> = (\n  {\n    value,\n    onClearButtonClick,\n    label,\n    isDisabled,\n    selectionType = 'single',\n    onClick,\n    onKeyDown,\n    accessibilityProps,\n    id,\n    ...rest\n  }: BaseFilterChipProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const isSelected =\n    selectionType === 'multiple' ? Array.isArray(value) && value.length > 0 : !!value;\n\n  return (\n    <StyledFilterChip\n      $isDisabled={isDisabled}\n      $isSelected={isSelected}\n      ref={ref as React.Ref<HTMLDivElement>}\n    >\n      <StyledFilterTrigger\n        $isSelected={isSelected}\n        disabled={isDisabled}\n        id={id}\n        onClick={(e) => {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          onClick?.(e as any);\n        }}\n        onKeyDown={(e) => {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          onKeyDown?.(e as any);\n        }}\n        {...makeAccessible({\n          ...accessibilityProps,\n          role: accessibilityProps?.role ?? 'button',\n        })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ name: 'filter-chip-trigger', testID: rest.testID })}\n      >\n        <Box display=\"flex\" gap=\"spacing.2\" whiteSpace=\"nowrap\" alignItems=\"center\">\n          <Text\n            size=\"small\"\n            weight=\"medium\"\n            color=\"interactive.text.gray.subtle\"\n            truncateAfterLines={1}\n          >\n            {label}\n            {isSelected ? ':' : null}\n          </Text>\n          {isSelected ? renderValue(selectionType, value, isDisabled) : null}\n        </Box>\n        <Box display=\"flex\" alignItems=\"center\" paddingRight=\"spacing.1\">\n          <ChevronDownIcon size=\"small\" color=\"interactive.icon.gray.muted\" />\n        </Box>\n      </StyledFilterTrigger>\n      {isSelected ? (\n        <>\n          <Divider orientation=\"vertical\" variant={isDisabled ? 'muted' : 'subtle'} />\n          <StyledFilterCloseButton\n            aria-label={`Clear ${label} value`}\n            // value can never be undefined because when it's undefined the button itself doesn't render/\n            onClick={() => onClearButtonClick?.({ value: value ?? '' })}\n            disabled={isDisabled}\n            {...metaAttribute({ name: 'filter-chip-close-button' })}\n          >\n            <CloseIcon size=\"small\" color=\"interactive.icon.gray.muted\" />\n          </StyledFilterCloseButton>\n        </>\n      ) : null}\n    </StyledFilterChip>\n  );\n};\n\nconst BaseFilterChip = assignWithoutSideEffects(React.forwardRef(_BaseFilterChip), {\n  componentId: MetaConstants.BaseFilterChip,\n});\n\nexport { BaseFilterChip };\n"],"names":["getInteractiveFilterItemStyles","_ref","theme","display","height","alignItems","border","cursor","color","backgroundColor","colors","interactive","background","gray","faded","_objectSpread","getFocusRingStyles","outlineOffset","makeSpace","spacing","StyledFilterChip","styled","BaseBox","withConfig","displayName","componentId","_ref2","$isDisabled","$isSelected","borderWidth","makeBorderSize","width","thin","borderColor","FILTER_CHIP_HEIGHT","borderRadius","radius","small","borderStyle","surface","intense","text","StyledFilterTrigger","button","_ref3","transparent","none","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","paddingRight","gap","StyledFilterCloseButton","_ref4","borderTopRightRadius","borderBottomRightRadius","justifyContent","renderValue","selectionType","value","isDisabled","Array","isArray","_jsx","Box","children","Counter","length","size","Text","as","weight","_BaseFilterChip","_ref5","ref","_accessibilityProps$r","onClearButtonClick","label","_ref5$selectionType","onClick","onKeyDown","accessibilityProps","id","rest","_objectWithoutProperties","_excluded","isSelected","_jsxs","disabled","e","makeAccessible","role","getStyledProps","makeAnalyticsAttribute","metaAttribute","name","testID","whiteSpace","truncateAfterLines","ChevronDownIcon","_Fragment","Divider","orientation","variant","concat","CloseIcon","BaseFilterChip","assignWithoutSideEffects","React","forwardRef","MetaConstants"],"mappings":"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"}

package/build/lib/web/development/components/FilterChip/tokens.js

@@ -3,7 +3,7 @@ import '../../utils/index.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { size } from '../../tokens/global/size.js';
 
-var FILTER_CHIP_HEIGHT = makeSize(size['24']);
+var FILTER_CHIP_HEIGHT = makeSize(size['28']);
 
 export { FILTER_CHIP_HEIGHT };
 //# sourceMappingURL=tokens.js.map

package/build/lib/web/development/components/FilterChip/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../../../../src/components/FilterChip/tokens.ts"],"sourcesContent":["import { size } from '~tokens/global';\nimport { makeSize } from '~utils';\n\nconst FILTER_CHIP_HEIGHT = makeSize(size['24']);\n\nexport { FILTER_CHIP_HEIGHT };\n"],"names":["FILTER_CHIP_HEIGHT","makeSize","size"],"mappings":";;;;;AAGMA,IAAAA,kBAAkB,GAAGC,QAAQ,CAACC,IAAI,CAAC,IAAI,CAAC;;;;"}
+{"version":3,"file":"tokens.js","sources":["../../../../../../src/components/FilterChip/tokens.ts"],"sourcesContent":["import { size } from '~tokens/global';\nimport { makeSize } from '~utils';\n\nconst FILTER_CHIP_HEIGHT = makeSize(size['28']);\n\nexport { FILTER_CHIP_HEIGHT };\n"],"names":["FILTER_CHIP_HEIGHT","makeSize","size"],"mappings":";;;;;AAGMA,IAAAA,kBAAkB,GAAGC,QAAQ,CAACC,IAAI,CAAC,IAAI,CAAC;;;;"}

package/build/lib/web/development/components/Form/FormHint.js

@@ -40,6 +40,7 @@ var HintText = function HintText(_ref) {
         size: hintTextSize[size],
         variant: "caption",
         wordBreak: "break-word",
+        marginTop: size === 'large' && Icon ? 'spacing.1' : 'spacing.0',
         children: children
       })]
     })

package/build/lib/web/development/components/Form/FormHint.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormHint.js","sources":["../../../../../../src/components/Form/FormHint.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { FormHintWrapper } from './FormHintWrapper';\nimport { hintIconSize, hintMarginTop, hintTextSize } from './formTokens';\nimport type { TextProps } from '~components/Typography/Text';\nimport { Text } from '~components/Typography/Text';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport { getPlatformType } from '~utils/getPlatformType';\nimport { Box } from '~components/Box';\n\ntype HintTextProps = {\n  icon?: IconComponent;\n  children: string;\n  id?: string;\n  color: TextProps<{ variant: 'caption' }>['color'];\n  size: 'xsmall' | 'small' | 'medium' | 'large';\n};\n\nconst HintText = ({ icon: Icon, children, id, color, size }: HintTextProps): ReactElement => {\n  const isReactNative = getPlatformType() === 'react-native';\n\n  return (\n    <BaseBox marginTop={hintMarginTop[size]} id={id}>\n      <FormHintWrapper>\n        {Icon ? (\n          // offset block element 2px down to align with text\n          <Box flexShrink={0} marginTop=\"spacing.1\">\n            <Icon />\n          </Box>\n        ) : null}\n        <Text\n          as={isReactNative ? undefined : 'span'}\n          color={color}\n          size={hintTextSize[size]}\n          variant=\"caption\"\n          wordBreak=\"break-word\"\n        >\n          {children}\n        </Text>\n      </FormHintWrapper>\n    </BaseBox>\n  );\n};\n\nexport type FormHintProps = {\n  type: 'help' | 'error' | 'success';\n  /**\n   * Help text for the group\n   */\n  helpText?: string;\n  /**\n   * Error text for the group\n   *\n   * Renders when `state` is set to 'error'\n   */\n  errorText?: string;\n  /**\n   * Success text for the group\n   *\n   * Renders when `state` is set to 'success'\n   */\n  successText?: string;\n  /**\n   * Sets the id on errorText.\n   * Needed for accessibility reasons.\n   */\n  errorTextId?: string;\n  /**\n   * Sets the id on helpText.\n   * Needed for accessibility reasons.\n   */\n  helpTextId?: string;\n  /**\n   * Sets the id on successText.\n   * Needed for accessibility reasons.\n   */\n  successTextId?: string;\n  /**\n   * Sets the size of the hint\n   * @default medium\n   */\n  size?: 'xsmall' | 'small' | 'medium' | 'large';\n};\n\nconst Icons = {\n  error: ({ size }: { size: 'xsmall' | 'small' | 'medium' | 'large' }): ReactElement => (\n    <InfoIcon\n      display={'block' as never}\n      color=\"feedback.icon.negative.intense\"\n      size={hintIconSize[size]}\n    />\n  ),\n  success: ({ size }: { size: 'xsmall' | 'small' | 'medium' | 'large' }): ReactElement => (\n    <CheckIcon\n      display={'block' as never}\n      color=\"feedback.icon.positive.intense\"\n      size={hintIconSize[size]}\n    />\n  ),\n};\n\nconst FormHint = ({\n  type,\n  helpText,\n  errorText,\n  successText,\n  helpTextId,\n  errorTextId,\n  successTextId,\n  size = 'medium',\n}: FormHintProps): React.ReactElement => {\n  const colors: Record<string, TextProps<{ variant: 'caption' }>['color']> = {\n    help: 'surface.text.gray.muted',\n    error: 'feedback.text.negative.intense',\n    success: 'feedback.text.positive.intense',\n  };\n\n  const showError = type === 'error' && errorText;\n  const showSuccess = type === 'success' && successText;\n  const showHelp = !showError && !showSuccess && helpText;\n\n  return (\n    <>\n      {showHelp && (\n        <HintText size={size} id={helpTextId} color={colors.help}>\n          {helpText}\n        </HintText>\n      )}\n\n      {showError && (\n        <HintText\n          size={size}\n          id={errorTextId}\n          icon={() => Icons.error({ size })}\n          color={colors.error}\n        >\n          {errorText}\n        </HintText>\n      )}\n\n      {showSuccess && (\n        <HintText\n          size={size}\n          id={successTextId}\n          icon={() => Icons.success({ size })}\n          color={colors.success}\n        >\n          {successText}\n        </HintText>\n      )}\n    </>\n  );\n};\n\nexport { FormHint };\n"],"names":["HintText","_ref","Icon","icon","children","id","color","size","isReactNative","getPlatformType","_jsx","BaseBox","marginTop","hintMarginTop","_jsxs","FormHintWrapper","Box","flexShrink","Text","as","undefined","hintTextSize","variant","wordBreak","Icons","error","_ref2","InfoIcon","display","hintIconSize","success","_ref3","CheckIcon","FormHint","_ref4","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","_ref4$size","colors","help","showError","showSuccess","showHelp","_Fragment"],"mappings":"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"}
+{"version":3,"file":"FormHint.js","sources":["../../../../../../src/components/Form/FormHint.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { FormHintWrapper } from './FormHintWrapper';\nimport { hintIconSize, hintMarginTop, hintTextSize } from './formTokens';\nimport type { TextProps } from '~components/Typography/Text';\nimport { Text } from '~components/Typography/Text';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport { getPlatformType } from '~utils/getPlatformType';\nimport { Box } from '~components/Box';\n\ntype HintTextProps = {\n  icon?: IconComponent;\n  children: string;\n  id?: string;\n  color: TextProps<{ variant: 'caption' }>['color'];\n  size: 'xsmall' | 'small' | 'medium' | 'large';\n};\n\nconst HintText = ({ icon: Icon, children, id, color, size }: HintTextProps): ReactElement => {\n  const isReactNative = getPlatformType() === 'react-native';\n\n  return (\n    <BaseBox marginTop={hintMarginTop[size]} id={id}>\n      <FormHintWrapper>\n        {Icon ? (\n          // offset block element 2px down to align with text\n          <Box flexShrink={0} marginTop=\"spacing.1\">\n            <Icon />\n          </Box>\n        ) : null}\n        <Text\n          as={isReactNative ? undefined : 'span'}\n          color={color}\n          size={hintTextSize[size]}\n          variant=\"caption\"\n          wordBreak=\"break-word\"\n          marginTop={size === 'large' && Icon ? 'spacing.1' : 'spacing.0'}\n        >\n          {children}\n        </Text>\n      </FormHintWrapper>\n    </BaseBox>\n  );\n};\n\nexport type FormHintProps = {\n  type: 'help' | 'error' | 'success';\n  /**\n   * Help text for the group\n   */\n  helpText?: string;\n  /**\n   * Error text for the group\n   *\n   * Renders when `state` is set to 'error'\n   */\n  errorText?: string;\n  /**\n   * Success text for the group\n   *\n   * Renders when `state` is set to 'success'\n   */\n  successText?: string;\n  /**\n   * Sets the id on errorText.\n   * Needed for accessibility reasons.\n   */\n  errorTextId?: string;\n  /**\n   * Sets the id on helpText.\n   * Needed for accessibility reasons.\n   */\n  helpTextId?: string;\n  /**\n   * Sets the id on successText.\n   * Needed for accessibility reasons.\n   */\n  successTextId?: string;\n  /**\n   * Sets the size of the hint\n   * @default medium\n   */\n  size?: 'xsmall' | 'small' | 'medium' | 'large';\n};\n\nconst Icons = {\n  error: ({ size }: { size: 'xsmall' | 'small' | 'medium' | 'large' }): ReactElement => (\n    <InfoIcon\n      display={'block' as never}\n      color=\"feedback.icon.negative.intense\"\n      size={hintIconSize[size]}\n    />\n  ),\n  success: ({ size }: { size: 'xsmall' | 'small' | 'medium' | 'large' }): ReactElement => (\n    <CheckIcon\n      display={'block' as never}\n      color=\"feedback.icon.positive.intense\"\n      size={hintIconSize[size]}\n    />\n  ),\n};\n\nconst FormHint = ({\n  type,\n  helpText,\n  errorText,\n  successText,\n  helpTextId,\n  errorTextId,\n  successTextId,\n  size = 'medium',\n}: FormHintProps): React.ReactElement => {\n  const colors: Record<string, TextProps<{ variant: 'caption' }>['color']> = {\n    help: 'surface.text.gray.muted',\n    error: 'feedback.text.negative.intense',\n    success: 'feedback.text.positive.intense',\n  };\n\n  const showError = type === 'error' && errorText;\n  const showSuccess = type === 'success' && successText;\n  const showHelp = !showError && !showSuccess && helpText;\n\n  return (\n    <>\n      {showHelp && (\n        <HintText size={size} id={helpTextId} color={colors.help}>\n          {helpText}\n        </HintText>\n      )}\n\n      {showError && (\n        <HintText\n          size={size}\n          id={errorTextId}\n          icon={() => Icons.error({ size })}\n          color={colors.error}\n        >\n          {errorText}\n        </HintText>\n      )}\n\n      {showSuccess && (\n        <HintText\n          size={size}\n          id={successTextId}\n          icon={() => Icons.success({ size })}\n          color={colors.success}\n        >\n          {successText}\n        </HintText>\n      )}\n    </>\n  );\n};\n\nexport { FormHint };\n"],"names":["HintText","_ref","Icon","icon","children","id","color","size","isReactNative","getPlatformType","_jsx","BaseBox","marginTop","hintMarginTop","_jsxs","FormHintWrapper","Box","flexShrink","Text","as","undefined","hintTextSize","variant","wordBreak","Icons","error","_ref2","InfoIcon","display","hintIconSize","success","_ref3","CheckIcon","FormHint","_ref4","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","_ref4$size","colors","help","showError","showSuccess","showHelp","_Fragment"],"mappings":"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"}

package/build/lib/web/development/components/Form/FormLabel.js

@@ -85,9 +85,9 @@ var FormLabel = function FormLabel(_ref) {
     children: [/*#__PURE__*/jsx(Text, {
       variant: "body",
       size: labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size$1],
-      color: isLabelLeftPositioned ? 'surface.text.gray.subtle' : 'surface.text.gray.muted',
+      color: "surface.text.gray.subtle",
       truncateAfterLines: 2,
-      weight: "semibold",
+      weight: "medium",
       wordBreak: isLabelLeftPositioned ? 'break-word' : undefined,
       children: children
     }), computedAccessibilityNode, necessityLabel]

package/build/lib/web/development/components/Form/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  labelLeftMarginRight,\n  labelMarginBottom,\n  labelOptionalIndicatorTextSize,\n  labelTextSize,\n  labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n  as: 'span' | 'label';\n  position?: 'top' | 'left';\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  accessibilityText?: string;\n  children: string | undefined;\n  id?: string;\n  /**\n   * Sets the size of the label\n   * @default medium\n   */\n  size?: 'xsmall' | 'small' | 'medium' | 'large';\n  labelSuffix?: React.ReactNode;\n  labelTrailing?: React.ReactNode;\n};\n\ntype LabelProps = CommonProps & {\n  htmlFor: string;\n  as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n  as: 'span';\n  htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: string;\n  /**\n   * Desktop only prop. Default value on mobile will be `top`\n   */\n  labelPosition?: 'left' | 'top';\n  /**\n   * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n\n  /**\n   * Suffix element to be shown for the input field\n   *\n   * @example\n   * ```jsx\n   * labelSuffix={\n   *  <Tooltip content=\"This is a tooltip\" placement=\"right\">\n   *    <TooltipInteractiveWrapper>\n   *        <InfoIcon size=\"small\" color=\"surface.icon.gray.subtle\" />\n   *    </TooltipInteractiveWrapper>\n   *  </Tooltip>\n   * }\n   * ```\n   */\n  labelSuffix?: React.ReactNode;\n\n  /**\n   * Trailing element to be shown for the input field\n   */\n  labelTrailing?: React.ReactNode;\n};\n\nconst FormLabel = ({\n  as = 'span',\n  position = 'top',\n  necessityIndicator = 'none',\n  accessibilityText,\n  children,\n  id,\n  htmlFor,\n  size = 'medium',\n  labelSuffix,\n  labelTrailing,\n}: FormLabelProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const isDesktop = matchedDeviceType === 'desktop';\n  const isReactNative = getPlatformType() === 'react-native';\n\n  let necessityLabel: React.ReactNode = null;\n\n  const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n  if (necessityIndicator === 'optional') {\n    necessityLabel = (\n      <Text\n        variant=\"caption\"\n        size={labelOptionalIndicatorTextSize[size]}\n        color=\"surface.text.gray.muted\"\n      >\n        (optional)\n      </Text>\n    );\n  }\n  if (necessityIndicator === 'required') {\n    necessityLabel = (\n      <Text\n        variant=\"body\"\n        size={isLabelLeftPositioned ? 'medium' : 'small'}\n        color=\"feedback.text.negative.intense\"\n        alignSelf=\"flex-start\"\n      >\n        *\n      </Text>\n    );\n  }\n\n  const computedAccessibilityNode = (\n    <VisuallyHidden>\n      {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n      <Text>{accessibilityText}</Text>\n    </VisuallyHidden>\n  );\n\n  const textNode = (\n    <BaseBox\n      gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      // flexWrap=\"wrap\"\n      maxHeight={makeSpace(sizeToken[36])}\n    >\n      <Text\n        variant=\"body\"\n        size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n        color={isLabelLeftPositioned ? 'surface.text.gray.subtle' : 'surface.text.gray.muted'}\n        truncateAfterLines={2}\n        weight=\"semibold\"\n        wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n      >\n        {children}\n      </Text>\n      {computedAccessibilityNode}\n      {/* TODO: Hide from screen readers to prevent double announcement */}\n      {necessityLabel}\n    </BaseBox>\n  );\n\n  // What harm can it do?\n  if (isReactNative) {\n    return (\n      <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n        {textNode}\n      </BaseBox>\n    );\n  }\n\n  const Component = as;\n  // only set 120px label when device is desktop\n  const width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size]) : '100%';\n\n  return (\n    <Component\n      htmlFor={htmlFor}\n      style={{\n        width,\n        flexShrink: 0,\n        marginRight: isLabelLeftPositioned\n          ? makeSpace(getIn(theme, labelLeftMarginRight[size]))\n          : makeSpace(getIn(theme, 'spacing.0')),\n      }}\n      id={id}\n      {...metaAttribute({ name: MetaConstants.FormLabel })}\n    >\n      <BaseBox\n        width=\"100%\"\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'column' : 'row'}\n        alignItems={isLabelLeftPositioned ? 'flex-start' : 'center'}\n        marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" gap=\"spacing.2\">\n          <BaseBox>{textNode}</BaseBox>\n          {labelSuffix ? <BaseBox display=\"flex\">{labelSuffix}</BaseBox> : null}\n        </BaseBox>\n        {labelTrailing ? (\n          <BaseBox marginLeft={isLabelLeftPositioned ? 'spacing.0' : 'auto'}>\n            {labelTrailing}\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    </Component>\n  );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_ref$size","size","labelSuffix","labelTrailing","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","alignSelf","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","_objectSpread","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom","marginLeft"],"mappings":"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"}
+{"version":3,"file":"FormLabel.js","sources":["../../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  labelLeftMarginRight,\n  labelMarginBottom,\n  labelOptionalIndicatorTextSize,\n  labelTextSize,\n  labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n  as: 'span' | 'label';\n  position?: 'top' | 'left';\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  accessibilityText?: string;\n  children: string | undefined;\n  id?: string;\n  /**\n   * Sets the size of the label\n   * @default medium\n   */\n  size?: 'xsmall' | 'small' | 'medium' | 'large';\n  labelSuffix?: React.ReactNode;\n  labelTrailing?: React.ReactNode;\n};\n\ntype LabelProps = CommonProps & {\n  htmlFor: string;\n  as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n  as: 'span';\n  htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: string;\n  /**\n   * Desktop only prop. Default value on mobile will be `top`\n   */\n  labelPosition?: 'left' | 'top';\n  /**\n   * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n\n  /**\n   * Suffix element to be shown for the input field\n   *\n   * @example\n   * ```jsx\n   * labelSuffix={\n   *  <Tooltip content=\"This is a tooltip\" placement=\"right\">\n   *    <TooltipInteractiveWrapper>\n   *        <InfoIcon size=\"small\" color=\"surface.icon.gray.subtle\" />\n   *    </TooltipInteractiveWrapper>\n   *  </Tooltip>\n   * }\n   * ```\n   */\n  labelSuffix?: React.ReactNode;\n\n  /**\n   * Trailing element to be shown for the input field\n   */\n  labelTrailing?: React.ReactNode;\n};\n\nconst FormLabel = ({\n  as = 'span',\n  position = 'top',\n  necessityIndicator = 'none',\n  accessibilityText,\n  children,\n  id,\n  htmlFor,\n  size = 'medium',\n  labelSuffix,\n  labelTrailing,\n}: FormLabelProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const isDesktop = matchedDeviceType === 'desktop';\n  const isReactNative = getPlatformType() === 'react-native';\n\n  let necessityLabel: React.ReactNode = null;\n\n  const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n  if (necessityIndicator === 'optional') {\n    necessityLabel = (\n      <Text\n        variant=\"caption\"\n        size={labelOptionalIndicatorTextSize[size]}\n        color=\"surface.text.gray.muted\"\n      >\n        (optional)\n      </Text>\n    );\n  }\n  if (necessityIndicator === 'required') {\n    necessityLabel = (\n      <Text\n        variant=\"body\"\n        size={isLabelLeftPositioned ? 'medium' : 'small'}\n        color=\"feedback.text.negative.intense\"\n        alignSelf=\"flex-start\"\n      >\n        *\n      </Text>\n    );\n  }\n\n  const computedAccessibilityNode = (\n    <VisuallyHidden>\n      {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n      <Text>{accessibilityText}</Text>\n    </VisuallyHidden>\n  );\n\n  const textNode = (\n    <BaseBox\n      gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      // flexWrap=\"wrap\"\n      maxHeight={makeSpace(sizeToken[36])}\n    >\n      <Text\n        variant=\"body\"\n        size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n        color=\"surface.text.gray.subtle\"\n        truncateAfterLines={2}\n        weight=\"medium\"\n        wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n      >\n        {children}\n      </Text>\n      {computedAccessibilityNode}\n      {/* TODO: Hide from screen readers to prevent double announcement */}\n      {necessityLabel}\n    </BaseBox>\n  );\n\n  // What harm can it do?\n  if (isReactNative) {\n    return (\n      <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n        {textNode}\n      </BaseBox>\n    );\n  }\n\n  const Component = as;\n  // only set 120px label when device is desktop\n  const width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size]) : '100%';\n\n  return (\n    <Component\n      htmlFor={htmlFor}\n      style={{\n        width,\n        flexShrink: 0,\n        marginRight: isLabelLeftPositioned\n          ? makeSpace(getIn(theme, labelLeftMarginRight[size]))\n          : makeSpace(getIn(theme, 'spacing.0')),\n      }}\n      id={id}\n      {...metaAttribute({ name: MetaConstants.FormLabel })}\n    >\n      <BaseBox\n        width=\"100%\"\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'column' : 'row'}\n        alignItems={isLabelLeftPositioned ? 'flex-start' : 'center'}\n        marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" gap=\"spacing.2\">\n          <BaseBox>{textNode}</BaseBox>\n          {labelSuffix ? <BaseBox display=\"flex\">{labelSuffix}</BaseBox> : null}\n        </BaseBox>\n        {labelTrailing ? (\n          <BaseBox marginLeft={isLabelLeftPositioned ? 'spacing.0' : 'auto'}>\n            {labelTrailing}\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    </Component>\n  );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_ref$size","size","labelSuffix","labelTrailing","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","alignSelf","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","_objectSpread","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom","marginLeft"],"mappings":"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"}