@razorpay/blade 12.35.0 → 12.37.0

package/build/lib/web/development/components/Box/styledProps/getStyledProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"getStyledProps.js","sources":["../../../../../../../src/components/Box/styledProps/getStyledProps.ts"],"sourcesContent":["import type { StyledPropsBlade } from '../BaseBox/types';\nimport type { KeysRequired } from '~utils/types';\n\n/**\n * The input type to these styledProps utilities can be anything as we can just pass all the props and then get the filtered styledProps out of it\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype StyledPropsInputType = Record<string, any>;\n\n/**\n * Removing undefined styledProps because when used with spread operator, undefined can override the earlier defined values.\n\n  * Example: the following code will print display: undefined since it is given priority in spread.\n  * \n  * ```ts\n  * const styledProps = {\n  *  display: undefined,\n  * }\n  *\n  * const buttonProps = {\n  *  display: 'block',\n  * }\n  *\n  * const styles = {\n  *  ...buttonProps,\n  *  ...styledProps,\n  * } // -> Prints { display: undefined }\n  * ```\n  */\nconst removeUndefinedStyledProps = (obj: StyledPropsInputType): StyledPropsInputType => {\n  const onlyDefinedStyledProps: StyledPropsBlade = {};\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n      // @ts-ignore: complex type error\n      onlyDefinedStyledProps[key] = obj[key];\n    }\n  }\n  return onlyDefinedStyledProps;\n};\n\n/**\n * - Removes the props that are not styledProps\n * - Returns all the styled props along with undefined values.\n *\n * Can be used in generating storybook docs and testing the possible props.\n *\n *\n * **Use `getStyledProps` instead if you're using this for adding styledProps!**\n */\nconst makeStyledProps = (props: StyledPropsInputType): KeysRequired<StyledPropsBlade> => {\n  return {\n    alignSelf: props.alignSelf,\n    display: props.display,\n    justifySelf: props.justifySelf,\n    placeSelf: props.placeSelf,\n    order: props.order,\n    position: props.position,\n    zIndex: props.zIndex,\n    gridColumn: props.gridColumn,\n    gridColumnStart: props.gridColumnStart,\n    gridColumnEnd: props.gridColumnEnd,\n    gridRow: props.gridRow,\n    gridRowStart: props.gridRowStart,\n    gridRowEnd: props.gridRowEnd,\n    gridArea: props.gridArea,\n    margin: props.margin,\n    marginX: props.marginX,\n    marginY: props.marginY,\n    marginBottom: props.marginBottom,\n    marginTop: props.marginTop,\n    marginRight: props.marginRight,\n    marginLeft: props.marginLeft,\n    top: props.top,\n    right: props.right,\n    bottom: props.bottom,\n    left: props.left,\n    visibility: props.visibility,\n  };\n};\n\n/**\n *\n * ## How to add Styled Props to components?\n *\n * There are 2 ways\n * - Using `getStyledProps` + BaseBox wrapper\n * - Using `useStyledProps`\n *\n * You can use `getStyledProps` method if you're fine adding or already have BaseBox wrapper around your component\n * And use `useStyledProps` when adding BaseBox wrapper can cause styling issues or is unneccessary and you want to prevent unnecessary renders\n *\n * ### Usage\n *\n * #### `getStyledProps` + BaseBox wrapper\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { getStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n * const MyComponent = (props: MyComponentProps): React.ReactElement => {\n *  return (\n *    // Make sure styledProps come last so they take priority in stylings in-case of overrides\n *    <BaseBox someOtherProp={someValue} {...getStyledProps(props)}>\n *      // Your component code\n *    </BaseBox>\n *  )\n * }\n * ```\n *\n * #### `useStyledProps`\n *\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { useStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyTextComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n *\n * const TextComponentWithStyledProps = styled.p<MyTextComponentProps>((props) => {\n *  const styledPropsCSSObject = useStyledProps(props);\n *\n *  return {\n *    // ...your other CSS,\n *    ...styledPropsCSSObject, // Make sure styledProps come last so they take priority in styles\n *  }\n * })\n * ```\n *\n * Checkout implementation in `BaseText` components for example of `useStyledProps`\n *\n * - Web: [`BaseText.web.tsx`](../../components/Typography/BaseText/BaseText.web.tsx)\n * - Native: [`BaseText.native.tsx`](../../components/Typography/BaseText/BaseText.native.tsx)\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getStyledProps = (props: Record<string, any>): StyledPropsBlade => {\n  return removeUndefinedStyledProps(makeStyledProps(props));\n};\n\nexport type { StyledPropsBlade };\nexport { getStyledProps, makeStyledProps, removeUndefinedStyledProps };\n"],"names":["removeUndefinedStyledProps","obj","onlyDefinedStyledProps","key","undefined","makeStyledProps","props","alignSelf","display","justifySelf","placeSelf","order","position","zIndex","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","gridArea","margin","marginX","marginY","marginBottom","marginTop","marginRight","marginLeft","top","right","bottom","left","visibility","getStyledProps"],"mappings":"AAGA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAIC,GAAyB,EAA2B;EACtF,IAAMC,sBAAwC,GAAG,EAAE,CAAA;AACnD,EAAA,KAAK,IAAMC,GAAG,IAAIF,GAAG,EAAE;AACrB,IAAA,IAAIA,GAAG,CAACE,GAAG,CAAC,KAAKC,SAAS,EAAE;AAC1B;AACA;AACAF,MAAAA,sBAAsB,CAACC,GAAG,CAAC,GAAGF,GAAG,CAACE,GAAG,CAAC,CAAA;AACxC,KAAA;AACF,GAAA;AACA,EAAA,OAAOD,sBAAsB,CAAA;AAC/B,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAA2B,EAAqC;EACvF,OAAO;IACLC,SAAS,EAAED,KAAK,CAACC,SAAS;IAC1BC,OAAO,EAAEF,KAAK,CAACE,OAAO;IACtBC,WAAW,EAAEH,KAAK,CAACG,WAAW;IAC9BC,SAAS,EAAEJ,KAAK,CAACI,SAAS;IAC1BC,KAAK,EAAEL,KAAK,CAACK,KAAK;IAClBC,QAAQ,EAAEN,KAAK,CAACM,QAAQ;IACxBC,MAAM,EAAEP,KAAK,CAACO,MAAM;IACpBC,UAAU,EAAER,KAAK,CAACQ,UAAU;IAC5BC,eAAe,EAAET,KAAK,CAACS,eAAe;IACtCC,aAAa,EAAEV,KAAK,CAACU,aAAa;IAClCC,OAAO,EAAEX,KAAK,CAACW,OAAO;IACtBC,YAAY,EAAEZ,KAAK,CAACY,YAAY;IAChCC,UAAU,EAAEb,KAAK,CAACa,UAAU;IAC5BC,QAAQ,EAAEd,KAAK,CAACc,QAAQ;IACxBC,MAAM,EAAEf,KAAK,CAACe,MAAM;IACpBC,OAAO,EAAEhB,KAAK,CAACgB,OAAO;IACtBC,OAAO,EAAEjB,KAAK,CAACiB,OAAO;IACtBC,YAAY,EAAElB,KAAK,CAACkB,YAAY;IAChCC,SAAS,EAAEnB,KAAK,CAACmB,SAAS;IAC1BC,WAAW,EAAEpB,KAAK,CAACoB,WAAW;IAC9BC,UAAU,EAAErB,KAAK,CAACqB,UAAU;IAC5BC,GAAG,EAAEtB,KAAK,CAACsB,GAAG;IACdC,KAAK,EAAEvB,KAAK,CAACuB,KAAK;IAClBC,MAAM,EAAExB,KAAK,CAACwB,MAAM;IACpBC,IAAI,EAAEzB,KAAK,CAACyB,IAAI;IAChBC,UAAU,EAAE1B,KAAK,CAAC0B,UAAAA;GACnB,CAAA;AACH,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAI3B,KAA0B,EAAuB;AACvE,EAAA,OAAON,0BAA0B,CAACK,eAAe,CAACC,KAAK,CAAC,CAAC,CAAA;AAC3D;;;;"}
+{"version":3,"file":"getStyledProps.js","sources":["../../../../../../../src/components/Box/styledProps/getStyledProps.ts"],"sourcesContent":["import type { StyledPropsBlade } from '../BaseBox/types';\nimport type { KeysRequired } from '~utils/types';\n\n/**\n * The input type to these styledProps utilities can be anything as we can just pass all the props and then get the filtered styledProps out of it\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype StyledPropsInputType = Record<string, any>;\n\n/**\n * Removing undefined styledProps because when used with spread operator, undefined can override the earlier defined values.\n\n  * Example: the following code will print display: undefined since it is given priority in spread.\n  * \n  * ```ts\n  * const styledProps = {\n  *  display: undefined,\n  * }\n  *\n  * const buttonProps = {\n  *  display: 'block',\n  * }\n  *\n  * const styles = {\n  *  ...buttonProps,\n  *  ...styledProps,\n  * } // -> Prints { display: undefined }\n  * ```\n  */\nconst removeUndefinedStyledProps = (obj: StyledPropsInputType): StyledPropsInputType => {\n  const onlyDefinedStyledProps: StyledPropsBlade = {};\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n      // @ts-ignore: complex type error\n      onlyDefinedStyledProps[key] = obj[key];\n    }\n  }\n  return onlyDefinedStyledProps;\n};\n\n/**\n * - Removes the props that are not styledProps\n * - Returns all the styled props along with undefined values.\n *\n * Can be used in generating storybook docs and testing the possible props.\n *\n *\n * **Use `getStyledProps` instead if you're using this for adding styledProps!**\n */\nconst makeStyledProps = (props: StyledPropsInputType): KeysRequired<StyledPropsBlade> => {\n  return {\n    alignSelf: props.alignSelf,\n    display: props.display,\n    justifySelf: props.justifySelf,\n    placeSelf: props.placeSelf,\n    order: props.order,\n    position: props.position,\n    zIndex: props.zIndex,\n    gridColumn: props.gridColumn,\n    gridColumnStart: props.gridColumnStart,\n    gridColumnEnd: props.gridColumnEnd,\n    gridRow: props.gridRow,\n    gridRowStart: props.gridRowStart,\n    gridRowEnd: props.gridRowEnd,\n    gridArea: props.gridArea,\n    margin: props.margin,\n    marginX: props.marginX,\n    marginY: props.marginY,\n    marginBottom: props.marginBottom,\n    marginTop: props.marginTop,\n    marginRight: props.marginRight,\n    marginLeft: props.marginLeft,\n    top: props.top,\n    right: props.right,\n    bottom: props.bottom,\n    left: props.left,\n    visibility: props.visibility,\n    flexWrap: props.flexWrap,\n  };\n};\n\n/**\n *\n * ## How to add Styled Props to components?\n *\n * There are 2 ways\n * - Using `getStyledProps` + BaseBox wrapper\n * - Using `useStyledProps`\n *\n * You can use `getStyledProps` method if you're fine adding or already have BaseBox wrapper around your component\n * And use `useStyledProps` when adding BaseBox wrapper can cause styling issues or is unneccessary and you want to prevent unnecessary renders\n *\n * ### Usage\n *\n * #### `getStyledProps` + BaseBox wrapper\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { getStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n * const MyComponent = (props: MyComponentProps): React.ReactElement => {\n *  return (\n *    // Make sure styledProps come last so they take priority in stylings in-case of overrides\n *    <BaseBox someOtherProp={someValue} {...getStyledProps(props)}>\n *      // Your component code\n *    </BaseBox>\n *  )\n * }\n * ```\n *\n * #### `useStyledProps`\n *\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { useStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyTextComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n *\n * const TextComponentWithStyledProps = styled.p<MyTextComponentProps>((props) => {\n *  const styledPropsCSSObject = useStyledProps(props);\n *\n *  return {\n *    // ...your other CSS,\n *    ...styledPropsCSSObject, // Make sure styledProps come last so they take priority in styles\n *  }\n * })\n * ```\n *\n * Checkout implementation in `BaseText` components for example of `useStyledProps`\n *\n * - Web: [`BaseText.web.tsx`](../../components/Typography/BaseText/BaseText.web.tsx)\n * - Native: [`BaseText.native.tsx`](../../components/Typography/BaseText/BaseText.native.tsx)\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getStyledProps = (props: Record<string, any>): StyledPropsBlade => {\n  return removeUndefinedStyledProps(makeStyledProps(props));\n};\n\nexport type { StyledPropsBlade };\nexport { getStyledProps, makeStyledProps, removeUndefinedStyledProps };\n"],"names":["removeUndefinedStyledProps","obj","onlyDefinedStyledProps","key","undefined","makeStyledProps","props","alignSelf","display","justifySelf","placeSelf","order","position","zIndex","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","gridArea","margin","marginX","marginY","marginBottom","marginTop","marginRight","marginLeft","top","right","bottom","left","visibility","flexWrap","getStyledProps"],"mappings":"AAGA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAIC,GAAyB,EAA2B;EACtF,IAAMC,sBAAwC,GAAG,EAAE,CAAA;AACnD,EAAA,KAAK,IAAMC,GAAG,IAAIF,GAAG,EAAE;AACrB,IAAA,IAAIA,GAAG,CAACE,GAAG,CAAC,KAAKC,SAAS,EAAE;AAC1B;AACA;AACAF,MAAAA,sBAAsB,CAACC,GAAG,CAAC,GAAGF,GAAG,CAACE,GAAG,CAAC,CAAA;AACxC,KAAA;AACF,GAAA;AACA,EAAA,OAAOD,sBAAsB,CAAA;AAC/B,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAA2B,EAAqC;EACvF,OAAO;IACLC,SAAS,EAAED,KAAK,CAACC,SAAS;IAC1BC,OAAO,EAAEF,KAAK,CAACE,OAAO;IACtBC,WAAW,EAAEH,KAAK,CAACG,WAAW;IAC9BC,SAAS,EAAEJ,KAAK,CAACI,SAAS;IAC1BC,KAAK,EAAEL,KAAK,CAACK,KAAK;IAClBC,QAAQ,EAAEN,KAAK,CAACM,QAAQ;IACxBC,MAAM,EAAEP,KAAK,CAACO,MAAM;IACpBC,UAAU,EAAER,KAAK,CAACQ,UAAU;IAC5BC,eAAe,EAAET,KAAK,CAACS,eAAe;IACtCC,aAAa,EAAEV,KAAK,CAACU,aAAa;IAClCC,OAAO,EAAEX,KAAK,CAACW,OAAO;IACtBC,YAAY,EAAEZ,KAAK,CAACY,YAAY;IAChCC,UAAU,EAAEb,KAAK,CAACa,UAAU;IAC5BC,QAAQ,EAAEd,KAAK,CAACc,QAAQ;IACxBC,MAAM,EAAEf,KAAK,CAACe,MAAM;IACpBC,OAAO,EAAEhB,KAAK,CAACgB,OAAO;IACtBC,OAAO,EAAEjB,KAAK,CAACiB,OAAO;IACtBC,YAAY,EAAElB,KAAK,CAACkB,YAAY;IAChCC,SAAS,EAAEnB,KAAK,CAACmB,SAAS;IAC1BC,WAAW,EAAEpB,KAAK,CAACoB,WAAW;IAC9BC,UAAU,EAAErB,KAAK,CAACqB,UAAU;IAC5BC,GAAG,EAAEtB,KAAK,CAACsB,GAAG;IACdC,KAAK,EAAEvB,KAAK,CAACuB,KAAK;IAClBC,MAAM,EAAExB,KAAK,CAACwB,MAAM;IACpBC,IAAI,EAAEzB,KAAK,CAACyB,IAAI;IAChBC,UAAU,EAAE1B,KAAK,CAAC0B,UAAU;IAC5BC,QAAQ,EAAE3B,KAAK,CAAC2B,QAAAA;GACjB,CAAA;AACH,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAI5B,KAA0B,EAAuB;AACvE,EAAA,OAAON,0BAA0B,CAACK,eAAe,CAACC,KAAK,CAAC,CAAC,CAAA;AAC3D;;;;"}

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

