@hitachivantara/uikit-react-core 5.28.1 → 5.29.0

package/dist/esm/components/QueryBuilder/Rule/Rule.js

@@ -5,24 +5,28 @@ import { useContext, useMemo } from "react";
 import { withTooltip } from "../../../hocs/withTooltip.js";
 import { QueryBuilderContext } from "../Context.js";
 import { useClasses } from "./Rule.styles.js";
+import { staticClasses } from "./Rule.styles.js";
 import { HvGrid } from "../../Grid/Grid.js";
 import { Attribute } from "./Attribute/Attribute.js";
 import { Operator } from "./Operator/Operator.js";
 import { Value } from "./Value/Value.js";
 import { HvButton } from "../../Button/Button.js";
-const Rule = ({
-  id,
-  combinator,
-  attribute,
-  operator,
-  value,
-  disabled,
-  isInvalid
-}) => {
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
+const Rule = (props) => {
+  const {
+    id,
+    combinator,
+    attribute,
+    operator,
+    value,
+    disabled,
+    isInvalid,
+    classes: classesProp
+  } = useDefaultProps("HvQueryBuilderRule", props);
   const {
     classes,
     cx
-  } = useClasses();
+  } = useClasses(classesProp);
   const context = useContext(QueryBuilderContext);
   const theme = useTheme();
   const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
@@ -63,6 +67,7 @@ const Rule = ({
   ] });
 };
 export {
-  Rule
+  Rule,
+  staticClasses as queryBuilderRuleClasses
 };
 //# sourceMappingURL=Rule.js.map

