@hitachivantara/uikit-react-core 5.28.1 → 5.30.0

package/dist/cjs/components/QueryBuilder/QueryBuilder.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.styles.cjs","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: theme.queryBuilder.border,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    minWidth: 740,\n    paddingBottom: theme.queryBuilder.topGroupPaddingBottom,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: 60,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: theme.queryBuilder.border,\n      borderLeft: theme.queryBuilder.border,\n\n      top: -38,\n      left: theme.queryBuilder.ruleSubGroupLeftConnectorPosition,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: theme.queryBuilder.border,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc( -1 * ${theme.space.sm})`,\n    left: `calc( -1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.atmo2 },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: theme.queryBuilder.border,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: theme.queryBuilder.ruleSubGroupContainerLeftConnectorPosition,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: theme.queryBuilder.topActionButtonContainerBottom,\n    right: theme.queryBuilder.topActionButtonContainerRight,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.atmo2,\n    display: \"inline-flex\",\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","padding","theme","space","sm","marginTop","marginBottom","border","queryBuilder","topGroup","margin","backgroundColor","maxWidth","minWidth","paddingBottom","topGroupPaddingBottom","subGroup","minHeight","content","zIndex","width","height","borderBottom","borderLeft","top","left","ruleSubGroupLeftConnectorPosition","combinator","topCombinator","combinatorButton","removeButton","topRemoveButton","right","topRemoveButtonDisabled","colors","atmo2","rulesContainer","subRulesContainer","marginLeft","md","paddingLeft","paddingTop","ruleSubGroupContainerLeftConnectorPosition","actionButtonContainer","topActionButtonContainer","bottom","topActionButtonContainerBottom","topActionButtonContainerRight","topRulesContainer","buttonBackground","display"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,QAAQL,YAAAA,MAAMM,aAAaD;AAAAA,EAC7B;AAAA;AAAA,EAEAE,UAAU;AAAA,IACRC,QAAQR,YAAAA,MAAMC,MAAMC;AAAAA,IACpBO,iBAAiB;AAAA,IACjBC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,eAAeZ,YAAAA,MAAMM,aAAaO;AAAAA,EACpC;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRN,QAAQ;AAAA,IACRO,WAAW;AAAA,IACXH,eAAe;AAAA,IAEf,aAAa;AAAA,MACXI,SAAS;AAAA,MACTlB,UAAU;AAAA,MACVmB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAcpB,YAAAA,MAAMM,aAAaD;AAAAA,MACjCgB,YAAYrB,YAAAA,MAAMM,aAAaD;AAAAA,MAE/BiB,KAAK;AAAA,MACLC,MAAMvB,YAAAA,MAAMM,aAAakB;AAAAA,IAC3B;AAAA,IACA,gDAAgD;AAAA,MAC9CR,SAAS;AAAA,MACTlB,UAAU;AAAA,MACVmB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERE,YAAYrB,YAAAA,MAAMM,aAAaD;AAAAA,MAE/BiB,KAAK;AAAA,MACLC,MAAO,QAAOvB,YAAAA,MAAMC,MAAMC,EAAG;AAAA,IAC/B;AAAA,EACF;AAAA;AAAA,EAEAuB,YAAY;AAAA,IAAEd,UAAU;AAAA,EAAG;AAAA;AAAA,EAE3Be,eAAe;AAAA,IACb5B,UAAU;AAAA,IACVwB,KAAM,cAAatB,YAAAA,MAAMC,MAAMC,EAAG;AAAA,IAClCqB,MAAO,cAAavB,YAAAA,MAAMC,MAAMC,EAAG;AAAA,EACrC;AAAA;AAAA,EAEAyB,kBAAkB,CAAC;AAAA;AAAA,EAEnBC,cAAc,CAAC;AAAA;AAAA,EAEfC,iBAAiB;AAAA,IAAE/B,UAAU;AAAA,IAAYwB,KAAK;AAAA,IAAKQ,OAAO;AAAA,EAAI;AAAA;AAAA,EAE9DC,yBAAyB;AAAA,IAAEtB,iBAAiBT,YAAAA,MAAMgC,OAAOC;AAAAA,EAAM;AAAA;AAAA,EAE/DC,gBAAgB,CAAC;AAAA;AAAA,EAEjBC,mBAAmB;AAAA,IACjBd,YAAYrB,YAAAA,MAAMM,aAAaD;AAAAA,IAC/B+B,YAAYpC,YAAAA,MAAMC,MAAMC;AAAAA,IACxBE,cAAcJ,YAAAA,MAAMC,MAAMoC;AAAAA,IAC1BC,aAAatC,YAAAA,MAAMC,MAAMC;AAAAA,IACzBqC,YAAY;AAAA,IACZzC,UAAU;AAAA,IACVyB,MAAMvB,YAAAA,MAAMM,aAAakC;AAAAA,IACzBtB,OAAO;AAAA,EACT;AAAA;AAAA,EAEAuB,uBAAuB;AAAA,IACrBL,YAAY;AAAA,IAEZ,OAAO;AAAA,MACLA,YAAYpC,YAAAA,MAAMC,MAAMC;AAAAA,IAC1B;AAAA,EACF;AAAA;AAAA,EAEAwC,0BAA0B;AAAA,IACxB5C,UAAU;AAAA,IACV6C,QAAQ3C,YAAAA,MAAMM,aAAasC;AAAAA,IAC3Bd,OAAO9B,YAAAA,MAAMM,aAAauC;AAAAA,EAC5B;AAAA;AAAA,EAEAC,mBAAmB,CAAC;AAAA;AAAA,EAEpBC,kBAAkB;AAAA,IAChBtC,iBAAiBT,YAAAA,MAAMgC,OAAOC;AAAAA,IAC9Be,SAAS;AAAA,EACX;AACF,CAAC;;;"}
+{"version":3,"file":"QueryBuilder.styles.cjs","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    minWidth: 740,\n    paddingBottom: `calc(${theme.space.md} * 3)`,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: 60,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: `1px solid ${theme.colors.atmo4}`,\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: -38,\n      left: -38,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc( -1 * ${theme.space.sm})`,\n    left: `calc( -1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.atmo2 },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: `1px solid ${theme.colors.atmo4}`,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: -33,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,\n    right: `calc(${theme.space.sm} * 1.75 + 2px)`,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.atmo2,\n    display: \"inline-flex\",\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","padding","theme","space","sm","marginTop","marginBottom","border","colors","atmo4","topGroup","margin","backgroundColor","maxWidth","minWidth","paddingBottom","md","subGroup","minHeight","content","zIndex","width","height","borderBottom","borderLeft","top","left","combinator","topCombinator","combinatorButton","removeButton","topRemoveButton","right","topRemoveButtonDisabled","atmo2","rulesContainer","subRulesContainer","marginLeft","paddingLeft","paddingTop","actionButtonContainer","topActionButtonContainer","bottom","topRulesContainer","buttonBackground","display"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,QAAS,aAAYL,YAAMM,MAAAA,OAAOC,KAAM;AAAA,EAC1C;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRC,QAAQT,YAAAA,MAAMC,MAAMC;AAAAA,IACpBQ,iBAAiB;AAAA,IACjBC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,eAAgB,QAAOb,YAAAA,MAAMC,MAAMa,EAAG;AAAA,EACxC;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRN,QAAQ;AAAA,IACRO,WAAW;AAAA,IACXH,eAAe;AAAA,IAEf,aAAa;AAAA,MACXI,SAAS;AAAA,MACTnB,UAAU;AAAA,MACVoB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAe,aAAYrB,YAAMM,MAAAA,OAAOC,KAAM;AAAA,MAC9Ce,YAAa,aAAYtB,YAAMM,MAAAA,OAAOC,KAAM;AAAA,MAE5CgB,KAAK;AAAA,MACLC,MAAM;AAAA,IACR;AAAA,IACA,gDAAgD;AAAA,MAC9CP,SAAS;AAAA,MACTnB,UAAU;AAAA,MACVoB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERE,YAAa,aAAYtB,YAAMM,MAAAA,OAAOC,KAAM;AAAA,MAE5CgB,KAAK;AAAA,MACLC,MAAO,QAAOxB,YAAAA,MAAMC,MAAMC,EAAG;AAAA,IAC/B;AAAA,EACF;AAAA;AAAA,EAEAuB,YAAY;AAAA,IAAEb,UAAU;AAAA,EAAG;AAAA;AAAA,EAE3Bc,eAAe;AAAA,IACb5B,UAAU;AAAA,IACVyB,KAAM,cAAavB,YAAAA,MAAMC,MAAMC,EAAG;AAAA,IAClCsB,MAAO,cAAaxB,YAAAA,MAAMC,MAAMC,EAAG;AAAA,EACrC;AAAA;AAAA,EAEAyB,kBAAkB,CAAC;AAAA;AAAA,EAEnBC,cAAc,CAAC;AAAA;AAAA,EAEfC,iBAAiB;AAAA,IAAE/B,UAAU;AAAA,IAAYyB,KAAK;AAAA,IAAKO,OAAO;AAAA,EAAI;AAAA;AAAA,EAE9DC,yBAAyB;AAAA,IAAErB,iBAAiBV,YAAAA,MAAMM,OAAO0B;AAAAA,EAAM;AAAA;AAAA,EAE/DC,gBAAgB,CAAC;AAAA;AAAA,EAEjBC,mBAAmB;AAAA,IACjBZ,YAAa,aAAYtB,YAAMM,MAAAA,OAAOC,KAAM;AAAA,IAC5C4B,YAAYnC,YAAAA,MAAMC,MAAMC;AAAAA,IACxBE,cAAcJ,YAAAA,MAAMC,MAAMa;AAAAA,IAC1BsB,aAAapC,YAAAA,MAAMC,MAAMC;AAAAA,IACzBmC,YAAY;AAAA,IACZvC,UAAU;AAAA,IACV0B,MAAM;AAAA,IACNL,OAAO;AAAA,EACT;AAAA;AAAA,EAEAmB,uBAAuB;AAAA,IACrBH,YAAY;AAAA,IAEZ,OAAO;AAAA,MACLA,YAAYnC,YAAAA,MAAMC,MAAMC;AAAAA,IAC1B;AAAA,EACF;AAAA;AAAA,EAEAqC,0BAA0B;AAAA,IACxBzC,UAAU;AAAA,IACV0C,QAAS,aAAYxC,YAAAA,MAAMC,MAAMa,EAAG;AAAA,IACpCgB,OAAQ,QAAO9B,YAAAA,MAAMC,MAAMC,EAAG;AAAA,EAChC;AAAA;AAAA,EAEAuC,mBAAmB,CAAC;AAAA;AAAA,EAEpBC,kBAAkB;AAAA,IAChBhC,iBAAiBV,YAAAA,MAAMM,OAAO0B;AAAAA,IAC9BW,SAAS;AAAA,EACX;AACF,CAAC;;;"}

package/dist/cjs/components/QueryBuilder/Rule/Rule.cjs

@@ -12,19 +12,22 @@ const Attribute = require("./Attribute/Attribute.cjs");
 const Operator = require("./Operator/Operator.cjs");
 const Value = require("./Value/Value.cjs");
 const Button = require("../../Button/Button.cjs");
-const Rule = ({
-  id,
-  combinator,
-  attribute,
-  operator,
-  value,
-  disabled,
-  isInvalid
-}) => {
+const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
+const Rule = (props) => {
+  const {
+    id,
+    combinator,
+    attribute,
+    operator,
+    value,
+    disabled,
+    isInvalid,
+    classes: classesProp
+  } = useDefaultProps.useDefaultProps("HvQueryBuilderRule", props);
   const {
     classes,
     cx
-  } = Rule_styles.useClasses();
+  } = Rule_styles.useClasses(classesProp);
   const context = React.useContext(Context.QueryBuilderContext);
   const theme = material.useTheme();
   const isMdDown = material.useMediaQuery(theme.breakpoints.down("md"));
@@ -64,5 +67,6 @@ const Rule = ({
     }, disabled: readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {}) }) })
   ] });
 };
