npm - @razorpay/blade - Versions diffs - 12.46.0 → 12.46.2 - Mend

@razorpay/blade 12.46.0 → 12.46.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/build/lib/native/components/QuickFilters/QuickFilter.js CHANGED Viewed

@@ -419,7 +419,7 @@ import { Card, CardBody } from '../Card/Card.js';
 import '../Card/CardHeader.js';
 import '../Card/CardFooter.js';
-var _excluded=["value","title","trailing","selectionType","isSelected"],_excluded2=["title","value","trailing","testID"];var QuickFilterContent=function QuickFilterContent(_ref){var value=_ref.value,title=_ref.title,trailing=_ref.trailing,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,_ref$isSelected=_ref.isSelected,isSelected=_ref$isSelected===void 0?false:_ref$isSelected,rest=_objectWithoutProperties(_ref,_excluded);return jsxs(BaseBox,{display:"flex",flexDirection:"row",gap:"spacing.3",width:"fit-content",justifyContent:"center",alignItems:"center",paddingY:"spacing.3",paddingLeft:"spacing.3",paddingRight:"spacing.4",children:[jsxs(Box,{display:"flex",flexDirection:"row",gap:"spacing.2",justifyContent:"center",alignItems:"center",children:[selectionType==='single'?jsx(Radio,Object.assign({value:value},makeAnalyticsAttribute(rest))):jsx(Checkbox,Object.assign({value:value},makeAnalyticsAttribute(rest))),jsx(Text,{variant:"body",size:"medium",color:isSelected?'interactive.text.primary.subtle':'interactive.text.gray.subtle',weight:"medium",children:title})]}),trailing]});};var QuickFilter=forwardRef(function(_ref2,ref){var title=_ref2.title,value=_ref2.value,trailing=_ref2.trailing,testID=_ref2.testID,rest=_objectWithoutProperties(_ref2,_excluded2);var _useQuickFilterGroupC=useQuickFilterGroupContext(),selectedQuickFilters=_useQuickFilterGroupC.selectedQuickFilters,selectionType=_useQuickFilterGroupC.selectionType;var isQuickFilterSelected=selectedQuickFilters.includes(value);return jsx(Card,Object.assign({padding:"spacing.0",as:"label",accessibilityLabel:title,borderRadius:"medium",elevation:"none",isSelected:isQuickFilterSelected,ref:ref},makeAnalyticsAttribute(rest),metaAttribute({testID:testID}),{children:jsx(CardBody,{children:jsx(QuickFilterContent,Object.assign({value:value,title:title,trailing:trailing,selectionType:selectionType,isSelected:isQuickFilterSelected},rest))})}));});
+var _excluded=["value","title","trailing","selectionType","isSelected"],_excluded2=["title","value","trailing","testID"];var QuickFilterContent=function QuickFilterContent(_ref){var value=_ref.value,title=_ref.title,trailing=_ref.trailing,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,_ref$isSelected=_ref.isSelected,isSelected=_ref$isSelected===void 0?false:_ref$isSelected,rest=_objectWithoutProperties(_ref,_excluded);return jsxs(BaseBox,{display:"flex",flexDirection:"row",gap:"spacing.3",width:"fit-content",justifyContent:"center",alignItems:"center",paddingY:"spacing.3",paddingLeft:"spacing.3",paddingRight:"spacing.4",children:[jsxs(Box,{display:"flex",flexDirection:"row",gap:"spacing.2",justifyContent:"center",alignItems:"center",children:[selectionType==='single'?jsx(Radio,Object.assign({value:value},makeAnalyticsAttribute(rest))):jsx(Checkbox,Object.assign({value:value},makeAnalyticsAttribute(rest))),jsx(Text,{variant:"body",size:"medium",color:isSelected?'interactive.text.primary.subtle':'interactive.text.gray.subtle',weight:"medium",children:title})]}),trailing]});};var QuickFilter=forwardRef(function(_ref2,ref){var title=_ref2.title,value=_ref2.value,trailing=_ref2.trailing,testID=_ref2.testID,rest=_objectWithoutProperties(_ref2,_excluded2);var _useQuickFilterGroupC=useQuickFilterGroupContext(),selectedQuickFilters=_useQuickFilterGroupC.selectedQuickFilters,selectionType=_useQuickFilterGroupC.selectionType;var isQuickFilterSelected=selectedQuickFilters.includes(value);return jsx(Card,Object.assign({padding:"spacing.0",as:"label",accessibilityLabel:title,borderRadius:"medium",elevation:"none",isSelected:isQuickFilterSelected,ref:ref,marginRight:"spacing.1"},makeAnalyticsAttribute(rest),metaAttribute({testID:testID}),{children:jsx(CardBody,{children:jsx(QuickFilterContent,Object.assign({value:value,title:title,trailing:trailing,selectionType:selectionType,isSelected:isQuickFilterSelected},rest))})}));});
 export { QuickFilter };
 //# sourceMappingURL=QuickFilter.js.map

package/build/lib/native/components/QuickFilters/QuickFilter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuickFilter.js","sources":["../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n value,\n title,\n trailing,\n selectionType = 'single',\n isSelected = false,\n ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n return (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.3\"\n width=\"fit-content\"\n justifyContent=\"center\"\n alignItems=\"center\"\n paddingY=\"spacing.3\"\n paddingLeft=\"spacing.3\"\n paddingRight=\"spacing.4\"\n >\n <Box\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.2\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n {selectionType === 'single' ? (\n <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n ) : (\n <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n )}\n <Text\n variant=\"body\"\n size=\"medium\"\n color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n weight=\"medium\"\n >\n {title}\n </Text>\n </Box>\n\n {trailing}\n </BaseBox>\n );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n const isQuickFilterSelected = selectedQuickFilters.includes(value);\n return (\n <Card\n padding=\"spacing.0\"\n as=\"label\"\n accessibilityLabel={title}\n borderRadius=\"medium\"\n elevation=\"none\"\n isSelected={isQuickFilterSelected}\n ref={ref}\n {...makeAnalyticsAttribute(rest)}\n {...metaAttribute({ testID })}\n >\n <CardBody>\n <QuickFilterContent\n value={value}\n title={title}\n trailing={trailing}\n selectionType={selectionType}\n isSelected={isQuickFilterSelected}\n {...rest}\n />\n </CardBody>\n </Card>\n );\n },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","Object","assign","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","metaAttribute","CardBody"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yHAaA,IAAMA,kBAAkB,CAAG,SAArBA,kBAAkBA,CAAAC,IAAA,CAO2B,~~KANjDC~~,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,KAAK,CAAAF,IAAA,CAALE,KAAK,CACLC,QAAQ,CAAAH,IAAA,CAARG,QAAQ,CAAAC,kBAAA,CAAAJ,IAAA,CACRK,aAAa,CAAbA,aAAa,CAAAD,kBAAA,~~GAAG~~,KAAA,CAAA,~~CAAA~~,QAAQ,CAAAA,kBAAA,CAAAE,eAAA,CAAAN,IAAA,CACxBO,UAAU,CAAVA,UAAU,CAAAD,eAAA,~~GAAG~~,KAAA,CAAA,~~CAAA~~,KAAK,CAAAA,eAAA,CACfE,IAAI,CAAAC,wBAAA,CAAAT,IAAA,CAAAU,SAAA,~~EAEP~~,OACEC,IAAA,CAACC,OAAO,CACNC,~~CAAAA,~~OAAO,CAAC,MAAM,CACdC,aAAa,CAAC,KAAK,CACnBC,GAAG,CAAC,WAAW,CACfC,KAAK,CAAC,aAAa,CACnBC,cAAc,CAAC,QAAQ,CACvBC,UAAU,CAAC,QAAQ,CACnBC,QAAQ,CAAC,WAAW,CACpBC,WAAW,CAAC,WAAW,CACvBC,YAAY,CAAC,WAAW,CAAAC,QAAA,~~CAAA,~~CAExBX,IAAA,CAACY,GAAG,CACFV,~~CAAAA,~~OAAO,CAAC,MAAM,CACdC,aAAa,CAAC,KAAK,CACnBC,GAAG,CAAC,WAAW,CACfE,cAAc,CAAC,QAAQ,CACvBC,UAAU,CAAC,QAAQ,CAAAI,QAAA,CAElBjB,CAAAA,aAAa,GAAK,QAAQ,CACzBmB,GAAA,CAACC,KAAK,CAAAC,MAAA,CAAAC,MAAA,CAAC1B,CAAAA,KAAK,CAAEA,KAAM,~~EAAK2B~~,sBAAsB,CAACpB,IAAI,CAAC,CAAG,CAAC,CAEzDgB,GAAA,CAACK,QAAQ,CAAAH,MAAA,CAAAC,MAAA,CAAC1B,~~CAAAA,~~KAAK,CAAEA,KAAM,CAAK2B,CAAAA,sBAAsB,CAACpB,IAAI,CAAC,CAAG,CAC5D,CACDgB,GAAA,CAACM,IAAI,CACHC,CAAAA,OAAO,CAAC,MAAM,CACdC,IAAI,CAAC,QAAQ,CACbC,KAAK,CAAE1B,UAAU,CAAG,iCAAiC,CAAG,8BAA+B,CACvF2B,MAAM,CAAC,QAAQ,CAAAZ,QAAA,CAEdpB,KAAK,CACF,CAAC,CACJ,~~CAAA,~~CAAC,CAELC,QAAQ,CACF,CAAA,CAAC,CAEd,CAAC,CAEK,IAAAgC,WAAW,CAAGC,UAAU,CAC5B,SAAAC,KAAA,CAA8CC,GAAG,CAAyB,~~KAAvEpC~~,KAAK,CAAAmC,KAAA,CAALnC,KAAK,CAAED,KAAK,CAAAoC,KAAA,CAALpC,KAAK,CAAEE,QAAQ,CAAAkC,KAAA,CAARlC,QAAQ,CAAEoC,MAAM,CAAAF,KAAA,CAANE,MAAM,CAAK/B,IAAI,CAAAC,wBAAA,CAAA4B,KAAA,CAAAG,UAAA,CAAA,~~CACxC,~~IAAAC,qBAAA,CAAgDC,0BAA0B,EAAE,CAApEC,oBAAoB,CAAAF,qBAAA,CAApBE,oBAAoB,CAAEtC,aAAa,CAAAoC,qBAAA,CAAbpC,aAAa,CAE3C,IAAMuC,qBAAqB,CAAGD,oBAAoB,CAACE,QAAQ,CAAC5C,KAAK,CAAC,CAClE,OACEuB,GAAA,CAACsB,IAAI,CAAApB,MAAA,CAAAC,MAAA,CACHoB,CAAAA,OAAO,CAAC,WAAW,CACnBC,EAAE,CAAC,OAAO,CACVC,kBAAkB,CAAE/C,KAAM,CAC1BgD,YAAY,CAAC,QAAQ,CACrBC,SAAS,CAAC,MAAM,CAChB5C,UAAU,CAAEqC,qBAAsB,CAClCN,GAAG,CAAEA,GAAI,~~CACLV~~,CAAAA,sBAAsB,CAACpB,IAAI,CAAC,~~CAC5B4C~~,aAAa,CAAC,~~CAAEb~~,MAAM,CAANA,MAAO,CAAC,CAAC,CAAAjB,CAAAA,QAAA,CAE7BE,GAAA,~~CAAC6B~~,QAAQ,CAAA,~~CAAA/B~~,QAAA,CACPE,GAAA,CAACzB,kBAAkB,CAAA2B,MAAA,CAAAC,MAAA,EACjB1B,KAAK,CAAEA,KAAM,CACbC,KAAK,CAAEA,KAAM,CACbC,QAAQ,CAAEA,QAAS,CACnBE,aAAa,CAAEA,aAAc,CAC7BE,UAAU,CAAEqC,qBAAsB,CAAA,CAC9BpC,IAAI,CACT,CAAC,CACM,CAAC,CACP,CAAA,CAAC,CAEX,CACF;;;;"}
1	+ {"version":3,"file":"QuickFilter.js","sources":["../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n value,\n title,\n trailing,\n selectionType = 'single',\n isSelected = false,\n ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n return (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.3\"\n width=\"fit-content\"\n justifyContent=\"center\"\n alignItems=\"center\"\n paddingY=\"spacing.3\"\n paddingLeft=\"spacing.3\"\n paddingRight=\"spacing.4\"\n >\n <Box\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.2\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n {selectionType === 'single' ? (\n <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n ) : (\n <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n )}\n <Text\n variant=\"body\"\n size=\"medium\"\n color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n weight=\"medium\"\n >\n {title}\n </Text>\n </Box>\n\n {trailing}\n </BaseBox>\n );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n const isQuickFilterSelected = selectedQuickFilters.includes(value);\n return (\n <Card\n padding=\"spacing.0\"\n as=\"label\"\n accessibilityLabel={title}\n borderRadius=\"medium\"\n elevation=\"none\"\n isSelected={isQuickFilterSelected}\n ref={ref}\n // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff\n marginRight=\"spacing.1\"\n {...makeAnalyticsAttribute(rest)}\n {...metaAttribute({ testID })}\n >\n <CardBody>\n <QuickFilterContent\n value={value}\n title={title}\n trailing={trailing}\n selectionType={selectionType}\n isSelected={isQuickFilterSelected}\n {...rest}\n />\n </CardBody>\n </Card>\n );\n },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","Object","assign","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","marginRight","metaAttribute","CardBody"],"mappings":"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"}

package/build/lib/native/components/VisuallyHidden/ScreenReaderStyles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var screenReaderStyles={border:0,clip:'rect(0 0 0 0)',clipPath:'inset(50%)',height:`1px`,margin:'0 -1px -1px 0',overflow:'hidden',padding:0,position:'absolute',width:`1px`,left:'-10000px',whiteSpace:'nowrap',wordWrap:'normal'};
+var screenReaderStyles={border:'0',clip:'rect(0, 0, 0, 0)',height:'1px',width:'1px',margin:'-1px',padding:'0',overflow:'hidden',whiteSpace:'nowrap',position:'absolute',wordWrap:'normal'};
 export { screenReaderStyles };
 //# sourceMappingURL=ScreenReaderStyles.js.map

package/build/lib/native/components/VisuallyHidden/ScreenReaderStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/*\n Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n border: 0,\n clip: 'rect(0 0 0 0)',\n ~~clipPath~~: '~~inset(50%)~~',\n ~~height~~: `1px~~`,\~~n margin: '0 -1px ~~-1px 0~~',\n ~~overflow~~: '~~hidden~~',\n ~~padding~~: ~~0,\n position:~~ '~~absolute~~',\n ~~width~~: ~~`1px`,\n left:~~ '~~-10000px~~',\n ~~whiteSpace~~: '~~nowrap~~',\n wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","~~clipPath~~","~~height~~","margin","~~overflow","~~padding","~~position~~","~~width~~","~~left~~","~~whiteSpace","~~wordWrap"],"mappings":"AAMM,IAAAA,kBAA6B,CAAG,CACpCC,MAAM,CAAE,~~CAAC~~,~~CACTC~~,IAAI,CAAE,~~eAAe~~,~~CACrBC~~,~~QAAQ~~,CAAE,~~YAAY~~,~~CACtBC~~,~~MAAM~~,~~CAAG~~,~~CAAA~~,~~GAAA~~,~~CAAI~~,~~CACbC~~,MAAM,CAAE,~~eAAe~~,~~CACvBC~~,QAAQ,CAAE,QAAQ,CAClBC,~~OAAO~~,CAAE,~~CAAC,CACVC,~~QAAQ,~~CAAE,UAAU,~~CACpBC,~~KAAK~~,~~CAAG,CAAA,GAAA,CAAI,CACZC,IAAI,~~CAAE,UAAU,~~CAChBC,UAAU,CAAE,QAAQ,~~CACpBC,QAAQ,CAAE,QACZ;;;;"}
1	+ {"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/*\n Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n border: '0',\n clip: 'rect(0, 0, 0, 0)',\n height: '1px',\n width: '1px',\n margin: '-1px',\n padding: '0',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n position: 'absolute',\n wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","height","width","margin","padding","overflow","whiteSpace","position","wordWrap"],"mappings":"AAMM,IAAAA,kBAA6B,CAAG,CACpCC,MAAM,CAAE,GAAG,CACXC,IAAI,CAAE,kBAAkB,CACxBC,MAAM,CAAE,KAAK,CACbC,KAAK,CAAE,KAAK,CACZC,MAAM,CAAE,MAAM,CACdC,OAAO,CAAE,GAAG,CACZC,QAAQ,CAAE,QAAQ,CAClBC,UAAU,CAAE,QAAQ,CACpBC,QAAQ,CAAE,UAAU,CACpBC,QAAQ,CAAE,QACZ;;;;"}

package/build/lib/web/development/components/ListView/ListViewFilters.web.js CHANGED Viewed

@@ -20,7 +20,6 @@ import { msToSeconds } from '../../utils/msToSeconds.js';
 import '../BladeProvider/index.js';
 import { cssBezierToArray } from '../../utils/cssBezierToArray.js';
 import '../../utils/index.js';
-import '../Divider/index.js';
 import '../../utils/isValidAllowedChildren/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
@@ -31,7 +30,6 @@ import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { Box } from '../Box/Box.js';
-import { Divider } from '../Divider/Divider.js';
 import Button from '../Button/Button/Button.js';
 import FilterIcon from '../Icons/FilterIcon/FilterIcon.js';
 import { Counter } from '../Counter/Counter.js';
@@ -40,8 +38,11 @@ import { castWebType } from '../../utils/platform/castUtils.js';
 var _excluded = ["testID", "children", "quickFilters", "onSearchChange", "searchValue", "searchValuePlaceholder", "searchName", "showQuickFilters", "onShowQuickFiltersChange", "showFilters", "onShowFiltersChange", "onSearchClear", "selectedFiltersCount", "searchTrailing"];
 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 gradientOverlyContainerWidth = '21px'; // 20px + 1px divider width
-var gradientOverlyContainerHeight = '38px';
+var CHILDREN_COUNTER_WIDTH = 36;
+var GAP_BETWEEN_CHILDREN_AND_SEARCH = 12;
+var SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN = 8;
+var CHILDREN_TOTAL_WIDTH = CHILDREN_COUNTER_WIDTH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;
+var CHILDREN_WITH_SEARCH_WIDTH = CHILDREN_COUNTER_WIDTH + GAP_BETWEEN_CHILDREN_AND_SEARCH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;
 var StyledQuickFilterContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ListViewFiltersweb__StyledQuickFilterContainer",
   componentId: "igy2td-0"
@@ -55,40 +56,23 @@ var StyledQuickFilterContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   /* For Edge */
   msOverflowStyle: 'none'
 });