package/dist/esm/components/QueryBuilder/Rule/Rule.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { Delete } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { useContext, useMemo } from \"react\";\n\nimport { HvGrid } from \"@core/components/Grid\";\nimport { HvButton } from \"@core/components/Button\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\n\nimport { QueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { Value } from \"./Value\";\nimport { useClasses } from \"./Rule.styles\";\n\nexport interface RuleProps {\n  id: number;\n  combinator: string;\n  attribute: string;\n  operator: string;\n  value: any;\n  disabled: boolean;\n  isInvalid: boolean;\n}\n\nexport const Rule = ({\n  id,\n  combinator,\n  attribute,\n  operator,\n  value,\n  disabled,\n  isInvalid,\n}: RuleProps) => {\n  const { classes, cx } = useClasses();\n\n  const context = useContext(QueryBuilderContext);\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const { askAction, attributes, operators, labels, readOnly } = context;\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\n\n  const DeleteIcon = withTooltip(\n    () => <Delete />,\n    labels.rule.delete.tooltip,\n    \"bottom\"\n  );\n\n  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n      wrap=\"nowrap\"\n    >\n      <HvGrid item xs={2} lg={3}>\n        <Attribute\n          attribute={attribute}\n          id={id}\n          disabled={disabled}\n          isInvalid={isInvalid}\n        />\n      </HvGrid>\n      {attribute != null && availableOperators > 0 && (\n        <HvGrid item xs={2} lg={3}>\n          <Operator\n            id={id}\n            combinator={combinator}\n            attribute={attribute}\n            operator={operator}\n          />\n        </HvGrid>\n      )}\n      {attribute != null && (operator != null || availableOperators === 0) && (\n        <HvGrid item xs>\n          {shouldShowValueInput && (\n            <Value\n              attribute={attribute}\n              id={id}\n              operator={operator}\n              value={value}\n            />\n          )}\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <HvButton\n          icon\n          aria-label={labels.rule.delete.ariaLabel}\n          onClick={() => {\n            askAction({\n              actions: [{ type: \"remove-node\", id }],\n              dialog: labels.rule.delete,\n            });\n          }}\n          disabled={readOnly}\n        >\n          <DeleteIcon />\n        </HvButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":["Rule","id","combinator","attribute","operator","value","disabled","isInvalid","classes","cx","useClasses","context","useContext","QueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","askAction","attributes","operators","labels","readOnly","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","DeleteIcon","withTooltip","rule","delete","tooltip","root","actionsContainer","ariaLabel","actions","dialog"],"mappings":";;;;;;;;;;;;AA0BO,MAAMA,OAAOA,CAAC;AAAA,EACnBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACS,MAAM;AACT,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,MAAOC,WAAW;AAE7BC,QAAAA,UAAUC,WAAWC,mBAAmB;AAE9C,QAAMC,QAAQC;AAEd,QAAMC,WAAWC,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErD,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAQC;AAAAA,EAAab,IAAAA;AAEzDc,QAAAA,qBAAqBC,QAAQ,MAAM;AACvC,UAAMC,gBACJxB,aAAa,QAAQkB,aAAaA,WAAWlB,SAAS,IAAI;AAC5D,QAAIwB,iBAAiB,MAAM;AACnBC,YAAAA,gBAAgBN,UAAUK,cAAcE,IAAI;AAClD,UAAID,iBAAiB,MAAM;AACzB,eAAOA,cAAcE,OACnB,CAACC,OAAOC,SACND,SAASC,KAAKC,YAAYC,SAAShC,UAAU,IAAI,IAAI,IACvD,CACF;AAAA,MACF;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAACC,WAAWkB,YAAYnB,YAAYoB,SAAS,CAAC;AAE3Ca,QAAAA,uBACJ/B,aAAa,WAAWA,aAAa;AAEjCgC,QAAAA,aAAaC,YACjB,MAAO,oBAAA,QAAA,CAAA,CAAS,GAChBd,OAAOe,KAAKC,OAAOC,SACnB,QACF;AAEA,8BACG,QACC,EAAA,WAAS,MACT,WAAW/B,GAAGD,QAAQiC,MAAM;AAAA,IAAE,CAACjC,QAAQQ,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAAS,GACT,MAAK,UAEL,UAAA;AAAA,IAAA,oBAAC,QAAO,EAAA,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAA,oBAAC,WACC,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACCb,aAAa,QAAQsB,qBAAqB,KACxC,oBAAA,QAAA,EAAO,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAC,oBAAA,UAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAEDtB,aAAa,SAASC,YAAY,QAAQqB,uBAAuB,0BAC/D,QAAO,EAAA,MAAI,MAAC,IAAE,MACZU,kCACE,oBAAA,OAAA,EACC,WACA,IACA,UACA,OAEH,EACH,CAAA;AAAA,wBAED,QAAO,EAAA,MAAI,MAAC,WAAW3B,QAAQkC,kBAC9B,UAAA,oBAAC,UACC,EAAA,MAAI,MACJ,cAAYnB,OAAOe,KAAKC,OAAOI,WAC/B,SAAS,MAAM;AACH,gBAAA;AAAA,QACRC,SAAS,CAAC;AAAA,UAAEf,MAAM;AAAA,UAAe5B;AAAAA,QAAAA,CAAI;AAAA,QACrC4C,QAAQtB,OAAOe,KAAKC;AAAAA,MAAAA,CACrB;AAAA,IAAA,GAEH,UAAUf,UAEV,UAAC,oBAAA,YAAA,CAAU,CAAA,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Rule.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { Delete } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { useContext, useMemo } from \"react\";\n\nimport { HvGrid } from \"@core/components/Grid\";\nimport { HvButton } from \"@core/components/Button\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { Value } from \"./Value\";\nimport { staticClasses, useClasses } from \"./Rule.styles\";\n\nexport { staticClasses as queryBuilderRuleClasses };\n\nexport type HvQueryBuilderRuleClasses = ExtractNames<typeof useClasses>;\n\nexport interface RuleProps {\n  id: number;\n  combinator: string;\n  attribute: string;\n  operator: string;\n  value: any;\n  disabled: boolean;\n  isInvalid: boolean;\n  classes?: HvQueryBuilderRuleClasses;\n}\n\nexport const Rule = (props: RuleProps) => {\n  const {\n    id,\n    combinator,\n    attribute,\n    operator,\n    value,\n    disabled,\n    isInvalid,\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilderRule\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(QueryBuilderContext);\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const { askAction, attributes, operators, labels, readOnly } = context;\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\n\n  const DeleteIcon = withTooltip(\n    () => <Delete />,\n    labels.rule.delete.tooltip,\n    \"bottom\"\n  );\n\n  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n      wrap=\"nowrap\"\n    >\n      <HvGrid item xs={2} lg={3}>\n        <Attribute\n          attribute={attribute}\n          id={id}\n          disabled={disabled}\n          isInvalid={isInvalid}\n        />\n      </HvGrid>\n      {attribute != null && availableOperators > 0 && (\n        <HvGrid item xs={2} lg={3}>\n          <Operator\n            id={id}\n            combinator={combinator}\n            attribute={attribute}\n            operator={operator}\n          />\n        </HvGrid>\n      )}\n      {attribute != null && (operator != null || availableOperators === 0) && (\n        <HvGrid item xs>\n          {shouldShowValueInput && (\n            <Value\n              attribute={attribute}\n              id={id}\n              operator={operator}\n              value={value}\n            />\n          )}\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <HvButton\n          icon\n          aria-label={labels.rule.delete.ariaLabel}\n          onClick={() => {\n            askAction({\n              actions: [{ type: \"remove-node\", id }],\n              dialog: labels.rule.delete,\n            });\n          }}\n          disabled={readOnly}\n        >\n          <DeleteIcon />\n        </HvButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":["Rule","props","id","combinator","attribute","operator","value","disabled","isInvalid","classes","classesProp","useDefaultProps","cx","useClasses","context","useContext","QueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","askAction","attributes","operators","labels","readOnly","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","DeleteIcon","withTooltip","rule","delete","tooltip","root","actionsContainer","ariaLabel","actions","dialog"],"mappings":";;;;;;;;;;;;;;AAiCaA,MAAAA,OAAOA,CAACC,UAAqB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,sBAAsBV,KAAK;AACzC,QAAA;AAAA,IAAEQ;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExCI,QAAAA,UAAUC,WAAWC,mBAAmB;AAE9C,QAAMC,QAAQC;AAEd,QAAMC,WAAWC,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErD,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAQC;AAAAA,EAAab,IAAAA;AAEzDc,QAAAA,qBAAqBC,QAAQ,MAAM;AACvC,UAAMC,gBACJ1B,aAAa,QAAQoB,aAAaA,WAAWpB,SAAS,IAAI;AAC5D,QAAI0B,iBAAiB,MAAM;AACnBC,YAAAA,gBAAgBN,UAAUK,cAAcE,IAAI;AAClD,UAAID,iBAAiB,MAAM;AACzB,eAAOA,cAAcE,OACnB,CAACC,OAAOC,SACND,SAASC,KAAKC,YAAYC,SAASlC,UAAU,IAAI,IAAI,IACvD,CACF;AAAA,MACF;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAACC,WAAWoB,YAAYrB,YAAYsB,SAAS,CAAC;AAE3Ca,QAAAA,uBACJjC,aAAa,WAAWA,aAAa;AAEjCkC,QAAAA,aAAaC,YACjB,MAAO,oBAAA,QAAA,CAAA,CAAS,GAChBd,OAAOe,KAAKC,OAAOC,SACnB,QACF;AAEA,8BACG,QACC,EAAA,WAAS,MACT,WAAW/B,GAAGH,QAAQmC,MAAM;AAAA,IAAE,CAACnC,QAAQU,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAAS,GACT,MAAK,UAEL,UAAA;AAAA,IAAA,oBAAC,QAAO,EAAA,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAA,oBAAC,WACC,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACCf,aAAa,QAAQwB,qBAAqB,KACxC,oBAAA,QAAA,EAAO,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAC,oBAAA,UAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAEDxB,aAAa,SAASC,YAAY,QAAQuB,uBAAuB,0BAC/D,QAAO,EAAA,MAAI,MAAC,IAAE,MACZU,kCACE,oBAAA,OAAA,EACC,WACA,IACA,UACA,OAEH,EACH,CAAA;AAAA,wBAED,QAAO,EAAA,MAAI,MAAC,WAAW7B,QAAQoC,kBAC9B,UAAA,oBAAC,UACC,EAAA,MAAI,MACJ,cAAYnB,OAAOe,KAAKC,OAAOI,WAC/B,SAAS,MAAM;AACH,gBAAA;AAAA,QACRC,SAAS,CAAC;AAAA,UAAEf,MAAM;AAAA,UAAe9B;AAAAA,QAAAA,CAAI;AAAA,QACrC8C,QAAQtB,OAAOe,KAAKC;AAAAA,MAAAA,CACrB;AAAA,IAAA,GAEH,UAAUf,UAEV,UAAC,oBAAA,YAAA,CAAU,CAAA,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/QueryBuilder/Rule/Rule.styles.js