+exports.queryBuilderRuleClasses = Rule_styles.staticClasses;
 exports.Rule = Rule;
 //# sourceMappingURL=Rule.cjs.map

package/dist/cjs/components/QueryBuilder/Rule/Rule.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.cjs","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","jsx","Delete","rule","delete","tooltip","HvGrid","root","Attribute","Operator","Value","actionsContainer","HvButton","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,YAAW,WAAA;AAE7BC,QAAAA,UAAUC,iBAAWC,QAAAA,mBAAmB;AAE9C,QAAMC,QAAQC,SAAAA;AAEd,QAAMC,WAAWC,SAAAA,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErD,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAQC;AAAAA,EAAab,IAAAA;AAEzDc,QAAAA,qBAAqBC,MAAAA,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,YAAAA,YACjB,MAAOC,2BAAAA,IAAAC,gBAAAA,QAAA,CAAA,CAAS,GAChBhB,OAAOiB,KAAKC,OAAOC,SACnB,QACF;AAEA,yCACGC,KACC,QAAA,EAAA,WAAS,MACT,WAAWlC,GAAGD,QAAQoC,MAAM;AAAA,IAAE,CAACpC,QAAQQ,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAAS,GACT,MAAK,UAEL,UAAA;AAAA,IAAAsB,2BAAA,IAACK,KAAO,QAAA,EAAA,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAAL,2BAAA,IAACO,UACC,WAAA,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACC1C,aAAa,QAAQsB,qBAAqB,KACxCa,2BAAAA,IAAAK,KAAA,QAAA,EAAO,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAACL,2BAAA,IAAAQ,mBAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAED3C,aAAa,SAASC,YAAY,QAAQqB,uBAAuB,qCAC/DkB,KAAAA,QAAO,EAAA,MAAI,MAAC,IAAE,MACZR,kCACEG,2BAAAA,IAAAS,MAAA,OAAA,EACC,WACA,IACA,UACA,OAEH,EACH,CAAA;AAAA,mCAEDJ,KAAAA,QAAO,EAAA,MAAI,MAAC,WAAWnC,QAAQwC,kBAC9B,UAAAV,2BAAA,IAACW,OACC,UAAA,EAAA,MAAI,MACJ,cAAY1B,OAAOiB,KAAKC,OAAOS,WAC/B,SAAS,MAAM;AACH,gBAAA;AAAA,QACRC,SAAS,CAAC;AAAA,UAAEtB,MAAM;AAAA,UAAe5B;AAAAA,QAAAA,CAAI;AAAA,QACrCmD,QAAQ7B,OAAOiB,KAAKC;AAAAA,MAAAA,CACrB;AAAA,IAAA,GAEH,UAAUjB,UAEV,UAACc,2BAAAA,IAAA,YAAA,CAAU,CAAA,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"Rule.cjs","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","jsx","Delete","rule","delete","tooltip","HvGrid","root","Attribute","Operator","Value","actionsContainer","HvButton","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,gBAAA,sBAAsBV,KAAK;AACzC,QAAA;AAAA,IAAEQ;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,YAAAA,WAAWH,WAAW;AAExCI,QAAAA,UAAUC,iBAAWC,QAAAA,mBAAmB;AAE9C,QAAMC,QAAQC,SAAAA;AAEd,QAAMC,WAAWC,SAAAA,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErD,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAQC;AAAAA,EAAab,IAAAA;AAEzDc,QAAAA,qBAAqBC,MAAAA,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,YAAAA,YACjB,MAAOC,2BAAAA,IAAAC,gBAAAA,QAAA,CAAA,CAAS,GAChBhB,OAAOiB,KAAKC,OAAOC,SACnB,QACF;AAEA,yCACGC,KACC,QAAA,EAAA,WAAS,MACT,WAAWlC,GAAGH,QAAQsC,MAAM;AAAA,IAAE,CAACtC,QAAQU,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAAS,GACT,MAAK,UAEL,UAAA;AAAA,IAAAsB,2BAAA,IAACK,KAAO,QAAA,EAAA,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAAL,2BAAA,IAACO,UACC,WAAA,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACC5C,aAAa,QAAQwB,qBAAqB,KACxCa,2BAAAA,IAAAK,KAAA,QAAA,EAAO,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAACL,2BAAA,IAAAQ,mBAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAED7C,aAAa,SAASC,YAAY,QAAQuB,uBAAuB,qCAC/DkB,KAAAA,QAAO,EAAA,MAAI,MAAC,IAAE,MACZR,kCACEG,2BAAAA,IAAAS,MAAA,OAAA,EACC,WACA,IACA,UACA,OAEH,EACH,CAAA;AAAA,mCAEDJ,KAAAA,QAAO,EAAA,MAAI,MAAC,WAAWrC,QAAQ0C,kBAC9B,UAAAV,2BAAA,IAACW,OACC,UAAA,EAAA,MAAI,MACJ,cAAY1B,OAAOiB,KAAKC,OAAOS,WAC/B,SAAS,MAAM;AACH,gBAAA;AAAA,QACRC,SAAS,CAAC;AAAA,UAAEtB,MAAM;AAAA,UAAe9B;AAAAA,QAAAA,CAAI;AAAA,QACrCqD,QAAQ7B,OAAOiB,KAAKC;AAAAA,MAAAA,CACrB;AAAA,IAAA,GAEH,UAAUjB,UAEV,UAACc,2BAAAA,IAAA,YAAA,CAAU,CAAA,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/QueryBuilder/Rule/Rule.styles.cjs

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