@@ -15,6 +15,8 @@ import '../../utils/makeAccessible/index.js';
 import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js';
 import '../../utils/index.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
+import { useCheckboxGroupContext } from '../Checkbox/CheckboxGroup/CheckboxGroupContext.js';
+import { useRadioGroupContext } from '../Radio/RadioGroup/RadioContext.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
@@ -96,6 +98,15 @@ var _Card = function _Card(_ref, ref) {
     }
   });
   var defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;
+  var checkboxGroupProps = useCheckboxGroupContext();
+  var radioGroupProps = useRadioGroupContext();
+  var getGroupProps = function getGroupProps() {
+    if (Object.keys(checkboxGroupProps).length > 0) return checkboxGroupProps;
+    if (Object.keys(radioGroupProps).length > 0) return radioGroupProps;
+    return undefined;
+  };
+  var groupProps = getGroupProps();
+  var _validationState = groupProps === null || groupProps === void 0 ? void 0 : groupProps.validationState;
   return /*#__PURE__*/jsx(CardProvider, {
     children: /*#__PURE__*/jsx(CardRoot, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
       as: as,
@@ -115,7 +126,8 @@ var _Card = function _Card(_ref, ref) {
       minWidth: minWidth,
       maxWidth: maxWidth,
       href: href,
-      accessibilityLabel: accessibilityLabel
+      accessibilityLabel: accessibilityLabel,
+      validationState: _validationState
     }, metaAttribute({
       name: MetaConstants.Card,
       testID: testID

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport const ComponentIds = {\n  CardHeader: 'CardHeader',\n  CardHeaderTrailing: 'CardHeaderTrailing',\n  CardHeaderLeading: 'CardHeaderLeading',\n  CardFooter: 'CardFooter',\n  CardFooterTrailing: 'CardFooterTrailing',\n  CardFooterLeading: 'CardFooterLeading',\n  CardBody: 'CardBody',\n  CardHeaderIcon: 'CardHeaderIcon',\n  CardHeaderCounter: 'CardHeaderCounter',\n  CardHeaderBadge: 'CardHeaderBadge',\n  CardHeaderAmount: 'CardHeaderAmount',\n  CardHeaderText: 'CardHeaderText',\n  CardHeaderLink: 'CardHeaderLink',\n  CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n  Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n  /**\n   * Card contents\n   */\n  children: React.ReactNode;\n  /**\n   * Sets the background color of the Card\n   *\n   * @default `surface.background.gray.intense`\n   */\n  backgroundColor?: CardSurfaceBackgroundColors;\n  /**\n   * Sets the border radius of the Card\n   *\n   * @default `medium`\n   */\n  borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n  /**\n   * Sets the elevation for Cards\n   *\n   * eg: `theme.elevation.midRaised`\n   *\n   * @default `theme.elevation.lowRaised`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n   */\n  elevation?: keyof Elevation;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.7`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n   */\n  padding?: CardSpacingValueType;\n  /**\n   * Sets the width of the card\n   */\n  width?: BoxProps['width'];\n  /**\n   * Sets the height of the card\n   */\n  height?: BoxProps['height'];\n  /**\n   * Sets minimum height of the card\n   */\n  minHeight?: BoxProps['minHeight'];\n  /**\n   * Sets minimum width of the card\n   */\n  minWidth?: BoxProps['minWidth'];\n  /**\n   * Sets maximum width of the card\n   */\n  maxWidth?: BoxProps['maxWidth'];\n  /**\n   * If `true`, the card will be in selected state\n   * Card will have a primary color border around it.\n   *\n   * @default false\n   */\n  isSelected?: boolean;\n  /**\n   * Makes the Card linkable by setting the `href` prop\n   *\n   * @default undefined\n   */\n  href?: string;\n  /**\n   * Sets the `target` attribute for the linkable card\n   */\n  target?: string;\n  /**\n   * Sets the `rel` attribute for the linkable card\n   */\n  rel?: string;\n  /**\n   * Sets the accessibility label for the card\n   * This is useful when the card has an `href` or `onClick` prop\n   * Setting this will announce the label when the card is focused\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the card will scale up on hover\n   *\n   * On mobile devices it will scale down on press\n   *\n   * **This prop is deprecated in favour of motion presets released in v12**\n   *\n   * ### Migration\n   *\n   * ```diff\n   * - <Card\n   * -  shouldScaleOnHover\n   * - />\n   *\n   * + <Scale motionTriggers={['hover']}>\n   * +   <Card />\n   * + </Scale>\n   * ```\n   *\n   * @default false\n   *\n   * @deprecated This prop is deprecated in favour of motion presets released in v12\n   */\n  shouldScaleOnHover?: boolean;\n  /**\n   * Callback triggered when the card is hovered\n   */\n  onHover?: () => void;\n  /**\n   * Callback triggered when the card is clicked\n   */\n  onClick?: (\n    event: Platform.Select<{\n      web: React.MouseEvent;\n      native: GestureResponderEvent;\n    }>,\n  ) => void;\n  /**\n   * Sets the HTML element for the Card\n   *\n   * When `as` is set to `label`, the card will be rendered as a label element\n   * This can be used to create a custom checkbox or radio button using the card\n   *\n   * @default undefined\n   */\n  as?: 'label';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n  {\n    children,\n    backgroundColor = 'surface.background.gray.intense',\n    borderRadius = 'medium',\n    elevation = 'lowRaised',\n    testID,\n    padding = 'spacing.7',\n    width,\n    height,\n    minHeight,\n    minWidth,\n    maxWidth,\n    onClick,\n    isSelected = false,\n    accessibilityLabel,\n    shouldScaleOnHover = false,\n    onHover,\n    href,\n    target,\n    rel,\n    as,\n    ...rest\n  },\n  ref,\n): React.ReactElement => {\n  const [isFocused, setIsFocused] = React.useState(false);\n\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'Card',\n    allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n  });\n\n  const linkOverlayProps: LinkOverlayProps = {\n    ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n    ...makeAccessible({ label: accessibilityLabel, pressed: href ? undefined : isSelected }),\n    onFocus: () => {\n      setIsFocused(true);\n    },\n    onBlur: () => {\n      setIsFocused(false);\n    },\n  };\n  const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n  return (\n    <CardProvider>\n      <CardRoot\n        as={as}\n        ref={ref as never}\n        display={'block' as never}\n        borderRadius={borderRadius}\n        onMouseEnter={onHover as never}\n        shouldScaleOnHover={shouldScaleOnHover}\n        isSelected={isSelected}\n        isFocused={isFocused}\n        // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n        onClick={isReactNative() ? onClick : undefined}\n        width={width}\n        height={height}\n        minHeight={minHeight}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        href={href}\n        accessibilityLabel={accessibilityLabel}\n        {...metaAttribute({ name: MetaConstants.Card, testID })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <CardSurface\n          height={height}\n          minHeight={minHeight}\n          padding={padding}\n          borderRadius={borderRadius}\n          elevation={elevation}\n          textAlign={'left' as never}\n          backgroundColor={backgroundColor}\n        >\n          {href ? (\n            <LinkOverlay\n              onClick={onClick}\n              href={href}\n              target={target}\n              rel={rel ?? defaultRel}\n              {...linkOverlayProps}\n            />\n          ) : null}\n          {!href && onClick ? (\n            <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n          ) : null}\n          {children}\n        </CardSurface>\n      </CardRoot>\n    </CardProvider>\n  );\n};\n\ntype CardBodyProps = {\n  children: React.ReactNode;\n  height?: BoxProps['height'];\n} & TestID &\n  DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n  useVerifyInsideCard('CardBody');\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n      {...makeAnalyticsAttribute(rest)}\n      height={height}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","maxWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","undefined","onFocus","onBlur","defaultRel","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { useCheckboxGroupContext } from '~components/Checkbox/CheckboxGroup/CheckboxGroupContext';\nimport { useRadioGroupContext } from '~components/Radio/RadioGroup/RadioContext';\nimport type { CheckboxGroupContextType } from '~components/Checkbox/CheckboxGroup/CheckboxGroupContext';\nimport type { RadioGroupContextType } from '~components/Radio/RadioGroup/RadioContext';\n\nexport const ComponentIds = {\n  CardHeader: 'CardHeader',\n  CardHeaderTrailing: 'CardHeaderTrailing',\n  CardHeaderLeading: 'CardHeaderLeading',\n  CardFooter: 'CardFooter',\n  CardFooterTrailing: 'CardFooterTrailing',\n  CardFooterLeading: 'CardFooterLeading',\n  CardBody: 'CardBody',\n  CardHeaderIcon: 'CardHeaderIcon',\n  CardHeaderCounter: 'CardHeaderCounter',\n  CardHeaderBadge: 'CardHeaderBadge',\n  CardHeaderAmount: 'CardHeaderAmount',\n  CardHeaderText: 'CardHeaderText',\n  CardHeaderLink: 'CardHeaderLink',\n  CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n  Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n  /**\n   * Card contents\n   */\n  children: React.ReactNode;\n  /**\n   * Sets the background color of the Card\n   *\n   * @default `surface.background.gray.intense`\n   */\n  backgroundColor?: CardSurfaceBackgroundColors;\n  /**\n   * Sets the border radius of the Card\n   *\n   * @default `medium`\n   */\n  borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n  /**\n   * Sets the elevation for Cards\n   *\n   * eg: `theme.elevation.midRaised`\n   *\n   * @default `theme.elevation.lowRaised`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n   */\n  elevation?: keyof Elevation;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.7`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n   */\n  padding?: CardSpacingValueType;\n  /**\n   * Sets the width of the card\n   */\n  width?: BoxProps['width'];\n  /**\n   * Sets the height of the card\n   */\n  height?: BoxProps['height'];\n  /**\n   * Sets minimum height of the card\n   */\n  minHeight?: BoxProps['minHeight'];\n  /**\n   * Sets minimum width of the card\n   */\n  minWidth?: BoxProps['minWidth'];\n  /**\n   * Sets maximum width of the card\n   */\n  maxWidth?: BoxProps['maxWidth'];\n  /**\n   * If `true`, the card will be in selected state\n   * Card will have a primary color border around it.\n   *\n   * @default false\n   */\n  isSelected?: boolean;\n  /**\n   * Makes the Card linkable by setting the `href` prop\n   *\n   * @default undefined\n   */\n  href?: string;\n  /**\n   * Sets the `target` attribute for the linkable card\n   */\n  target?: string;\n  /**\n   * Sets the `rel` attribute for the linkable card\n   */\n  rel?: string;\n  /**\n   * Sets the accessibility label for the card\n   * This is useful when the card has an `href` or `onClick` prop\n   * Setting this will announce the label when the card is focused\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the card will scale up on hover\n   *\n   * On mobile devices it will scale down on press\n   *\n   * **This prop is deprecated in favour of motion presets released in v12**\n   *\n   * ### Migration\n   *\n   * ```diff\n   * - <Card\n   * -  shouldScaleOnHover\n   * - />\n   *\n   * + <Scale motionTriggers={['hover']}>\n   * +   <Card />\n   * + </Scale>\n   * ```\n   *\n   * @default false\n   *\n   * @deprecated This prop is deprecated in favour of motion presets released in v12\n   */\n  shouldScaleOnHover?: boolean;\n  /**\n   * Callback triggered when the card is hovered\n   */\n  onHover?: () => void;\n  /**\n   * Callback triggered when the card is clicked\n   */\n  onClick?: (\n    event: Platform.Select<{\n      web: React.MouseEvent;\n      native: GestureResponderEvent;\n    }>,\n  ) => void;\n  /**\n   * Sets the HTML element for the Card\n   *\n   * When `as` is set to `label`, the card will be rendered as a label element\n   * This can be used to create a custom checkbox or radio button using the card\n   *\n   * @default undefined\n   */\n  as?: 'label';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n  {\n    children,\n    backgroundColor = 'surface.background.gray.intense',\n    borderRadius = 'medium',\n    elevation = 'lowRaised',\n    testID,\n    padding = 'spacing.7',\n    width,\n    height,\n    minHeight,\n    minWidth,\n    maxWidth,\n    onClick,\n    isSelected = false,\n    accessibilityLabel,\n    shouldScaleOnHover = false,\n    onHover,\n    href,\n    target,\n    rel,\n    as,\n    ...rest\n  },\n  ref,\n): React.ReactElement => {\n  const [isFocused, setIsFocused] = React.useState(false);\n\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'Card',\n    allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n  });\n\n  const linkOverlayProps: LinkOverlayProps = {\n    ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n    ...makeAccessible({ label: accessibilityLabel, pressed: href ? undefined : isSelected }),\n    onFocus: () => {\n      setIsFocused(true);\n    },\n    onBlur: () => {\n      setIsFocused(false);\n    },\n  };\n  const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n  const checkboxGroupProps = useCheckboxGroupContext();\n  const radioGroupProps = useRadioGroupContext();\n\n  const getGroupProps = (): CheckboxGroupContextType | RadioGroupContextType | undefined => {\n    if (Object.keys(checkboxGroupProps).length > 0) return checkboxGroupProps;\n    if (Object.keys(radioGroupProps).length > 0) return radioGroupProps;\n    return undefined;\n  };\n\n  const groupProps = getGroupProps();\n\n  const _validationState = groupProps?.validationState;\n\n  return (\n    <CardProvider>\n      <CardRoot\n        as={as}\n        ref={ref as never}\n        display={'block' as never}\n        borderRadius={borderRadius}\n        onMouseEnter={onHover as never}\n        shouldScaleOnHover={shouldScaleOnHover}\n        isSelected={isSelected}\n        isFocused={isFocused}\n        // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n        onClick={isReactNative() ? onClick : undefined}\n        width={width}\n        height={height}\n        minHeight={minHeight}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        href={href}\n        accessibilityLabel={accessibilityLabel}\n        validationState={_validationState}\n        {...metaAttribute({ name: MetaConstants.Card, testID })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <CardSurface\n          height={height}\n          minHeight={minHeight}\n          padding={padding}\n          borderRadius={borderRadius}\n          elevation={elevation}\n          textAlign={'left' as never}\n          backgroundColor={backgroundColor}\n        >\n          {href ? (\n            <LinkOverlay\n              onClick={onClick}\n              href={href}\n              target={target}\n              rel={rel ?? defaultRel}\n              {...linkOverlayProps}\n            />\n          ) : null}\n          {!href && onClick ? (\n            <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n          ) : null}\n          {children}\n        </CardSurface>\n      </CardRoot>\n    </CardProvider>\n  );\n};\n\ntype CardBodyProps = {\n  children: React.ReactNode;\n  height?: BoxProps['height'];\n} & TestID &\n  DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n  useVerifyInsideCard('CardBody');\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n      {...makeAnalyticsAttribute(rest)}\n      height={height}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","maxWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","undefined","onFocus","onBlur","defaultRel","checkboxGroupProps","useCheckboxGroupContext","radioGroupProps","useRadioGroupContext","getGroupProps","Object","keys","length","groupProps","_validationState","validationState","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}

package/build/lib/web/development/components/Card/CardRoot.web.js

@@ -27,8 +27,15 @@ var StyledCardRoot = /*#__PURE__*/styled(BaseBox).withConfig({
     isFocused = _ref.isFocused,
     shouldScaleOnHover = _ref.shouldScaleOnHover,
     isPressed = _ref.isPressed,
-    isMobile = _ref.isMobile;
-  var selectedColor = isSelected ? theme.colors.surface.border.primary.normal : 'transparent';
+    isMobile = _ref.isMobile,
+    validationState = _ref.validationState;
+  var getCardBorderColor = function getCardBorderColor() {
+    if (validationState === 'error') return theme.colors.interactive.border.negative["default"];
+    if (validationState === 'success') return theme.colors.interactive.border.positive["default"];
+    if (isSelected) return theme.colors.surface.border.primary.normal;
+    return 'transparent';
+  };
+  var selectedColor = getCardBorderColor();
   var selectedBorder = "0px 0px 0px ".concat(theme.border.width.thicker, "px ").concat(selectedColor);
   //  focused state
   var focusRing = isFocused ? ", 0px 0px 0px 4px ".concat(theme.colors.surface.border.primary.muted) : '';

package/build/lib/web/development/components/Card/CardRoot.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardRoot.web.js","sources":["../../../../../../src/components/Card/CardRoot.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport React from 'react';\nimport type { CardRootProps } from './types';\nimport { CARD_LINK_OVERLAY_ID, CARD_SCALE_DOWN_VALUE, CARD_SCALE_UP_VALUE } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledCardRoot = styled(BaseBox)<CardRootProps & { isPressed: boolean; isMobile: boolean }>(\n  ({ as, theme, isSelected, isFocused, shouldScaleOnHover, isPressed, isMobile }) => {\n    const selectedColor = isSelected ? theme.colors.surface.border.primary.normal : 'transparent';\n    const selectedBorder = `0px 0px 0px ${theme.border.width.thicker}px ${selectedColor}`;\n    //  focused state\n    const focusRing = isFocused\n      ? `, 0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`\n      : '';\n\n    return {\n      // Selected state\n      boxShadow: `${selectedBorder}${focusRing}`,\n      cursor: as === 'label' ? 'pointer' : 'initial',\n\n      // pressed state for mobile only\n      ...(isMobile &&\n        isPressed && {\n          transform: `scale(${CARD_SCALE_DOWN_VALUE})`,\n        }),\n\n      // Hover state for desktop only\n      ...(!isMobile &&\n        shouldScaleOnHover && {\n          transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n          transitionTimingFunction: castWebType(theme.motion.easing.standard),\n          transitionProperty: 'transform, box-shadow',\n\n          '&:hover': {\n            transform: `scale(${CARD_SCALE_UP_VALUE})`,\n          },\n        }),\n\n      // uplift all the nested links so they receive clicks and events (except the LinkOverlay)\n      // https://www.sarasoueidan.com/blog/nested-links\n      [`& a[href]:not(a[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n        zIndex: 2,\n        position: 'relative',\n      },\n      [`& button:not(button[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n        zIndex: 2,\n        position: 'relative',\n      },\n      [`& label:not(a[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n        zIndex: 2,\n        position: 'relative',\n      },\n      [`& label:not(button[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n        zIndex: 2,\n        position: 'relative',\n      },\n    };\n  },\n);\n\nconst _CardRoot: React.ForwardRefRenderFunction<BladeElementRef, CardRootProps> = (\n  { as, accessibilityLabel, children, ...props },\n  ref,\n): React.ReactElement => {\n  const isMobile = useIsMobile();\n  const [isPressed, setIsPressed] = React.useState(false);\n\n  return (\n    <StyledCardRoot\n      ref={ref as never}\n      as={as}\n      {...props}\n      isMobile={isMobile}\n      isPressed={props.shouldScaleOnHover ? isPressed : false}\n      onTouchStart={() => setIsPressed(true)}\n      onTouchEnd={() => setIsPressed(false)}\n      onMouseDown={() => setIsPressed(true)}\n      onMouseUp={() => setIsPressed(false)}\n      {...makeAccessible({\n        label: as === 'label' ? accessibilityLabel : undefined,\n      })}\n    >\n      {children}\n    </StyledCardRoot>\n  );\n};\n\nconst CardRoot = React.forwardRef(_CardRoot);\n\nexport { CardRoot };\n"],"names":["StyledCardRoot","styled","BaseBox","withConfig","displayName","componentId","_ref","as","theme","isSelected","isFocused","shouldScaleOnHover","isPressed","isMobile","selectedColor","colors","surface","border","primary","normal","selectedBorder","concat","width","thicker","focusRing","muted","_objectSpread","boxShadow","cursor","transform","CARD_SCALE_DOWN_VALUE","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","standard","transitionProperty","CARD_SCALE_UP_VALUE","_defineProperty","CARD_LINK_OVERLAY_ID","zIndex","position","_CardRoot","_ref2","ref","accessibilityLabel","children","props","_objectWithoutProperties","_excluded","useIsMobile","_React$useState","React","useState","_React$useState2","_slicedToArray","setIsPressed","_jsx","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","makeAccessible","label","undefined","CardRoot","forwardRef"],"mappings":"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"}
+{"version":3,"file":"CardRoot.web.js","sources":["../../../../../../src/components/Card/CardRoot.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport React from 'react';\nimport type { CardRootProps } from './types';\nimport { CARD_LINK_OVERLAY_ID, CARD_SCALE_DOWN_VALUE, CARD_SCALE_UP_VALUE } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledCardRoot = styled(BaseBox)<CardRootProps & { isPressed: boolean; isMobile: boolean }>(\n  ({\n    as,\n    theme,\n    isSelected,\n    isFocused,\n    shouldScaleOnHover,\n    isPressed,\n    isMobile,\n    validationState,\n  }) => {\n    const getCardBorderColor = (): string => {\n      if (validationState === 'error') return theme.colors.interactive.border.negative.default;\n      if (validationState === 'success') return theme.colors.interactive.border.positive.default;\n      if (isSelected) return theme.colors.surface.border.primary.normal;\n      return 'transparent';\n    };\n\n    const selectedColor = getCardBorderColor();\n    const selectedBorder = `0px 0px 0px ${theme.border.width.thicker}px ${selectedColor}`;\n    //  focused state\n    const focusRing = isFocused\n      ? `, 0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`\n      : '';\n\n    return {\n      // Selected state\n      boxShadow: `${selectedBorder}${focusRing}`,\n      cursor: as === 'label' ? 'pointer' : 'initial',\n\n      // pressed state for mobile only\n      ...(isMobile &&\n        isPressed && {\n          transform: `scale(${CARD_SCALE_DOWN_VALUE})`,\n        }),\n\n      // Hover state for desktop only\n      ...(!isMobile &&\n        shouldScaleOnHover && {\n          transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n          transitionTimingFunction: castWebType(theme.motion.easing.standard),\n          transitionProperty: 'transform, box-shadow',\n\n          '&:hover': {\n            transform: `scale(${CARD_SCALE_UP_VALUE})`,\n          },\n        }),\n\n      // uplift all the nested links so they receive clicks and events (except the LinkOverlay)\n      // https://www.sarasoueidan.com/blog/nested-links\n      [`& a[href]:not(a[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n        zIndex: 2,\n        position: 'relative',\n      },\n      [`& button:not(button[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n        zIndex: 2,\n        position: 'relative',\n      },\n      [`& label:not(a[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n        zIndex: 2,\n        position: 'relative',\n      },\n      [`& label:not(button[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n        zIndex: 2,\n        position: 'relative',\n      },\n    };\n  },\n);\n\nconst _CardRoot: React.ForwardRefRenderFunction<BladeElementRef, CardRootProps> = (\n  { as, accessibilityLabel, children, ...props },\n  ref,\n): React.ReactElement => {\n  const isMobile = useIsMobile();\n  const [isPressed, setIsPressed] = React.useState(false);\n\n  return (\n    <StyledCardRoot\n      ref={ref as never}\n      as={as}\n      {...props}\n      isMobile={isMobile}\n      isPressed={props.shouldScaleOnHover ? isPressed : false}\n      onTouchStart={() => setIsPressed(true)}\n      onTouchEnd={() => setIsPressed(false)}\n      onMouseDown={() => setIsPressed(true)}\n      onMouseUp={() => setIsPressed(false)}\n      {...makeAccessible({\n        label: as === 'label' ? accessibilityLabel : undefined,\n      })}\n    >\n      {children}\n    </StyledCardRoot>\n  );\n};\n\nconst CardRoot = React.forwardRef(_CardRoot);\n\nexport { CardRoot };\n"],"names":["StyledCardRoot","styled","BaseBox","withConfig","displayName","componentId","_ref","as","theme","isSelected","isFocused","shouldScaleOnHover","isPressed","isMobile","validationState","getCardBorderColor","colors","interactive","border","negative","positive","surface","primary","normal","selectedColor","selectedBorder","concat","width","thicker","focusRing","muted","_objectSpread","boxShadow","cursor","transform","CARD_SCALE_DOWN_VALUE","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","standard","transitionProperty","CARD_SCALE_UP_VALUE","_defineProperty","CARD_LINK_OVERLAY_ID","zIndex","position","_CardRoot","_ref2","ref","accessibilityLabel","children","props","_objectWithoutProperties","_excluded","useIsMobile","_React$useState","React","useState","_React$useState2","_slicedToArray","setIsPressed","_jsx","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","makeAccessible","label","undefined","CardRoot","forwardRef"],"mappings":"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"}

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

@@ -20,7 +20,7 @@ import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/ma
 import { FormLabel } from '../../Form/FormLabel.js';
 import { FormHint } from '../../Form/FormHint.js';
 
-var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID", "orientation"];
+var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID", "orientation", "flexWrap"];
 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 CheckboxGroup = function CheckboxGroup(_ref) {
@@ -46,6 +46,8 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     testID = _ref.testID,
     _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
+    _ref$flexWrap = _ref.flexWrap,
+    flexWrap = _ref$flexWrap === void 0 ? 'nowrap' : _ref$flexWrap,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useCheckboxGroup = useCheckboxGroup({
       defaultValue: defaultValue,
@@ -93,6 +95,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
             display: "flex",
             flexDirection: orientation === 'horizontal' ? 'row' : 'column',
             gap: gap,
+            flexWrap: flexWrap,
             children: React__default.Children.map(children, function (child, index) {
               return /*#__PURE__*/jsx(BaseBox, {
                 children: child

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype CheckboxGroupProps = {\n  /**\n   * Accepts multiple checkboxes as children\n   */\n  children: React.ReactNode;\n  /**\n   * Help text of the checkbox group\n   */\n  helpText?: string;\n  /**\n   * Error text of the checkbox group\n   * Renders when `validationState` is set to 'error'\n   *\n   * Overrides helpText\n   */\n  errorText?: string;\n  /**\n   * Sets the error state of the CheckboxGroup\n   * If set to `error` it will render the `errorText` of the group,\n   * and propagate `invalid` prop to every checkbox\n   */\n  validationState?: 'error' | 'none';\n  /**\n   * Renders a necessity indicator after CheckboxGroup label\n   *\n   * If set to `undefined` it renders nothing.\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  /**\n   * Sets the disabled state of the CheckboxGroup\n   * If set to `true` it propagate down to all the checkboxes\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Sets the required state of the CheckboxGroup\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * Renders the label of the checkbox group\n   */\n  label?: string;\n  /**\n   * Sets the position of the label\n   *\n   * @default 'top'\n   */\n  labelPosition?: 'top' | 'left';\n  /**\n   * Initial value of the checkbox group\n   */\n  defaultValue?: string[];\n  /**\n   * value of the checkbox group\n   *\n   * Use `onChange` to update its value\n   */\n  value?: string[];\n  /**\n   * The callback invoked when any of the checkbox's state changes\n   */\n  onChange?: ({ name, values }: { name: string; values: string[] }) => void;\n  /**\n   * The name of the input field in a checkbox\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * Size of the checkbox\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Orientation of the checkbox group\n   *\n   * @default \"vertical\"\n   */\n  orientation?: 'vertical' | 'horizontal';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst CheckboxGroup = ({\n  children,\n  label,\n  helpText,\n  isDisabled = false,\n  isRequired = false,\n  necessityIndicator = 'none',\n  labelPosition = 'top',\n  validationState,\n  errorText,\n  name,\n  defaultValue,\n  onChange,\n  value,\n  size = 'medium',\n  testID,\n  orientation = 'vertical',\n  ...rest\n}: CheckboxGroupProps): React.ReactElement => {\n  const { contextValue, ids } = useCheckboxGroup({\n    defaultValue,\n    onChange,\n    value,\n    isDisabled,\n    necessityIndicator,\n    isRequired,\n    name,\n    labelPosition,\n    validationState,\n    size,\n  });\n\n  const { theme } = useTheme();\n  const showError = validationState === 'error' && errorText;\n  const showHelpText = !showError && helpText;\n  const accessibilityText = `,${showError ? errorText : ''} ${showHelpText ? helpText : ''}`;\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const gap = checkboxSizes.group.gap[size][matchedDeviceType];\n\n  return (\n    <CheckboxGroupProvider value={contextValue}>\n      <BaseBox {...getStyledProps(rest)}>\n        <SelectorGroupField\n          position={labelPosition}\n          labelledBy={ids.labelId}\n          componentName=\"checkbox-group\"\n          testID={testID}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {label ? (\n            <FormLabel\n              as=\"span\"\n              necessityIndicator={necessityIndicator}\n              position={labelPosition}\n              id={ids.labelId}\n              accessibilityText={accessibilityText}\n              size={size}\n            >\n              {label}\n            </FormLabel>\n          ) : null}\n          <BaseBox>\n            <BaseBox\n              display=\"flex\"\n              flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n              gap={gap}\n            >\n              {React.Children.map(children, (child, index) => {\n                return <BaseBox key={index}>{child}</BaseBox>;\n              })}\n            </BaseBox>\n            <FormHint\n              size={size}\n              errorText={errorText}\n              helpText={helpText}\n              type={validationState === 'error' ? 'error' : 'help'}\n            />\n          </BaseBox>\n        </SelectorGroupField>\n      </BaseBox>\n    </CheckboxGroupProvider>\n  );\n};\n\nexport type { CheckboxGroupProps };\nexport { CheckboxGroup };\n"],"names":["CheckboxGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","_ref$orientation","orientation","rest","_objectWithoutProperties","_excluded","_useCheckboxGroup","useCheckboxGroup","contextValue","ids","_useTheme","useTheme","theme","showError","showHelpText","accessibilityText","concat","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","_jsx","CheckboxGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype CheckboxGroupProps = {\n  /**\n   * Accepts multiple checkboxes as children\n   */\n  children: React.ReactNode;\n  /**\n   * Help text of the checkbox group\n   */\n  helpText?: string;\n  /**\n   * Error text of the checkbox group\n   * Renders when `validationState` is set to 'error'\n   *\n   * Overrides helpText\n   */\n  errorText?: string;\n  /**\n   * Sets the error state of the CheckboxGroup\n   * If set to `error` it will render the `errorText` of the group,\n   * and propagate `invalid` prop to every checkbox\n   */\n  validationState?: 'error' | 'none';\n  /**\n   * Renders a necessity indicator after CheckboxGroup label\n   *\n   * If set to `undefined` it renders nothing.\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  /**\n   * Sets the disabled state of the CheckboxGroup\n   * If set to `true` it propagate down to all the checkboxes\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Sets the required state of the CheckboxGroup\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * Renders the label of the checkbox group\n   */\n  label?: string;\n  /**\n   * Sets the position of the label\n   *\n   * @default 'top'\n   */\n  labelPosition?: 'top' | 'left';\n  /**\n   * Initial value of the checkbox group\n   */\n  defaultValue?: string[];\n  /**\n   * value of the checkbox group\n   *\n   * Use `onChange` to update its value\n   */\n  value?: string[];\n  /**\n   * The callback invoked when any of the checkbox's state changes\n   */\n  onChange?: ({ name, values }: { name: string; values: string[] }) => void;\n  /**\n   * The name of the input field in a checkbox\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * Size of the checkbox\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Orientation of the checkbox group\n   *\n   * @default \"vertical\"\n   */\n  orientation?: 'vertical' | 'horizontal';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst CheckboxGroup = ({\n  children,\n  label,\n  helpText,\n  isDisabled = false,\n  isRequired = false,\n  necessityIndicator = 'none',\n  labelPosition = 'top',\n  validationState,\n  errorText,\n  name,\n  defaultValue,\n  onChange,\n  value,\n  size = 'medium',\n  testID,\n  orientation = 'vertical',\n  flexWrap = 'nowrap',\n  ...rest\n}: CheckboxGroupProps): React.ReactElement => {\n  const { contextValue, ids } = useCheckboxGroup({\n    defaultValue,\n    onChange,\n    value,\n    isDisabled,\n    necessityIndicator,\n    isRequired,\n    name,\n    labelPosition,\n    validationState,\n    size,\n  });\n\n  const { theme } = useTheme();\n  const showError = validationState === 'error' && errorText;\n  const showHelpText = !showError && helpText;\n  const accessibilityText = `,${showError ? errorText : ''} ${showHelpText ? helpText : ''}`;\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const gap = checkboxSizes.group.gap[size][matchedDeviceType];\n\n  return (\n    <CheckboxGroupProvider value={contextValue}>\n      <BaseBox {...getStyledProps(rest)}>\n        <SelectorGroupField\n          position={labelPosition}\n          labelledBy={ids.labelId}\n          componentName=\"checkbox-group\"\n          testID={testID}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {label ? (\n            <FormLabel\n              as=\"span\"\n              necessityIndicator={necessityIndicator}\n              position={labelPosition}\n              id={ids.labelId}\n              accessibilityText={accessibilityText}\n              size={size}\n            >\n              {label}\n            </FormLabel>\n          ) : null}\n          <BaseBox>\n            <BaseBox\n              display=\"flex\"\n              flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n              gap={gap}\n              flexWrap={flexWrap}\n            >\n              {React.Children.map(children, (child, index) => {\n                return <BaseBox key={index}>{child}</BaseBox>;\n              })}\n            </BaseBox>\n            <FormHint\n              size={size}\n              errorText={errorText}\n              helpText={helpText}\n              type={validationState === 'error' ? 'error' : 'help'}\n            />\n          </BaseBox>\n        </SelectorGroupField>\n      </BaseBox>\n    </CheckboxGroupProvider>\n  );\n};\n\nexport type { CheckboxGroupProps };\nexport { CheckboxGroup };\n"],"names":["CheckboxGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","_ref$orientation","orientation","_ref$flexWrap","flexWrap","rest","_objectWithoutProperties","_excluded","_useCheckboxGroup","useCheckboxGroup","contextValue","ids","_useTheme","useTheme","theme","showError","showHelpText","accessibilityText","concat","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","_jsx","CheckboxGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}

package/build/lib/web/development/components/Radio/RadioGroup/RadioGroup.js

@@ -20,7 +20,7 @@ import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/ma
 import { FormLabel } from '../../Form/FormLabel.js';
 import { FormHint } from '../../Form/FormHint.js';
 
-var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "orientation", "testID"];
+var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "orientation", "testID", "flexWrap"];
 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 RadioGroup = function RadioGroup(_ref) {
@@ -47,6 +47,8 @@ var RadioGroup = function RadioGroup(_ref) {
     _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
     testID = _ref.testID,
+    _ref$flexWrap = _ref.flexWrap,
+    flexWrap = _ref$flexWrap === void 0 ? 'nowrap' : _ref$flexWrap,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useRadioGroup = useRadioGroup({
       defaultValue: defaultValue,
@@ -95,6 +97,7 @@ var RadioGroup = function RadioGroup(_ref) {
             display: "flex",
             flexDirection: orientation === 'vertical' ? 'column' : 'row',
             gap: gap,
+            flexWrap: flexWrap,
             children: React__default.Children.map(children, function (child, index) {
               return /*#__PURE__*/jsx(BaseBox, {
                 children: child

package/build/lib/web/development/components/Radio/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { radioSizes } from '../radioTokens';\nimport { RadioGroupProvider } from './RadioContext';\nimport { useRadioGroup } from './useRadioGroup';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype RadioGroupProps = {\n  /**\n   * Accepts multiple radios as children\n   */\n  children: React.ReactNode;\n  /**\n   * Help text of the radio group\n   */\n  helpText?: string;\n  /**\n   * Error text of the radio group\n   * Renders when `validationState` is set to 'error'\n   *\n   * Overrides helpText\n   */\n  errorText?: string;\n  /**\n   * Sets the error state of the radioGroup\n   * If set to `error` it will render the `errorText` of the group,\n   * and propagate `invalid` prop to every radio\n   */\n  validationState?: 'error' | 'none';\n  /**\n   * Renders a necessity indicator after radioGroup label\n   *\n   * If set to `undefined` it renders nothing.\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  /**\n   * Sets the disabled state of the radioGroup\n   * If set to `true` it propagate down to all the radios\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Sets the required state of the radioGroup\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * Renders the label of the radio group\n   */\n  label?: string;\n  /**\n   * Sets the position of the label\n   *\n   * @default 'top'\n   */\n  labelPosition?: 'top' | 'left';\n  /**\n   * Initial value of the radio group\n   */\n  defaultValue?: string;\n  /**\n   * value of the radio group\n   *\n   * Use `onChange` to update its value\n   */\n  value?: string;\n  /**\n   * The callback invoked when any of the radio's state changes\n   */\n  onChange?: ({\n    name,\n    value,\n    event,\n  }: {\n    name: string | undefined;\n    value: string;\n    event: React.ChangeEvent<HTMLInputElement>;\n  }) => void;\n  /**\n   * The name of the input field in a radio\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * Size of the radios\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Orientation of the radio group\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'vertical' | 'horizontal';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst RadioGroup = ({\n  children,\n  label,\n  helpText,\n  isDisabled = false,\n  isRequired = false,\n  necessityIndicator = 'none',\n  labelPosition = 'top',\n  validationState = 'none',\n  errorText,\n  name,\n  defaultValue,\n  onChange,\n  value,\n  size = 'medium',\n  orientation = 'vertical',\n  testID,\n  ...rest\n}: RadioGroupProps): React.ReactElement => {\n  const { contextValue, ids } = useRadioGroup({\n    defaultValue,\n    isDisabled,\n    isRequired,\n    labelPosition,\n    name,\n    necessityIndicator,\n    onChange,\n    validationState,\n    value,\n    size,\n  });\n\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const showError = validationState === 'error' && errorText;\n  const showHelpText = !showError && helpText;\n  const accessibilityText = `${showError ? errorText : ''} ${showHelpText ? helpText : ''}`.trim();\n  const gap = radioSizes.group.gap[size][matchedDeviceType];\n\n  return (\n    <RadioGroupProvider value={contextValue}>\n      <BaseBox {...getStyledProps(rest)}>\n        <SelectorGroupField\n          position={labelPosition}\n          labelledBy={ids.labelId}\n          accessibilityRole=\"radiogroup\"\n          componentName=\"radio-group\"\n          testID={testID}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {label ? (\n            <FormLabel\n              as=\"span\"\n              necessityIndicator={necessityIndicator}\n              position={labelPosition}\n              id={ids.labelId}\n              accessibilityText={accessibilityText && `,${accessibilityText}`}\n              size={size}\n            >\n              {label}\n            </FormLabel>\n          ) : null}\n          <BaseBox>\n            <BaseBox\n              display=\"flex\"\n              flexDirection={orientation === 'vertical' ? 'column' : 'row'}\n              gap={gap}\n            >\n              {React.Children.map(children, (child, index) => {\n                return <BaseBox key={index}>{child}</BaseBox>;\n              })}\n            </BaseBox>\n            <FormHint\n              size={size}\n              type={validationState === 'error' ? 'error' : 'help'}\n              errorText={errorText}\n              helpText={helpText}\n            />\n          </BaseBox>\n        </SelectorGroupField>\n      </BaseBox>\n    </RadioGroupProvider>\n  );\n};\n\nexport type { RadioGroupProps };\nexport { RadioGroup };\n"],"names":["RadioGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","_ref$validationState","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","_ref$orientation","orientation","testID","rest","_objectWithoutProperties","_excluded","_useRadioGroup","useRadioGroup","contextValue","ids","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","showError","showHelpText","accessibilityText","concat","trim","gap","radioSizes","group","_jsx","RadioGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","accessibilityRole","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { radioSizes } from '../radioTokens';\nimport { RadioGroupProvider } from './RadioContext';\nimport { useRadioGroup } from './useRadioGroup';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype RadioGroupProps = {\n  /**\n   * Accepts multiple radios as children\n   */\n  children: React.ReactNode;\n  /**\n   * Help text of the radio group\n   */\n  helpText?: string;\n  /**\n   * Error text of the radio group\n   * Renders when `validationState` is set to 'error'\n   *\n   * Overrides helpText\n   */\n  errorText?: string;\n  /**\n   * Sets the error state of the radioGroup\n   * If set to `error` it will render the `errorText` of the group,\n   * and propagate `invalid` prop to every radio\n   */\n  validationState?: 'error' | 'none';\n  /**\n   * Renders a necessity indicator after radioGroup label\n   *\n   * If set to `undefined` it renders nothing.\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  /**\n   * Sets the disabled state of the radioGroup\n   * If set to `true` it propagate down to all the radios\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Sets the required state of the radioGroup\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * Renders the label of the radio group\n   */\n  label?: string;\n  /**\n   * Sets the position of the label\n   *\n   * @default 'top'\n   */\n  labelPosition?: 'top' | 'left';\n  /**\n   * Initial value of the radio group\n   */\n  defaultValue?: string;\n  /**\n   * value of the radio group\n   *\n   * Use `onChange` to update its value\n   */\n  value?: string;\n  /**\n   * The callback invoked when any of the radio's state changes\n   */\n  onChange?: ({\n    name,\n    value,\n    event,\n  }: {\n    name: string | undefined;\n    value: string;\n    event: React.ChangeEvent<HTMLInputElement>;\n  }) => void;\n  /**\n   * The name of the input field in a radio\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * Size of the radios\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Orientation of the radio group\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'vertical' | 'horizontal';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst RadioGroup = ({\n  children,\n  label,\n  helpText,\n  isDisabled = false,\n  isRequired = false,\n  necessityIndicator = 'none',\n  labelPosition = 'top',\n  validationState = 'none',\n  errorText,\n  name,\n  defaultValue,\n  onChange,\n  value,\n  size = 'medium',\n  orientation = 'vertical',\n  testID,\n  flexWrap = 'nowrap',\n  ...rest\n}: RadioGroupProps): React.ReactElement => {\n  const { contextValue, ids } = useRadioGroup({\n    defaultValue,\n    isDisabled,\n    isRequired,\n    labelPosition,\n    name,\n    necessityIndicator,\n    onChange,\n    validationState,\n    value,\n    size,\n  });\n\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const showError = validationState === 'error' && errorText;\n  const showHelpText = !showError && helpText;\n  const accessibilityText = `${showError ? errorText : ''} ${showHelpText ? helpText : ''}`.trim();\n  const gap = radioSizes.group.gap[size][matchedDeviceType];\n\n  return (\n    <RadioGroupProvider value={contextValue}>\n      <BaseBox {...getStyledProps(rest)}>\n        <SelectorGroupField\n          position={labelPosition}\n          labelledBy={ids.labelId}\n          accessibilityRole=\"radiogroup\"\n          componentName=\"radio-group\"\n          testID={testID}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {label ? (\n            <FormLabel\n              as=\"span\"\n              necessityIndicator={necessityIndicator}\n              position={labelPosition}\n              id={ids.labelId}\n              accessibilityText={accessibilityText && `,${accessibilityText}`}\n              size={size}\n            >\n              {label}\n            </FormLabel>\n          ) : null}\n          <BaseBox>\n            <BaseBox\n              display=\"flex\"\n              flexDirection={orientation === 'vertical' ? 'column' : 'row'}\n              gap={gap}\n              flexWrap={flexWrap}\n            >\n              {React.Children.map(children, (child, index) => {\n                return <BaseBox key={index}>{child}</BaseBox>;\n              })}\n            </BaseBox>\n            <FormHint\n              size={size}\n              type={validationState === 'error' ? 'error' : 'help'}\n              errorText={errorText}\n              helpText={helpText}\n            />\n          </BaseBox>\n        </SelectorGroupField>\n      </BaseBox>\n    </RadioGroupProvider>\n  );\n};\n\nexport type { RadioGroupProps };\nexport { RadioGroup };\n"],"names":["RadioGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","_ref$validationState","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","_ref$orientation","orientation","testID","_ref$flexWrap","flexWrap","rest","_objectWithoutProperties","_excluded","_useRadioGroup","useRadioGroup","contextValue","ids","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","showError","showHelpText","accessibilityText","concat","trim","gap","radioSizes","group","_jsx","RadioGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","accessibilityRole","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}

package/build/lib/web/development/components/Table/TableEditableCell.web.js

@@ -179,7 +179,9 @@ var TableEditableDropdownCell = function TableEditableDropdownCell(dropdownProps
           hasPadding: false,
           children: /*#__PURE__*/jsx(Dropdown, _objectSpread({
             _width: "calc(100% - 8px)",
-            margin: "spacing.2"
+            margin: getEditableInputMargin({
+              rowDensity: rowDensity
+            })
           }, dropdownProps))
         })
       })

package/build/lib/web/development/components/Table/TableEditableCell.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableEditableCell.web.js","sources":["../../../../../../src/components/Table/TableEditableCell.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { CellWrapper, StyledCell } from './TableBody';\nimport { useTableContext } from './TableContext';\nimport type { TableEditableCellProps, TableEditableDropdownCellProps, TableProps } from './types';\nimport {\n  rowDensityToIsTableInputCellMapping,\n  tableEditableCellRowDensityToInputSizeMap,\n  validationStateToInputTrailingIconMap,\n} from './tokens';\nimport { ComponentIds } from './componentIds';\nimport { TableEditableCellContext } from './TableEditableCellContext';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport type { MarginProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Box } from '~components/Box';\nimport { BaseInput } from '~components/Input/BaseInput';\nimport { castWebType } from '~utils';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { Dropdown } from '~components/Dropdown';\n\nconst StyledEditableCell = styled(StyledCell)<{\n  $rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n}>(({ theme, $rowDensity }) => ({\n  '&&&': {\n    '&:focus-visible': { outline: '1px solid' },\n    '&:focus-within': {\n      ...($rowDensity !== 'comfortable' ? getFocusRingStyles({ theme, negativeOffset: true }) : {}),\n    },\n  },\n}));\n\nconst getEditableInputMargin = ({\n  rowDensity,\n}: {\n  rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n}): MarginProps['margin'] => {\n  if (rowDensity === 'comfortable') {\n    return ['spacing.4', 'spacing.4'];\n  }\n\n  return 'spacing.2';\n};\n\nconst _TableEditableCell = ({\n  validationState = 'none',\n  accessibilityLabel,\n  autoCapitalize,\n  autoCompleteSuggestionType,\n  autoFocus,\n  defaultValue,\n  isDisabled,\n  isRequired,\n  keyboardReturnKeyType,\n  leadingIcon,\n  maxCharacters,\n  name,\n  onBlur,\n  onChange,\n  onClick,\n  onFocus,\n  onSubmit,\n  placeholder,\n  prefix,\n  suffix,\n  value,\n  testID,\n  trailingButton,\n  errorText,\n  successText,\n}: TableEditableCellProps): React.ReactElement => {\n  const { rowDensity, showStripedRows, backgroundColor } = useTableContext();\n\n  return (\n    <StyledEditableCell\n      role=\"cell\"\n      $backgroundColor={backgroundColor}\n      $rowDensity={rowDensity}\n      {...metaAttribute({ name: MetaConstants.TableCell })}\n    >\n      <BaseBox className=\"cell-wrapper-base\" display=\"flex\" alignItems=\"center\" height=\"100%\">\n        <CellWrapper\n          className=\"cell-wrapper\"\n          $rowDensity={rowDensity}\n          showStripedRows={showStripedRows}\n          display=\"flex\"\n          alignItems=\"center\"\n          flex={1}\n          hasPadding={false}\n        >\n          <Box margin={getEditableInputMargin({ rowDensity })} width=\"100%\">\n            <BaseInput\n              isTableInputCell={rowDensityToIsTableInputCellMapping[rowDensity]}\n              validationState={validationState}\n              id=\"table-editable-cell-input\"\n              type=\"text\"\n              size={tableEditableCellRowDensityToInputSizeMap[rowDensity]}\n              trailingIcon={validationStateToInputTrailingIconMap[validationState]}\n              accessibilityLabel={accessibilityLabel}\n              autoCapitalize={autoCapitalize}\n              autoCompleteSuggestionType={autoCompleteSuggestionType}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              defaultValue={defaultValue}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              keyboardReturnKeyType={keyboardReturnKeyType}\n              leadingIcon={leadingIcon}\n              maxCharacters={maxCharacters}\n              name={name}\n              onBlur={onBlur}\n              onChange={onChange}\n              onClick={onClick}\n              onFocus={onFocus}\n              onSubmit={castWebType(onSubmit)}\n              placeholder={placeholder}\n              prefix={prefix}\n              suffix={suffix}\n              value={value}\n              testID={testID}\n              trailingButton={trailingButton}\n              errorText={errorText}\n              successText={successText}\n              showHintsAsTooltip={true}\n            />\n          </Box>\n        </CellWrapper>\n      </BaseBox>\n    </StyledEditableCell>\n  );\n};\n\nconst TableEditableDropdownCell = (\n  dropdownProps: TableEditableDropdownCellProps,\n): React.ReactElement => {\n  const { rowDensity, showStripedRows, backgroundColor } = useTableContext();\n\n  return (\n    <TableEditableCellContext.Provider value={{ isInsideTableEditableCell: true }}>\n      <StyledEditableCell\n        role=\"cell\"\n        $backgroundColor={backgroundColor}\n        $rowDensity={rowDensity}\n        {...metaAttribute({ name: MetaConstants.TableCell })}\n      >\n        <BaseBox\n          className=\"cell-wrapper-base\"\n          display=\"flex\"\n          alignItems=\"center\"\n          height=\"100%\"\n          width=\"100%\"\n        >\n          <CellWrapper\n            className=\"cell-wrapper\"\n            $rowDensity={rowDensity}\n            showStripedRows={showStripedRows}\n            display=\"flex\"\n            alignItems=\"center\"\n            flex={1}\n            hasPadding={false}\n          >\n            <Dropdown _width=\"calc(100% - 8px)\" margin=\"spacing.2\" {...dropdownProps} />\n          </CellWrapper>\n        </BaseBox>\n      </StyledEditableCell>\n    </TableEditableCellContext.Provider>\n  );\n};\n\nconst TableEditableCell = assignWithoutSideEffects(_TableEditableCell, {\n  componentId: ComponentIds.TableEditableCell,\n});\n\nexport { TableEditableCell, TableEditableDropdownCell };\n"],"names":["StyledEditableCell","styled","StyledCell","withConfig","displayName","componentId","_ref","theme","$rowDensity","outline","_objectSpread","getFocusRingStyles","negativeOffset","getEditableInputMargin","_ref2","rowDensity","_TableEditableCell","_ref3","_ref3$validationState","validationState","accessibilityLabel","autoCapitalize","autoCompleteSuggestionType","autoFocus","defaultValue","isDisabled","isRequired","keyboardReturnKeyType","leadingIcon","maxCharacters","name","onBlur","onChange","onClick","onFocus","onSubmit","placeholder","prefix","suffix","value","testID","trailingButton","errorText","successText","_useTableContext","useTableContext","showStripedRows","backgroundColor","_jsx","role","$backgroundColor","metaAttribute","MetaConstants","TableCell","children","BaseBox","className","display","alignItems","height","CellWrapper","flex","hasPadding","Box","margin","width","BaseInput","isTableInputCell","rowDensityToIsTableInputCellMapping","id","type","size","tableEditableCellRowDensityToInputSizeMap","trailingIcon","validationStateToInputTrailingIconMap","castWebType","showHintsAsTooltip","TableEditableDropdownCell","dropdownProps","_useTableContext2","TableEditableCellContext","Provider","isInsideTableEditableCell","Dropdown","_width","TableEditableCell","assignWithoutSideEffects","ComponentIds"],"mappings":"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"}
+{"version":3,"file":"TableEditableCell.web.js","sources":["../../../../../../src/components/Table/TableEditableCell.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { CellWrapper, StyledCell } from './TableBody';\nimport { useTableContext } from './TableContext';\nimport type { TableEditableCellProps, TableEditableDropdownCellProps, TableProps } from './types';\nimport {\n  rowDensityToIsTableInputCellMapping,\n  tableEditableCellRowDensityToInputSizeMap,\n  validationStateToInputTrailingIconMap,\n} from './tokens';\nimport { ComponentIds } from './componentIds';\nimport { TableEditableCellContext } from './TableEditableCellContext';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport type { MarginProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Box } from '~components/Box';\nimport { BaseInput } from '~components/Input/BaseInput';\nimport { castWebType } from '~utils';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { Dropdown } from '~components/Dropdown';\n\nconst StyledEditableCell = styled(StyledCell)<{\n  $rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n}>(({ theme, $rowDensity }) => ({\n  '&&&': {\n    '&:focus-visible': { outline: '1px solid' },\n    '&:focus-within': {\n      ...($rowDensity !== 'comfortable' ? getFocusRingStyles({ theme, negativeOffset: true }) : {}),\n    },\n  },\n}));\n\nconst getEditableInputMargin = ({\n  rowDensity,\n}: {\n  rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n}): MarginProps['margin'] => {\n  if (rowDensity === 'comfortable') {\n    return ['spacing.4', 'spacing.4'];\n  }\n\n  return 'spacing.2';\n};\n\nconst _TableEditableCell = ({\n  validationState = 'none',\n  accessibilityLabel,\n  autoCapitalize,\n  autoCompleteSuggestionType,\n  autoFocus,\n  defaultValue,\n  isDisabled,\n  isRequired,\n  keyboardReturnKeyType,\n  leadingIcon,\n  maxCharacters,\n  name,\n  onBlur,\n  onChange,\n  onClick,\n  onFocus,\n  onSubmit,\n  placeholder,\n  prefix,\n  suffix,\n  value,\n  testID,\n  trailingButton,\n  errorText,\n  successText,\n}: TableEditableCellProps): React.ReactElement => {\n  const { rowDensity, showStripedRows, backgroundColor } = useTableContext();\n\n  return (\n    <StyledEditableCell\n      role=\"cell\"\n      $backgroundColor={backgroundColor}\n      $rowDensity={rowDensity}\n      {...metaAttribute({ name: MetaConstants.TableCell })}\n    >\n      <BaseBox className=\"cell-wrapper-base\" display=\"flex\" alignItems=\"center\" height=\"100%\">\n        <CellWrapper\n          className=\"cell-wrapper\"\n          $rowDensity={rowDensity}\n          showStripedRows={showStripedRows}\n          display=\"flex\"\n          alignItems=\"center\"\n          flex={1}\n          hasPadding={false}\n        >\n          <Box margin={getEditableInputMargin({ rowDensity })} width=\"100%\">\n            <BaseInput\n              isTableInputCell={rowDensityToIsTableInputCellMapping[rowDensity]}\n              validationState={validationState}\n              id=\"table-editable-cell-input\"\n              type=\"text\"\n              size={tableEditableCellRowDensityToInputSizeMap[rowDensity]}\n              trailingIcon={validationStateToInputTrailingIconMap[validationState]}\n              accessibilityLabel={accessibilityLabel}\n              autoCapitalize={autoCapitalize}\n              autoCompleteSuggestionType={autoCompleteSuggestionType}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              defaultValue={defaultValue}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              keyboardReturnKeyType={keyboardReturnKeyType}\n              leadingIcon={leadingIcon}\n              maxCharacters={maxCharacters}\n              name={name}\n              onBlur={onBlur}\n              onChange={onChange}\n              onClick={onClick}\n              onFocus={onFocus}\n              onSubmit={castWebType(onSubmit)}\n              placeholder={placeholder}\n              prefix={prefix}\n              suffix={suffix}\n              value={value}\n              testID={testID}\n              trailingButton={trailingButton}\n              errorText={errorText}\n              successText={successText}\n              showHintsAsTooltip={true}\n            />\n          </Box>\n        </CellWrapper>\n      </BaseBox>\n    </StyledEditableCell>\n  );\n};\n\nconst TableEditableDropdownCell = (\n  dropdownProps: TableEditableDropdownCellProps,\n): React.ReactElement => {\n  const { rowDensity, showStripedRows, backgroundColor } = useTableContext();\n\n  return (\n    <TableEditableCellContext.Provider value={{ isInsideTableEditableCell: true }}>\n      <StyledEditableCell\n        role=\"cell\"\n        $backgroundColor={backgroundColor}\n        $rowDensity={rowDensity}\n        {...metaAttribute({ name: MetaConstants.TableCell })}\n      >\n        <BaseBox\n          className=\"cell-wrapper-base\"\n          display=\"flex\"\n          alignItems=\"center\"\n          height=\"100%\"\n          width=\"100%\"\n        >\n          <CellWrapper\n            className=\"cell-wrapper\"\n            $rowDensity={rowDensity}\n            showStripedRows={showStripedRows}\n            display=\"flex\"\n            alignItems=\"center\"\n            flex={1}\n            hasPadding={false}\n          >\n            <Dropdown\n              _width=\"calc(100% - 8px)\"\n              margin={getEditableInputMargin({ rowDensity })}\n              {...dropdownProps}\n            />\n          </CellWrapper>\n        </BaseBox>\n      </StyledEditableCell>\n    </TableEditableCellContext.Provider>\n  );\n};\n\nconst TableEditableCell = assignWithoutSideEffects(_TableEditableCell, {\n  componentId: ComponentIds.TableEditableCell,\n});\n\nexport { TableEditableCell, TableEditableDropdownCell };\n"],"names":["StyledEditableCell","styled","StyledCell","withConfig","displayName","componentId","_ref","theme","$rowDensity","outline","_objectSpread","getFocusRingStyles","negativeOffset","getEditableInputMargin","_ref2","rowDensity","_TableEditableCell","_ref3","_ref3$validationState","validationState","accessibilityLabel","autoCapitalize","autoCompleteSuggestionType","autoFocus","defaultValue","isDisabled","isRequired","keyboardReturnKeyType","leadingIcon","maxCharacters","name","onBlur","onChange","onClick","onFocus","onSubmit","placeholder","prefix","suffix","value","testID","trailingButton","errorText","successText","_useTableContext","useTableContext","showStripedRows","backgroundColor","_jsx","role","$backgroundColor","metaAttribute","MetaConstants","TableCell","children","BaseBox","className","display","alignItems","height","CellWrapper","flex","hasPadding","Box","margin","width","BaseInput","isTableInputCell","rowDensityToIsTableInputCellMapping","id","type","size","tableEditableCellRowDensityToInputSizeMap","trailingIcon","validationStateToInputTrailingIconMap","castWebType","showHintsAsTooltip","TableEditableDropdownCell","dropdownProps","_useTableContext2","TableEditableCellContext","Provider","isInsideTableEditableCell","Dropdown","_width","TableEditableCell","assignWithoutSideEffects","ComponentIds"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAMA,kBAAkB,gBAAGC,MAAM,CAACC,UAAU,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,0CAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAAA,CAAA,CAE1C,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,WAAW,GAAAF,IAAA,CAAXE,WAAW,CAAA;EAAA,OAAQ;AAC9B,IAAA,KAAK,EAAE;AACL,MAAA,iBAAiB,EAAE;AAAEC,QAAAA,OAAO,EAAE,WAAA;OAAa;MAC3C,gBAAgB,EAAAC,aAAA,CACVF,EAAAA,EAAAA,WAAW,KAAK,aAAa,GAAGG,kBAAkB,CAAC;AAAEJ,QAAAA,KAAK,EAALA,KAAK;AAAEK,QAAAA,cAAc,EAAE,IAAA;OAAM,CAAC,GAAG,EAAE,CAAA;AAEhG,KAAA;GACD,CAAA;AAAA,CAAC,CAAC,CAAA;AAEH,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,KAAA,EAIC;AAAA,EAAA,IAH3BC,UAAU,GAAAD,KAAA,CAAVC,UAAU,CAAA;EAIV,IAAIA,UAAU,KAAK,aAAa,EAAE;AAChC,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;AACnC,GAAA;AAEA,EAAA,OAAO,WAAW,CAAA;AACpB,CAAC,CAAA;AAED,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,KAAA,EA0B0B;AAAA,EAAA,IAAAC,qBAAA,GAAAD,KAAA,CAzBhDE,eAAe;AAAfA,IAAAA,eAAe,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,qBAAA;IACxBE,kBAAkB,GAAAH,KAAA,CAAlBG,kBAAkB;IAClBC,cAAc,GAAAJ,KAAA,CAAdI,cAAc;IACdC,0BAA0B,GAAAL,KAAA,CAA1BK,0BAA0B;IAC1BC,SAAS,GAAAN,KAAA,CAATM,SAAS;IACTC,YAAY,GAAAP,KAAA,CAAZO,YAAY;IACZC,UAAU,GAAAR,KAAA,CAAVQ,UAAU;IACVC,UAAU,GAAAT,KAAA,CAAVS,UAAU;IACVC,qBAAqB,GAAAV,KAAA,CAArBU,qBAAqB;IACrBC,WAAW,GAAAX,KAAA,CAAXW,WAAW;IACXC,aAAa,GAAAZ,KAAA,CAAbY,aAAa;IACbC,IAAI,GAAAb,KAAA,CAAJa,IAAI;IACJC,MAAM,GAAAd,KAAA,CAANc,MAAM;IACNC,QAAQ,GAAAf,KAAA,CAARe,QAAQ;IACRC,OAAO,GAAAhB,KAAA,CAAPgB,OAAO;IACPC,OAAO,GAAAjB,KAAA,CAAPiB,OAAO;IACPC,QAAQ,GAAAlB,KAAA,CAARkB,QAAQ;IACRC,WAAW,GAAAnB,KAAA,CAAXmB,WAAW;IACXC,MAAM,GAAApB,KAAA,CAANoB,MAAM;IACNC,MAAM,GAAArB,KAAA,CAANqB,MAAM;IACNC,KAAK,GAAAtB,KAAA,CAALsB,KAAK;IACLC,MAAM,GAAAvB,KAAA,CAANuB,MAAM;IACNC,cAAc,GAAAxB,KAAA,CAAdwB,cAAc;IACdC,SAAS,GAAAzB,KAAA,CAATyB,SAAS;IACTC,WAAW,GAAA1B,KAAA,CAAX0B,WAAW,CAAA;AAEX,EAAA,IAAAC,gBAAA,GAAyDC,eAAe,EAAE;IAAlE9B,UAAU,GAAA6B,gBAAA,CAAV7B,UAAU;IAAE+B,eAAe,GAAAF,gBAAA,CAAfE,eAAe;IAAEC,eAAe,GAAAH,gBAAA,CAAfG,eAAe,CAAA;AAEpD,EAAA,oBACEC,GAAA,CAAChD,kBAAkB,EAAAU,aAAA,CAAAA,aAAA,CAAA;AACjBuC,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,gBAAgB,EAAEH,eAAgB;AAClCvC,IAAAA,WAAW,EAAEO,UAAAA;AAAW,GAAA,EACpBoC,aAAa,CAAC;IAAErB,IAAI,EAAEsB,aAAa,CAACC,SAAAA;AAAU,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAC,QAAA,eAEpDN,GAAA,CAACO,OAAO,EAAA;AAACC,MAAAA,SAAS,EAAC,mBAAmB;AAACC,MAAAA,OAAO,EAAC,MAAM;AAACC,MAAAA,UAAU,EAAC,QAAQ;AAACC,MAAAA,MAAM,EAAC,MAAM;MAAAL,QAAA,eACrFN,GAAA,CAACY,WAAW,EAAA;AACVJ,QAAAA,SAAS,EAAC,cAAc;AACxBhD,QAAAA,WAAW,EAAEO,UAAW;AACxB+B,QAAAA,eAAe,EAAEA,eAAgB;AACjCW,QAAAA,OAAO,EAAC,MAAM;AACdC,QAAAA,UAAU,EAAC,QAAQ;AACnBG,QAAAA,IAAI,EAAE,CAAE;AACRC,QAAAA,UAAU,EAAE,KAAM;QAAAR,QAAA,eAElBN,GAAA,CAACe,GAAG,EAAA;UAACC,MAAM,EAAEnD,sBAAsB,CAAC;AAAEE,YAAAA,UAAU,EAAVA,UAAAA;AAAW,WAAC,CAAE;AAACkD,UAAAA,KAAK,EAAC,MAAM;UAAAX,QAAA,eAC/DN,GAAA,CAACkB,SAAS,EAAA;AACRC,YAAAA,gBAAgB,EAAEC,mCAAmC,CAACrD,UAAU,CAAE;AAClEI,YAAAA,eAAe,EAAEA,eAAgB;AACjCkD,YAAAA,EAAE,EAAC,2BAA2B;AAC9BC,YAAAA,IAAI,EAAC,MAAM;AACXC,YAAAA,IAAI,EAAEC,yCAAyC,CAACzD,UAAU,CAAE;AAC5D0D,YAAAA,YAAY,EAAEC,qCAAqC,CAACvD,eAAe,CAAE;AACrEC,YAAAA,kBAAkB,EAAEA,kBAAmB;AACvCC,YAAAA,cAAc,EAAEA,cAAe;AAC/BC,YAAAA,0BAA0B,EAAEA,0BAAAA;AAC5B;AAAA;AACAC,YAAAA,SAAS,EAAEA,SAAU;AACrBC,YAAAA,YAAY,EAAEA,YAAa;AAC3BC,YAAAA,UAAU,EAAEA,UAAW;AACvBC,YAAAA,UAAU,EAAEA,UAAW;AACvBC,YAAAA,qBAAqB,EAAEA,qBAAsB;AAC7CC,YAAAA,WAAW,EAAEA,WAAY;AACzBC,YAAAA,aAAa,EAAEA,aAAc;AAC7BC,YAAAA,IAAI,EAAEA,IAAK;AACXC,YAAAA,MAAM,EAAEA,MAAO;AACfC,YAAAA,QAAQ,EAAEA,QAAS;AACnBC,YAAAA,OAAO,EAAEA,OAAQ;AACjBC,YAAAA,OAAO,EAAEA,OAAQ;AACjBC,YAAAA,QAAQ,EAAEwC,WAAW,CAACxC,QAAQ,CAAE;AAChCC,YAAAA,WAAW,EAAEA,WAAY;AACzBC,YAAAA,MAAM,EAAEA,MAAO;AACfC,YAAAA,MAAM,EAAEA,MAAO;AACfC,YAAAA,KAAK,EAAEA,KAAM;AACbC,YAAAA,MAAM,EAAEA,MAAO;AACfC,YAAAA,cAAc,EAAEA,cAAe;AAC/BC,YAAAA,SAAS,EAAEA,SAAU;AACrBC,YAAAA,WAAW,EAAEA,WAAY;AACzBiC,YAAAA,kBAAkB,EAAE,IAAA;WACrB,CAAA;SACE,CAAA;OACM,CAAA;KACN,CAAA;AAAC,GAAA,CACQ,CAAC,CAAA;AAEzB,CAAC,CAAA;AAED,IAAMC,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAC7BC,aAA6C,EACtB;AACvB,EAAA,IAAAC,iBAAA,GAAyDlC,eAAe,EAAE;IAAlE9B,UAAU,GAAAgE,iBAAA,CAAVhE,UAAU;IAAE+B,eAAe,GAAAiC,iBAAA,CAAfjC,eAAe;IAAEC,eAAe,GAAAgC,iBAAA,CAAfhC,eAAe,CAAA;AAEpD,EAAA,oBACEC,GAAA,CAACgC,wBAAwB,CAACC,QAAQ,EAAA;AAAC1C,IAAAA,KAAK,EAAE;AAAE2C,MAAAA,yBAAyB,EAAE,IAAA;KAAO;AAAA5B,IAAAA,QAAA,eAC5EN,GAAA,CAAChD,kBAAkB,EAAAU,aAAA,CAAAA,aAAA,CAAA;AACjBuC,MAAAA,IAAI,EAAC,MAAM;AACXC,MAAAA,gBAAgB,EAAEH,eAAgB;AAClCvC,MAAAA,WAAW,EAAEO,UAAAA;AAAW,KAAA,EACpBoC,aAAa,CAAC;MAAErB,IAAI,EAAEsB,aAAa,CAACC,SAAAA;AAAU,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;MAAAC,QAAA,eAEpDN,GAAA,CAACO,OAAO,EAAA;AACNC,QAAAA,SAAS,EAAC,mBAAmB;AAC7BC,QAAAA,OAAO,EAAC,MAAM;AACdC,QAAAA,UAAU,EAAC,QAAQ;AACnBC,QAAAA,MAAM,EAAC,MAAM;AACbM,QAAAA,KAAK,EAAC,MAAM;QAAAX,QAAA,eAEZN,GAAA,CAACY,WAAW,EAAA;AACVJ,UAAAA,SAAS,EAAC,cAAc;AACxBhD,UAAAA,WAAW,EAAEO,UAAW;AACxB+B,UAAAA,eAAe,EAAEA,eAAgB;AACjCW,UAAAA,OAAO,EAAC,MAAM;AACdC,UAAAA,UAAU,EAAC,QAAQ;AACnBG,UAAAA,IAAI,EAAE,CAAE;AACRC,UAAAA,UAAU,EAAE,KAAM;AAAAR,UAAAA,QAAA,eAElBN,GAAA,CAACmC,QAAQ,EAAAzE,aAAA,CAAA;AACP0E,YAAAA,MAAM,EAAC,kBAAkB;YACzBpB,MAAM,EAAEnD,sBAAsB,CAAC;AAAEE,cAAAA,UAAU,EAAVA,UAAAA;aAAY,CAAA;AAAE,WAAA,EAC3C+D,aAAa,CAClB,CAAA;SACU,CAAA;OACN,CAAA;KACS,CAAA,CAAA;AAAC,GACY,CAAC,CAAA;AAExC,EAAC;AAED,IAAMO,iBAAiB,gBAAGC,wBAAwB,CAACtE,kBAAkB,EAAE;EACrEX,WAAW,EAAEkF,YAAY,CAACF,iBAAAA;AAC5B,CAAC;;;;"}

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

@@ -19,7 +19,7 @@ import { getFloatingPlacementParts } from '../../utils/getFloatingPlacementParts
 import { componentZIndices } from '../../utils/componentZIndices.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
-import { mergeRefs } from '../../utils/useMergeRefs.js';
+import { useMergeRefs } from '../../utils/useMergeRefs.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { size } from '../../tokens/global/size.js';
@@ -112,7 +112,7 @@ var _Tooltip = function _Tooltip(_ref) {
     value: true,
     children: [/*#__PURE__*/React__default.cloneElement(children, _objectSpread(_objectSpread({
       // @ts-expect-error: ref does exist on children prop
-      ref: mergeRefs(refs.setReference, children.ref)
+      ref: useMergeRefs(refs.setReference, children.ref)
     }, makeAccessible({
       label: content
     })), mergeProps(children.props, getReferenceProps()))), isMounted && /*#__PURE__*/jsx(FloatingPortal, {

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.web.js","sources":["../../../../../../src/components/Tooltip/Tooltip.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport {\n  shift,\n  FloatingPortal,\n  arrow,\n  flip,\n  offset,\n  useDelayGroup,\n  useDelayGroupContext,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n  autoUpdate,\n} from '@floating-ui/react';\nimport React from 'react';\nimport type { TooltipProps } from './types';\nimport { TooltipContent } from './TooltipContent';\nimport { ARROW_HEIGHT, ARROW_WIDTH } from './constants';\nimport { TooltipContext } from './TooltipContext';\nimport { componentIds } from './componentIds';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\nimport { useId } from '~utils/useId';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { mergeProps } from '~utils/mergeProps';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { mergeRefs } from '~utils/useMergeRefs';\n\nconst _Tooltip = ({\n  title,\n  content,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = componentZIndices.tooltip,\n  ...rest\n}: TooltipProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const id = useId();\n  const [isOpen, setIsOpen] = React.useState(false);\n  const arrowRef = React.useRef<SVGSVGElement>(null);\n\n  const GAP = theme.spacing[2];\n  const [side] = getFloatingPlacementParts(placement);\n  const isHorizontal = side === 'left' || side === 'right';\n  const isOppositeAxis = side === 'right' || side === 'bottom';\n\n  const { refs, floatingStyles, context } = useFloating({\n    placement,\n    open: isOpen,\n    strategy: 'fixed',\n    onOpenChange: (open) => {\n      setIsOpen(open);\n      onOpenChange?.({ isOpen: open });\n    },\n    middleware: [\n      shift({ crossAxis: false, padding: GAP }),\n      flip({ padding: GAP }),\n      offset(GAP + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? 0 : ARROW_WIDTH,\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const animationOffset = isOppositeAxis ? -size[4] : size[4];\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: theme.motion.duration.quick,\n    initial: {\n      opacity: 0,\n      transform: `translate${isHorizontal ? 'X' : 'Y'}(${animationOffset}px)`,\n    },\n  });\n\n  useDelayGroup(context, { id });\n  const { delay } = useDelayGroupContext();\n  const hover = useHover(context, {\n    delay,\n    move: false,\n  });\n  const focus = useFocus(context);\n  const role = useRole(context, { role: 'tooltip' });\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, hover, focus]);\n\n  return (\n    <TooltipContext.Provider value={true}>\n      {React.cloneElement(children, {\n        // @ts-expect-error: ref does exist on children prop\n        ref: mergeRefs(refs.setReference, children.ref),\n        ...makeAccessible({ label: content }),\n        ...mergeProps(children.props, getReferenceProps()),\n      })}\n      {isMounted && (\n        <FloatingPortal>\n          <BaseBox\n            ref={refs.setFloating}\n            style={floatingStyles}\n            pointerEvents=\"none\"\n            zIndex={zIndex}\n            {...getFloatingProps()}\n            {...metaAttribute({ name: MetaConstants.Tooltip })}\n            {...makeAnalyticsAttribute(rest)}\n          >\n            <TooltipContent\n              title={title}\n              style={styles}\n              arrow={\n                <PopupArrow\n                  ref={arrowRef}\n                  context={context}\n                  width={ARROW_WIDTH}\n                  height={ARROW_HEIGHT}\n                  fillColor={theme.colors.popup.background.intense}\n                  strokeColor={theme.colors.popup.border.intense}\n                />\n              }\n            >\n              {content}\n            </TooltipContent>\n          </BaseBox>\n        </FloatingPortal>\n      )}\n    </TooltipContext.Provider>\n  );\n};\n\nconst Tooltip = assignWithoutSideEffects(_Tooltip, {\n  componentId: componentIds.Tooltip,\n});\n\nexport { Tooltip };\n"],"names":["_Tooltip","_ref","title","content","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","componentZIndices","tooltip","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","id","useId","_React$useState","React","useState","_React$useState2","_slicedToArray","isOpen","setIsOpen","arrowRef","useRef","GAP","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","side","isHorizontal","isOppositeAxis","_useFloating","useFloating","open","strategy","middleware","shift","crossAxis","padding","flip","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","whileElementsMounted","autoUpdate","refs","floatingStyles","context","animationOffset","size","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","opacity","transform","concat","isMounted","styles","useDelayGroup","_useDelayGroupContext","useDelayGroupContext","delay","hover","useHover","move","focus","useFocus","role","useRole","_useInteractions","useInteractions","getReferenceProps","getFloatingProps","_jsxs","TooltipContext","Provider","value","cloneElement","_objectSpread","ref","mergeRefs","setReference","makeAccessible","label","mergeProps","props","_jsx","FloatingPortal","BaseBox","setFloating","style","pointerEvents","metaAttribute","name","MetaConstants","Tooltip","makeAnalyticsAttribute","TooltipContent","PopupArrow","width","height","fillColor","colors","popup","background","intense","strokeColor","border","assignWithoutSideEffects","componentId","componentIds"],"mappings":"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"}
+{"version":3,"file":"Tooltip.web.js","sources":["../../../../../../src/components/Tooltip/Tooltip.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport {\n  shift,\n  FloatingPortal,\n  arrow,\n  flip,\n  offset,\n  useDelayGroup,\n  useDelayGroupContext,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n  autoUpdate,\n} from '@floating-ui/react';\nimport React from 'react';\nimport type { TooltipProps } from './types';\nimport { TooltipContent } from './TooltipContent';\nimport { ARROW_HEIGHT, ARROW_WIDTH } from './constants';\nimport { TooltipContext } from './TooltipContext';\nimport { componentIds } from './componentIds';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\nimport { useId } from '~utils/useId';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { mergeProps } from '~utils/mergeProps';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useMergeRefs } from '~utils/useMergeRefs';\n\nconst _Tooltip = ({\n  title,\n  content,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = componentZIndices.tooltip,\n  ...rest\n}: TooltipProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const id = useId();\n  const [isOpen, setIsOpen] = React.useState(false);\n  const arrowRef = React.useRef<SVGSVGElement>(null);\n\n  const GAP = theme.spacing[2];\n  const [side] = getFloatingPlacementParts(placement);\n  const isHorizontal = side === 'left' || side === 'right';\n  const isOppositeAxis = side === 'right' || side === 'bottom';\n\n  const { refs, floatingStyles, context } = useFloating({\n    placement,\n    open: isOpen,\n    strategy: 'fixed',\n    onOpenChange: (open) => {\n      setIsOpen(open);\n      onOpenChange?.({ isOpen: open });\n    },\n    middleware: [\n      shift({ crossAxis: false, padding: GAP }),\n      flip({ padding: GAP }),\n      offset(GAP + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? 0 : ARROW_WIDTH,\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const animationOffset = isOppositeAxis ? -size[4] : size[4];\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: theme.motion.duration.quick,\n    initial: {\n      opacity: 0,\n      transform: `translate${isHorizontal ? 'X' : 'Y'}(${animationOffset}px)`,\n    },\n  });\n\n  useDelayGroup(context, { id });\n  const { delay } = useDelayGroupContext();\n  const hover = useHover(context, {\n    delay,\n    move: false,\n  });\n  const focus = useFocus(context);\n  const role = useRole(context, { role: 'tooltip' });\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, hover, focus]);\n\n  return (\n    <TooltipContext.Provider value={true}>\n      {React.cloneElement(children, {\n        // @ts-expect-error: ref does exist on children prop\n        ref: useMergeRefs(refs.setReference, children.ref),\n        ...makeAccessible({ label: content }),\n        ...mergeProps(children.props, getReferenceProps()),\n      })}\n      {isMounted && (\n        <FloatingPortal>\n          <BaseBox\n            ref={refs.setFloating}\n            style={floatingStyles}\n            pointerEvents=\"none\"\n            zIndex={zIndex}\n            {...getFloatingProps()}\n            {...metaAttribute({ name: MetaConstants.Tooltip })}\n            {...makeAnalyticsAttribute(rest)}\n          >\n            <TooltipContent\n              title={title}\n              style={styles}\n              arrow={\n                <PopupArrow\n                  ref={arrowRef}\n                  context={context}\n                  width={ARROW_WIDTH}\n                  height={ARROW_HEIGHT}\n                  fillColor={theme.colors.popup.background.intense}\n                  strokeColor={theme.colors.popup.border.intense}\n                />\n              }\n            >\n              {content}\n            </TooltipContent>\n          </BaseBox>\n        </FloatingPortal>\n      )}\n    </TooltipContext.Provider>\n  );\n};\n\nconst Tooltip = assignWithoutSideEffects(_Tooltip, {\n  componentId: componentIds.Tooltip,\n});\n\nexport { Tooltip };\n"],"names":["_Tooltip","_ref","title","content","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","componentZIndices","tooltip","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","id","useId","_React$useState","React","useState","_React$useState2","_slicedToArray","isOpen","setIsOpen","arrowRef","useRef","GAP","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","side","isHorizontal","isOppositeAxis","_useFloating","useFloating","open","strategy","middleware","shift","crossAxis","padding","flip","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","whileElementsMounted","autoUpdate","refs","floatingStyles","context","animationOffset","size","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","opacity","transform","concat","isMounted","styles","useDelayGroup","_useDelayGroupContext","useDelayGroupContext","delay","hover","useHover","move","focus","useFocus","role","useRole","_useInteractions","useInteractions","getReferenceProps","getFloatingProps","_jsxs","TooltipContext","Provider","value","cloneElement","_objectSpread","ref","useMergeRefs","setReference","makeAccessible","label","mergeProps","props","_jsx","FloatingPortal","BaseBox","setFloating","style","pointerEvents","metaAttribute","name","MetaConstants","Tooltip","makeAnalyticsAttribute","TooltipContent","PopupArrow","width","height","fillColor","colors","popup","background","intense","strokeColor","border","assignWithoutSideEffects","componentId","componentIds"],"mappings":"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"}