@@ -20,27 +20,27 @@ const {
       content: '""',
       position: "absolute",
       zIndex: 2,
-      width: theme.queryBuilder.ruleConnectorHorizontalSize,
-      height: theme.queryBuilder.ruleConnectorHeight,
-      borderBottom: theme.queryBuilder.border,
-      borderLeft: theme.queryBuilder.border,
+      width: "17px",
+      height: "39px",
+      borderBottom: `1px solid ${theme.colors.atmo4}`,
+      borderLeft: `1px solid ${theme.colors.atmo4}`,
       top: 0,
-      left: theme.queryBuilder.ruleLeftConnectorPosition
+      left: `calc( -1 * 17px)`
     },
     [`:not(.${staticClasses$1.topRulesContainer})>&:last-child::after`]: {
       content: '""',
       position: "absolute",
       zIndex: 1,
-      width: theme.queryBuilder.ruleConnectorHorizontalSize,
+      width: "17px",
       height: "100%",
-      borderLeft: theme.queryBuilder.border,
+      borderLeft: `1px solid ${theme.colors.atmo4}`,
       top: 0,
-      left: theme.queryBuilder.ruleLeftConnectorPosition
+      left: `calc( -1 * 17px)`
     }
   },
   actionsContainer: {
     marginLeft: "auto",
-    marginTop: theme.queryBuilder.actionsContainerMarginTop,
+    marginTop: "24px",
     "&>:not(:last-child)": {
       marginRight: theme.space.xs
     }

package/dist/esm/components/QueryBuilder/Rule/Rule.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.styles.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { staticClasses as queryBuilderClasses } from \"../QueryBuilder.styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-Rule\",\n  {\n    root: {\n      position: \"relative\",\n      marginTop: theme.space.xs,\n\n      minHeight: 94,\n\n      \"&>div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n\n      // hide required * as all fields are required\n      \"& label>span[aria-hidden]\": {\n        visibility: \"hidden\",\n      },\n      \"&::before\": {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 2,\n\n        width: theme.queryBuilder.ruleConnectorHorizontalSize,\n        height: theme.queryBuilder.ruleConnectorHeight,\n\n        borderBottom: theme.queryBuilder.border,\n        borderLeft: theme.queryBuilder.border,\n\n        top: 0,\n        left: theme.queryBuilder.ruleLeftConnectorPosition,\n      },\n      [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 1,\n\n        width: theme.queryBuilder.ruleConnectorHorizontalSize,\n        height: \"100%\",\n\n        borderLeft: theme.queryBuilder.border,\n\n        top: 0,\n        left: theme.queryBuilder.ruleLeftConnectorPosition,\n      },\n    },\n    actionsContainer: {\n      marginLeft: \"auto\",\n      marginTop: theme.queryBuilder.actionsContainerMarginTop,\n\n      \"&>:not(:last-child)\": {\n        marginRight: theme.space.xs,\n      },\n    },\n    isMdDown: {\n      \"&>div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","position","marginTop","theme","space","xs","minHeight","marginRight","md","visibility","content","zIndex","width","queryBuilder","ruleConnectorHorizontalSize","height","ruleConnectorHeight","borderBottom","border","borderLeft","top","left","ruleLeftConnectorPosition","queryBuilderClasses","topRulesContainer","actionsContainer","marginLeft","actionsContainerMarginTop","isMdDown"],"mappings":";;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,MAAMC,MAAMI;AAAAA,IAC3B;AAAA;AAAA,IAGA,6BAA6B;AAAA,MAC3BC,YAAY;AAAA,IACd;AAAA,IACA,aAAa;AAAA,MACXC,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQZ,MAAMU,aAAaG;AAAAA,MAE3BC,cAAcd,MAAMU,aAAaK;AAAAA,MACjCC,YAAYhB,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,IACA,CAAE,SAAQC,gBAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEd,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQ;AAAA,MAERI,YAAYhB,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZxB,WAAWC,MAAMU,aAAac;AAAAA,IAE9B,uBAAuB;AAAA,MACrBpB,aAAaJ,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAuB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBrB,aAAc,QAAOJ,MAAMC,MAAMI,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;"}
+{"version":3,"file":"Rule.styles.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { staticClasses as queryBuilderClasses } from \"../QueryBuilder.styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-Rule\",\n  {\n    root: {\n      position: \"relative\",\n      marginTop: theme.space.xs,\n\n      minHeight: 94,\n\n      \"&>div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n\n      // hide required * as all fields are required\n      \"& label>span[aria-hidden]\": {\n        visibility: \"hidden\",\n      },\n      \"&::before\": {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 2,\n\n        width: \"17px\",\n        height: \"39px\",\n\n        borderBottom: `1px solid ${theme.colors.atmo4}`,\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc( -1 * 17px)`,\n      },\n      [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 1,\n\n        width: \"17px\",\n        height: \"100%\",\n\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc( -1 * 17px)`,\n      },\n    },\n    actionsContainer: {\n      marginLeft: \"auto\",\n      marginTop: \"24px\",\n\n      \"&>:not(:last-child)\": {\n        marginRight: theme.space.xs,\n      },\n    },\n    isMdDown: {\n      \"&>div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","position","marginTop","theme","space","xs","minHeight","marginRight","md","visibility","content","zIndex","width","height","borderBottom","colors","atmo4","borderLeft","top","left","queryBuilderClasses","topRulesContainer","actionsContainer","marginLeft","isMdDown"],"mappings":";;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,MAAMC,MAAMI;AAAAA,IAC3B;AAAA;AAAA,IAGA,6BAA6B;AAAA,MAC3BC,YAAY;AAAA,IACd;AAAA,IACA,aAAa;AAAA,MACXC,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAe,aAAYX,MAAMY,OAAOC,KAAM;AAAA,MAC9CC,YAAa,aAAYd,MAAMY,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,IACA,CAAE,SAAQC,gBAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEX,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERI,YAAa,aAAYd,MAAMY,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZrB,WAAW;AAAA,IAEX,uBAAuB;AAAA,MACrBK,aAAaJ,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAmB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBjB,aAAc,QAAOJ,MAAMC,MAAMI,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;"}

package/dist/esm/components/Radio/Radio.styles.js