package/dist/cjs/components/QueryBuilder/Rule/Rule.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.styles.cjs","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,QAAAA,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,YAAAA,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,YAAAA,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,YAAAA,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQZ,YAAAA,MAAMU,aAAaG;AAAAA,MAE3BC,cAAcd,YAAAA,MAAMU,aAAaK;AAAAA,MACjCC,YAAYhB,YAAAA,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,YAAAA,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,IACA,CAAE,SAAQC,oBAAAA,cAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEd,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,YAAAA,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQ;AAAA,MAERI,YAAYhB,YAAAA,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,YAAAA,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZxB,WAAWC,YAAAA,MAAMU,aAAac;AAAAA,IAE9B,uBAAuB;AAAA,MACrBpB,aAAaJ,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAuB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBrB,aAAc,QAAOJ,YAAAA,MAAMC,MAAMI,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;;;"}
+{"version":3,"file":"Rule.styles.cjs","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,QAAAA,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,YAAAA,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,YAAAA,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,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAC9CC,YAAa,aAAYd,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,IACA,CAAE,SAAQC,oBAAAA,cAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEX,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERI,YAAa,aAAYd,YAAMY,MAAAA,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,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAmB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBjB,aAAc,QAAOJ,YAAAA,MAAMC,MAAMI,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;;;"}