-var GradientOverlay = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ListViewFiltersweb__GradientOverlay",
-  componentId: "igy2td-1"
-})(["height:100%;width:20px;background:linear-gradient( 270deg,", " 0%,", " 100% );pointer-events:none;&::after{content:'';position:absolute;right:0;top:0;height:100%;width:1px;background-color:", ";}"], function (_ref) {
-  var gradientColorRight = _ref.gradientColorRight;
-  return gradientColorRight;
-}, function (_ref2) {
-  var gradientColorLeft = _ref2.gradientColorLeft;
-  return gradientColorLeft;
-}, function (_ref3) {
-  var dividerColor = _ref3.dividerColor;
-  return dividerColor;
-});
-var ListViewFilters = function ListViewFilters(_ref4) {
-  var testID = _ref4.testID,
-    children = _ref4.children,
-    quickFilters = _ref4.quickFilters,
-    onSearchChange = _ref4.onSearchChange,
-    searchValue = _ref4.searchValue,
-    searchValuePlaceholder = _ref4.searchValuePlaceholder,
-    searchName = _ref4.searchName,
-    showQuickFilters = _ref4.showQuickFilters,
-    onShowQuickFiltersChange = _ref4.onShowQuickFiltersChange,
-    showFiltersProp = _ref4.showFilters,
-    onShowFiltersChange = _ref4.onShowFiltersChange,
-    onSearchClear = _ref4.onSearchClear,
-    _ref4$selectedFilters = _ref4.selectedFiltersCount,
-    selectedFiltersCount = _ref4$selectedFilters === void 0 ? 0 : _ref4$selectedFilters,
-    searchTrailing = _ref4.searchTrailing,
-    rest = _objectWithoutProperties(_ref4, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    shouldShowDecorationInQuickFilters = _useState2[0],
-    setShouldShowDecorationInQuickFilters = _useState2[1];
+var ListViewFilters = function ListViewFilters(_ref) {
+  var testID = _ref.testID,
+    children = _ref.children,
+    quickFilters = _ref.quickFilters,
+    onSearchChange = _ref.onSearchChange,
+    searchValue = _ref.searchValue,
+    searchValuePlaceholder = _ref.searchValuePlaceholder,
+    searchName = _ref.searchName,
+    showQuickFilters = _ref.showQuickFilters,
+    onShowQuickFiltersChange = _ref.onShowQuickFiltersChange,
+    showFiltersProp = _ref.showFilters,
+    onShowFiltersChange = _ref.onShowFiltersChange,
+    onSearchClear = _ref.onSearchClear,
+    _ref$selectedFiltersC = _ref.selectedFiltersCount,
+    selectedFiltersCount = _ref$selectedFiltersC === void 0 ? 0 : _ref$selectedFiltersC,
+    searchTrailing = _ref.searchTrailing,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useControllableState = useControllableState({
       defaultValue: showQuickFilters !== null && showQuickFilters !== void 0 ? showQuickFilters : showFiltersProp,
       value: showQuickFilters !== null && showQuickFilters !== void 0 ? showQuickFilters : showFiltersProp,
@@ -97,26 +81,34 @@ var ListViewFilters = function ListViewFilters(_ref4) {
     _useControllableState2 = _slicedToArray(_useControllableState, 2),
     showFilters = _useControllableState2[0],
     setShowFilters = _useControllableState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    listViewSelectedFilters = _useState4[0],
-    setListViewSelectedFilters = _useState4[1];
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    listViewSelectedFilters = _useState2[0],
+    setListViewSelectedFilters = _useState2[1];
   var searchId = useId('search-input');
   var searchNameValue = searchName || searchId;
   var isMobile = useIsMobile();
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var showSearchInput = onSearchChange || onSearchClear || searchValuePlaceholder || searchName;
+  var isSearchTrailingDropDown = /*#__PURE__*/React__default.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';
   var getFilterContainerWidth = function getFilterContainerWidth() {
-    if (isMobile && Boolean(children)) {
-      return '88%';
+    var hasChildren = Boolean(children);
+    if (isMobile) {
+      return hasChildren ? '88%' : '100%';
+    }
+    var searchInputWidth = isSearchTrailingDropDown ? '280px' : '208px';
+    if (showSearchInput && hasChildren) {
+      return "calc(100% - ".concat(searchInputWidth, " - ").concat(CHILDREN_WITH_SEARCH_WIDTH, "px)");
     }
-    if (isMobile && !Boolean(children)) {
-      return '100%';
+    if (hasChildren) {
+      return "calc(100% - ".concat(CHILDREN_TOTAL_WIDTH, "px)");
     }
-    return 'auto';
+    if (showSearchInput) {
+      return "calc(100% - ".concat(searchInputWidth, " - ").concat(SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN, "px)");
+    }
+    return '100%';
   };
-  var isSearchTrailingDropDown = /*#__PURE__*/React__default.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';
   return /*#__PURE__*/jsxs(ListViewFiltersProvider, {
     value: {
       listViewSelectedFilters: listViewSelectedFilters,
@@ -128,9 +120,9 @@ var ListViewFilters = function ListViewFilters(_ref4) {
       value: searchValue,
       placeholder: searchValuePlaceholder,
       name: searchNameValue || searchId,
-      onChange: function onChange(_ref5) {
-        var name = _ref5.name,
-          value = _ref5.value;
+      onChange: function onChange(_ref2) {
+        var name = _ref2.name,
+          value = _ref2.value;
         return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
           name: name,
           value: value
@@ -145,37 +137,19 @@ var ListViewFilters = function ListViewFilters(_ref4) {
       })), makeAnalyticsAttribute(rest)), {}, {
         display: "flex",
         justifyContent: "space-between",
-        children: [/*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsx(Box, {
           position: "relative",
           display: "flex",
           flexDirection: "column",
           width: getFilterContainerWidth(),
-          marginRight: isMobile ? 'spacing.2' : 'spacing.0',
-          children: [/*#__PURE__*/jsx(StyledQuickFilterContainer, {
-            overflow: isMobile ? 'scroll' : 'visible',
-            width: isMobile ? '100%' : 'auto',
-            ref: function ref(node) {
-              if (node instanceof HTMLElement && quickFilters) {
-                setShouldShowDecorationInQuickFilters(node.scrollWidth > node.offsetWidth && Boolean(children));
-              }
-            },
+          marginRight: "spacing.3",
+          children: /*#__PURE__*/jsx(StyledQuickFilterContainer, {
+            overflow: "scroll",
+            width: "100%",
             paddingY: "spacing.4",
-            paddingLeft: isMobile ? 'spacing.2' : 'spacing.0',
+            paddingLeft: "spacing.2",
             children: quickFilters
-          }), isMobile && shouldShowDecorationInQuickFilters ? /*#__PURE__*/jsxs(Box, {
-            position: "absolute",
-            right: "-1px",
-            top: "spacing.4",
-            width: gradientOverlyContainerWidth,
-            height: gradientOverlyContainerHeight,
-            children: [/*#__PURE__*/jsx(GradientOverlay, {
-              gradientColorLeft: theme.colors.transparent,
-              gradientColorRight: theme.colors.surface.background.gray.intense,
-              dividerColor: theme.colors.surface.border.gray.normal
-            }), /*#__PURE__*/jsx(Divider, {
-              orientation: "vertical"
-            })]
-          }) : null]
+          })
         }), /*#__PURE__*/jsxs(BaseBox, {
           display: "flex",
           gap: "spacing.4",
@@ -213,9 +187,9 @@ var ListViewFilters = function ListViewFilters(_ref4) {
               value: searchValue,
               placeholder: searchValuePlaceholder,
               name: searchNameValue || searchId,
-              onChange: function onChange(_ref6) {
-                var name = _ref6.name,
-                  value = _ref6.value;
+              onChange: function onChange(_ref3) {
+                var name = _ref3.name,
+                  value = _ref3.value;
                 return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
                   name: name,
                   value: value

package/build/lib/web/development/components/ListView/ListViewFilters.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, m } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { FilterIcon } from '~components/Icons';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~components/BladeProvider';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { castWebType } from '~utils';\nimport { Divider } from '~components/Divider';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst gradientOverlyContainerWidth = '21px'; // 20px + 1px divider width\nconst gradientOverlyContainerHeight = '38px';\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n /* For Webkit (Chrome, Safari) /\n '::-webkit-scrollbar': {\n display: 'none',\n },\n / For Firefox /\n scrollbarWidth: 'none',\n / For Edge */\n msOverflowStyle: 'none',\n});\n\nconst GradientOverlay = styled.div<{\n gradientColorLeft: string;\n dividerColor: string;\n gradientColorRight: string;\n}>`\n height: 100%;\n width: 20px;\n background: linear-gradient(\n 270deg,\n ${({ gradientColorRight }) => gradientColorRight} 0%,\n ${({ gradientColorLeft }) => gradientColorLeft} 100%\n );\n pointer-events: none;\n &::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: 1px;\n background-color: ${({ dividerColor }) => dividerColor};\n }\n`;\n\nconst ListViewFilters = ({\n testID,\n children,\n quickFilters,\n onSearchChange,\n searchValue,\n searchValuePlaceholder,\n searchName,\n showQuickFilters,\n onShowQuickFiltersChange,\n showFilters: showFiltersProp,\n onShowFiltersChange,\n onSearchClear,\n selectedFiltersCount = 0,\n searchTrailing,\n ...rest\n}: ListViewFilterProps): React.ReactElement => {\n const [shouldShowDecorationInQuickFilters, setShouldShowDecorationInQuickFilters] = useState(\n false,\n );\n const [showFilters, setShowFilters] = useControllableState({\n defaultValue: showQuickFilters ?? showFiltersProp,\n value: showQuickFilters ?? showFiltersProp,\n onChange: onShowQuickFiltersChange ?? onShowFiltersChange,\n });\n const [\n listViewSelectedFilters,\n setListViewSelectedFilters,\n ] = useState<ListViewSelectedFiltersType>({});\n const searchId = useId('search-input');\n const searchNameValue = searchName \|\| searchId;\n const isMobile = useIsMobile();\n const { theme } = useTheme();\n const showSearchInput = onSearchChange \|\| onSearchClear \|\| searchValuePlaceholder \|\| searchName;\n const getFilterContainerWidth = (): BoxProps['width'] => {\n if (isMobile && Boolean(children)) {\n return '88%';\n }\n if (isMobile && !Boolean(children)) {\n return '100%';\n }\n return 'auto';\n };\n\n const isSearchTrailingDropDown =\n React.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';\n\n return (\n <ListViewFiltersProvider\n value={{\n listViewSelectedFilters,\n setListViewSelectedFilters,\n selectedFiltersCount,\n }}\n >\n {isMobile && showSearchInput && (\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n trailing={searchTrailing}\n />\n )}\n <BaseBox>\n <BaseBox\n {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n {...makeAnalyticsAttribute(rest)}\n display=\"flex\"\n justifyContent=\"space-between\"\n >\n <Box\n position=\"relative\"\n display=\"flex\"\n flexDirection=\"column\"\n width={getFilterContainerWidth()}\n marginRight={isMobile ? 'spacing.2' : 'spacing.0'}\n >\n <StyledQuickFilterContainer\n overflow={isMobile ? 'scroll' : 'visible'}\n width={isMobile ? '100%' : 'auto'}\n ref={(node) => {\n if (node instanceof HTMLElement && quickFilters) {\n setShouldShowDecorationInQuickFilters(\n node.scrollWidth > node.offsetWidth && Boolean(children),\n );\n }\n }}\n paddingY=\"spacing.4\"\n paddingLeft={isMobile ? 'spacing.2' : 'spacing.0'}\n >\n {quickFilters}\n </StyledQuickFilterContainer>\n {isMobile && shouldShowDecorationInQuickFilters ? (\n <Box\n position=\"absolute\"\n right=\"-1px\"\n top=\"spacing.4\"\n width={gradientOverlyContainerWidth}\n height={gradientOverlyContainerHeight}\n >\n <GradientOverlay\n gradientColorLeft={theme.colors.transparent}\n gradientColorRight={theme.colors.surface.background.gray.intense}\n dividerColor={theme.colors.surface.border.gray.normal}\n />\n <Divider orientation=\"vertical\" />\n </Box>\n ) : null}\n </Box>\n\n <BaseBox display=\"flex\" gap=\"spacing.4\" alignItems=\"center\">\n {children ? (\n <Box position=\"relative\" display=\"inline-block\">\n <Button\n variant=\"tertiary\"\n size=\"medium\"\n color=\"primary\"\n onClick={() => {\n setShowFilters((prev) => !prev);\n }}\n icon={FilterIcon}\n accessibilityLabel=\"Show More Filters\"\n />\n\n <Box\n position=\"absolute\"\n right=\"spacing.0\"\n top=\"spacing.0\"\n transform=\"translate(50%, -50%)\"\n >\n <Counter\n value={selectedFiltersCount \|\| Object.keys(listViewSelectedFilters).length}\n color=\"primary\"\n emphasis=\"intense\"\n size=\"small\"\n />\n </Box>\n </Box>\n ) : null}\n {!isMobile && showSearchInput && (\n <Box width={isSearchTrailingDropDown ? '280px' : '208px'}>\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n size=\"medium\"\n trailing={searchTrailing}\n />\n </Box>\n )}\n </BaseBox>\n </BaseBox>\n <AnimatePresence>\n {showFilters && (\n <m.div\n initial={{ height: 0 }}\n animate={{ height: showFilters ? 'auto' : 0 }}\n transition={{\n duration: msToSeconds(theme.motion.duration.moderate),\n ease: cssBezierToArray(castWebType(theme.motion.easing.standard)),\n }}\n exit={{ height: 0 }}\n >\n <BaseBox\n display=\"flex\"\n backgroundColor={\n isMobile ? 'surface.background.white' : 'surface.background.gray.moderate'\n }\n borderTop={!isMobile ? '1ps solid' : undefined}\n borderTopColor={!isMobile ? 'surface.border.gray.muted' : undefined}\n >\n {children}\n </BaseBox>\n </m.div>\n )}\n </AnimatePresence>\n </BaseBox>\n </ListViewFiltersProvider>\n );\n};\n\nexport { ListViewFilters };\n"],"names":["gradientOverlyContainerWidth","gradientOverlyContainerHeight","StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","GradientOverlay","div","_ref","gradientColorRight","_ref2","gradientColorLeft","_ref3","dividerColor","ListViewFilters","_ref4","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","showFiltersProp","showFilters","onShowFiltersChange","onSearchClear","_ref4$selectedFilters","selectedFiltersCount","searchTrailing","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","shouldShowDecorationInQuickFilters","setShouldShowDecorationInQuickFilters","_useControllableState","useControllableState","defaultValue","value","onChange","_useControllableState2","setShowFilters","_useState3","_useState4","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","_useTheme","useTheme","theme","showSearchInput","getFilterContainerWidth","Boolean","isSearchTrailingDropDown","React","isValidElement","getComponentId","_jsxs","ListViewFiltersProvider","_jsx","SearchInput","label","placeholder","name","_ref5","onClearButtonClick","trailing","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","width","marginRight","overflow","ref","node","HTMLElement","scrollWidth","offsetWidth","paddingY","paddingLeft","right","top","height","colors","transparent","surface","background","gray","intense","border","normal","Divider","orientation","gap","alignItems","Button","variant","size","color","onClick","prev","icon","FilterIcon","accessibilityLabel","transform","Counter","Object","keys","length","emphasis","_ref6","AnimatePresence","m","initial","animate","transition","duration","msToSeconds","motion","moderate","ease","cssBezierToArray","castWebType","easing","standard","exit","backgroundColor","borderTop","undefined","borderTopColor"],"mappings":"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"}
1	+ {"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, m } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { FilterIcon } from '~components/Icons';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~components/BladeProvider';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { castWebType } from '~utils';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst CHILDREN_COUNTER_WIDTH = 36;\nconst GAP_BETWEEN_CHILDREN_AND_SEARCH = 12;\nconst SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN = 8;\nconst CHILDREN_TOTAL_WIDTH = CHILDREN_COUNTER_WIDTH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;\nconst CHILDREN_WITH_SEARCH_WIDTH =\n CHILDREN_COUNTER_WIDTH +\n GAP_BETWEEN_CHILDREN_AND_SEARCH +\n SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n /* For Webkit (Chrome, Safari) /\n '::-webkit-scrollbar': {\n display: 'none',\n },\n / For Firefox /\n scrollbarWidth: 'none',\n / For Edge */\n msOverflowStyle: 'none',\n});\n\nconst ListViewFilters = ({\n testID,\n children,\n quickFilters,\n onSearchChange,\n searchValue,\n searchValuePlaceholder,\n searchName,\n showQuickFilters,\n onShowQuickFiltersChange,\n showFilters: showFiltersProp,\n onShowFiltersChange,\n onSearchClear,\n selectedFiltersCount = 0,\n searchTrailing,\n ...rest\n}: ListViewFilterProps): React.ReactElement => {\n const [showFilters, setShowFilters] = useControllableState({\n defaultValue: showQuickFilters ?? showFiltersProp,\n value: showQuickFilters ?? showFiltersProp,\n onChange: onShowQuickFiltersChange ?? onShowFiltersChange,\n });\n const [\n listViewSelectedFilters,\n setListViewSelectedFilters,\n ] = useState<ListViewSelectedFiltersType>({});\n const searchId = useId('search-input');\n const searchNameValue = searchName \|\| searchId;\n const isMobile = useIsMobile();\n const { theme } = useTheme();\n\n const showSearchInput = onSearchChange \|\| onSearchClear \|\| searchValuePlaceholder \|\| searchName;\n const isSearchTrailingDropDown =\n React.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';\n\n const getFilterContainerWidth = (): BoxProps['width'] => {\n const hasChildren = Boolean(children);\n\n if (isMobile) {\n return hasChildren ? '88%' : '100%';\n }\n\n const searchInputWidth = isSearchTrailingDropDown ? '280px' : '208px';\n\n if (showSearchInput && hasChildren) {\n return `calc(100% - ${searchInputWidth} - ${CHILDREN_WITH_SEARCH_WIDTH}px)`;\n }\n if (hasChildren) {\n return `calc(100% - ${CHILDREN_TOTAL_WIDTH}px)`;\n }\n if (showSearchInput) {\n return `calc(100% - ${searchInputWidth} - ${SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN}px)`;\n }\n return '100%';\n };\n\n return (\n <ListViewFiltersProvider\n value={{\n listViewSelectedFilters,\n setListViewSelectedFilters,\n selectedFiltersCount,\n }}\n >\n {isMobile && showSearchInput && (\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n trailing={searchTrailing}\n />\n )}\n <BaseBox>\n <BaseBox\n {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n {...makeAnalyticsAttribute(rest)}\n display=\"flex\"\n justifyContent=\"space-between\"\n >\n <Box\n position=\"relative\"\n display=\"flex\"\n flexDirection=\"column\"\n width={getFilterContainerWidth()}\n marginRight=\"spacing.3\"\n >\n <StyledQuickFilterContainer\n overflow=\"scroll\"\n width=\"100%\"\n paddingY=\"spacing.4\"\n paddingLeft=\"spacing.2\"\n >\n {quickFilters}\n </StyledQuickFilterContainer>\n </Box>\n\n <BaseBox display=\"flex\" gap=\"spacing.4\" alignItems=\"center\">\n {children ? (\n <Box position=\"relative\" display=\"inline-block\">\n <Button\n variant=\"tertiary\"\n size=\"medium\"\n color=\"primary\"\n onClick={() => {\n setShowFilters((prev) => !prev);\n }}\n icon={FilterIcon}\n accessibilityLabel=\"Show More Filters\"\n />\n\n <Box\n position=\"absolute\"\n right=\"spacing.0\"\n top=\"spacing.0\"\n transform=\"translate(50%, -50%)\"\n >\n <Counter\n value={selectedFiltersCount \|\| Object.keys(listViewSelectedFilters).length}\n color=\"primary\"\n emphasis=\"intense\"\n size=\"small\"\n />\n </Box>\n </Box>\n ) : null}\n {!isMobile && showSearchInput && (\n <Box width={isSearchTrailingDropDown ? '280px' : '208px'}>\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n size=\"medium\"\n trailing={searchTrailing}\n />\n </Box>\n )}\n </BaseBox>\n </BaseBox>\n <AnimatePresence>\n {showFilters && (\n <m.div\n initial={{ height: 0 }}\n animate={{ height: showFilters ? 'auto' : 0 }}\n transition={{\n duration: msToSeconds(theme.motion.duration.moderate),\n ease: cssBezierToArray(castWebType(theme.motion.easing.standard)),\n }}\n exit={{ height: 0 }}\n >\n <BaseBox\n display=\"flex\"\n backgroundColor={\n isMobile ? 'surface.background.white' : 'surface.background.gray.moderate'\n }\n borderTop={!isMobile ? '1ps solid' : undefined}\n borderTopColor={!isMobile ? 'surface.border.gray.muted' : undefined}\n >\n {children}\n </BaseBox>\n </m.div>\n )}\n </AnimatePresence>\n </BaseBox>\n </ListViewFiltersProvider>\n );\n};\n\nexport { ListViewFilters };\n"],"names":["CHILDREN_COUNTER_WIDTH","GAP_BETWEEN_CHILDREN_AND_SEARCH","SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN","CHILDREN_TOTAL_WIDTH","CHILDREN_WITH_SEARCH_WIDTH","StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","ListViewFilters","_ref","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","showFiltersProp","showFilters","onShowFiltersChange","onSearchClear","_ref$selectedFiltersC","selectedFiltersCount","searchTrailing","rest","_objectWithoutProperties","_excluded","_useControllableState","useControllableState","defaultValue","value","onChange","_useControllableState2","_slicedToArray","setShowFilters","_useState","useState","_useState2","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","_useTheme","useTheme","theme","showSearchInput","isSearchTrailingDropDown","React","isValidElement","getComponentId","getFilterContainerWidth","hasChildren","Boolean","searchInputWidth","concat","_jsxs","ListViewFiltersProvider","_jsx","SearchInput","label","placeholder","name","_ref2","onClearButtonClick","trailing","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","width","marginRight","overflow","paddingY","paddingLeft","gap","alignItems","Button","variant","size","color","onClick","prev","icon","FilterIcon","accessibilityLabel","right","top","transform","Counter","Object","keys","length","emphasis","_ref3","AnimatePresence","m","div","initial","height","animate","transition","duration","msToSeconds","motion","moderate","ease","cssBezierToArray","castWebType","easing","standard","exit","backgroundColor","borderTop","undefined","borderTopColor"],"mappings":"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"}

package/build/lib/web/development/components/QuickFilters/QuickFilter.js CHANGED Viewed

@@ -82,6 +82,9 @@ var QuickFilter = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     elevation: "none",
     isSelected: isQuickFilterSelected,
     ref: ref
+    // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff
+    ,
+    marginRight: "spacing.1"
   }, makeAnalyticsAttribute(rest)), metaAttribute({
     testID: testID
   })), {}, {

package/build/lib/web/development/components/QuickFilters/QuickFilter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuickFilter.js","sources":["../../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n value,\n title,\n trailing,\n selectionType = 'single',\n isSelected = false,\n ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n return (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.3\"\n width=\"fit-content\"\n justifyContent=\"center\"\n alignItems=\"center\"\n paddingY=\"spacing.3\"\n paddingLeft=\"spacing.3\"\n paddingRight=\"spacing.4\"\n >\n <Box\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.2\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n {selectionType === 'single' ? (\n <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n ) : (\n <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n )}\n <Text\n variant=\"body\"\n size=\"medium\"\n color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n weight=\"medium\"\n >\n {title}\n </Text>\n </Box>\n\n {trailing}\n </BaseBox>\n );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n const isQuickFilterSelected = selectedQuickFilters.includes(value);\n return (\n <Card\n padding=\"spacing.0\"\n as=\"label\"\n accessibilityLabel={title}\n borderRadius=\"medium\"\n elevation=\"none\"\n isSelected={isQuickFilterSelected}\n ref={ref}\n {...makeAnalyticsAttribute(rest)}\n {...metaAttribute({ testID })}\n >\n <CardBody>\n <QuickFilterContent\n value={value}\n title={title}\n trailing={trailing}\n selectionType={selectionType}\n isSelected={isQuickFilterSelected}\n {...rest}\n />\n </CardBody>\n </Card>\n );\n },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","_objectSpread","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","metaAttribute","CardBody"],"mappings":"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~~AAAI~~,GAAA,~~EACLV~~,sBAAsB,CAACnB,IAAI,CAAC,CAAA,~~EAC5B2C~~,aAAa,CAAC;~~AAAEb~~,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAhB,QAAA,eAE7BE,GAAA,~~CAAC4B~~,QAAQ,EAAA;~~AAAA9B~~,MAAAA,QAAA,eACPE,GAAA,CAACzB,kBAAkB,EAAA2B,aAAA,CAAA;AACjBzB,QAAAA,KAAK,EAAEA,KAAM;AACbC,QAAAA,KAAK,EAAEA,KAAM;AACbC,QAAAA,QAAQ,EAAEA,QAAS;AACnBE,QAAAA,aAAa,EAAEA,aAAc;AAC7BE,QAAAA,UAAU,EAAEoC,qBAAAA;AAAsB,OAAA,EAC9BnC,IAAI,CACT,CAAA;KACO,CAAA;AAAC,GAAA,CACP,CAAC,CAAA;AAEX,CACF;;;;"}
1	+ {"version":3,"file":"QuickFilter.js","sources":["../../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n value,\n title,\n trailing,\n selectionType = 'single',\n isSelected = false,\n ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n return (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.3\"\n width=\"fit-content\"\n justifyContent=\"center\"\n alignItems=\"center\"\n paddingY=\"spacing.3\"\n paddingLeft=\"spacing.3\"\n paddingRight=\"spacing.4\"\n >\n <Box\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.2\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n {selectionType === 'single' ? (\n <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n ) : (\n <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n )}\n <Text\n variant=\"body\"\n size=\"medium\"\n color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n weight=\"medium\"\n >\n {title}\n </Text>\n </Box>\n\n {trailing}\n </BaseBox>\n );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n const isQuickFilterSelected = selectedQuickFilters.includes(value);\n return (\n <Card\n padding=\"spacing.0\"\n as=\"label\"\n accessibilityLabel={title}\n borderRadius=\"medium\"\n elevation=\"none\"\n isSelected={isQuickFilterSelected}\n ref={ref}\n // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff\n marginRight=\"spacing.1\"\n {...makeAnalyticsAttribute(rest)}\n {...metaAttribute({ testID })}\n >\n <CardBody>\n <QuickFilterContent\n value={value}\n title={title}\n trailing={trailing}\n selectionType={selectionType}\n isSelected={isQuickFilterSelected}\n {...rest}\n />\n </CardBody>\n </Card>\n );\n },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","_objectSpread","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","marginRight","metaAttribute","CardBody"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,IAAA,EAO2B;AAAA,EAAA,IANjDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,kBAAA,GAAAJ,IAAA,CACRK,aAAa;AAAbA,IAAAA,aAAa,GAAAD,kBAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,kBAAA;IAAAE,eAAA,GAAAN,IAAA,CACxBO,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;AACfE,IAAAA,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA,CAAA;EAEP,oBACEC,IAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,aAAa,EAAC,KAAK;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,KAAK,EAAC,aAAa;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,QAAQ,EAAC,WAAW;AACpBC,IAAAA,WAAW,EAAC,WAAW;AACvBC,IAAAA,YAAY,EAAC,WAAW;IAAAC,QAAA,EAAA,cAExBX,IAAA,CAACY,GAAG,EAAA;AACFV,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,aAAa,EAAC,KAAK;AACnBC,MAAAA,GAAG,EAAC,WAAW;AACfE,MAAAA,cAAc,EAAC,QAAQ;AACvBC,MAAAA,UAAU,EAAC,QAAQ;MAAAI,QAAA,EAAA,CAElBjB,aAAa,KAAK,QAAQ,gBACzBmB,GAAA,CAACC,KAAK,EAAAC,aAAA,CAAA;AAACzB,QAAAA,KAAK,EAAEA,KAAAA;OAAW0B,EAAAA,sBAAsB,CAACnB,IAAI,CAAC,CAAG,CAAC,gBAEzDgB,GAAA,CAACI,QAAQ,EAAAF,aAAA,CAAA;AAACzB,QAAAA,KAAK,EAAEA,KAAAA;OAAW0B,EAAAA,sBAAsB,CAACnB,IAAI,CAAC,CAAG,CAC5D,eACDgB,GAAA,CAACK,IAAI,EAAA;AACHC,QAAAA,OAAO,EAAC,MAAM;AACdC,QAAAA,IAAI,EAAC,QAAQ;AACbC,QAAAA,KAAK,EAAEzB,UAAU,GAAG,iCAAiC,GAAG,8BAA+B;AACvF0B,QAAAA,MAAM,EAAC,QAAQ;AAAAX,QAAAA,QAAA,EAEdpB,KAAAA;AAAK,OACF,CAAC,CAAA;KACJ,CAAC,EAELC,QAAQ,CAAA;AAAA,GACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAEK+B,IAAAA,WAAW,gBAAGC,UAAU,CAC5B,UAAAC,KAAA,EAA8CC,GAAG,EAAyB;AAAA,EAAA,IAAvEnC,KAAK,GAAAkC,KAAA,CAALlC,KAAK;IAAED,KAAK,GAAAmC,KAAA,CAALnC,KAAK;IAAEE,QAAQ,GAAAiC,KAAA,CAARjC,QAAQ;IAAEmC,MAAM,GAAAF,KAAA,CAANE,MAAM;AAAK9B,IAAAA,IAAI,GAAAC,wBAAA,CAAA2B,KAAA,EAAAG,UAAA,CAAA,CAAA;AACxC,EAAA,IAAAC,qBAAA,GAAgDC,0BAA0B,EAAE;IAApEC,oBAAoB,GAAAF,qBAAA,CAApBE,oBAAoB;IAAErC,aAAa,GAAAmC,qBAAA,CAAbnC,aAAa,CAAA;AAE3C,EAAA,IAAMsC,qBAAqB,GAAGD,oBAAoB,CAACE,QAAQ,CAAC3C,KAAK,CAAC,CAAA;EAClE,oBACEuB,GAAA,CAACqB,IAAI,EAAAnB,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACHoB,IAAAA,OAAO,EAAC,WAAW;AACnBC,IAAAA,EAAE,EAAC,OAAO;AACVC,IAAAA,kBAAkB,EAAE9C,KAAM;AAC1B+C,IAAAA,YAAY,EAAC,QAAQ;AACrBC,IAAAA,SAAS,EAAC,MAAM;AAChB3C,IAAAA,UAAU,EAAEoC,qBAAsB;AAClCN,IAAAA,GAAG,EAAEA,GAAAA;AACL;AAAA;AACAc,IAAAA,WAAW,EAAC,WAAA;AAAW,GAAA,EACnBxB,sBAAsB,CAACnB,IAAI,CAAC,CAAA,EAC5B4C,aAAa,CAAC;AAAEd,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAhB,QAAA,eAE7BE,GAAA,CAAC6B,QAAQ,EAAA;AAAA/B,MAAAA,QAAA,eACPE,GAAA,CAACzB,kBAAkB,EAAA2B,aAAA,CAAA;AACjBzB,QAAAA,KAAK,EAAEA,KAAM;AACbC,QAAAA,KAAK,EAAEA,KAAM;AACbC,QAAAA,QAAQ,EAAEA,QAAS;AACnBE,QAAAA,aAAa,EAAEA,aAAc;AAC7BE,QAAAA,UAAU,EAAEoC,qBAAAA;AAAsB,OAAA,EAC9BnC,IAAI,CACT,CAAA;KACO,CAAA;AAAC,GAAA,CACP,CAAC,CAAA;AAEX,CACF;;;;"}

package/build/lib/web/development/components/Toast/Toast.web.js CHANGED Viewed

@@ -69,8 +69,8 @@ var Toast = function Toast(_ref2) {
     id = _ref2.id;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
-  var Icon = leading || iconMap[color];
   var isPromotional = type === 'promotional';
+  var Icon = isPromotional ? leading : leading || iconMap[color];
   var actionButton = action ? /*#__PURE__*/jsx(Box, {
     children: /*#__PURE__*/jsx(Button, {
       size: "xsmall",
@@ -112,6 +112,7 @@ var Toast = function Toast(_ref2) {
       display: "flex",
       alignItems: "center",
       alignSelf: isPromotional ? 'start' : 'center',
+      marginTop: isPromotional ? 'spacing.1' : 'spacing.0',
       children: /*#__PURE__*/jsx(Icon, {
         color: isPromotional ? 'surface.icon.gray.normal' : 'surface.icon.staticWhite.normal'
       })

package/build/lib/web/development/components/Toast/Toast.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.web.js","sources":["../../../../../../src/components/Toast/Toast.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing /\n/ eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport toast from 'react-hot-toast';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { ToastProps } from './types';\nimport { Box } from '~components/Box';\nimport { Button } from '~components/Button';\nimport { IconButton } from '~components/Button/IconButton';\nimport {\n AlertOctagonIcon,\n AlertTriangleIcon,\n CheckCircleIcon,\n CloseIcon,\n InfoIcon,\n} from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeMotionTime, useTheme } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { MAKE_ANALYTICS_CONSTANTS } from '~utils/makeAnalyticsAttribute/makeAnalyticsConstants';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst iconMap = {\n positive: CheckCircleIcon,\n negative: AlertOctagonIcon,\n information: InfoIcon,\n neutral: InfoIcon,\n notice: AlertTriangleIcon,\n};\n\nconst borderColorMap = {\n positive: 'feedback.border.positive.intense',\n negative: 'feedback.border.negative.intense',\n notice: 'feedback.border.notice.intense',\n information: 'feedback.border.information.intense',\n neutral: 'feedback.border.neutral.intense',\n} as const;\n\nconst slideIn = keyframes`\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst slideOut = keyframes`\n from {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(100%);\n }\n`;\n\nconst AnimatedFade = styled(BaseBox)<{\n animationType: FlattenSimpleInterpolation \| null;\n toastBorderColor: string;\n}>(({ animationType, toastBorderColor }) => {\n return css`\n overflow: hidden;\n border: 1px solid ${toastBorderColor};\n ${animationType}\n `;\n});\n\nconst Toast = ({\n type,\n color = 'neutral',\n leading,\n action,\n content,\n onDismissButtonClick,\n isVisible,\n id,\n}: ToastProps & {\n isVisible?: boolean;\n}): React.ReactElement => {\n const { theme } = useTheme();\n const Icon = leading \|\| iconMap[color];\n const isPromotional = type === 'promotional';\n const actionButton = action ? (\n <Box>\n <Button\n size=\"xsmall\"\n variant={isPromotional ? 'secondary' : 'tertiary'}\n color={isPromotional ? 'primary' : 'white'}\n onClick={(event) => {\n event.stopPropagation();\n action?.onClick?.({ event: event as never, toastId: id! });\n }}\n isLoading={action?.isLoading}\n data-analytics-name={MAKE_ANALYTICS_CONSTANTS.TOAST.ACTION_BUTTON}\n >\n {action?.text}\n </Button>\n </Box>\n ) : null;\n\n const enter = css`\n opacity: 0;\n animation: ${slideIn} ${makeMotionTime(theme.motion.duration.gentle)}\n ${castWebType(theme.motion.easing.entrance)} forwards;\n `;\n\n const exit = css`\n opacity: 1;\n animation: ${slideOut} ${makeMotionTime(theme.motion.duration.moderate)}\n ${castWebType(theme.motion.easing.exit)} forwards;\n `;\n\n return (\n <AnimatedFade\n {...makeAccessible({ role: 'status', liveRegion: 'polite' })}\n {...metaAttribute({ name: MetaConstants.Toast })}\n toastBorderColor={getIn(\n theme.colors,\n isPromotional ? 'surface.border.gray.muted' : borderColorMap[color],\n )}\n animationType={isVisible ? enter : exit}\n width=\"100%\"\n display=\"flex\"\n gap=\"spacing.3\"\n paddingX=\"spacing.4\"\n paddingY={isPromotional ? 'spacing.4' : 'spacing.3'}\n borderRadius=\"medium\"\n alignItems=\"center\"\n backgroundColor={\n isPromotional ? 'surface.background.gray.intense' : `feedback.background.${color}.intense`\n }\n >\n {Icon ? (\n <Box\n flexShrink={0}\n display=\"flex\"\n alignItems=\"center\"\n alignSelf={isPromotional ? 'start' : 'center'}\n >\n <Icon\n color={isPromotional ? 'surface.icon.gray.normal' : 'surface.icon.staticWhite.normal'}\n />\n </Box>\n ) : null}\n <Box display=\"flex\" flexDirection=\"column\" gap=\"spacing.3\">\n {isPromotional ? (\n content\n ) : (\n <Text as=\"span\" size=\"small\" color=\"surface.text.staticWhite.normal\">\n {content}\n </Text>\n )}\n {isPromotional && actionButton}\n </Box>\n <Box alignSelf=\"start\" marginLeft=\"auto\" display=\"flex\" gap=\"spacing.4\">\n {!isPromotional && actionButton}\n <IconButton\n emphasis={isPromotional ? 'intense' : 'subtle'}\n accessibilityLabel=\"Dismiss toast\"\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onDismissButtonClick?.({ event, toastId: id! });\n toast.dismiss(id);\n }}\n icon={CloseIcon}\n />\n </Box>\n </AnimatedFade>\n );\n};\n\nexport { Toast };\n"],"names":["iconMap","positive","CheckCircleIcon","negative","AlertOctagonIcon","information","InfoIcon","neutral","notice","AlertTriangleIcon","borderColorMap","slideIn","keyframes","slideOut","AnimatedFade","styled","BaseBox","withConfig","displayName","componentId","_ref","animationType","toastBorderColor","css","Toast","_ref2","type","_ref2$color","color","leading","action","content","onDismissButtonClick","isVisible","id","_useTheme","useTheme","theme","Icon","isPromotional","actionButton","_jsx","Box","children","Button","size","variant","onClick","event","_action$onClick","stopPropagation","call","toastId","isLoading","MAKE_ANALYTICS_CONSTANTS","TOAST","ACTION_BUTTON","text","enter","makeMotionTime","motion","duration","gentle","castWebType","easing","entrance","exit","moderate","_jsxs","_objectSpread","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","getIn","colors","width","display","gap","paddingX","paddingY","borderRadius","alignItems","backgroundColor","concat","flexShrink","alignSelf","flexDirection","Text","as","marginLeft","IconButton","emphasis","accessibilityLabel","toast","dismiss","icon","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAMA,OAAO,GAAG;AACdC,EAAAA,QAAQ,EAAEC,eAAe;AACzBC,EAAAA,QAAQ,EAAEC,gBAAgB;AAC1BC,EAAAA,WAAW,EAAEC,QAAQ;AACrBC,EAAAA,OAAO,EAAED,QAAQ;AACjBE,EAAAA,MAAM,EAAEC,iBAAAA;AACV,CAAC,CAAA;AAED,IAAMC,cAAc,GAAG;AACrBT,EAAAA,QAAQ,EAAE,kCAAkC;AAC5CE,EAAAA,QAAQ,EAAE,kCAAkC;AAC5CK,EAAAA,MAAM,EAAE,gCAAgC;AACxCH,EAAAA,WAAW,EAAE,qCAAqC;AAClDE,EAAAA,OAAO,EAAE,iCAAA;AACX,CAAU,CAAA;AAEV,IAAMI,OAAO,gBAAGC,SAAS,CAUxB,CAAA,mFAAA,CAAA,CAAA,CAAA;AAED,IAAMC,QAAQ,gBAAGD,SAAS,CAUzB,CAAA,mFAAA,CAAA,CAAA,CAAA;AAED,IAAME,YAAY,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAGjC,CAAA,CAAA,UAAAC,IAAA,EAAyC;AAAA,EAAA,IAAtCC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IAAEC,gBAAgB,GAAAF,IAAA,CAAhBE,gBAAgB,CAAA;AACnC,EAAA,OAAOC,GAAG,CAAA,CAAA,mCAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAEYD,gBAAgB,EAClCD,aAAa,CAAA,CAAA;AAEnB,CAAC,CAAC,CAAA;AAEF,IAAMG,KAAK,GAAG,SAARA,KAAKA,CAAAC,KAAA,EAWe;AAAA,EAAA,IAVxBC,IAAI,GAAAD,KAAA,CAAJC,IAAI;IAAAC,WAAA,GAAAF,KAAA,CACJG,KAAK;AAALA,IAAAA,KAAK,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,WAAA;IACjBE,OAAO,GAAAJ,KAAA,CAAPI,OAAO;IACPC,MAAM,GAAAL,KAAA,CAANK,MAAM;IACNC,OAAO,GAAAN,KAAA,CAAPM,OAAO;IACPC,oBAAoB,GAAAP,KAAA,CAApBO,oBAAoB;IACpBC,SAAS,GAAAR,KAAA,CAATQ,SAAS;IACTC,EAAE,GAAAT,KAAA,CAAFS,EAAE,CAAA;AAIF,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,IAAI,GAAGT,OAAO,IAAI7B,OAAO,CAAC4B,KAAK,CAAC,CAAA;AACtC,EAAA,IAAMW,aAAa,GAAGb,IAAI,KAAK,aAAa,CAAA;AAC5C,EAAA,IAAMc,YAAY,GAAGV,MAAM,gBACzBW,GAAA,CAACC,GAAG,EAAA;IAAAC,QAAA,eACFF,GAAA,CAACG,MAAM,EAAA;AACLC,MAAAA,IAAI,EAAC,QAAQ;AACbC,MAAAA,OAAO,EAAEP,aAAa,GAAG,WAAW,GAAG,UAAW;AAClDX,MAAAA,KAAK,EAAEW,aAAa,GAAG,SAAS,GAAG,OAAQ;AAC3CQ,MAAAA,OAAO,EAAE,SAAAA,OAACC,CAAAA,KAAK,EAAK;AAAA,QAAA,IAAAC,eAAA,CAAA;QAClBD,KAAK,CAACE,eAAe,EAAE,CAAA;AACvBpB,QAAAA,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAAmB,eAAA,GAANnB,MAAM,CAAEiB,OAAO,MAAAE,IAAAA,IAAAA,eAAA,uBAAfA,eAAA,CAAAE,IAAA,CAAArB,MAAM,EAAY;AAAEkB,UAAAA,KAAK,EAAEA,KAAc;AAAEI,UAAAA,OAAO,EAAElB,EAAAA;AAAI,SAAC,CAAC,CAAA;OAC1D;AACFmB,MAAAA,SAAS,EAAEvB,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEuB,SAAU;AAC7B,MAAA,qBAAA,EAAqBC,wBAAwB,CAACC,KAAK,CAACC,aAAc;AAAAb,MAAAA,QAAA,EAEjEb,MAAM,KAAA,IAAA,IAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAE2B,IAAAA;KACH,CAAA;GACL,CAAC,GACJ,IAAI,CAAA;EAER,IAAMC,KAAK,gBAAGnC,GAAG,CAEFZ,CAAAA,sBAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,YAAAA,CAAAA,EAAAA,OAAO,EAAIgD,cAAc,CAACtB,KAAK,CAACuB,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,EAChEC,WAAW,CAAC1B,KAAK,CAACuB,MAAM,CAACI,MAAM,CAACC,QAAQ,CAAC,CAC9C,CAAA;EAED,IAAMC,IAAI,gBAAG3C,GAAG,CAEDV,CAAAA,sBAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,YAAAA,CAAAA,EAAAA,QAAQ,EAAI8C,cAAc,CAACtB,KAAK,CAACuB,MAAM,CAACC,QAAQ,CAACM,QAAQ,CAAC,EACnEJ,WAAW,CAAC1B,KAAK,CAACuB,MAAM,CAACI,MAAM,CAACE,IAAI,CAAC,CAC1C,CAAA;EAED,oBACEE,IAAA,CAACtD,YAAY,EAAAuD,aAAA,CAAAA,aAAA,CAAAA,aAAA,CACPC,EAAAA,EAAAA,cAAc,CAAC;AAAEC,IAAAA,IAAI,EAAE,QAAQ;AAAEC,IAAAA,UAAU,EAAE,QAAA;GAAU,CAAC,CACxDC,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACnD,KAAAA;AAAM,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAChDF,IAAAA,gBAAgB,EAAEsD,KAAK,CACrBvC,KAAK,CAACwC,MAAM,EACZtC,aAAa,GAAG,2BAA2B,GAAG7B,cAAc,CAACkB,KAAK,CACpE,CAAE;AACFP,IAAAA,aAAa,EAAEY,SAAS,GAAGyB,KAAK,GAAGQ,IAAK;AACxCY,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,QAAQ,EAAC,WAAW;AACpBC,IAAAA,QAAQ,EAAE3C,aAAa,GAAG,WAAW,GAAG,WAAY;AACpD4C,IAAAA,YAAY,EAAC,QAAQ;AACrBC,IAAAA,UAAU,EAAC,QAAQ;IACnBC,eAAe,EACb9C,aAAa,GAAG,iCAAiC,0BAAA+C,MAAA,CAA0B1D,KAAK,EACjF,UAAA,CAAA;AAAAe,IAAAA,QAAA,EAEAL,CAAAA,IAAI,gBACHG,GAAA,CAACC,GAAG,EAAA;AACF6C,MAAAA,UAAU,EAAE,CAAE;AACdR,MAAAA,OAAO,EAAC,MAAM;AACdK,MAAAA,UAAU,EAAC,QAAQ;AACnBI,MAAAA,SAAS,EAAEjD,aAAa,GAAG,OAAO,GAAG,QAAS;MAAAI,QAAA,eAE9CF,GAAA,CAACH,IAAI,EAAA;AACHV,QAAAA,KAAK,EAAEW,aAAa,GAAG,0BAA0B,GAAG,iCAAA;OACrD,CAAA;AAAC,KACC,CAAC,GACJ,IAAI,eACR6B,IAAA,CAAC1B,GAAG,EAAA;AAACqC,MAAAA,OAAO,EAAC,MAAM;AAACU,MAAAA,aAAa,EAAC,QAAQ;AAACT,MAAAA,GAAG,EAAC,WAAW;AAAArC,MAAAA,QAAA,GACvDJ,aAAa,GACZR,OAAO,gBAEPU,GAAA,CAACiD,IAAI,EAAA;AAACC,QAAAA,EAAE,EAAC,MAAM;AAAC9C,QAAAA,IAAI,EAAC,OAAO;AAACjB,QAAAA,KAAK,EAAC,iCAAiC;AAAAe,QAAAA,QAAA,EACjEZ,OAAAA;AAAO,OACJ,CACP,EACAQ,aAAa,IAAIC,YAAY,CAAA;AAAA,KAC3B,CAAC,eACN4B,IAAA,CAAC1B,GAAG,EAAA;AAAC8C,MAAAA,SAAS,EAAC,OAAO;AAACI,MAAAA,UAAU,EAAC,MAAM;AAACb,MAAAA,OAAO,EAAC,MAAM;AAACC,MAAAA,GAAG,EAAC,WAAW;MAAArC,QAAA,EAAA,CACpE,CAACJ,aAAa,IAAIC,YAAY,eAC/BC,GAAA,CAACoD,UAAU,EAAA;AACTC,QAAAA,QAAQ,EAAEvD,aAAa,GAAG,SAAS,GAAG,QAAS;AAC/CwD,QAAAA,kBAAkB,EAAC,eAAe;AAClChD,QAAAA,OAAO,EAAE,SAAAA,OAACC,CAAAA,KAA0C,EAAK;UACvDA,KAAK,CAACE,eAAe,EAAE,CAAA;AACvBlB,UAAAA,oBAAoB,KAApBA,IAAAA,IAAAA,oBAAoB,KAApBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,oBAAoB,CAAG;AAAEgB,YAAAA,KAAK,EAALA,KAAK;AAAEI,YAAAA,OAAO,EAAElB,EAAAA;AAAI,WAAC,CAAC,CAAA;AAC/C8D,UAAAA,KAAK,CAACC,OAAO,CAAC/D,EAAE,CAAC,CAAA;SACjB;AACFgE,QAAAA,IAAI,EAAEC,SAAAA;AAAU,OACjB,CAAC,CAAA;AAAA,KACC,CAAC,CAAA;AAAA,GAAA,CACM,CAAC,CAAA;AAEnB;;;;"}
1	+ {"version":3,"file":"Toast.web.js","sources":["../../../../../../src/components/Toast/Toast.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing /\n/ eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport toast from 'react-hot-toast';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { ToastProps } from './types';\nimport { Box } from '~components/Box';\nimport { Button } from '~components/Button';\nimport { IconButton } from '~components/Button/IconButton';\nimport {\n AlertOctagonIcon,\n AlertTriangleIcon,\n CheckCircleIcon,\n CloseIcon,\n InfoIcon,\n} from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeMotionTime, useTheme } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { MAKE_ANALYTICS_CONSTANTS } from '~utils/makeAnalyticsAttribute/makeAnalyticsConstants';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst iconMap = {\n positive: CheckCircleIcon,\n negative: AlertOctagonIcon,\n information: InfoIcon,\n neutral: InfoIcon,\n notice: AlertTriangleIcon,\n};\n\nconst borderColorMap = {\n positive: 'feedback.border.positive.intense',\n negative: 'feedback.border.negative.intense',\n notice: 'feedback.border.notice.intense',\n information: 'feedback.border.information.intense',\n neutral: 'feedback.border.neutral.intense',\n} as const;\n\nconst slideIn = keyframes`\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst slideOut = keyframes`\n from {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(100%);\n }\n`;\n\nconst AnimatedFade = styled(BaseBox)<{\n animationType: FlattenSimpleInterpolation \| null;\n toastBorderColor: string;\n}>(({ animationType, toastBorderColor }) => {\n return css`\n overflow: hidden;\n border: 1px solid ${toastBorderColor};\n ${animationType}\n `;\n});\n\nconst Toast = ({\n type,\n color = 'neutral',\n leading,\n action,\n content,\n onDismissButtonClick,\n isVisible,\n id,\n}: ToastProps & {\n isVisible?: boolean;\n}): React.ReactElement => {\n const { theme } = useTheme();\n const isPromotional = type === 'promotional';\n const Icon = isPromotional ? leading : leading \|\| iconMap[color];\n\n const actionButton = action ? (\n <Box>\n <Button\n size=\"xsmall\"\n variant={isPromotional ? 'secondary' : 'tertiary'}\n color={isPromotional ? 'primary' : 'white'}\n onClick={(event) => {\n event.stopPropagation();\n action?.onClick?.({ event: event as never, toastId: id! });\n }}\n isLoading={action?.isLoading}\n data-analytics-name={MAKE_ANALYTICS_CONSTANTS.TOAST.ACTION_BUTTON}\n >\n {action?.text}\n </Button>\n </Box>\n ) : null;\n\n const enter = css`\n opacity: 0;\n animation: ${slideIn} ${makeMotionTime(theme.motion.duration.gentle)}\n ${castWebType(theme.motion.easing.entrance)} forwards;\n `;\n\n const exit = css`\n opacity: 1;\n animation: ${slideOut} ${makeMotionTime(theme.motion.duration.moderate)}\n ${castWebType(theme.motion.easing.exit)} forwards;\n `;\n\n return (\n <AnimatedFade\n {...makeAccessible({ role: 'status', liveRegion: 'polite' })}\n {...metaAttribute({ name: MetaConstants.Toast })}\n toastBorderColor={getIn(\n theme.colors,\n isPromotional ? 'surface.border.gray.muted' : borderColorMap[color],\n )}\n animationType={isVisible ? enter : exit}\n width=\"100%\"\n display=\"flex\"\n gap=\"spacing.3\"\n paddingX=\"spacing.4\"\n paddingY={isPromotional ? 'spacing.4' : 'spacing.3'}\n borderRadius=\"medium\"\n alignItems=\"center\"\n backgroundColor={\n isPromotional ? 'surface.background.gray.intense' : `feedback.background.${color}.intense`\n }\n >\n {Icon ? (\n <Box\n flexShrink={0}\n display=\"flex\"\n alignItems=\"center\"\n alignSelf={isPromotional ? 'start' : 'center'}\n marginTop={isPromotional ? 'spacing.1' : 'spacing.0'}\n >\n <Icon\n color={isPromotional ? 'surface.icon.gray.normal' : 'surface.icon.staticWhite.normal'}\n />\n </Box>\n ) : null}\n <Box display=\"flex\" flexDirection=\"column\" gap=\"spacing.3\">\n {isPromotional ? (\n content\n ) : (\n <Text as=\"span\" size=\"small\" color=\"surface.text.staticWhite.normal\">\n {content}\n </Text>\n )}\n {isPromotional && actionButton}\n </Box>\n <Box alignSelf=\"start\" marginLeft=\"auto\" display=\"flex\" gap=\"spacing.4\">\n {!isPromotional && actionButton}\n <IconButton\n emphasis={isPromotional ? 'intense' : 'subtle'}\n accessibilityLabel=\"Dismiss toast\"\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onDismissButtonClick?.({ event, toastId: id! });\n toast.dismiss(id);\n }}\n icon={CloseIcon}\n />\n </Box>\n </AnimatedFade>\n );\n};\n\nexport { Toast };\n"],"names":["iconMap","positive","CheckCircleIcon","negative","AlertOctagonIcon","information","InfoIcon","neutral","notice","AlertTriangleIcon","borderColorMap","slideIn","keyframes","slideOut","AnimatedFade","styled","BaseBox","withConfig","displayName","componentId","_ref","animationType","toastBorderColor","css","Toast","_ref2","type","_ref2$color","color","leading","action","content","onDismissButtonClick","isVisible","id","_useTheme","useTheme","theme","isPromotional","Icon","actionButton","_jsx","Box","children","Button","size","variant","onClick","event","_action$onClick","stopPropagation","call","toastId","isLoading","MAKE_ANALYTICS_CONSTANTS","TOAST","ACTION_BUTTON","text","enter","makeMotionTime","motion","duration","gentle","castWebType","easing","entrance","exit","moderate","_jsxs","_objectSpread","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","getIn","colors","width","display","gap","paddingX","paddingY","borderRadius","alignItems","backgroundColor","concat","flexShrink","alignSelf","marginTop","flexDirection","Text","as","marginLeft","IconButton","emphasis","accessibilityLabel","toast","dismiss","icon","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAMA,OAAO,GAAG;AACdC,EAAAA,QAAQ,EAAEC,eAAe;AACzBC,EAAAA,QAAQ,EAAEC,gBAAgB;AAC1BC,EAAAA,WAAW,EAAEC,QAAQ;AACrBC,EAAAA,OAAO,EAAED,QAAQ;AACjBE,EAAAA,MAAM,EAAEC,iBAAAA;AACV,CAAC,CAAA;AAED,IAAMC,cAAc,GAAG;AACrBT,EAAAA,QAAQ,EAAE,kCAAkC;AAC5CE,EAAAA,QAAQ,EAAE,kCAAkC;AAC5CK,EAAAA,MAAM,EAAE,gCAAgC;AACxCH,EAAAA,WAAW,EAAE,qCAAqC;AAClDE,EAAAA,OAAO,EAAE,iCAAA;AACX,CAAU,CAAA;AAEV,IAAMI,OAAO,gBAAGC,SAAS,CAUxB,CAAA,mFAAA,CAAA,CAAA,CAAA;AAED,IAAMC,QAAQ,gBAAGD,SAAS,CAUzB,CAAA,mFAAA,CAAA,CAAA,CAAA;AAED,IAAME,YAAY,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAGjC,CAAA,CAAA,UAAAC,IAAA,EAAyC;AAAA,EAAA,IAAtCC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IAAEC,gBAAgB,GAAAF,IAAA,CAAhBE,gBAAgB,CAAA;AACnC,EAAA,OAAOC,GAAG,CAAA,CAAA,mCAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAEYD,gBAAgB,EAClCD,aAAa,CAAA,CAAA;AAEnB,CAAC,CAAC,CAAA;AAEF,IAAMG,KAAK,GAAG,SAARA,KAAKA,CAAAC,KAAA,EAWe;AAAA,EAAA,IAVxBC,IAAI,GAAAD,KAAA,CAAJC,IAAI;IAAAC,WAAA,GAAAF,KAAA,CACJG,KAAK;AAALA,IAAAA,KAAK,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,WAAA;IACjBE,OAAO,GAAAJ,KAAA,CAAPI,OAAO;IACPC,MAAM,GAAAL,KAAA,CAANK,MAAM;IACNC,OAAO,GAAAN,KAAA,CAAPM,OAAO;IACPC,oBAAoB,GAAAP,KAAA,CAApBO,oBAAoB;IACpBC,SAAS,GAAAR,KAAA,CAATQ,SAAS;IACTC,EAAE,GAAAT,KAAA,CAAFS,EAAE,CAAA;AAIF,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,aAAa,GAAGZ,IAAI,KAAK,aAAa,CAAA;EAC5C,IAAMa,IAAI,GAAGD,aAAa,GAAGT,OAAO,GAAGA,OAAO,IAAI7B,OAAO,CAAC4B,KAAK,CAAC,CAAA;AAEhE,EAAA,IAAMY,YAAY,GAAGV,MAAM,gBACzBW,GAAA,CAACC,GAAG,EAAA;IAAAC,QAAA,eACFF,GAAA,CAACG,MAAM,EAAA;AACLC,MAAAA,IAAI,EAAC,QAAQ;AACbC,MAAAA,OAAO,EAAER,aAAa,GAAG,WAAW,GAAG,UAAW;AAClDV,MAAAA,KAAK,EAAEU,aAAa,GAAG,SAAS,GAAG,OAAQ;AAC3CS,MAAAA,OAAO,EAAE,SAAAA,OAACC,CAAAA,KAAK,EAAK;AAAA,QAAA,IAAAC,eAAA,CAAA;QAClBD,KAAK,CAACE,eAAe,EAAE,CAAA;AACvBpB,QAAAA,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAAmB,eAAA,GAANnB,MAAM,CAAEiB,OAAO,MAAAE,IAAAA,IAAAA,eAAA,uBAAfA,eAAA,CAAAE,IAAA,CAAArB,MAAM,EAAY;AAAEkB,UAAAA,KAAK,EAAEA,KAAc;AAAEI,UAAAA,OAAO,EAAElB,EAAAA;AAAI,SAAC,CAAC,CAAA;OAC1D;AACFmB,MAAAA,SAAS,EAAEvB,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEuB,SAAU;AAC7B,MAAA,qBAAA,EAAqBC,wBAAwB,CAACC,KAAK,CAACC,aAAc;AAAAb,MAAAA,QAAA,EAEjEb,MAAM,KAAA,IAAA,IAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAE2B,IAAAA;KACH,CAAA;GACL,CAAC,GACJ,IAAI,CAAA;EAER,IAAMC,KAAK,gBAAGnC,GAAG,CAEFZ,CAAAA,sBAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,YAAAA,CAAAA,EAAAA,OAAO,EAAIgD,cAAc,CAACtB,KAAK,CAACuB,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,EAChEC,WAAW,CAAC1B,KAAK,CAACuB,MAAM,CAACI,MAAM,CAACC,QAAQ,CAAC,CAC9C,CAAA;EAED,IAAMC,IAAI,gBAAG3C,GAAG,CAEDV,CAAAA,sBAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,YAAAA,CAAAA,EAAAA,QAAQ,EAAI8C,cAAc,CAACtB,KAAK,CAACuB,MAAM,CAACC,QAAQ,CAACM,QAAQ,CAAC,EACnEJ,WAAW,CAAC1B,KAAK,CAACuB,MAAM,CAACI,MAAM,CAACE,IAAI,CAAC,CAC1C,CAAA;EAED,oBACEE,IAAA,CAACtD,YAAY,EAAAuD,aAAA,CAAAA,aAAA,CAAAA,aAAA,CACPC,EAAAA,EAAAA,cAAc,CAAC;AAAEC,IAAAA,IAAI,EAAE,QAAQ;AAAEC,IAAAA,UAAU,EAAE,QAAA;GAAU,CAAC,CACxDC,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACnD,KAAAA;AAAM,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAChDF,IAAAA,gBAAgB,EAAEsD,KAAK,CACrBvC,KAAK,CAACwC,MAAM,EACZvC,aAAa,GAAG,2BAA2B,GAAG5B,cAAc,CAACkB,KAAK,CACpE,CAAE;AACFP,IAAAA,aAAa,EAAEY,SAAS,GAAGyB,KAAK,GAAGQ,IAAK;AACxCY,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,QAAQ,EAAC,WAAW;AACpBC,IAAAA,QAAQ,EAAE5C,aAAa,GAAG,WAAW,GAAG,WAAY;AACpD6C,IAAAA,YAAY,EAAC,QAAQ;AACrBC,IAAAA,UAAU,EAAC,QAAQ;IACnBC,eAAe,EACb/C,aAAa,GAAG,iCAAiC,0BAAAgD,MAAA,CAA0B1D,KAAK,EACjF,UAAA,CAAA;AAAAe,IAAAA,QAAA,EAEAJ,CAAAA,IAAI,gBACHE,GAAA,CAACC,GAAG,EAAA;AACF6C,MAAAA,UAAU,EAAE,CAAE;AACdR,MAAAA,OAAO,EAAC,MAAM;AACdK,MAAAA,UAAU,EAAC,QAAQ;AACnBI,MAAAA,SAAS,EAAElD,aAAa,GAAG,OAAO,GAAG,QAAS;AAC9CmD,MAAAA,SAAS,EAAEnD,aAAa,GAAG,WAAW,GAAG,WAAY;MAAAK,QAAA,eAErDF,GAAA,CAACF,IAAI,EAAA;AACHX,QAAAA,KAAK,EAAEU,aAAa,GAAG,0BAA0B,GAAG,iCAAA;OACrD,CAAA;AAAC,KACC,CAAC,GACJ,IAAI,eACR8B,IAAA,CAAC1B,GAAG,EAAA;AAACqC,MAAAA,OAAO,EAAC,MAAM;AAACW,MAAAA,aAAa,EAAC,QAAQ;AAACV,MAAAA,GAAG,EAAC,WAAW;AAAArC,MAAAA,QAAA,GACvDL,aAAa,GACZP,OAAO,gBAEPU,GAAA,CAACkD,IAAI,EAAA;AAACC,QAAAA,EAAE,EAAC,MAAM;AAAC/C,QAAAA,IAAI,EAAC,OAAO;AAACjB,QAAAA,KAAK,EAAC,iCAAiC;AAAAe,QAAAA,QAAA,EACjEZ,OAAAA;AAAO,OACJ,CACP,EACAO,aAAa,IAAIE,YAAY,CAAA;AAAA,KAC3B,CAAC,eACN4B,IAAA,CAAC1B,GAAG,EAAA;AAAC8C,MAAAA,SAAS,EAAC,OAAO;AAACK,MAAAA,UAAU,EAAC,MAAM;AAACd,MAAAA,OAAO,EAAC,MAAM;AAACC,MAAAA,GAAG,EAAC,WAAW;MAAArC,QAAA,EAAA,CACpE,CAACL,aAAa,IAAIE,YAAY,eAC/BC,GAAA,CAACqD,UAAU,EAAA;AACTC,QAAAA,QAAQ,EAAEzD,aAAa,GAAG,SAAS,GAAG,QAAS;AAC/C0D,QAAAA,kBAAkB,EAAC,eAAe;AAClCjD,QAAAA,OAAO,EAAE,SAAAA,OAACC,CAAAA,KAA0C,EAAK;UACvDA,KAAK,CAACE,eAAe,EAAE,CAAA;AACvBlB,UAAAA,oBAAoB,KAApBA,IAAAA,IAAAA,oBAAoB,KAApBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,oBAAoB,CAAG;AAAEgB,YAAAA,KAAK,EAALA,KAAK;AAAEI,YAAAA,OAAO,EAAElB,EAAAA;AAAI,WAAC,CAAC,CAAA;AAC/C+D,UAAAA,KAAK,CAACC,OAAO,CAAChE,EAAE,CAAC,CAAA;SACjB;AACFiE,QAAAA,IAAI,EAAEC,SAAAA;AAAU,OACjB,CAAC,CAAA;AAAA,KACC,CAAC,CAAA;AAAA,GAAA,CACM,CAAC,CAAA;AAEnB;;;;"}

package/build/lib/web/development/components/VisuallyHidden/ScreenReaderStyles.js CHANGED Viewed

@@ -3,17 +3,15 @@
  * https://webaim.org/techniques/css/invisiblecontent/#techniques
  */
 var screenReaderStyles = {
-  border: 0,
-  clip: 'rect(0 0 0 0)',
-  clipPath: 'inset(50%)',
-  height: "1px",
-  margin: '0 -1px -1px 0',
+  border: '0',
+  clip: 'rect(0, 0, 0, 0)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  padding: '0',
   overflow: 'hidden',
-  padding: 0,
-  position: 'absolute',
-  width: "1px",
-  left: '-10000px',
   whiteSpace: 'nowrap',
+  position: 'absolute',
   wordWrap: 'normal'
 };

package/build/lib/web/development/components/VisuallyHidden/ScreenReaderStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/*\n Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n border: 0,\n clip: 'rect(0 0 0 0)',\n ~~clipPath~~: '~~inset(50%)~~',\n ~~height~~: `1px~~`,\~~n margin: '0 -1px ~~-1px 0~~',\n ~~overflow~~: '~~hidden~~',\n ~~padding~~: ~~0,\n position:~~ '~~absolute~~',\n ~~width~~: ~~`1px`,\n left:~~ '~~-10000px~~',\n ~~whiteSpace~~: '~~nowrap~~',\n wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","~~clipPath~~","~~height~~","margin","~~overflow","~~padding","~~position~~","~~width~~","~~left~~","~~whiteSpace","~~wordWrap"],"mappings":"AAEA;AACA;AACA;AACA;AACA,IAAMA,kBAA6B,GAAG;AACpCC,EAAAA,MAAM,EAAE,~~CAAC~~;~~AACTC~~,EAAAA,IAAI,EAAE,~~eAAe~~;~~AACrBC~~,EAAAA,~~QAAQ~~,EAAE,~~YAAY~~;~~AACtBC,EAAAA,MAAM,EAAO,KAAA;~~AACbC,EAAAA,~~MAAM~~,EAAE,~~eAAe~~;~~AACvBC~~,EAAAA,~~QAAQ~~,EAAE,~~QAAQ~~;~~AAClBC~~,EAAAA,OAAO,EAAE,~~CAAC~~;~~AACVC~~,EAAAA,QAAQ,EAAE,~~UAAU~~;~~AACpBC~~,EAAAA,~~KAAK~~,~~EAAO~~,~~KAAA~~;~~AACZC~~,EAAAA,~~IAAI~~,EAAE,UAAU;~~AAChBC,EAAAA,UAAU,EAAE,QAAQ;~~AACpBC,EAAAA,QAAQ,EAAE,QAAA;AACZ;;;;"}
1	+ {"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/*\n Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n border: '0',\n clip: 'rect(0, 0, 0, 0)',\n height: '1px',\n width: '1px',\n margin: '-1px',\n padding: '0',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n position: 'absolute',\n wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","height","width","margin","padding","overflow","whiteSpace","position","wordWrap"],"mappings":"AAEA;AACA;AACA;AACA;AACA,IAAMA,kBAA6B,GAAG;AACpCC,EAAAA,MAAM,EAAE,GAAG;AACXC,EAAAA,IAAI,EAAE,kBAAkB;AACxBC,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,MAAM;AACdC,EAAAA,OAAO,EAAE,GAAG;AACZC,EAAAA,QAAQ,EAAE,QAAQ;AAClBC,EAAAA,UAAU,EAAE,QAAQ;AACpBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,QAAQ,EAAE,QAAA;AACZ;;;;"}

package/build/lib/web/production/components/ListView/ListViewFilters.web.js CHANGED Viewed

@@ -20,7 +20,6 @@ import { msToSeconds } from '../../utils/msToSeconds.js';
 import '../BladeProvider/index.js';
 import { cssBezierToArray } from '../../utils/cssBezierToArray.js';
 import '../../utils/index.js';
-import '../Divider/index.js';
 import '../../utils/isValidAllowedChildren/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
@@ -31,7 +30,6 @@ import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { Box } from '../Box/Box.js';
-import { Divider } from '../Divider/Divider.js';
 import Button from '../Button/Button/Button.js';
 import FilterIcon from '../Icons/FilterIcon/FilterIcon.js';
 import { Counter } from '../Counter/Counter.js';
@@ -40,8 +38,11 @@ import { castWebType } from '../../utils/platform/castUtils.js';
 var _excluded = ["testID", "children", "quickFilters", "onSearchChange", "searchValue", "searchValuePlaceholder", "searchName", "showQuickFilters", "onShowQuickFiltersChange", "showFilters", "onShowFiltersChange", "onSearchClear", "selectedFiltersCount", "searchTrailing"];
 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 gradientOverlyContainerWidth = '21px'; // 20px + 1px divider width
-var gradientOverlyContainerHeight = '38px';
+var CHILDREN_COUNTER_WIDTH = 36;
+var GAP_BETWEEN_CHILDREN_AND_SEARCH = 12;
+var SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN = 8;
+var CHILDREN_TOTAL_WIDTH = CHILDREN_COUNTER_WIDTH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;
+var CHILDREN_WITH_SEARCH_WIDTH = CHILDREN_COUNTER_WIDTH + GAP_BETWEEN_CHILDREN_AND_SEARCH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;
 var StyledQuickFilterContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ListViewFiltersweb__StyledQuickFilterContainer",
   componentId: "igy2td-0"
@@ -55,40 +56,23 @@ var StyledQuickFilterContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   /* For Edge */
   msOverflowStyle: 'none'
 });
-var GradientOverlay = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ListViewFiltersweb__GradientOverlay",
-  componentId: "igy2td-1"
-})(["height:100%;width:20px;background:linear-gradient( 270deg,", " 0%,", " 100% );pointer-events:none;&::after{content:'';position:absolute;right:0;top:0;height:100%;width:1px;background-color:", ";}"], function (_ref) {
-  var gradientColorRight = _ref.gradientColorRight;
-  return gradientColorRight;
-}, function (_ref2) {
-  var gradientColorLeft = _ref2.gradientColorLeft;
-  return gradientColorLeft;
-}, function (_ref3) {
-  var dividerColor = _ref3.dividerColor;
-  return dividerColor;
-});
-var ListViewFilters = function ListViewFilters(_ref4) {
-  var testID = _ref4.testID,
-    children = _ref4.children,
-    quickFilters = _ref4.quickFilters,
-    onSearchChange = _ref4.onSearchChange,
-    searchValue = _ref4.searchValue,
-    searchValuePlaceholder = _ref4.searchValuePlaceholder,
-    searchName = _ref4.searchName,
-    showQuickFilters = _ref4.showQuickFilters,
-    onShowQuickFiltersChange = _ref4.onShowQuickFiltersChange,
-    showFiltersProp = _ref4.showFilters,
-    onShowFiltersChange = _ref4.onShowFiltersChange,
-    onSearchClear = _ref4.onSearchClear,
-    _ref4$selectedFilters = _ref4.selectedFiltersCount,
-    selectedFiltersCount = _ref4$selectedFilters === void 0 ? 0 : _ref4$selectedFilters,
-    searchTrailing = _ref4.searchTrailing,
-    rest = _objectWithoutProperties(_ref4, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    shouldShowDecorationInQuickFilters = _useState2[0],
-    setShouldShowDecorationInQuickFilters = _useState2[1];
+var ListViewFilters = function ListViewFilters(_ref) {
+  var testID = _ref.testID,
+    children = _ref.children,
+    quickFilters = _ref.quickFilters,
+    onSearchChange = _ref.onSearchChange,
+    searchValue = _ref.searchValue,
+    searchValuePlaceholder = _ref.searchValuePlaceholder,
+    searchName = _ref.searchName,
+    showQuickFilters = _ref.showQuickFilters,
+    onShowQuickFiltersChange = _ref.onShowQuickFiltersChange,
+    showFiltersProp = _ref.showFilters,
+    onShowFiltersChange = _ref.onShowFiltersChange,
+    onSearchClear = _ref.onSearchClear,
+    _ref$selectedFiltersC = _ref.selectedFiltersCount,
+    selectedFiltersCount = _ref$selectedFiltersC === void 0 ? 0 : _ref$selectedFiltersC,
+    searchTrailing = _ref.searchTrailing,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useControllableState = useControllableState({
       defaultValue: showQuickFilters !== null && showQuickFilters !== void 0 ? showQuickFilters : showFiltersProp,
       value: showQuickFilters !== null && showQuickFilters !== void 0 ? showQuickFilters : showFiltersProp,
@@ -97,26 +81,34 @@ var ListViewFilters = function ListViewFilters(_ref4) {
     _useControllableState2 = _slicedToArray(_useControllableState, 2),
     showFilters = _useControllableState2[0],
     setShowFilters = _useControllableState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    listViewSelectedFilters = _useState4[0],
-    setListViewSelectedFilters = _useState4[1];
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    listViewSelectedFilters = _useState2[0],
+    setListViewSelectedFilters = _useState2[1];
   var searchId = useId('search-input');
   var searchNameValue = searchName || searchId;
   var isMobile = useIsMobile();
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var showSearchInput = onSearchChange || onSearchClear || searchValuePlaceholder || searchName;
+  var isSearchTrailingDropDown = /*#__PURE__*/React__default.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';
   var getFilterContainerWidth = function getFilterContainerWidth() {
-    if (isMobile && Boolean(children)) {
-      return '88%';
+    var hasChildren = Boolean(children);
+    if (isMobile) {
+      return hasChildren ? '88%' : '100%';
+    }
+    var searchInputWidth = isSearchTrailingDropDown ? '280px' : '208px';
+    if (showSearchInput && hasChildren) {
+      return "calc(100% - ".concat(searchInputWidth, " - ").concat(CHILDREN_WITH_SEARCH_WIDTH, "px)");
     }
-    if (isMobile && !Boolean(children)) {
-      return '100%';
+    if (hasChildren) {
+      return "calc(100% - ".concat(CHILDREN_TOTAL_WIDTH, "px)");
     }
-    return 'auto';
+    if (showSearchInput) {
+      return "calc(100% - ".concat(searchInputWidth, " - ").concat(SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN, "px)");
+    }
+    return '100%';
   };
-  var isSearchTrailingDropDown = /*#__PURE__*/React__default.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';
   return /*#__PURE__*/jsxs(ListViewFiltersProvider, {
     value: {
       listViewSelectedFilters: listViewSelectedFilters,
@@ -128,9 +120,9 @@ var ListViewFilters = function ListViewFilters(_ref4) {
       value: searchValue,
       placeholder: searchValuePlaceholder,
       name: searchNameValue || searchId,
-      onChange: function onChange(_ref5) {
-        var name = _ref5.name,
-          value = _ref5.value;
+      onChange: function onChange(_ref2) {
+        var name = _ref2.name,
+          value = _ref2.value;
         return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
           name: name,
           value: value
@@ -145,37 +137,19 @@ var ListViewFilters = function ListViewFilters(_ref4) {
       })), makeAnalyticsAttribute(rest)), {}, {
         display: "flex",
         justifyContent: "space-between",
-        children: [/*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsx(Box, {
           position: "relative",
           display: "flex",
           flexDirection: "column",
           width: getFilterContainerWidth(),
-          marginRight: isMobile ? 'spacing.2' : 'spacing.0',
-          children: [/*#__PURE__*/jsx(StyledQuickFilterContainer, {
-            overflow: isMobile ? 'scroll' : 'visible',
-            width: isMobile ? '100%' : 'auto',
-            ref: function ref(node) {
-              if (node instanceof HTMLElement && quickFilters) {
-                setShouldShowDecorationInQuickFilters(node.scrollWidth > node.offsetWidth && Boolean(children));
-              }
-            },
+          marginRight: "spacing.3",
+          children: /*#__PURE__*/jsx(StyledQuickFilterContainer, {
+            overflow: "scroll",
+            width: "100%",
             paddingY: "spacing.4",
-            paddingLeft: isMobile ? 'spacing.2' : 'spacing.0',
+            paddingLeft: "spacing.2",
             children: quickFilters
-          }), isMobile && shouldShowDecorationInQuickFilters ? /*#__PURE__*/jsxs(Box, {
-            position: "absolute",
-            right: "-1px",
-            top: "spacing.4",
-            width: gradientOverlyContainerWidth,
-            height: gradientOverlyContainerHeight,
-            children: [/*#__PURE__*/jsx(GradientOverlay, {
-              gradientColorLeft: theme.colors.transparent,
-              gradientColorRight: theme.colors.surface.background.gray.intense,
-              dividerColor: theme.colors.surface.border.gray.normal
-            }), /*#__PURE__*/jsx(Divider, {
-              orientation: "vertical"
-            })]
-          }) : null]
+          })
         }), /*#__PURE__*/jsxs(BaseBox, {
           display: "flex",
           gap: "spacing.4",
@@ -213,9 +187,9 @@ var ListViewFilters = function ListViewFilters(_ref4) {
               value: searchValue,
               placeholder: searchValuePlaceholder,
               name: searchNameValue || searchId,
-              onChange: function onChange(_ref6) {
-                var name = _ref6.name,
-                  value = _ref6.value;
+              onChange: function onChange(_ref3) {
+                var name = _ref3.name,
+                  value = _ref3.value;
                 return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
                   name: name,
                   value: value

package/build/lib/web/production/components/ListView/ListViewFilters.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, m } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { FilterIcon } from '~components/Icons';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~components/BladeProvider';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { castWebType } from '~utils';\nimport { Divider } from '~components/Divider';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst gradientOverlyContainerWidth = '21px'; // 20px + 1px divider width\nconst gradientOverlyContainerHeight = '38px';\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n /* For Webkit (Chrome, Safari) /\n '::-webkit-scrollbar': {\n display: 'none',\n },\n / For Firefox /\n scrollbarWidth: 'none',\n / For Edge */\n msOverflowStyle: 'none',\n});\n\nconst GradientOverlay = styled.div<{\n gradientColorLeft: string;\n dividerColor: string;\n gradientColorRight: string;\n}>`\n height: 100%;\n width: 20px;\n background: linear-gradient(\n 270deg,\n ${({ gradientColorRight }) => gradientColorRight} 0%,\n ${({ gradientColorLeft }) => gradientColorLeft} 100%\n );\n pointer-events: none;\n &::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: 1px;\n background-color: ${({ dividerColor }) => dividerColor};\n }\n`;\n\nconst ListViewFilters = ({\n testID,\n children,\n quickFilters,\n onSearchChange,\n searchValue,\n searchValuePlaceholder,\n searchName,\n showQuickFilters,\n onShowQuickFiltersChange,\n showFilters: showFiltersProp,\n onShowFiltersChange,\n onSearchClear,\n selectedFiltersCount = 0,\n searchTrailing,\n ...rest\n}: ListViewFilterProps): React.ReactElement => {\n const [shouldShowDecorationInQuickFilters, setShouldShowDecorationInQuickFilters] = useState(\n false,\n );\n const [showFilters, setShowFilters] = useControllableState({\n defaultValue: showQuickFilters ?? showFiltersProp,\n value: showQuickFilters ?? showFiltersProp,\n onChange: onShowQuickFiltersChange ?? onShowFiltersChange,\n });\n const [\n listViewSelectedFilters,\n setListViewSelectedFilters,\n ] = useState<ListViewSelectedFiltersType>({});\n const searchId = useId('search-input');\n const searchNameValue = searchName \|\| searchId;\n const isMobile = useIsMobile();\n const { theme } = useTheme();\n const showSearchInput = onSearchChange \|\| onSearchClear \|\| searchValuePlaceholder \|\| searchName;\n const getFilterContainerWidth = (): BoxProps['width'] => {\n if (isMobile && Boolean(children)) {\n return '88%';\n }\n if (isMobile && !Boolean(children)) {\n return '100%';\n }\n return 'auto';\n };\n\n const isSearchTrailingDropDown =\n React.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';\n\n return (\n <ListViewFiltersProvider\n value={{\n listViewSelectedFilters,\n setListViewSelectedFilters,\n selectedFiltersCount,\n }}\n >\n {isMobile && showSearchInput && (\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n trailing={searchTrailing}\n />\n )}\n <BaseBox>\n <BaseBox\n {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n {...makeAnalyticsAttribute(rest)}\n display=\"flex\"\n justifyContent=\"space-between\"\n >\n <Box\n position=\"relative\"\n display=\"flex\"\n flexDirection=\"column\"\n width={getFilterContainerWidth()}\n marginRight={isMobile ? 'spacing.2' : 'spacing.0'}\n >\n <StyledQuickFilterContainer\n overflow={isMobile ? 'scroll' : 'visible'}\n width={isMobile ? '100%' : 'auto'}\n ref={(node) => {\n if (node instanceof HTMLElement && quickFilters) {\n setShouldShowDecorationInQuickFilters(\n node.scrollWidth > node.offsetWidth && Boolean(children),\n );\n }\n }}\n paddingY=\"spacing.4\"\n paddingLeft={isMobile ? 'spacing.2' : 'spacing.0'}\n >\n {quickFilters}\n </StyledQuickFilterContainer>\n {isMobile && shouldShowDecorationInQuickFilters ? (\n <Box\n position=\"absolute\"\n right=\"-1px\"\n top=\"spacing.4\"\n width={gradientOverlyContainerWidth}\n height={gradientOverlyContainerHeight}\n >\n <GradientOverlay\n gradientColorLeft={theme.colors.transparent}\n gradientColorRight={theme.colors.surface.background.gray.intense}\n dividerColor={theme.colors.surface.border.gray.normal}\n />\n <Divider orientation=\"vertical\" />\n </Box>\n ) : null}\n </Box>\n\n <BaseBox display=\"flex\" gap=\"spacing.4\" alignItems=\"center\">\n {children ? (\n <Box position=\"relative\" display=\"inline-block\">\n <Button\n variant=\"tertiary\"\n size=\"medium\"\n color=\"primary\"\n onClick={() => {\n setShowFilters((prev) => !prev);\n }}\n icon={FilterIcon}\n accessibilityLabel=\"Show More Filters\"\n />\n\n <Box\n position=\"absolute\"\n right=\"spacing.0\"\n top=\"spacing.0\"\n transform=\"translate(50%, -50%)\"\n >\n <Counter\n value={selectedFiltersCount \|\| Object.keys(listViewSelectedFilters).length}\n color=\"primary\"\n emphasis=\"intense\"\n size=\"small\"\n />\n </Box>\n </Box>\n ) : null}\n {!isMobile && showSearchInput && (\n <Box width={isSearchTrailingDropDown ? '280px' : '208px'}>\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n size=\"medium\"\n trailing={searchTrailing}\n />\n </Box>\n )}\n </BaseBox>\n </BaseBox>\n <AnimatePresence>\n {showFilters && (\n <m.div\n initial={{ height: 0 }}\n animate={{ height: showFilters ? 'auto' : 0 }}\n transition={{\n duration: msToSeconds(theme.motion.duration.moderate),\n ease: cssBezierToArray(castWebType(theme.motion.easing.standard)),\n }}\n exit={{ height: 0 }}\n >\n <BaseBox\n display=\"flex\"\n backgroundColor={\n isMobile ? 'surface.background.white' : 'surface.background.gray.moderate'\n }\n borderTop={!isMobile ? '1ps solid' : undefined}\n borderTopColor={!isMobile ? 'surface.border.gray.muted' : undefined}\n >\n {children}\n </BaseBox>\n </m.div>\n )}\n </AnimatePresence>\n </BaseBox>\n </ListViewFiltersProvider>\n );\n};\n\nexport { ListViewFilters };\n"],"names":["gradientOverlyContainerWidth","gradientOverlyContainerHeight","StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","GradientOverlay","div","_ref","gradientColorRight","_ref2","gradientColorLeft","_ref3","dividerColor","ListViewFilters","_ref4","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","showFiltersProp","showFilters","onShowFiltersChange","onSearchClear","_ref4$selectedFilters","selectedFiltersCount","searchTrailing","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","shouldShowDecorationInQuickFilters","setShouldShowDecorationInQuickFilters","_useControllableState","useControllableState","defaultValue","value","onChange","_useControllableState2","setShowFilters","_useState3","_useState4","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","_useTheme","useTheme","theme","showSearchInput","getFilterContainerWidth","Boolean","isSearchTrailingDropDown","React","isValidElement","getComponentId","_jsxs","ListViewFiltersProvider","_jsx","SearchInput","label","placeholder","name","_ref5","onClearButtonClick","trailing","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","width","marginRight","overflow","ref","node","HTMLElement","scrollWidth","offsetWidth","paddingY","paddingLeft","right","top","height","colors","transparent","surface","background","gray","intense","border","normal","Divider","orientation","gap","alignItems","Button","variant","size","color","onClick","prev","icon","FilterIcon","accessibilityLabel","transform","Counter","Object","keys","length","emphasis","_ref6","AnimatePresence","m","initial","animate","transition","duration","msToSeconds","motion","moderate","ease","cssBezierToArray","castWebType","easing","standard","exit","backgroundColor","borderTop","undefined","borderTopColor"],"mappings":"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"}
1	+ {"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, m } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { FilterIcon } from '~components/Icons';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~components/BladeProvider';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { castWebType } from '~utils';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst CHILDREN_COUNTER_WIDTH = 36;\nconst GAP_BETWEEN_CHILDREN_AND_SEARCH = 12;\nconst SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN = 8;\nconst CHILDREN_TOTAL_WIDTH = CHILDREN_COUNTER_WIDTH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;\nconst CHILDREN_WITH_SEARCH_WIDTH =\n CHILDREN_COUNTER_WIDTH +\n GAP_BETWEEN_CHILDREN_AND_SEARCH +\n SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n /* For Webkit (Chrome, Safari) /\n '::-webkit-scrollbar': {\n display: 'none',\n },\n / For Firefox /\n scrollbarWidth: 'none',\n / For Edge */\n msOverflowStyle: 'none',\n});\n\nconst ListViewFilters = ({\n testID,\n children,\n quickFilters,\n onSearchChange,\n searchValue,\n searchValuePlaceholder,\n searchName,\n showQuickFilters,\n onShowQuickFiltersChange,\n showFilters: showFiltersProp,\n onShowFiltersChange,\n onSearchClear,\n selectedFiltersCount = 0,\n searchTrailing,\n ...rest\n}: ListViewFilterProps): React.ReactElement => {\n const [showFilters, setShowFilters] = useControllableState({\n defaultValue: showQuickFilters ?? showFiltersProp,\n value: showQuickFilters ?? showFiltersProp,\n onChange: onShowQuickFiltersChange ?? onShowFiltersChange,\n });\n const [\n listViewSelectedFilters,\n setListViewSelectedFilters,\n ] = useState<ListViewSelectedFiltersType>({});\n const searchId = useId('search-input');\n const searchNameValue = searchName \|\| searchId;\n const isMobile = useIsMobile();\n const { theme } = useTheme();\n\n const showSearchInput = onSearchChange \|\| onSearchClear \|\| searchValuePlaceholder \|\| searchName;\n const isSearchTrailingDropDown =\n React.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';\n\n const getFilterContainerWidth = (): BoxProps['width'] => {\n const hasChildren = Boolean(children);\n\n if (isMobile) {\n return hasChildren ? '88%' : '100%';\n }\n\n const searchInputWidth = isSearchTrailingDropDown ? '280px' : '208px';\n\n if (showSearchInput && hasChildren) {\n return `calc(100% - ${searchInputWidth} - ${CHILDREN_WITH_SEARCH_WIDTH}px)`;\n }\n if (hasChildren) {\n return `calc(100% - ${CHILDREN_TOTAL_WIDTH}px)`;\n }\n if (showSearchInput) {\n return `calc(100% - ${searchInputWidth} - ${SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN}px)`;\n }\n return '100%';\n };\n\n return (\n <ListViewFiltersProvider\n value={{\n listViewSelectedFilters,\n setListViewSelectedFilters,\n selectedFiltersCount,\n }}\n >\n {isMobile && showSearchInput && (\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n trailing={searchTrailing}\n />\n )}\n <BaseBox>\n <BaseBox\n {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n {...makeAnalyticsAttribute(rest)}\n display=\"flex\"\n justifyContent=\"space-between\"\n >\n <Box\n position=\"relative\"\n display=\"flex\"\n flexDirection=\"column\"\n width={getFilterContainerWidth()}\n marginRight=\"spacing.3\"\n >\n <StyledQuickFilterContainer\n overflow=\"scroll\"\n width=\"100%\"\n paddingY=\"spacing.4\"\n paddingLeft=\"spacing.2\"\n >\n {quickFilters}\n </StyledQuickFilterContainer>\n </Box>\n\n <BaseBox display=\"flex\" gap=\"spacing.4\" alignItems=\"center\">\n {children ? (\n <Box position=\"relative\" display=\"inline-block\">\n <Button\n variant=\"tertiary\"\n size=\"medium\"\n color=\"primary\"\n onClick={() => {\n setShowFilters((prev) => !prev);\n }}\n icon={FilterIcon}\n accessibilityLabel=\"Show More Filters\"\n />\n\n <Box\n position=\"absolute\"\n right=\"spacing.0\"\n top=\"spacing.0\"\n transform=\"translate(50%, -50%)\"\n >\n <Counter\n value={selectedFiltersCount \|\| Object.keys(listViewSelectedFilters).length}\n color=\"primary\"\n emphasis=\"intense\"\n size=\"small\"\n />\n </Box>\n </Box>\n ) : null}\n {!isMobile && showSearchInput && (\n <Box width={isSearchTrailingDropDown ? '280px' : '208px'}>\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n size=\"medium\"\n trailing={searchTrailing}\n />\n </Box>\n )}\n </BaseBox>\n </BaseBox>\n <AnimatePresence>\n {showFilters && (\n <m.div\n initial={{ height: 0 }}\n animate={{ height: showFilters ? 'auto' : 0 }}\n transition={{\n duration: msToSeconds(theme.motion.duration.moderate),\n ease: cssBezierToArray(castWebType(theme.motion.easing.standard)),\n }}\n exit={{ height: 0 }}\n >\n <BaseBox\n display=\"flex\"\n backgroundColor={\n isMobile ? 'surface.background.white' : 'surface.background.gray.moderate'\n }\n borderTop={!isMobile ? '1ps solid' : undefined}\n borderTopColor={!isMobile ? 'surface.border.gray.muted' : undefined}\n >\n {children}\n </BaseBox>\n </m.div>\n )}\n </AnimatePresence>\n </BaseBox>\n </ListViewFiltersProvider>\n );\n};\n\nexport { ListViewFilters };\n"],"names":["CHILDREN_COUNTER_WIDTH","GAP_BETWEEN_CHILDREN_AND_SEARCH","SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN","CHILDREN_TOTAL_WIDTH","CHILDREN_WITH_SEARCH_WIDTH","StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","ListViewFilters","_ref","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","showFiltersProp","showFilters","onShowFiltersChange","onSearchClear","_ref$selectedFiltersC","selectedFiltersCount","searchTrailing","rest","_objectWithoutProperties","_excluded","_useControllableState","useControllableState","defaultValue","value","onChange","_useControllableState2","_slicedToArray","setShowFilters","_useState","useState","_useState2","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","_useTheme","useTheme","theme","showSearchInput","isSearchTrailingDropDown","React","isValidElement","getComponentId","getFilterContainerWidth","hasChildren","Boolean","searchInputWidth","concat","_jsxs","ListViewFiltersProvider","_jsx","SearchInput","label","placeholder","name","_ref2","onClearButtonClick","trailing","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","width","marginRight","overflow","paddingY","paddingLeft","gap","alignItems","Button","variant","size","color","onClick","prev","icon","FilterIcon","accessibilityLabel","right","top","transform","Counter","Object","keys","length","emphasis","_ref3","AnimatePresence","m","div","initial","height","animate","transition","duration","msToSeconds","motion","moderate","ease","cssBezierToArray","castWebType","easing","standard","exit","backgroundColor","borderTop","undefined","borderTopColor"],"mappings":"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"}

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

@@ -82,6 +82,9 @@ var QuickFilter = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     elevation: "none",
     isSelected: isQuickFilterSelected,
     ref: ref
+    // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff
+    ,
+    marginRight: "spacing.1"
   }, makeAnalyticsAttribute(rest)), metaAttribute({
     testID: testID
   })), {}, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"QuickFilter.js","sources":["../../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n value,\n title,\n trailing,\n selectionType = 'single',\n isSelected = false,\n ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n return (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.3\"\n width=\"fit-content\"\n justifyContent=\"center\"\n alignItems=\"center\"\n paddingY=\"spacing.3\"\n paddingLeft=\"spacing.3\"\n paddingRight=\"spacing.4\"\n >\n <Box\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.2\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n {selectionType === 'single' ? (\n <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n ) : (\n <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n )}\n <Text\n variant=\"body\"\n size=\"medium\"\n color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n weight=\"medium\"\n >\n {title}\n </Text>\n </Box>\n\n {trailing}\n </BaseBox>\n );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n const isQuickFilterSelected = selectedQuickFilters.includes(value);\n return (\n <Card\n padding=\"spacing.0\"\n as=\"label\"\n accessibilityLabel={title}\n borderRadius=\"medium\"\n elevation=\"none\"\n isSelected={isQuickFilterSelected}\n ref={ref}\n {...makeAnalyticsAttribute(rest)}\n {...metaAttribute({ testID })}\n >\n <CardBody>\n <QuickFilterContent\n value={value}\n title={title}\n trailing={trailing}\n selectionType={selectionType}\n isSelected={isQuickFilterSelected}\n {...rest}\n />\n </CardBody>\n </Card>\n );\n },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","_objectSpread","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","metaAttribute","CardBody"],"mappings":"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~~AAAI~~,GAAA,~~EACLV~~,sBAAsB,CAACnB,IAAI,CAAC,CAAA,~~EAC5B2C~~,aAAa,CAAC;~~AAAEb~~,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAhB,QAAA,eAE7BE,GAAA,~~CAAC4B~~,QAAQ,EAAA;~~AAAA9B~~,MAAAA,QAAA,eACPE,GAAA,CAACzB,kBAAkB,EAAA2B,aAAA,CAAA;AACjBzB,QAAAA,KAAK,EAAEA,KAAM;AACbC,QAAAA,KAAK,EAAEA,KAAM;AACbC,QAAAA,QAAQ,EAAEA,QAAS;AACnBE,QAAAA,aAAa,EAAEA,aAAc;AAC7BE,QAAAA,UAAU,EAAEoC,qBAAAA;AAAsB,OAAA,EAC9BnC,IAAI,CACT,CAAA;KACO,CAAA;AAAC,GAAA,CACP,CAAC,CAAA;AAEX,CACF;;;;"}
1	+ {"version":3,"file":"QuickFilter.js","sources":["../../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n value,\n title,\n trailing,\n selectionType = 'single',\n isSelected = false,\n ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n return (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.3\"\n width=\"fit-content\"\n justifyContent=\"center\"\n alignItems=\"center\"\n paddingY=\"spacing.3\"\n paddingLeft=\"spacing.3\"\n paddingRight=\"spacing.4\"\n >\n <Box\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"spacing.2\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n {selectionType === 'single' ? (\n <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n ) : (\n <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n )}\n <Text\n variant=\"body\"\n size=\"medium\"\n color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n weight=\"medium\"\n >\n {title}\n </Text>\n </Box>\n\n {trailing}\n </BaseBox>\n );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n const isQuickFilterSelected = selectedQuickFilters.includes(value);\n return (\n <Card\n padding=\"spacing.0\"\n as=\"label\"\n accessibilityLabel={title}\n borderRadius=\"medium\"\n elevation=\"none\"\n isSelected={isQuickFilterSelected}\n ref={ref}\n // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff\n marginRight=\"spacing.1\"\n {...makeAnalyticsAttribute(rest)}\n {...metaAttribute({ testID })}\n >\n <CardBody>\n <QuickFilterContent\n value={value}\n title={title}\n trailing={trailing}\n selectionType={selectionType}\n isSelected={isQuickFilterSelected}\n {...rest}\n />\n </CardBody>\n </Card>\n );\n },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","_objectSpread","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","marginRight","metaAttribute","CardBody"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,IAAA,EAO2B;AAAA,EAAA,IANjDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,kBAAA,GAAAJ,IAAA,CACRK,aAAa;AAAbA,IAAAA,aAAa,GAAAD,kBAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,kBAAA;IAAAE,eAAA,GAAAN,IAAA,CACxBO,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;AACfE,IAAAA,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA,CAAA;EAEP,oBACEC,IAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,aAAa,EAAC,KAAK;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,KAAK,EAAC,aAAa;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,QAAQ,EAAC,WAAW;AACpBC,IAAAA,WAAW,EAAC,WAAW;AACvBC,IAAAA,YAAY,EAAC,WAAW;IAAAC,QAAA,EAAA,cAExBX,IAAA,CAACY,GAAG,EAAA;AACFV,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,aAAa,EAAC,KAAK;AACnBC,MAAAA,GAAG,EAAC,WAAW;AACfE,MAAAA,cAAc,EAAC,QAAQ;AACvBC,MAAAA,UAAU,EAAC,QAAQ;MAAAI,QAAA,EAAA,CAElBjB,aAAa,KAAK,QAAQ,gBACzBmB,GAAA,CAACC,KAAK,EAAAC,aAAA,CAAA;AAACzB,QAAAA,KAAK,EAAEA,KAAAA;OAAW0B,EAAAA,sBAAsB,CAACnB,IAAI,CAAC,CAAG,CAAC,gBAEzDgB,GAAA,CAACI,QAAQ,EAAAF,aAAA,CAAA;AAACzB,QAAAA,KAAK,EAAEA,KAAAA;OAAW0B,EAAAA,sBAAsB,CAACnB,IAAI,CAAC,CAAG,CAC5D,eACDgB,GAAA,CAACK,IAAI,EAAA;AACHC,QAAAA,OAAO,EAAC,MAAM;AACdC,QAAAA,IAAI,EAAC,QAAQ;AACbC,QAAAA,KAAK,EAAEzB,UAAU,GAAG,iCAAiC,GAAG,8BAA+B;AACvF0B,QAAAA,MAAM,EAAC,QAAQ;AAAAX,QAAAA,QAAA,EAEdpB,KAAAA;AAAK,OACF,CAAC,CAAA;KACJ,CAAC,EAELC,QAAQ,CAAA;AAAA,GACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAEK+B,IAAAA,WAAW,gBAAGC,UAAU,CAC5B,UAAAC,KAAA,EAA8CC,GAAG,EAAyB;AAAA,EAAA,IAAvEnC,KAAK,GAAAkC,KAAA,CAALlC,KAAK;IAAED,KAAK,GAAAmC,KAAA,CAALnC,KAAK;IAAEE,QAAQ,GAAAiC,KAAA,CAARjC,QAAQ;IAAEmC,MAAM,GAAAF,KAAA,CAANE,MAAM;AAAK9B,IAAAA,IAAI,GAAAC,wBAAA,CAAA2B,KAAA,EAAAG,UAAA,CAAA,CAAA;AACxC,EAAA,IAAAC,qBAAA,GAAgDC,0BAA0B,EAAE;IAApEC,oBAAoB,GAAAF,qBAAA,CAApBE,oBAAoB;IAAErC,aAAa,GAAAmC,qBAAA,CAAbnC,aAAa,CAAA;AAE3C,EAAA,IAAMsC,qBAAqB,GAAGD,oBAAoB,CAACE,QAAQ,CAAC3C,KAAK,CAAC,CAAA;EAClE,oBACEuB,GAAA,CAACqB,IAAI,EAAAnB,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACHoB,IAAAA,OAAO,EAAC,WAAW;AACnBC,IAAAA,EAAE,EAAC,OAAO;AACVC,IAAAA,kBAAkB,EAAE9C,KAAM;AAC1B+C,IAAAA,YAAY,EAAC,QAAQ;AACrBC,IAAAA,SAAS,EAAC,MAAM;AAChB3C,IAAAA,UAAU,EAAEoC,qBAAsB;AAClCN,IAAAA,GAAG,EAAEA,GAAAA;AACL;AAAA;AACAc,IAAAA,WAAW,EAAC,WAAA;AAAW,GAAA,EACnBxB,sBAAsB,CAACnB,IAAI,CAAC,CAAA,EAC5B4C,aAAa,CAAC;AAAEd,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAhB,QAAA,eAE7BE,GAAA,CAAC6B,QAAQ,EAAA;AAAA/B,MAAAA,QAAA,eACPE,GAAA,CAACzB,kBAAkB,EAAA2B,aAAA,CAAA;AACjBzB,QAAAA,KAAK,EAAEA,KAAM;AACbC,QAAAA,KAAK,EAAEA,KAAM;AACbC,QAAAA,QAAQ,EAAEA,QAAS;AACnBE,QAAAA,aAAa,EAAEA,aAAc;AAC7BE,QAAAA,UAAU,EAAEoC,qBAAAA;AAAsB,OAAA,EAC9BnC,IAAI,CACT,CAAA;KACO,CAAA;AAAC,GAAA,CACP,CAAC,CAAA;AAEX,CACF;;;;"}

package/build/lib/web/production/components/Toast/Toast.web.js CHANGED Viewed

@@ -69,8 +69,8 @@ var Toast = function Toast(_ref2) {
     id = _ref2.id;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
-  var Icon = leading || iconMap[color];
   var isPromotional = type === 'promotional';
+  var Icon = isPromotional ? leading : leading || iconMap[color];
   var actionButton = action ? /*#__PURE__*/jsx(Box, {
     children: /*#__PURE__*/jsx(Button, {
       size: "xsmall",
@@ -112,6 +112,7 @@ var Toast = function Toast(_ref2) {
       display: "flex",
       alignItems: "center",
       alignSelf: isPromotional ? 'start' : 'center',
+      marginTop: isPromotional ? 'spacing.1' : 'spacing.0',
       children: /*#__PURE__*/jsx(Icon, {
         color: isPromotional ? 'surface.icon.gray.normal' : 'surface.icon.staticWhite.normal'
       })

package/build/lib/web/production/components/Toast/Toast.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.web.js","sources":["../../../../../../src/components/Toast/Toast.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing /\n/ eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport toast from 'react-hot-toast';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { ToastProps } from './types';\nimport { Box } from '~components/Box';\nimport { Button } from '~components/Button';\nimport { IconButton } from '~components/Button/IconButton';\nimport {\n AlertOctagonIcon,\n AlertTriangleIcon,\n CheckCircleIcon,\n CloseIcon,\n InfoIcon,\n} from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeMotionTime, useTheme } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { MAKE_ANALYTICS_CONSTANTS } from '~utils/makeAnalyticsAttribute/makeAnalyticsConstants';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst iconMap = {\n positive: CheckCircleIcon,\n negative: AlertOctagonIcon,\n information: InfoIcon,\n neutral: InfoIcon,\n notice: AlertTriangleIcon,\n};\n\nconst borderColorMap = {\n positive: 'feedback.border.positive.intense',\n negative: 'feedback.border.negative.intense',\n notice: 'feedback.border.notice.intense',\n information: 'feedback.border.information.intense',\n neutral: 'feedback.border.neutral.intense',\n} as const;\n\nconst slideIn = keyframes`\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst slideOut = keyframes`\n from {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(100%);\n }\n`;\n\nconst AnimatedFade = styled(BaseBox)<{\n animationType: FlattenSimpleInterpolation \| null;\n toastBorderColor: string;\n}>(({ animationType, toastBorderColor }) => {\n return css`\n overflow: hidden;\n border: 1px solid ${toastBorderColor};\n ${animationType}\n `;\n});\n\nconst Toast = ({\n type,\n color = 'neutral',\n leading,\n action,\n content,\n onDismissButtonClick,\n isVisible,\n id,\n}: ToastProps & {\n isVisible?: boolean;\n}): React.ReactElement => {\n const { theme } = useTheme();\n const Icon = leading \|\| iconMap[color];\n const isPromotional = type === 'promotional';\n const actionButton = action ? (\n <Box>\n <Button\n size=\"xsmall\"\n variant={isPromotional ? 'secondary' : 'tertiary'}\n color={isPromotional ? 'primary' : 'white'}\n onClick={(event) => {\n event.stopPropagation();\n action?.onClick?.({ event: event as never, toastId: id! });\n }}\n isLoading={action?.isLoading}\n data-analytics-name={MAKE_ANALYTICS_CONSTANTS.TOAST.ACTION_BUTTON}\n >\n {action?.text}\n </Button>\n </Box>\n ) : null;\n\n const enter = css`\n opacity: 0;\n animation: ${slideIn} ${makeMotionTime(theme.motion.duration.gentle)}\n ${castWebType(theme.motion.easing.entrance)} forwards;\n `;\n\n const exit = css`\n opacity: 1;\n animation: ${slideOut} ${makeMotionTime(theme.motion.duration.moderate)}\n ${castWebType(theme.motion.easing.exit)} forwards;\n `;\n\n return (\n <AnimatedFade\n {...makeAccessible({ role: 'status', liveRegion: 'polite' })}\n {...metaAttribute({ name: MetaConstants.Toast })}\n toastBorderColor={getIn(\n theme.colors,\n isPromotional ? 'surface.border.gray.muted' : borderColorMap[color],\n )}\n animationType={isVisible ? enter : exit}\n width=\"100%\"\n display=\"flex\"\n gap=\"spacing.3\"\n paddingX=\"spacing.4\"\n paddingY={isPromotional ? 'spacing.4' : 'spacing.3'}\n borderRadius=\"medium\"\n alignItems=\"center\"\n backgroundColor={\n isPromotional ? 'surface.background.gray.intense' : `feedback.background.${color}.intense`\n }\n >\n {Icon ? (\n <Box\n flexShrink={0}\n display=\"flex\"\n alignItems=\"center\"\n alignSelf={isPromotional ? 'start' : 'center'}\n >\n <Icon\n color={isPromotional ? 'surface.icon.gray.normal' : 'surface.icon.staticWhite.normal'}\n />\n </Box>\n ) : null}\n <Box display=\"flex\" flexDirection=\"column\" gap=\"spacing.3\">\n {isPromotional ? (\n content\n ) : (\n <Text as=\"span\" size=\"small\" color=\"surface.text.staticWhite.normal\">\n {content}\n </Text>\n )}\n {isPromotional && actionButton}\n </Box>\n <Box alignSelf=\"start\" marginLeft=\"auto\" display=\"flex\" gap=\"spacing.4\">\n {!isPromotional && actionButton}\n <IconButton\n emphasis={isPromotional ? 'intense' : 'subtle'}\n accessibilityLabel=\"Dismiss toast\"\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onDismissButtonClick?.({ event, toastId: id! });\n toast.dismiss(id);\n }}\n icon={CloseIcon}\n />\n </Box>\n </AnimatedFade>\n );\n};\n\nexport { Toast };\n"],"names":["iconMap","positive","CheckCircleIcon","negative","AlertOctagonIcon","information","InfoIcon","neutral","notice","AlertTriangleIcon","borderColorMap","slideIn","keyframes","slideOut","AnimatedFade","styled","BaseBox","withConfig","displayName","componentId","_ref","animationType","toastBorderColor","css","Toast","_ref2","type","_ref2$color","color","leading","action","content","onDismissButtonClick","isVisible","id","_useTheme","useTheme","theme","Icon","isPromotional","actionButton","_jsx","Box","children","Button","size","variant","onClick","event","_action$onClick","stopPropagation","call","toastId","isLoading","MAKE_ANALYTICS_CONSTANTS","TOAST","ACTION_BUTTON","text","enter","makeMotionTime","motion","duration","gentle","castWebType","easing","entrance","exit","moderate","_jsxs","_objectSpread","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","getIn","colors","width","display","gap","paddingX","paddingY","borderRadius","alignItems","backgroundColor","concat","flexShrink","alignSelf","flexDirection","Text","as","marginLeft","IconButton","emphasis","accessibilityLabel","toast","dismiss","icon","CloseIcon"],"mappings":"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"}
1	+ {"version":3,"file":"Toast.web.js","sources":["../../../../../../src/components/Toast/Toast.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing /\n/ eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport toast from 'react-hot-toast';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { ToastProps } from './types';\nimport { Box } from '~components/Box';\nimport { Button } from '~components/Button';\nimport { IconButton } from '~components/Button/IconButton';\nimport {\n AlertOctagonIcon,\n AlertTriangleIcon,\n CheckCircleIcon,\n CloseIcon,\n InfoIcon,\n} from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeMotionTime, useTheme } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { MAKE_ANALYTICS_CONSTANTS } from '~utils/makeAnalyticsAttribute/makeAnalyticsConstants';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst iconMap = {\n positive: CheckCircleIcon,\n negative: AlertOctagonIcon,\n information: InfoIcon,\n neutral: InfoIcon,\n notice: AlertTriangleIcon,\n};\n\nconst borderColorMap = {\n positive: 'feedback.border.positive.intense',\n negative: 'feedback.border.negative.intense',\n notice: 'feedback.border.notice.intense',\n information: 'feedback.border.information.intense',\n neutral: 'feedback.border.neutral.intense',\n} as const;\n\nconst slideIn = keyframes`\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst slideOut = keyframes`\n from {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(100%);\n }\n`;\n\nconst AnimatedFade = styled(BaseBox)<{\n animationType: FlattenSimpleInterpolation \| null;\n toastBorderColor: string;\n}>(({ animationType, toastBorderColor }) => {\n return css`\n overflow: hidden;\n border: 1px solid ${toastBorderColor};\n ${animationType}\n `;\n});\n\nconst Toast = ({\n type,\n color = 'neutral',\n leading,\n action,\n content,\n onDismissButtonClick,\n isVisible,\n id,\n}: ToastProps & {\n isVisible?: boolean;\n}): React.ReactElement => {\n const { theme } = useTheme();\n const isPromotional = type === 'promotional';\n const Icon = isPromotional ? leading : leading \|\| iconMap[color];\n\n const actionButton = action ? (\n <Box>\n <Button\n size=\"xsmall\"\n variant={isPromotional ? 'secondary' : 'tertiary'}\n color={isPromotional ? 'primary' : 'white'}\n onClick={(event) => {\n event.stopPropagation();\n action?.onClick?.({ event: event as never, toastId: id! });\n }}\n isLoading={action?.isLoading}\n data-analytics-name={MAKE_ANALYTICS_CONSTANTS.TOAST.ACTION_BUTTON}\n >\n {action?.text}\n </Button>\n </Box>\n ) : null;\n\n const enter = css`\n opacity: 0;\n animation: ${slideIn} ${makeMotionTime(theme.motion.duration.gentle)}\n ${castWebType(theme.motion.easing.entrance)} forwards;\n `;\n\n const exit = css`\n opacity: 1;\n animation: ${slideOut} ${makeMotionTime(theme.motion.duration.moderate)}\n ${castWebType(theme.motion.easing.exit)} forwards;\n `;\n\n return (\n <AnimatedFade\n {...makeAccessible({ role: 'status', liveRegion: 'polite' })}\n {...metaAttribute({ name: MetaConstants.Toast })}\n toastBorderColor={getIn(\n theme.colors,\n isPromotional ? 'surface.border.gray.muted' : borderColorMap[color],\n )}\n animationType={isVisible ? enter : exit}\n width=\"100%\"\n display=\"flex\"\n gap=\"spacing.3\"\n paddingX=\"spacing.4\"\n paddingY={isPromotional ? 'spacing.4' : 'spacing.3'}\n borderRadius=\"medium\"\n alignItems=\"center\"\n backgroundColor={\n isPromotional ? 'surface.background.gray.intense' : `feedback.background.${color}.intense`\n }\n >\n {Icon ? (\n <Box\n flexShrink={0}\n display=\"flex\"\n alignItems=\"center\"\n alignSelf={isPromotional ? 'start' : 'center'}\n marginTop={isPromotional ? 'spacing.1' : 'spacing.0'}\n >\n <Icon\n color={isPromotional ? 'surface.icon.gray.normal' : 'surface.icon.staticWhite.normal'}\n />\n </Box>\n ) : null}\n <Box display=\"flex\" flexDirection=\"column\" gap=\"spacing.3\">\n {isPromotional ? (\n content\n ) : (\n <Text as=\"span\" size=\"small\" color=\"surface.text.staticWhite.normal\">\n {content}\n </Text>\n )}\n {isPromotional && actionButton}\n </Box>\n <Box alignSelf=\"start\" marginLeft=\"auto\" display=\"flex\" gap=\"spacing.4\">\n {!isPromotional && actionButton}\n <IconButton\n emphasis={isPromotional ? 'intense' : 'subtle'}\n accessibilityLabel=\"Dismiss toast\"\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onDismissButtonClick?.({ event, toastId: id! });\n toast.dismiss(id);\n }}\n icon={CloseIcon}\n />\n </Box>\n </AnimatedFade>\n );\n};\n\nexport { Toast };\n"],"names":["iconMap","positive","CheckCircleIcon","negative","AlertOctagonIcon","information","InfoIcon","neutral","notice","AlertTriangleIcon","borderColorMap","slideIn","keyframes","slideOut","AnimatedFade","styled","BaseBox","withConfig","displayName","componentId","_ref","animationType","toastBorderColor","css","Toast","_ref2","type","_ref2$color","color","leading","action","content","onDismissButtonClick","isVisible","id","_useTheme","useTheme","theme","isPromotional","Icon","actionButton","_jsx","Box","children","Button","size","variant","onClick","event","_action$onClick","stopPropagation","call","toastId","isLoading","MAKE_ANALYTICS_CONSTANTS","TOAST","ACTION_BUTTON","text","enter","makeMotionTime","motion","duration","gentle","castWebType","easing","entrance","exit","moderate","_jsxs","_objectSpread","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","getIn","colors","width","display","gap","paddingX","paddingY","borderRadius","alignItems","backgroundColor","concat","flexShrink","alignSelf","marginTop","flexDirection","Text","as","marginLeft","IconButton","emphasis","accessibilityLabel","toast","dismiss","icon","CloseIcon"],"mappings":"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"}

package/build/lib/web/production/components/VisuallyHidden/ScreenReaderStyles.js CHANGED Viewed

@@ -3,17 +3,15 @@
  * https://webaim.org/techniques/css/invisiblecontent/#techniques
  */
 var screenReaderStyles = {
-  border: 0,
-  clip: 'rect(0 0 0 0)',
-  clipPath: 'inset(50%)',
-  height: "1px",
-  margin: '0 -1px -1px 0',
+  border: '0',
+  clip: 'rect(0, 0, 0, 0)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  padding: '0',
   overflow: 'hidden',
-  padding: 0,
-  position: 'absolute',
-  width: "1px",
-  left: '-10000px',
   whiteSpace: 'nowrap',
+  position: 'absolute',
   wordWrap: 'normal'
 };

package/build/lib/web/production/components/VisuallyHidden/ScreenReaderStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/*\n Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n border: 0,\n clip: 'rect(0 0 0 0)',\n ~~clipPath~~: '~~inset(50%)~~',\n ~~height~~: `1px~~`,\~~n margin: '0 -1px ~~-1px 0~~',\n ~~overflow~~: '~~hidden~~',\n ~~padding~~: ~~0,\n position:~~ '~~absolute~~',\n ~~width~~: ~~`1px`,\n left:~~ '~~-10000px~~',\n ~~whiteSpace~~: '~~nowrap~~',\n wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","~~clipPath~~","~~height~~","margin","~~overflow","~~padding","~~position~~","~~width~~","~~left~~","~~whiteSpace","~~wordWrap"],"mappings":"AAEA;AACA;AACA;AACA;AACA,IAAMA,kBAA6B,GAAG;AACpCC,EAAAA,MAAM,EAAE,~~CAAC~~;~~AACTC~~,EAAAA,IAAI,EAAE,~~eAAe~~;~~AACrBC~~,EAAAA,~~QAAQ~~,EAAE,~~YAAY~~;~~AACtBC,EAAAA,MAAM,EAAO,KAAA;~~AACbC,EAAAA,~~MAAM~~,EAAE,~~eAAe~~;~~AACvBC~~,EAAAA,~~QAAQ~~,EAAE,~~QAAQ~~;~~AAClBC~~,EAAAA,OAAO,EAAE,~~CAAC~~;~~AACVC~~,EAAAA,QAAQ,EAAE,~~UAAU~~;~~AACpBC~~,EAAAA,~~KAAK~~,~~EAAO~~,~~KAAA~~;~~AACZC~~,EAAAA,~~IAAI~~,EAAE,UAAU;~~AAChBC,EAAAA,UAAU,EAAE,QAAQ;~~AACpBC,EAAAA,QAAQ,EAAE,QAAA;AACZ;;;;"}
1	+ {"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/*\n Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n border: '0',\n clip: 'rect(0, 0, 0, 0)',\n height: '1px',\n width: '1px',\n margin: '-1px',\n padding: '0',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n position: 'absolute',\n wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","height","width","margin","padding","overflow","whiteSpace","position","wordWrap"],"mappings":"AAEA;AACA;AACA;AACA;AACA,IAAMA,kBAA6B,GAAG;AACpCC,EAAAA,MAAM,EAAE,GAAG;AACXC,EAAAA,IAAI,EAAE,kBAAkB;AACxBC,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,MAAM;AACdC,EAAAA,OAAO,EAAE,GAAG;AACZC,EAAAA,QAAQ,EAAE,QAAQ;AAClBC,EAAAA,UAAU,EAAE,QAAQ;AACpBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,QAAQ,EAAE,QAAA;AACZ;;;;"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "12.46.0",
+  "version": "12.46.2",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"