@@ -17,8 +17,8 @@ const {
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     transitionDelay: "0ms",
     "&:hover": {
-      backgroundColor: theme.radio.hoverColor,
-      borderRadius: theme.radio.borderRadius
+      backgroundColor: theme.colors.containerBackgroundHover,
+      borderRadius: theme.radii.base
     }
   },
   invalidContainer: {

package/dist/esm/components/Radio/Radio.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.styles.js","sources":["../../../../src/components/Radio/Radio.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transitionProperty: \"background-color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDelay: \"0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.radio.hoverColor,\n      borderRadius: theme.radio.borderRadius,\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  radio: {\n    height: \"32px\",\n\n    \"& svg\": {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidRadio: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","container","cursor","height","transitionProperty","transitionDuration","transitionTimingFunction","transitionDelay","backgroundColor","theme","radio","hoverColor","borderRadius","invalidContainer","borderBottom","colors","negative","borderBottomLeftRadius","borderBottomRightRadius","disabled","color","secondary_60","outline","boxShadow","invalidRadio","label","overflow","textOverflow","verticalAlign","paddingRight","space","xs","whiteSpace","typography","body","lineHeight","width","focusVisible","atmo3","outlineStyles"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IAAEC,SAAS;AAAA,EAAe;AAAA,EAChCC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACRF,SAAS;AAAA,IACTG,QAAQ;AAAA,IACRC,oBAAoB;AAAA,IACpBC,oBAAoB;AAAA,IACpBC,0BAA0B;AAAA,IAC1BC,iBAAiB;AAAA,IAEjB,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,MAAMC;AAAAA,MAC7BC,cAAcH,MAAMC,MAAME;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,cAAe,aAAYL,MAAMM,OAAOC,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRjB,QAAQ;AAAA,IAER,YAAY;AAAA,MAAEkB,OAAOX,MAAMM,OAAOM;AAAAA,MAAcnB,QAAQ;AAAA,IAAc;AAAA,EACxE;AAAA,EACAQ,OAAO;AAAA,IACLP,QAAQ;AAAA,IAER,SAAS;AAAA,MACPmB,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZV,cAAe,aAAYL,MAAMM,OAAOC,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACAO,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,cAAcpB,MAAMqB,MAAMC;AAAAA,IAC1BC,YAAY;AAAA,IACZ,GAAGvB,MAAMwB,WAAWC;AAAAA,IACpBhC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRgC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AAAA,EACAC,cAAc;AAAA,IAAE7B,iBAAiBC,MAAMM,OAAOuB;AAAAA,IAAO,GAAGC;AAAAA,EAAc;AACxE,CAAC;"}
+{"version":3,"file":"Radio.styles.js","sources":["../../../../src/components/Radio/Radio.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transitionProperty: \"background-color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDelay: \"0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  radio: {\n    height: \"32px\",\n\n    \"& svg\": {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidRadio: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","container","cursor","height","transitionProperty","transitionDuration","transitionTimingFunction","transitionDelay","backgroundColor","theme","colors","containerBackgroundHover","borderRadius","radii","base","invalidContainer","borderBottom","negative","borderBottomLeftRadius","borderBottomRightRadius","disabled","color","secondary_60","radio","outline","boxShadow","invalidRadio","label","overflow","textOverflow","verticalAlign","paddingRight","space","xs","whiteSpace","typography","body","lineHeight","width","focusVisible","atmo3","outlineStyles"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IAAEC,SAAS;AAAA,EAAe;AAAA,EAChCC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACRF,SAAS;AAAA,IACTG,QAAQ;AAAA,IACRC,oBAAoB;AAAA,IACpBC,oBAAoB;AAAA,IACpBC,0BAA0B;AAAA,IAC1BC,iBAAiB;AAAA,IAEjB,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,cAAcH,MAAMI,MAAMC;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,cAAe,aAAYP,MAAMC,OAAOO,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRlB,QAAQ;AAAA,IAER,YAAY;AAAA,MAAEmB,OAAOZ,MAAMC,OAAOY;AAAAA,MAAcpB,QAAQ;AAAA,IAAc;AAAA,EACxE;AAAA,EACAqB,OAAO;AAAA,IACLpB,QAAQ;AAAA,IAER,SAAS;AAAA,MACPqB,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZV,cAAe,aAAYP,MAAMC,OAAOO,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACAQ,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,cAActB,MAAMuB,MAAMC;AAAAA,IAC1BC,YAAY;AAAA,IACZ,GAAGzB,MAAM0B,WAAWC;AAAAA,IACpBlC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRkC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AAAA,EACAC,cAAc;AAAA,IAAE/B,iBAAiBC,MAAMC,OAAO8B;AAAAA,IAAO,GAAGC;AAAAA,EAAc;AACxE,CAAC;"}

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js

@@ -2,17 +2,19 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { setId } from "../../../../utils/setId.js";
 import { useClasses } from "./HorizontalScrollListItem.styles.js";
 import { staticClasses } from "./HorizontalScrollListItem.styles.js";
-const HvHorizontalScrollListItem = ({
-  id,
-  className,
-  classes: classesProp,
-  selected,
-  children,
-  onClick,
-  onKeyDown,
-  tooltipWrapper,
-  ...others
-}) => {
+import { useDefaultProps } from "../../../../hooks/useDefaultProps.js";
+const HvHorizontalScrollListItem = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    selected,
+    children,
+    onClick,
+    onKeyDown,
+    tooltipWrapper,
+    ...others
+  } = useDefaultProps("HvHorizontalScrollListItem", props);
   const {
     classes,
     cx

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./HorizontalScrollListItem.styles\";\n\nexport { staticClasses as horizontalScrollListItemClasses };\n\nexport type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** The text to render.  */\n  children: React.ReactNode;\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = ({\n  id,\n  className,\n  classes: classesProp,\n  selected,\n  children,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const variant = selected ? \"label\" : \"body\";\n  const labelId = setId(id, \"label\");\n  const buttonId = setId(id, \"button\");\n  const Tooltip = tooltipWrapper;\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <div\n        id={buttonId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        <Tooltip\n          id={labelId}\n          className={cx(classes.text, { [classes.selected]: selected })}\n          variant={variant}\n        >\n          {children}\n        </Tooltip>\n      </div>\n    </li>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","classesProp","selected","children","onClick","onKeyDown","tooltipWrapper","others","cx","useClasses","variant","labelId","setId","buttonId","Tooltip","root","button","text"],"mappings":";;;;AAkCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AACxCS,QAAAA,UAAUR,WAAW,UAAU;AAC/BS,QAAAA,UAAUC,MAAMd,IAAI,OAAO;AAC3Be,QAAAA,WAAWD,MAAMd,IAAI,QAAQ;AACnC,QAAMgB,UAAUR;AAEhB,SACG,oBAAA,MAAA,EAAG,IAAQ,WAAWE,GAAGR,QAAQe,MAAMhB,SAAS,GAAG,gBAAcG,UAChE,UAAA,oBAAC,OACC,EAAA,IAAIW,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWb,QAAQgB,QACnB,mBAAiBL,SACbJ,GAAAA,QAEJ,UAAA,oBAAC,WACC,IAAII,SACJ,WAAWH,GAAGR,QAAQiB,MAAM;AAAA,IAAE,CAACjB,QAAQE,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAECC,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./HorizontalScrollListItem.styles\";\n\nexport { staticClasses as horizontalScrollListItemClasses };\n\nexport type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** The text to render.  */\n  children: React.ReactNode;\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = (\n  props: HvVerticalScrollListItemProps\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selected,\n    children,\n    onClick,\n    onKeyDown,\n    tooltipWrapper,\n    ...others\n  } = useDefaultProps(\"HvHorizontalScrollListItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const variant = selected ? \"label\" : \"body\";\n  const labelId = setId(id, \"label\");\n  const buttonId = setId(id, \"button\");\n  const Tooltip = tooltipWrapper;\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <div\n        id={buttonId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        <Tooltip\n          id={labelId}\n          className={cx(classes.text, { [classes.selected]: selected })}\n          variant={variant}\n        >\n          {children}\n        </Tooltip>\n      </div>\n    </li>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","props","id","className","classes","classesProp","selected","children","onClick","onKeyDown","tooltipWrapper","others","useDefaultProps","cx","useClasses","variant","labelId","setId","buttonId","Tooltip","root","button","text"],"mappings":";;;;;AAmCaA,MAAAA,6BAA6BA,CACxCC,UACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,8BAA8BX,KAAK;AACjD,QAAA;AAAA,IAAEG;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACxCU,QAAAA,UAAUT,WAAW,UAAU;AAC/BU,QAAAA,UAAUC,MAAMf,IAAI,OAAO;AAC3BgB,QAAAA,WAAWD,MAAMf,IAAI,QAAQ;AACnC,QAAMiB,UAAUT;AAEhB,SACG,oBAAA,MAAA,EAAG,IAAQ,WAAWG,GAAGT,QAAQgB,MAAMjB,SAAS,GAAG,gBAAcG,UAChE,UAAA,oBAAC,OACC,EAAA,IAAIY,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWd,QAAQiB,QACnB,mBAAiBL,SACbL,GAAAA,QAEJ,UAAA,oBAAC,WACC,IAAIK,SACJ,WAAWH,GAAGT,QAAQkB,MAAM;AAAA,IAAE,CAAClB,QAAQE,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAECC,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js

@@ -13,18 +13,18 @@ const {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    height: theme.scrollTo.horizontal.buttonHeight,
+    height: "48px",
     cursor: "pointer",
-    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,
+    borderBottom: "none",
     "&:hover": {
-      backgroundColor: theme.scrollTo.horizontal.buttonHoverBackgroundColor,
+      backgroundColor: "transparent",
       "& $notSelected": {
-        height: theme.scrollTo.dotHoverSize,
-        width: theme.scrollTo.dotHoverSize,
-        backgroundColor: theme.scrollTo.dotHoverColor
+        height: "6px",
+        width: "6px",
+        backgroundColor: theme.colors.secondary
       },
       "& $notSelectedRoot": {
-        backgroundColor: theme.scrollTo.dotHoverBackgroundColor
+        backgroundColor: theme.colors.containerBackgroundHover
       }
     },
     "&:focus": {
@@ -39,17 +39,17 @@ const {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    height: theme.scrollTo.horizontal.buttonHeight,
-    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,
+    height: "48px",
+    borderBottom: "none",
     "& p": {
-      padding: theme.scrollTo.horizontal.textPadding,
-      maxWidth: theme.scrollTo.horizontal.textMaxWidth,
+      padding: "3px 10px",
+      maxWidth: "120px",
       textOverflow: "ellipsis",
       overflow: "hidden"
     }
   },
   selected: {
-    borderBottom: theme.scrollTo.horizontal.selectedButtonBottomBorder
+    borderBottom: "none"
   }
 });
 export {

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvHorizontalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: \"10px 0\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.horizontal.buttonHeight,\n    cursor: \"pointer\",\n    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n    \"&:hover\": {\n      backgroundColor: theme.scrollTo.horizontal.buttonHoverBackgroundColor,\n\n      \"& $notSelected\": {\n        height: theme.scrollTo.dotHoverSize,\n        width: theme.scrollTo.dotHoverSize,\n        backgroundColor: theme.scrollTo.dotHoverColor,\n      },\n\n      \"& $notSelectedRoot\": {\n        backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  text: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: theme.scrollTo.horizontal.buttonHeight,\n    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n\n    \"& p\": {\n      padding: theme.scrollTo.horizontal.textPadding,\n      maxWidth: theme.scrollTo.horizontal.textMaxWidth,\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n    },\n  },\n  selected: {\n    borderBottom: theme.scrollTo.horizontal.selectedButtonBottomBorder,\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","padding","button","display","justifyContent","alignItems","height","theme","scrollTo","horizontal","buttonHeight","cursor","borderBottom","buttonBottomBorder","backgroundColor","buttonHoverBackgroundColor","dotHoverSize","width","dotHoverColor","dotHoverBackgroundColor","outline","outlineStyles","text","flexDirection","textPadding","maxWidth","textMaxWidth","textOverflow","overflow","selected","selectedButtonBottomBorder"],"mappings":";;;AAKA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,EACX;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQC,MAAMC,SAASC,WAAWC;AAAAA,IAClCC,QAAQ;AAAA,IACRC,cAAcL,MAAMC,SAASC,WAAWI;AAAAA,IACxC,WAAW;AAAA,MACTC,iBAAiBP,MAAMC,SAASC,WAAWM;AAAAA,MAE3C,kBAAkB;AAAA,QAChBT,QAAQC,MAAMC,SAASQ;AAAAA,QACvBC,OAAOV,MAAMC,SAASQ;AAAAA,QACtBF,iBAAiBP,MAAMC,SAASU;AAAAA,MAClC;AAAA,MAEA,sBAAsB;AAAA,QACpBJ,iBAAiBP,MAAMC,SAASW;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJnB,SAAS;AAAA,IACToB,eAAe;AAAA,IACflB,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBE,QAAQC,MAAMC,SAASC,WAAWC;AAAAA,IAClCE,cAAcL,MAAMC,SAASC,WAAWI;AAAAA,IAExC,OAAO;AAAA,MACLZ,SAASM,MAAMC,SAASC,WAAWe;AAAAA,MACnCC,UAAUlB,MAAMC,SAASC,WAAWiB;AAAAA,MACpCC,cAAc;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRjB,cAAcL,MAAMC,SAASC,WAAWqB;AAAAA,EAC1C;AACF,CAAC;"}
+{"version":3,"file":"HorizontalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvHorizontalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: \"10px 0\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"48px\",\n    cursor: \"pointer\",\n    borderBottom: \"none\",\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n\n      \"& $notSelected\": {\n        height: \"6px\",\n        width: \"6px\",\n        backgroundColor: theme.colors.secondary,\n      },\n\n      \"& $notSelectedRoot\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  text: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"48px\",\n    borderBottom: \"none\",\n\n    \"& p\": {\n      padding: \"3px 10px\",\n      maxWidth: \"120px\",\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n    },\n  },\n  selected: {\n    borderBottom: \"none\",\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","padding","button","display","justifyContent","alignItems","height","cursor","borderBottom","backgroundColor","width","theme","colors","secondary","containerBackgroundHover","outline","outlineStyles","text","flexDirection","maxWidth","textOverflow","overflow","selected"],"mappings":";;;AAKA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,EACX;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRC,cAAc;AAAA,IACd,WAAW;AAAA,MACTC,iBAAiB;AAAA,MAEjB,kBAAkB;AAAA,QAChBH,QAAQ;AAAA,QACRI,OAAO;AAAA,QACPD,iBAAiBE,MAAMC,OAAOC;AAAAA,MAChC;AAAA,MAEA,sBAAsB;AAAA,QACpBJ,iBAAiBE,MAAMC,OAAOE;AAAAA,MAChC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJd,SAAS;AAAA,IACTe,eAAe;AAAA,IACfb,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBE,QAAQ;AAAA,IACRE,cAAc;AAAA,IAEd,OAAO;AAAA,MACLP,SAAS;AAAA,MACTkB,UAAU;AAAA,MACVC,cAAc;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRd,cAAc;AAAA,EAChB;AACF,CAAC;"}

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js