package/dist/cjs/components/Radio/Radio.styles.cjs

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

package/dist/cjs/components/Radio/Radio.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.styles.cjs","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,QAAAA,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,YAAAA,MAAMC,MAAMC;AAAAA,MAC7BC,cAAcH,YAAAA,MAAMC,MAAME;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,cAAe,aAAYL,YAAMM,MAAAA,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,YAAAA,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,YAAMM,MAAAA,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,YAAAA,MAAMqB,MAAMC;AAAAA,IAC1BC,YAAY;AAAA,IACZ,GAAGvB,YAAAA,MAAMwB,WAAWC;AAAAA,IACpBhC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRgC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AAAA,EACAC,cAAc;AAAA,IAAE7B,iBAAiBC,YAAAA,MAAMM,OAAOuB;AAAAA,IAAO,GAAGC,WAAAA;AAAAA,EAAc;AACxE,CAAC;;;"}
+{"version":3,"file":"Radio.styles.cjs","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,QAAAA,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,YAAAA,MAAMC,OAAOC;AAAAA,MAC9BC,cAAcH,YAAAA,MAAMI,MAAMC;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,cAAe,aAAYP,YAAMC,MAAAA,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,YAAAA,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,YAAMC,MAAAA,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,YAAAA,MAAMuB,MAAMC;AAAAA,IAC1BC,YAAY;AAAA,IACZ,GAAGzB,YAAAA,MAAM0B,WAAWC;AAAAA,IACpBlC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRkC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AAAA,EACAC,cAAc;AAAA,IAAE/B,iBAAiBC,YAAAA,MAAMC,OAAO8B;AAAAA,IAAO,GAAGC,WAAAA;AAAAA,EAAc;AACxE,CAAC;;;"}