@@ -10,7 +10,7 @@ const {
     padding: "0 30px",
     listStyleType: "none",
     flexWrap: "wrap",
-    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`
+    backdropFilter: `blur(4px)`
   },
   positionSticky: {
     position: "sticky",
@@ -25,24 +25,24 @@ const {
     left: 0
   },
   notSelectedRoot: {
-    display: theme.scrollTo.horizontal.dotDisplay,
+    display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    height: theme.scrollTo.dotRootSize,
-    width: theme.scrollTo.dotRootSize,
-    borderRadius: theme.scrollTo.dotRootRadius
+    height: "16px",
+    width: "16px",
+    borderRadius: "50%"
   },
   notSelected: {
-    height: theme.scrollTo.dotNotSelectedSize,
-    width: theme.scrollTo.dotNotSelectedSize,
+    height: "4px",
+    width: "4px",
     borderRadius: "50%",
     display: "inline-block",
-    backgroundColor: theme.scrollTo.dotNotSelectedColor
+    backgroundColor: theme.colors.secondary_60
   },
   selected: {
-    display: theme.scrollTo.horizontal.dotDisplay,
-    height: theme.scrollTo.dotRootSize,
-    width: theme.scrollTo.dotRootSize
+    display: "flex",
+    height: "16px",
+    width: "16px"
   }
 });
 export {

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvScrollToHorizontal\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    display: \"flex\",\n    padding: \"0 30px\",\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n  },\n  positionSticky: {\n    position: \"sticky\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n  },\n  positionFixed: {\n    position: \"fixed\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n  },\n  notSelectedRoot: {\n    display: theme.scrollTo.horizontal.dotDisplay,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n    borderRadius: theme.scrollTo.dotRootRadius,\n  },\n  notSelected: {\n    height: theme.scrollTo.dotNotSelectedSize,\n    width: theme.scrollTo.dotNotSelectedSize,\n    borderRadius: \"50%\",\n    display: \"inline-block\",\n    backgroundColor: theme.scrollTo.dotNotSelectedColor,\n  },\n  selected: {\n    display: theme.scrollTo.horizontal.dotDisplay,\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","display","padding","listStyleType","flexWrap","backdropFilter","theme","scrollTo","backgroundColorBlur","positionSticky","position","zIndex","zIndices","banner","top","left","positionFixed","notSelectedRoot","horizontal","dotDisplay","justifyContent","alignItems","height","dotRootSize","width","borderRadius","dotRootRadius","notSelected","dotNotSelectedSize","backgroundColor","dotNotSelectedColor","selected"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,gBAAiB,QAAOC,MAAMC,SAASC,mBAAoB;AAAA,EAC7D;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC,MAAO;AAAA,IACtCC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,eAAe;AAAA,IACbN,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC,MAAO;AAAA,IACtCC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAE,iBAAiB;AAAA,IACfhB,SAASK,MAAMC,SAASW,WAAWC;AAAAA,IACnCC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQhB,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,MAAMC,SAASgB;AAAAA,IACtBE,cAAcnB,MAAMC,SAASmB;AAAAA,EAC/B;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQhB,MAAMC,SAASqB;AAAAA,IACvBJ,OAAOlB,MAAMC,SAASqB;AAAAA,IACtBH,cAAc;AAAA,IACdxB,SAAS;AAAA,IACT4B,iBAAiBvB,MAAMC,SAASuB;AAAAA,EAClC;AAAA,EACAC,UAAU;AAAA,IACR9B,SAASK,MAAMC,SAASW,WAAWC;AAAAA,IACnCG,QAAQhB,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,MAAMC,SAASgB;AAAAA,EACxB;AACF,CAAC;"}
+{"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvScrollToHorizontal\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    display: \"flex\",\n    padding: \"0 30px\",\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n    backdropFilter: `blur(4px)`,\n  },\n  positionSticky: {\n    position: \"sticky\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n  },\n  positionFixed: {\n    position: \"fixed\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n  },\n  notSelectedRoot: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"16px\",\n    width: \"16px\",\n    borderRadius: \"50%\",\n  },\n  notSelected: {\n    height: \"4px\",\n    width: \"4px\",\n    borderRadius: \"50%\",\n    display: \"inline-block\",\n    backgroundColor: theme.colors.secondary_60,\n  },\n  selected: {\n    display: \"flex\",\n    height: \"16px\",\n    width: \"16px\",\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","display","padding","listStyleType","flexWrap","backdropFilter","positionSticky","position","zIndex","theme","zIndices","banner","top","left","positionFixed","notSelectedRoot","justifyContent","alignItems","height","width","borderRadius","notSelected","backgroundColor","colors","secondary_60","selected"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,gBAAiB;AAAA,EACnB;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,QAAS,QAAOC,MAAMC,SAASC,MAAO;AAAA,IACtCC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,eAAe;AAAA,IACbP,UAAU;AAAA,IACVC,QAAS,QAAOC,MAAMC,SAASC,MAAO;AAAA,IACtCC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAE,iBAAiB;AAAA,IACfd,SAAS;AAAA,IACTe,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,cAAc;AAAA,EAChB;AAAA,EACAC,aAAa;AAAA,IACXH,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,cAAc;AAAA,IACdnB,SAAS;AAAA,IACTqB,iBAAiBb,MAAMc,OAAOC;AAAAA,EAChC;AAAA,EACAC,UAAU;AAAA,IACRxB,SAAS;AAAA,IACTiB,QAAQ;AAAA,IACRC,OAAO;AAAA,EACT;AACF,CAAC;"}

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js

@@ -13,7 +13,7 @@ const {
     listStyleType: "none",
     flexWrap: "wrap",
     flexDirection: "column",
-    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`
+    backdropFilter: `blur(4px)`
   },
   positionAbsolute: {
     width: "32px",

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.styles.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvScrollToVertical\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    display: \"flex\",\n    width: \"32px\",\n    padding: \"0\",\n    margin: 0,\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n    flexDirection: \"column\",\n    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n  },\n  positionAbsolute: {\n    width: \"32px\",\n    position: \"absolute\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    right: \"0\",\n  },\n  positionFixed: {\n    width: \"32px\",\n    position: \"fixed\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    right: \"0\",\n  },\n});\n\nexport const calculateOffset = (quantityOfOptions: number) => {\n  const itemSize = 32;\n  const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n  return halfOptions * itemSize;\n};\n"],"names":["name","staticClasses","useClasses","createClasses","root","display","width","padding","margin","listStyleType","flexWrap","flexDirection","backdropFilter","theme","scrollTo","backgroundColorBlur","positionAbsolute","position","zIndex","zIndices","banner","right","positionFixed","calculateOffset","quantityOfOptions","itemSize","halfOptions","Math","round"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,gBAAiB,QAAOC,MAAMC,SAASC,mBAAoB;AAAA,EAC7D;AAAA,EACAC,kBAAkB;AAAA,IAChBV,OAAO;AAAA,IACPW,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC,MAAO;AAAA,IACtCC,OAAO;AAAA,EACT;AAAA,EACAC,eAAe;AAAA,IACbhB,OAAO;AAAA,IACPW,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC,MAAO;AAAA,IACtCC,OAAO;AAAA,EACT;AACF,CAAC;AAEYE,MAAAA,kBAAkBA,CAACC,sBAA8B;AAC5D,QAAMC,WAAW;AACjB,QAAMC,cAAcC,KAAKC,MAAMJ,oBAAoB,GAAG;AAEtD,SAAOE,cAAcD;AACvB;"}
+{"version":3,"file":"ScrollToVertical.styles.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvScrollToVertical\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    display: \"flex\",\n    width: \"32px\",\n    padding: \"0\",\n    margin: 0,\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n    flexDirection: \"column\",\n    backdropFilter: `blur(4px)`,\n  },\n  positionAbsolute: {\n    width: \"32px\",\n    position: \"absolute\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    right: \"0\",\n  },\n  positionFixed: {\n    width: \"32px\",\n    position: \"fixed\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    right: \"0\",\n  },\n});\n\nexport const calculateOffset = (quantityOfOptions: number) => {\n  const itemSize = 32;\n  const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n  return halfOptions * itemSize;\n};\n"],"names":["name","staticClasses","useClasses","createClasses","root","display","width","padding","margin","listStyleType","flexWrap","flexDirection","backdropFilter","positionAbsolute","position","zIndex","theme","zIndices","banner","right","positionFixed","calculateOffset","quantityOfOptions","itemSize","halfOptions","Math","round"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,gBAAiB;AAAA,EACnB;AAAA,EACAC,kBAAkB;AAAA,IAChBP,OAAO;AAAA,IACPQ,UAAU;AAAA,IACVC,QAAS,QAAOC,MAAMC,SAASC,MAAO;AAAA,IACtCC,OAAO;AAAA,EACT;AAAA,EACAC,eAAe;AAAA,IACbd,OAAO;AAAA,IACPQ,UAAU;AAAA,IACVC,QAAS,QAAOC,MAAMC,SAASC,MAAO;AAAA,IACtCC,OAAO;AAAA,EACT;AACF,CAAC;AAEYE,MAAAA,kBAAkBA,CAACC,sBAA8B;AAC5D,QAAMC,WAAW;AACjB,QAAMC,cAAcC,KAAKC,MAAMJ,oBAAoB,GAAG;AAEtD,SAAOE,cAAcD;AACvB;"}

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js

@@ -4,17 +4,19 @@ import { setId } from "../../../../utils/setId.js";
 import { useTheme } from "../../../../hooks/useTheme.js";
 import { useClasses } from "./VerticalScrollListItem.styles.js";
 import { staticClasses } from "./VerticalScrollListItem.styles.js";
-const HvVerticalScrollListItem = ({
-  id,
-  className,
-  classes: classesProp,
-  selected,
-  "aria-label": ariaLabel,
-  onClick,
-  onKeyDown,
-  tooltipWrapper,
-  ...others
-}) => {
+import { useDefaultProps } from "../../../../hooks/useDefaultProps.js";
+const HvVerticalScrollListItem = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    selected,
+    "aria-label": ariaLabel,
+    onClick,
+    onKeyDown,
+    tooltipWrapper,
+    ...others
+  } = useDefaultProps("HvVerticalScrollListItem", props);
   const {
     classes,
     cx

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = ({\n  id,\n  className,\n  classes: classesProp,\n  selected,\n  \"aria-label\": ariaLabel,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const variant: HvTypographyProps[\"variant\"] = selected ? \"label\" : \"body\";\n\n  const labelId = setId(id, \"label\");\n\n  const buttonId = setId(id, \"button\");\n\n  const Tooltip = tooltipWrapper;\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <div className={cx(classes.notSelected)} />\n  );\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <div\n        id={buttonId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-label={ariaLabel}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        <Tooltip id={labelId} className={classes.text} variant={variant}>\n          {icon}\n        </Tooltip>\n      </div>\n    </li>\n  );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","classesProp","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","cx","useClasses","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","icon","scrollTo","dotSelectedSize","notSelected","root","button","text"],"mappings":";;;;;;AAmCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AACxC,QAAA;AAAA,IAAES;AAAAA,MAAgBC,SAAS;AAE3BC,QAAAA,UAAwCV,WAAW,UAAU;AAE7DW,QAAAA,UAAUC,MAAMhB,IAAI,OAAO;AAE3BiB,QAAAA,WAAWD,MAAMhB,IAAI,QAAQ;AAEnC,QAAMkB,UAAUV;AAEhB,QAAMW,OAAOf,WACX,oBAAC,eACC,QAAQQ,2CAAaQ,SAASC,iBAC9B,OAAOT,2CAAaQ,SAASC,gBAC7B,CAAA,IAED,oBAAA,OAAA,EAAI,WAAWX,GAAGR,QAAQoB,WAAW,EACvC,CAAA;AAED,6BACG,MAAG,EAAA,IAAQ,WAAWZ,GAAGR,QAAQqB,MAAMtB,SAAS,GAAG,gBAAcG,UAChE,8BAAC,OACC,EAAA,IAAIa,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWf,QAAQsB,QACnB,cAAYnB,WACZ,mBAAiBU,SACbN,GAAAA,QAEJ,UAAA,oBAAC,SAAQ,EAAA,IAAIM,SAAS,WAAWb,QAAQuB,MAAM,SAC5CN,UAAAA,KACH,CAAA,GACF,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = (\n  props: HvVerticalScrollListItemProps\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selected,\n    \"aria-label\": ariaLabel,\n    onClick,\n    onKeyDown,\n    tooltipWrapper,\n    ...others\n  } = useDefaultProps(\"HvVerticalScrollListItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const variant: HvTypographyProps[\"variant\"] = selected ? \"label\" : \"body\";\n\n  const labelId = setId(id, \"label\");\n\n  const buttonId = setId(id, \"button\");\n\n  const Tooltip = tooltipWrapper;\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <div className={cx(classes.notSelected)} />\n  );\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <div\n        id={buttonId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-label={ariaLabel}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        <Tooltip id={labelId} className={classes.text} variant={variant}>\n          {icon}\n        </Tooltip>\n      </div>\n    </li>\n  );\n};\n"],"names":["HvVerticalScrollListItem","props","id","className","classes","classesProp","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","icon","scrollTo","dotSelectedSize","notSelected","root","button","text"],"mappings":";;;;;;;AAoCaA,MAAAA,2BAA2BA,CACtCC,UACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,cAAcC;AAAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,4BAA4BX,KAAK;AAC/C,QAAA;AAAA,IAAEG;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAE3BC,QAAAA,UAAwCX,WAAW,UAAU;AAE7DY,QAAAA,UAAUC,MAAMjB,IAAI,OAAO;AAE3BkB,QAAAA,WAAWD,MAAMjB,IAAI,QAAQ;AAEnC,QAAMmB,UAAUX;AAEhB,QAAMY,OAAOhB,WACX,oBAAC,eACC,QAAQS,2CAAaQ,SAASC,iBAC9B,OAAOT,2CAAaQ,SAASC,gBAC7B,CAAA,IAED,oBAAA,OAAA,EAAI,WAAWX,GAAGT,QAAQqB,WAAW,EACvC,CAAA;AAED,6BACG,MAAG,EAAA,IAAQ,WAAWZ,GAAGT,QAAQsB,MAAMvB,SAAS,GAAG,gBAAcG,UAChE,8BAAC,OACC,EAAA,IAAIc,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWhB,QAAQuB,QACnB,cAAYpB,WACZ,mBAAiBW,SACbP,GAAAA,QAEJ,UAAA,oBAAC,SAAQ,EAAA,IAAIO,SAAS,WAAWd,QAAQwB,MAAM,SAC5CN,UAAAA,KACH,CAAA,GACF,EACF,CAAA;AAEJ;"}

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js

@@ -15,15 +15,15 @@ const {
     alignItems: "center"
   },
   notSelected: {
-    height: theme.scrollTo.dotNotSelectedSize,
-    width: theme.scrollTo.dotNotSelectedSize,
+    height: "4px",
+    width: "4px",
     borderRadius: "50%",
     display: "inline-block",
-    backgroundColor: theme.scrollTo.dotNotSelectedColor
+    backgroundColor: theme.colors.secondary_60
   },
   text: {
-    height: theme.scrollTo.dotRootSize,
-    width: theme.scrollTo.dotRootSize,
+    height: "16px",
+    width: "16px",
     display: "flex",
     justifyContent: "center",
     alignItems: "center"
@@ -32,16 +32,16 @@ const {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    height: theme.scrollTo.dotRootSize,
-    width: theme.scrollTo.dotRootSize,
-    borderRadius: theme.scrollTo.dotRootRadius,
+    height: "16px",
+    width: "16px",
+    borderRadius: "50%",
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: theme.scrollTo.dotHoverBackgroundColor,
+      backgroundColor: theme.colors.containerBackgroundHover,
       "& $notSelected": {
-        height: theme.scrollTo.dotHoverSize,
-        width: theme.scrollTo.dotHoverSize,
-        backgroundColor: theme.scrollTo.dotHoverColor
+        height: "6px",
+        width: "6px",
+        backgroundColor: theme.colors.secondary
       }
     },
     "&:focus": {

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { outlineStyles } from \"@core/utils/focusUtils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvVerticalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: \"0\",\n    height: \"32px\",\n    width: \"32px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  notSelected: {\n    height: theme.scrollTo.dotNotSelectedSize,\n    width: theme.scrollTo.dotNotSelectedSize,\n    borderRadius: \"50%\",\n    display: \"inline-block\",\n    backgroundColor: theme.scrollTo.dotNotSelectedColor,\n  },\n  text: {\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n    borderRadius: theme.scrollTo.dotRootRadius,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n\n      \"& $notSelected\": {\n        height: theme.scrollTo.dotHoverSize,\n        width: theme.scrollTo.dotHoverSize,\n        backgroundColor: theme.scrollTo.dotHoverColor,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","padding","height","width","display","justifyContent","alignItems","notSelected","theme","scrollTo","dotNotSelectedSize","borderRadius","backgroundColor","dotNotSelectedColor","text","dotRootSize","button","dotRootRadius","cursor","dotHoverBackgroundColor","dotHoverSize","dotHoverColor","outline","outlineStyles"],"mappings":";;;AAKA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQM,MAAMC,SAASC;AAAAA,IACvBP,OAAOK,MAAMC,SAASC;AAAAA,IACtBC,cAAc;AAAA,IACdP,SAAS;AAAA,IACTQ,iBAAiBJ,MAAMC,SAASI;AAAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJZ,QAAQM,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,MAAMC,SAASM;AAAAA,IACtBX,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAU,QAAQ;AAAA,IACNZ,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZJ,QAAQM,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,MAAMC,SAASM;AAAAA,IACtBJ,cAAcH,MAAMC,SAASQ;AAAAA,IAC7BC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBJ,MAAMC,SAASU;AAAAA,MAEhC,kBAAkB;AAAA,QAChBjB,QAAQM,MAAMC,SAASW;AAAAA,QACvBjB,OAAOK,MAAMC,SAASW;AAAAA,QACtBR,iBAAiBJ,MAAMC,SAASY;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"VerticalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { outlineStyles } from \"@core/utils/focusUtils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvVerticalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: \"0\",\n    height: \"32px\",\n    width: \"32px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  notSelected: {\n    height: \"4px\",\n    width: \"4px\",\n    borderRadius: \"50%\",\n    display: \"inline-block\",\n    backgroundColor: theme.colors.secondary_60,\n  },\n  text: {\n    height: \"16px\",\n    width: \"16px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"16px\",\n    width: \"16px\",\n    borderRadius: \"50%\",\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n\n      \"& $notSelected\": {\n        height: \"6px\",\n        width: \"6px\",\n        backgroundColor: theme.colors.secondary,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","padding","height","width","display","justifyContent","alignItems","notSelected","borderRadius","backgroundColor","theme","colors","secondary_60","text","button","cursor","containerBackgroundHover","secondary","outline","outlineStyles"],"mappings":";;;AAKA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPK,cAAc;AAAA,IACdJ,SAAS;AAAA,IACTK,iBAAiBC,MAAMC,OAAOC;AAAAA,EAChC;AAAA,EACAC,MAAM;AAAA,IACJX,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAQ,QAAQ;AAAA,IACNV,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZJ,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPK,cAAc;AAAA,IACdO,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBC,MAAMC,OAAOK;AAAAA,MAE9B,kBAAkB;AAAA,QAChBd,QAAQ;AAAA,QACRC,OAAO;AAAA,QACPM,iBAAiBC,MAAMC,OAAOM;AAAAA,MAChC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/Slider/Slider.styles.js

@@ -24,16 +24,16 @@ const dragSquare = {
   top: "-12px",
   content: "''",
   background: "transparent",
-  borderTop: `12px solid ${theme.slider.dragBarColor}`,
-  borderBottom: `12px solid ${theme.slider.dragBarColor}`,
+  borderTop: `12px solid ${theme.colors.primary_20}`,
+  borderBottom: `12px solid ${theme.colors.primary_20}`,
   zIndex: "-2"
 };
 const ring = {
   width: "32px",
   height: "32px",
   borderRadius: "50%",
-  border: `9px solid ${theme.slider.ringColor}`,
-  opacity: theme.slider.ringOpacity,
+  border: `9px solid ${theme.colors.primary_20}`,
+  opacity: "100%",
   content: "''",
   position: "absolute",
   top: "-10px",