package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs

@@ -3,17 +3,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const setId = require("../../../../utils/setId.cjs");
 const HorizontalScrollListItem_styles = require("./HorizontalScrollListItem.styles.cjs");
-const HvHorizontalScrollListItem = ({
-  id,
-  className,
-  classes: classesProp,
-  selected,
-  children,
-  onClick,
-  onKeyDown,
-  tooltipWrapper,
-  ...others
-}) => {
+const useDefaultProps = require("../../../../hooks/useDefaultProps.cjs");
+const HvHorizontalScrollListItem = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    selected,
+    children,
+    onClick,
+    onKeyDown,
+    tooltipWrapper,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvHorizontalScrollListItem", props);
   const {
     classes,
     cx

package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.cjs","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","jsx","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,gCAAAA,WAAWR,WAAW;AACxCS,QAAAA,UAAUR,WAAW,UAAU;AAC/BS,QAAAA,UAAUC,MAAAA,MAAMd,IAAI,OAAO;AAC3Be,QAAAA,WAAWD,MAAAA,MAAMd,IAAI,QAAQ;AACnC,QAAMgB,UAAUR;AAEhB,SACGS,2BAAA,IAAA,MAAA,EAAG,IAAQ,WAAWP,GAAGR,QAAQgB,MAAMjB,SAAS,GAAG,gBAAcG,UAChE,UAAAa,+BAAC,OACC,EAAA,IAAIF,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWb,QAAQiB,QACnB,mBAAiBN,SACbJ,GAAAA,QAEJ,UAAAQ,2BAAA,IAAC,WACC,IAAIJ,SACJ,WAAWH,GAAGR,QAAQkB,MAAM;AAAA,IAAE,CAAClB,QAAQE,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAECC,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;"}
+{"version":3,"file":"HorizontalScrollListItem.cjs","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","jsx","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,gBAAA,8BAA8BX,KAAK;AACjD,QAAA;AAAA,IAAEG;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,gCAAAA,WAAWT,WAAW;AACxCU,QAAAA,UAAUT,WAAW,UAAU;AAC/BU,QAAAA,UAAUC,MAAAA,MAAMf,IAAI,OAAO;AAC3BgB,QAAAA,WAAWD,MAAAA,MAAMf,IAAI,QAAQ;AACnC,QAAMiB,UAAUT;AAEhB,SACGU,2BAAA,IAAA,MAAA,EAAG,IAAQ,WAAWP,GAAGT,QAAQiB,MAAMlB,SAAS,GAAG,gBAAcG,UAChE,UAAAc,+BAAC,OACC,EAAA,IAAIF,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWd,QAAQkB,QACnB,mBAAiBN,SACbL,GAAAA,QAEJ,UAAAS,2BAAA,IAAC,WACC,IAAIJ,SACJ,WAAWH,GAAGT,QAAQmB,MAAM;AAAA,IAAE,CAACnB,QAAQE,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAECC,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs

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

package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.styles.cjs","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,QAAAA,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,YAAMC,MAAAA,SAASC,WAAWC;AAAAA,IAClCC,QAAQ;AAAA,IACRC,cAAcL,YAAMC,MAAAA,SAASC,WAAWI;AAAAA,IACxC,WAAW;AAAA,MACTC,iBAAiBP,YAAMC,MAAAA,SAASC,WAAWM;AAAAA,MAE3C,kBAAkB;AAAA,QAChBT,QAAQC,YAAAA,MAAMC,SAASQ;AAAAA,QACvBC,OAAOV,YAAAA,MAAMC,SAASQ;AAAAA,QACtBF,iBAAiBP,YAAAA,MAAMC,SAASU;AAAAA,MAClC;AAAA,MAEA,sBAAsB;AAAA,QACpBJ,iBAAiBP,YAAAA,MAAMC,SAASW;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJnB,SAAS;AAAA,IACToB,eAAe;AAAA,IACflB,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBE,QAAQC,YAAMC,MAAAA,SAASC,WAAWC;AAAAA,IAClCE,cAAcL,YAAMC,MAAAA,SAASC,WAAWI;AAAAA,IAExC,OAAO;AAAA,MACLZ,SAASM,YAAMC,MAAAA,SAASC,WAAWe;AAAAA,MACnCC,UAAUlB,YAAMC,MAAAA,SAASC,WAAWiB;AAAAA,MACpCC,cAAc;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRjB,cAAcL,YAAMC,MAAAA,SAASC,WAAWqB;AAAAA,EAC1C;AACF,CAAC;;;"}
+{"version":3,"file":"HorizontalScrollListItem.styles.cjs","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,QAAAA,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,YAAAA,MAAMC,OAAOC;AAAAA,MAChC;AAAA,MAEA,sBAAsB;AAAA,QACpBJ,iBAAiBE,YAAAA,MAAMC,OAAOE;AAAAA,MAChC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;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/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs

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

package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.styles.cjs","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,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,gBAAiB,QAAOC,YAAAA,MAAMC,SAASC,mBAAoB;AAAA,EAC7D;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,QAAS,QAAOL,YAAAA,MAAMM,SAASC,MAAO;AAAA,IACtCC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,eAAe;AAAA,IACbN,UAAU;AAAA,IACVC,QAAS,QAAOL,YAAAA,MAAMM,SAASC,MAAO;AAAA,IACtCC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAE,iBAAiB;AAAA,IACfhB,SAASK,YAAMC,MAAAA,SAASW,WAAWC;AAAAA,IACnCC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQhB,YAAAA,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,YAAAA,MAAMC,SAASgB;AAAAA,IACtBE,cAAcnB,YAAAA,MAAMC,SAASmB;AAAAA,EAC/B;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQhB,YAAAA,MAAMC,SAASqB;AAAAA,IACvBJ,OAAOlB,YAAAA,MAAMC,SAASqB;AAAAA,IACtBH,cAAc;AAAA,IACdxB,SAAS;AAAA,IACT4B,iBAAiBvB,YAAAA,MAAMC,SAASuB;AAAAA,EAClC;AAAA,EACAC,UAAU;AAAA,IACR9B,SAASK,YAAMC,MAAAA,SAASW,WAAWC;AAAAA,IACnCG,QAAQhB,YAAAA,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,YAAAA,MAAMC,SAASgB;AAAAA,EACxB;AACF,CAAC;;;"}
+{"version":3,"file":"ScrollToHorizontal.styles.cjs","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,QAAAA,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,YAAAA,MAAMC,SAASC,MAAO;AAAA,IACtCC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,eAAe;AAAA,IACbP,UAAU;AAAA,IACVC,QAAS,QAAOC,YAAAA,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,YAAAA,MAAMc,OAAOC;AAAAA,EAChC;AAAA,EACAC,UAAU;AAAA,IACRxB,SAAS;AAAA,IACTiB,QAAQ;AAAA,IACRC,OAAO;AAAA,EACT;AACF,CAAC;;;"}

package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs

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

package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.styles.cjs","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,QAAAA,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,YAAAA,MAAMC,SAASC,mBAAoB;AAAA,EAC7D;AAAA,EACAC,kBAAkB;AAAA,IAChBV,OAAO;AAAA,IACPW,UAAU;AAAA,IACVC,QAAS,QAAOL,YAAAA,MAAMM,SAASC,MAAO;AAAA,IACtCC,OAAO;AAAA,EACT;AAAA,EACAC,eAAe;AAAA,IACbhB,OAAO;AAAA,IACPW,UAAU;AAAA,IACVC,QAAS,QAAOL,YAAAA,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.cjs","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,QAAAA,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,YAAAA,MAAMC,SAASC,MAAO;AAAA,IACtCC,OAAO;AAAA,EACT;AAAA,EACAC,eAAe;AAAA,IACbd,OAAO;AAAA,IACPQ,UAAU;AAAA,IACVC,QAAS,QAAOC,YAAAA,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/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs

@@ -5,17 +5,19 @@ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const setId = require("../../../../utils/setId.cjs");
 const useTheme = require("../../../../hooks/useTheme.cjs");
 const VerticalScrollListItem_styles = require("./VerticalScrollListItem.styles.cjs");
-const HvVerticalScrollListItem = ({
-  id,
-  className,
-  classes: classesProp,
-  selected,
-  "aria-label": ariaLabel,
-  onClick,
-  onKeyDown,
-  tooltipWrapper,
-  ...others
-}) => {
+const useDefaultProps = require("../../../../hooks/useDefaultProps.cjs");
+const HvVerticalScrollListItem = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    selected,
+    "aria-label": ariaLabel,
+    onClick,
+    onKeyDown,
+    tooltipWrapper,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvVerticalScrollListItem", props);
   const {
     classes,
     cx

package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.cjs","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","jsx","CurrentStep","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,8BAAAA,WAAWR,WAAW;AACxC,QAAA;AAAA,IAAES;AAAAA,MAAgBC,SAAS,SAAA;AAE3BC,QAAAA,UAAwCV,WAAW,UAAU;AAE7DW,QAAAA,UAAUC,MAAAA,MAAMhB,IAAI,OAAO;AAE3BiB,QAAAA,WAAWD,MAAAA,MAAMhB,IAAI,QAAQ;AAEnC,QAAMkB,UAAUV;AAEhB,QAAMW,OAAOf,WACXgB,2BAAAA,IAACC,+BACC,QAAQT,2CAAaU,SAASC,iBAC9B,OAAOX,2CAAaU,SAASC,gBAC7B,CAAA,IAEDH,2BAAA,IAAA,OAAA,EAAI,WAAWV,GAAGR,QAAQsB,WAAW,EACvC,CAAA;AAED,wCACG,MAAG,EAAA,IAAQ,WAAWd,GAAGR,QAAQuB,MAAMxB,SAAS,GAAG,gBAAcG,UAChE,yCAAC,OACC,EAAA,IAAIa,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWf,QAAQwB,QACnB,cAAYrB,WACZ,mBAAiBU,SACbN,GAAAA,QAEJ,UAAAW,2BAAAA,IAAC,SAAQ,EAAA,IAAIL,SAAS,WAAWb,QAAQyB,MAAM,SAC5CR,UAAAA,KACH,CAAA,GACF,EACF,CAAA;AAEJ;;;"}
+{"version":3,"file":"VerticalScrollListItem.cjs","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","jsx","CurrentStep","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,gBAAA,4BAA4BX,KAAK;AAC/C,QAAA;AAAA,IAAEG;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,8BAAAA,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS,SAAA;AAE3BC,QAAAA,UAAwCX,WAAW,UAAU;AAE7DY,QAAAA,UAAUC,MAAAA,MAAMjB,IAAI,OAAO;AAE3BkB,QAAAA,WAAWD,MAAAA,MAAMjB,IAAI,QAAQ;AAEnC,QAAMmB,UAAUX;AAEhB,QAAMY,OAAOhB,WACXiB,2BAAAA,IAACC,+BACC,QAAQT,2CAAaU,SAASC,iBAC9B,OAAOX,2CAAaU,SAASC,gBAC7B,CAAA,IAEDH,2BAAA,IAAA,OAAA,EAAI,WAAWV,GAAGT,QAAQuB,WAAW,EACvC,CAAA;AAED,wCACG,MAAG,EAAA,IAAQ,WAAWd,GAAGT,QAAQwB,MAAMzB,SAAS,GAAG,gBAAcG,UAChE,yCAAC,OACC,EAAA,IAAIc,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWhB,QAAQyB,QACnB,cAAYtB,WACZ,mBAAiBW,SACbP,GAAAA,QAEJ,UAAAY,2BAAAA,IAAC,SAAQ,EAAA,IAAIL,SAAS,WAAWd,QAAQ0B,MAAM,SAC5CR,UAAAA,KACH,CAAA,GACF,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs

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

package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.styles.cjs","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,QAAAA,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,YAAAA,MAAMC,SAASC;AAAAA,IACvBP,OAAOK,YAAAA,MAAMC,SAASC;AAAAA,IACtBC,cAAc;AAAA,IACdP,SAAS;AAAA,IACTQ,iBAAiBJ,YAAAA,MAAMC,SAASI;AAAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJZ,QAAQM,YAAAA,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,YAAAA,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,YAAAA,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,YAAAA,MAAMC,SAASM;AAAAA,IACtBJ,cAAcH,YAAAA,MAAMC,SAASQ;AAAAA,IAC7BC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBJ,YAAAA,MAAMC,SAASU;AAAAA,MAEhC,kBAAkB;AAAA,QAChBjB,QAAQM,YAAAA,MAAMC,SAASW;AAAAA,QACvBjB,OAAOK,YAAAA,MAAMC,SAASW;AAAAA,QACtBR,iBAAiBJ,YAAAA,MAAMC,SAASY;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"VerticalScrollListItem.styles.cjs","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,QAAAA,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,YAAAA,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,YAAAA,MAAMC,OAAOK;AAAAA,MAE9B,kBAAkB;AAAA,QAChBd,QAAQ;AAAA,QACRC,OAAO;AAAA,QACPM,iBAAiBC,YAAAA,MAAMC,OAAOM;AAAAA,MAChC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/components/Slider/Slider.styles.cjs

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