@hitachivantara/uikit-react-core 5.7.0 → 5.7.1

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

@@ -1 +1 @@
-{"version":3,"file":"RuleGroup.cjs","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback, useContext } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvButton,\n  HvEmptyState,\n  HvGrid,\n  HvMultiButton,\n  HvTypography,\n} from \"@core/components\";\nimport { Rule } from \"../Rule\";\nimport { withTooltip } from \"@core/hocs\";\nimport queryBuilderClasses, {\n  HvQueryBuilderClasses,\n} from \"../queryBuilderClasses\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./RuleGroup.styles\";\n\nexport interface RuleGroupProps {\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n  id?: number;\n  level?: number;\n  combinator?: string;\n  rules?: any[];\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes,\n}: RuleGroupProps) => {\n  const context = useContext(QueryBuilderContext);\n\n  const { dispatchAction, askAction, maxDepth, combinators, labels, readOnly } =\n    context;\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <ClassNames>\n      {({ css, cx }) => (\n        <>\n          <div\n            className={cx(\n              queryBuilderClasses.buttonBackground,\n              css(styles.buttonBackground),\n              classes?.buttonBackground\n            )}\n          >\n            <HvButton\n              variant=\"secondarySubtle\"\n              onClick={() => {\n                dispatchAction({ type: \"add-rule\", id });\n              }}\n              disabled={readOnly}\n              startIcon={<Add />}\n            >\n              {level === 0 && labels.query?.addRule?.label != null\n                ? labels.query?.addRule?.label\n                : labels.group.addRule.label}\n            </HvButton>\n          </div>\n          {level <= normalizedMaxDepth && (\n            <div\n              className={cx(\n                queryBuilderClasses.buttonBackground,\n                css(styles.buttonBackground),\n                classes?.buttonBackground\n              )}\n            >\n              <HvButton\n                variant=\"secondarySubtle\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-group\", id });\n                }}\n                disabled={readOnly}\n                startIcon={<Add />}\n              >\n                {level === 0 && labels.query?.addGroup?.label != null\n                  ? labels.query?.addGroup?.label\n                  : labels.group.addGroup.label}\n              </HvButton>\n            </div>\n          )}\n        </>\n      )}\n    </ClassNames>\n  );\n\n  const DeleteIcon = withTooltip(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <Delete\n            className={\n              readOnly\n                ? cx(\n                    queryBuilderClasses.topRemoveButtonDisabled,\n                    css(styles.topRemoveButtonDisabled),\n                    classes?.topRemoveButtonDisabled\n                  )\n                : \"\"\n            }\n          />\n        )}\n      </ClassNames>\n    ),\n    level === 0 && labels.query?.delete?.tooltip\n      ? labels.query?.delete?.tooltip\n      : labels.group.delete.tooltip,\n    \"top\"\n  );\n\n  const onClickCombinator = useCallback(\n    (item) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            queryBuilderClasses.root,\n            css(styles.root),\n            classes?.root,\n            level === 0\n              ? cx(\n                  queryBuilderClasses.topGroup,\n                  css(styles.topGroup),\n                  classes?.topGroup\n                )\n              : cx(\n                  queryBuilderClasses.subGroup,\n                  css(styles.subGroup),\n                  classes?.subGroup\n                )\n          )}\n        >\n          <HvGrid container>\n            <HvGrid item>\n              <HvMultiButton\n                className={cx(\n                  queryBuilderClasses.combinator,\n                  css(styles.combinator),\n                  classes?.combinator,\n                  queryBuilderClasses.topCombinator,\n                  css(styles.topCombinator),\n                  classes?.topCombinator\n                )}\n                disabled={readOnly}\n              >\n                {combinators &&\n                  combinators.map((item) => (\n                    <HvButton\n                      key={item.operand}\n                      className={cx(\n                        queryBuilderClasses.combinatorButton,\n                        css(styles.combinatorButton),\n                        classes?.combinatorButton\n                      )}\n                      selected={item.operand === combinator}\n                      onClick={() => item.operand && onClickCombinator(item)}\n                      disabled={readOnly}\n                      size={\"xs\"}\n                    >\n                      {item.label}\n                    </HvButton>\n                  ))}\n              </HvMultiButton>\n            </HvGrid>\n            <HvGrid item>\n              <div\n                className={cx(\n                  queryBuilderClasses.buttonBackground,\n                  css(styles.buttonBackground),\n                  classes?.buttonBackground,\n                  queryBuilderClasses.topRemoveButton,\n                  css(styles.topRemoveButton),\n                  classes?.topRemoveButton\n                )}\n              >\n                <HvButton\n                  icon\n                  className={cx(\n                    queryBuilderClasses.removeButton,\n                    css(styles.removeButton),\n                    classes?.removeButton\n                  )}\n                  onClick={() => {\n                    askAction({\n                      actions: [{ type: \"remove-node\", id }],\n                      dialog:\n                        level === 0 && labels.query?.delete != null\n                          ? labels.query.delete\n                          : labels.group.delete,\n                    });\n                  }}\n                  aria-label={\n                    level === 0 && labels.query?.delete?.ariaLabel\n                      ? labels.query?.delete?.ariaLabel\n                      : labels.group.delete.ariaLabel\n                  }\n                  disabled={readOnly}\n                  variant=\"secondaryGhost\"\n                >\n                  <DeleteIcon />\n                </HvButton>\n              </div>\n            </HvGrid>\n          </HvGrid>\n          {rules?.length > 0 && (\n            <div\n              className={cx(\n                queryBuilderClasses.rulesContainer,\n                css(styles.rulesContainer),\n                classes?.rulesContainer,\n                level > 0\n                  ? cx(\n                      queryBuilderClasses.subRulesContainer,\n                      css(styles.subRulesContainer),\n                      classes?.subRulesContainer\n                    )\n                  : \"\",\n                level === 0\n                  ? cx(\n                      queryBuilderClasses.topRulesContainer,\n                      css(styles.topRulesContainer),\n                      classes?.topRulesContainer\n                    )\n                  : \"\"\n              )}\n            >\n              {rules.map((rule, index) => {\n                if (\"combinator\" in rule) {\n                  return (\n                    <RuleGroup\n                      key={rule.id ?? index}\n                      level={level + 1}\n                      {...rule}\n                      id={rule.id}\n                      classes={classes}\n                    />\n                  );\n                }\n\n                const isInvalid =\n                  combinator === \"and\" &&\n                  rules.some((r, i) => {\n                    if (\"attribute\" in r) {\n                      if (\n                        r.attribute === rule.attribute &&\n                        r.id !== rule.id &&\n                        i < index\n                      ) {\n                        return true;\n                      }\n                    }\n                    return false;\n                  });\n\n                return (\n                  <Rule\n                    key={rule.id ?? index}\n                    {...rule}\n                    isInvalid={isInvalid}\n                    id={rule.id}\n                    combinator={combinator}\n                  />\n                );\n              })}\n            </div>\n          )}\n          {rules?.length === 0 && (\n            <HvEmptyState\n              title={labels.empty?.title}\n              message={\n                <>\n                  <HvTypography\n                    variant=\"link\"\n                    component=\"a\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-rule\", id });\n                    }}\n                    style={{ cursor: \"pointer\", textDecoration: \"underline\" }}\n                  >\n                    {`${labels.empty?.createCondition}`}\n                  </HvTypography>\n                  {level <= normalizedMaxDepth && (\n                    <>\n                      {`${labels.empty?.spacer}`}\n                      <HvTypography\n                        variant=\"link\"\n                        component=\"a\"\n                        onClick={() => {\n                          dispatchAction({ type: \"add-group\", id });\n                        }}\n                        style={{\n                          cursor: \"pointer\",\n                          textDecoration: \"underline\",\n                        }}\n                      >\n                        {`${labels.empty?.createGroup}`}\n                      </HvTypography>\n                    </>\n                  )}\n                </>\n              }\n              icon={<Info />}\n            />\n          )}\n          <HvGrid container>\n            <HvGrid\n              item\n              className={cx(\n                queryBuilderClasses.actionButtonContainer,\n                css(styles.actionButtonContainer),\n                classes?.actionButtonContainer,\n                queryBuilderClasses.topActionButtonContainer,\n                css(styles.topActionButtonContainer),\n                classes?.topActionButtonContainer\n              )}\n            >\n              {actionButtons}\n            </HvGrid>\n          </HvGrid>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","context","useContext","QueryBuilderContext","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","normalizedMaxDepth","actionButtons","ClassNames","children","css","cx","_Fragment","_jsx","className","queryBuilderClasses","buttonBackground","styles","HvButton","variant","onClick","type","disabled","startIcon","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","_jsxs","HvGrid","container","HvMultiButton","topCombinator","map","combinatorButton","selected","size","topRemoveButton","icon","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","title","empty","message","HvTypography","component","style","cursor","textDecoration","createCondition","spacer","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":";;;;;;;;;;;;;;;;AA8BO,MAAMA,YAAYA,CAAC;AAAA,EACxBC,QAAQ;AAAA,EACRC;AAAAA,EACAC,aAAa;AAAA,EACbC,QAAQ,CAAE;AAAA,EACVC;AACc,MAAM;;AACdC,QAAAA,UAAUC,iBAAWC,QAAAA,mBAAmB;AAExC,QAAA;AAAA,IAAEC;AAAAA,IAAgBC;AAAAA,IAAWC;AAAAA,IAAUC;AAAAA,IAAaC;AAAAA,IAAQC;AAAAA,EAChER,IAAAA;AACF,QAAMS,qBAAqBJ,WAAW;AAEhCK,QAAAA,+CACHC,kBAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA;;6CACPC,WAAAA,UAAA;AAAA,QAAAH,WACEI,2BAAAA,IAAA,OAAA;AAAA,UACEC,WAAWH,GACTI,oBAAoBC,QAAAA,kBACpBN,IAAIO,iBAAAA,OAAOD,gBAAgB,GAC3BpB,mCAASoB,gBAAgB;AAAA,UACzBP,yCAEDS,iBAAQ;AAAA,YACPC,SAAQ;AAAA,YACRC,SAASA,MAAM;AACE,6BAAA;AAAA,gBAAEC,MAAM;AAAA,gBAAY5B;AAAAA,cAAAA,CAAI;AAAA,YACzC;AAAA,YACA6B,UAAUjB;AAAAA,YACVkB,WAAWV,2BAAAA,IAACW,gBAAO,KAAA,EAAA;AAAA,YAAAf,UAElBjB,UAAU,OAAKY,OAAAA,MAAAA,OAAOqB,UAAPrB,gBAAAA,IAAcsB,YAAdtB,gBAAAA,IAAuBuB,UAAS,QAC5CvB,OAAAA,MAAAA,OAAOqB,UAAPrB,gBAAAA,IAAcsB,YAAdtB,gBAAAA,IAAuBuB,QACvBvB,OAAOwB,MAAMF,QAAQC;AAAAA,UAAAA,CAAK;AAAA,QACrB,CAAA,GAEZnC,SAASc,qDACR,OAAA;AAAA,UACEQ,WAAWH,GACTI,oBAAoBC,QAAAA,kBACpBN,IAAIO,iBAAAA,OAAOD,gBAAgB,GAC3BpB,mCAASoB,gBAAgB;AAAA,UACzBP,yCAEDS,iBAAQ;AAAA,YACPC,SAAQ;AAAA,YACRC,SAASA,MAAM;AACE,6BAAA;AAAA,gBAAEC,MAAM;AAAA,gBAAa5B;AAAAA,cAAAA,CAAI;AAAA,YAC1C;AAAA,YACA6B,UAAUjB;AAAAA,YACVkB,WAAWV,2BAAAA,IAACW,gBAAO,KAAA,EAAA;AAAA,YAAAf,UAElBjB,UAAU,OAAKY,kBAAOqB,UAAPrB,mBAAcyB,aAAdzB,mBAAwBuB,UAAS,QAC7CvB,kBAAOqB,UAAPrB,mBAAcyB,aAAdzB,mBAAwBuB,QACxBvB,OAAOwB,MAAMC,SAASF;AAAAA,UAAAA,CAAK;AAAA,QAAA,CAGpC,CAAA;AAAA,MAAA,CAAA;AAAA;AAAA,EAAA,CAIR;AAED,QAAMG,aAAaC,YAAAA,QACjB,MACElB,2BAAAA,IAACL,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACNqB,gBAAAA,QAAM;AAAA,MACLlB,WACET,WACIM,GACEI,oBAAAA,QAAoBkB,yBACpBvB,IAAIO,iBAAAA,OAAOgB,uBAAuB,GAClCrC,mCAASqC,uBAAuB,IAElC;AAAA,IAAA,CACL;AAAA,EAAA,CAEJ,GAGLzC,UAAU,OAAKY,kBAAOqB,UAAPrB,mBAAc8B,WAAd9B,mBAAsB+B,YACjC/B,kBAAOqB,UAAPrB,mBAAc8B,WAAd9B,mBAAsB+B,UACtB/B,OAAOwB,MAAMM,OAAOC,SACxB,KAAK;AAGDC,QAAAA,oBAAoBC,kBACvBC,CAAS,SAAA;AACO,mBAAA;AAAA,MACbjB,MAAM;AAAA,MACN5B;AAAAA,MACAC,YAAY4C,KAAKC;AAAAA,IAAAA,CAClB;AAAA,EAAA,GAEH,CAACvC,gBAAgBP,EAAE,CAAC;AAGtB,wCACGe,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA;;6CACP,OAAA;AAAA,QACEG,WAAWH,GACTI,oBAAAA,QAAoByB,MACpB9B,IAAIO,iBAAAA,OAAOuB,IAAI,GACf5C,mCAAS4C,MACThD,UAAU,IACNmB,GACEI,oBAAoB0B,QAAAA,UACpB/B,IAAIO,iBAAAA,OAAOwB,QAAQ,GACnB7C,mCAAS6C,QAAQ,IAEnB9B,GACEI,oBAAAA,QAAoB2B,UACpBhC,IAAIO,iBAAAA,OAAOyB,QAAQ,GACnB9C,mCAAS8C,QAAQ,CAClB;AAAA,QACLjC,UAAA,CAEFkC,2BAAAA,KAACC,aAAM;AAAA,UAACC,WAAS;AAAA,UAAApC,UAAA,CACfI,2BAAAA,IAAC+B,aAAM;AAAA,YAACN,MAAI;AAAA,YAAA7B,yCACTqC,2BAAa;AAAA,cACZhC,WAAWH,GACTI,4BAAoBrB,YACpBgB,IAAIO,iBAAAA,OAAOvB,UAAU,GACrBE,mCAASF,YACTqB,oBAAAA,QAAoBgC,eACpBrC,IAAIO,wBAAO8B,aAAa,GACxBnD,mCAASmD,aAAa;AAAA,cAExBzB,UAAUjB;AAAAA,cAASI,UAElBN,eACCA,YAAY6C,IAAKV,CAAAA,wCACdpB,iBAAQ;AAAA,gBAEPJ,WAAWH,GACTI,oBAAoBkC,QAAAA,kBACpBvC,IAAIO,iBAAAA,OAAOgC,gBAAgB,GAC3BrD,mCAASqD,gBAAgB;AAAA,gBAE3BC,UAAUZ,KAAKC,YAAY7C;AAAAA,gBAC3B0B,SAASA,MAAMkB,KAAKC,WAAWH,kBAAkBE,IAAI;AAAA,gBACrDhB,UAAUjB;AAAAA,gBACV8C,MAAM;AAAA,gBAAK1C,UAEV6B,KAAKX;AAAAA,cAAAA,GAXDW,KAAKC,OAAO,CAapB;AAAA,YAAA,CAAC;AAAA,UAAA,CAEC,GACT1B,2BAAAA,IAAC+B,aAAM;AAAA,YAACN,MAAI;AAAA,YAAA7B,yCACV,OAAA;AAAA,cACEK,WAAWH,GACTI,4BAAoBC,kBACpBN,IAAIO,iBAAAA,OAAOD,gBAAgB,GAC3BpB,mCAASoB,kBACTD,oBAAAA,QAAoBqC,iBACpB1C,IAAIO,wBAAOmC,eAAe,GAC1BxD,mCAASwD,eAAe;AAAA,cACxB3C,yCAEDS,iBAAQ;AAAA,gBACPmC,MAAI;AAAA,gBACJvC,WAAWH,GACTI,oBAAoBuC,QAAAA,cACpB5C,IAAIO,iBAAAA,OAAOqC,YAAY,GACvB1D,mCAAS0D,YAAY;AAAA,gBAEvBlC,SAASA,MAAM;;AACH,4BAAA;AAAA,oBACRmC,SAAS,CAAC;AAAA,sBAAElC,MAAM;AAAA,sBAAe5B;AAAAA,oBAAAA,CAAI;AAAA,oBACrC+D,QACEhE,UAAU,OAAKY,MAAAA,OAAOqB,UAAPrB,gBAAAA,IAAc8B,WAAU,OACnC9B,OAAOqB,MAAMS,SACb9B,OAAOwB,MAAMM;AAAAA,kBAAAA,CACpB;AAAA,gBACH;AAAA,gBACA,cACE1C,UAAU,OAAKY,OAAAA,MAAAA,OAAOqB,UAAPrB,gBAAAA,IAAc8B,WAAd9B,gBAAAA,IAAsBqD,cACjCrD,OAAAA,MAAAA,OAAOqB,UAAPrB,gBAAAA,IAAc8B,WAAd9B,gBAAAA,IAAsBqD,YACtBrD,OAAOwB,MAAMM,OAAOuB;AAAAA,gBAE1BnC,UAAUjB;AAAAA,gBACVc,SAAQ;AAAA,gBAAgBV,UAExBI,2BAAAA,IAACiB,YAAU,EAAA;AAAA,cAAA,CAAG;AAAA,YAAA,CACL;AAAA,UAAA,CAEN,CAAA;AAAA,QAAA,CAAA,IAEVnC,+BAAO+D,UAAS,oCACf,OAAA;AAAA,UACE5C,WAAWH,GACTI,oBAAoB4C,QAAAA,gBACpBjD,IAAIO,iBAAO0C,OAAAA,cAAc,GACzB/D,mCAAS+D,gBACTnE,QAAQ,IACJmB,GACEI,oBAAAA,QAAoB6C,mBACpBlD,IAAIO,iBAAAA,OAAO2C,iBAAiB,GAC5BhE,mCAASgE,iBAAiB,IAE5B,IACJpE,UAAU,IACNmB,GACEI,oBAAAA,QAAoB8C,mBACpBnD,IAAIO,iBAAAA,OAAO4C,iBAAiB,GAC5BjE,mCAASiE,iBAAiB,IAE5B,EAAE;AAAA,UACNpD,UAEDd,MAAMqD,IAAI,CAACc,MAAMC,UAAU;AAC1B,gBAAI,gBAAgBD,MAAM;AACxB,oDACGvE,WAAS;AAAA,gBAERC,OAAOA,QAAQ;AAAA,gBAAE,GACbsE;AAAAA,gBACJrE,IAAIqE,KAAKrE;AAAAA,gBACTG;AAAAA,cAAAA,GAJKkE,KAAKrE,MAAMsE,KAAK;AAAA,YAO3B;AAEA,kBAAMC,YACJtE,eAAe,SACfC,MAAMsE,KAAK,CAACC,GAAGC,MAAM;AACnB,kBAAI,eAAeD,GAAG;AAElBA,oBAAAA,EAAEE,cAAcN,KAAKM,aACrBF,EAAEzE,OAAOqE,KAAKrE,MACd0E,IAAIJ,OACJ;AACO,yBAAA;AAAA,gBACT;AAAA,cACF;AACO,qBAAA;AAAA,YAAA,CACR;AAEH,kDACGM,KAAAA,MAAI;AAAA,cAAA,GAECP;AAAAA,cACJE;AAAAA,cACAvE,IAAIqE,KAAKrE;AAAAA,cACTC;AAAAA,YAAAA,GAJKoE,KAAKrE,MAAMsE,KAAK;AAAA,UAAA,CAO1B;AAAA,QAEJ,CAAA,IACApE,+BAAO+D,YAAW,oCAChBY,WAAAA,cAAY;AAAA,UACXC,QAAOnE,YAAOoE,UAAPpE,mBAAcmE;AAAAA,UACrBE,yCACE7D,qBAAA;AAAA,YAAAH,UAAA,CACEI,2BAAAA,IAAC6D,yBAAY;AAAA,cACXvD,SAAQ;AAAA,cACRwD,WAAU;AAAA,cACVvD,SAASA,MAAM;AACE,+BAAA;AAAA,kBAAEC,MAAM;AAAA,kBAAY5B;AAAAA,gBAAAA,CAAI;AAAA,cACzC;AAAA,cACAmF,OAAO;AAAA,gBAAEC,QAAQ;AAAA,gBAAWC,gBAAgB;AAAA,cAAY;AAAA,cAAErE,UAExD,IAAEL,YAAOoE,UAAPpE,mBAAc2E;AAAAA,YAAiB,CAAA,GAEpCvF,SAASc,sDACRM,WAAAA,UAAA;AAAA,cAAAH,UAAA,CACI,IAAEL,YAAOoE,UAAPpE,mBAAc4E,yCACjBN,yBAAY;AAAA,gBACXvD,SAAQ;AAAA,gBACRwD,WAAU;AAAA,gBACVvD,SAASA,MAAM;AACE,iCAAA;AAAA,oBAAEC,MAAM;AAAA,oBAAa5B;AAAAA,kBAAAA,CAAI;AAAA,gBAC1C;AAAA,gBACAmF,OAAO;AAAA,kBACLC,QAAQ;AAAA,kBACRC,gBAAgB;AAAA,gBAClB;AAAA,gBAAErE,UAEA,IAAEL,YAAOoE,UAAPpE,mBAAc6E;AAAAA,cAAAA,CACL,CAAA;AAAA,YAAA,CAElB,CAAA;AAAA,UAAA,CAEJ;AAAA,UACD5B,MAAMxC,2BAAAA,IAACqE,gBAAI,MAAA,EAAA;AAAA,QAAA,CAEd,GACDrE,2BAAAA,IAAC+B,aAAM;AAAA,UAACC,WAAS;AAAA,UAAApC,yCACdmC,aAAM;AAAA,YACLN,MAAI;AAAA,YACJxB,WAAWH,GACTI,4BAAoBoE,uBACpBzE,IAAIO,iBAAAA,OAAOkE,qBAAqB,GAChCvF,mCAASuF,uBACTpE,oBAAAA,QAAoBqE,0BACpB1E,IAAIO,wBAAOmE,wBAAwB,GACnCxF,mCAASwF,wBAAwB;AAAA,YACjC3E,UAEDF;AAAAA,UAAAA,CAAa;AAAA,QAAA,CAET,CAAA;AAAA,MAAA,CAAA;AAAA;AAAA,EAAA,CAGF;AAEjB;;"}
+{"version":3,"file":"RuleGroup.cjs","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback, useContext } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvButton,\n  HvEmptyState,\n  HvGrid,\n  HvMultiButton,\n  HvTypography,\n} from \"@core/components\";\nimport { Rule } from \"../Rule\";\nimport { withTooltip } from \"@core/hocs\";\nimport queryBuilderClasses, {\n  HvQueryBuilderClasses,\n} from \"../queryBuilderClasses\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./RuleGroup.styles\";\n\nexport interface RuleGroupProps {\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n  id?: number;\n  level?: number;\n  combinator?: string;\n  rules?: any[];\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes,\n}: RuleGroupProps) => {\n  const context = useContext(QueryBuilderContext);\n\n  const { dispatchAction, askAction, maxDepth, combinators, labels, readOnly } =\n    context;\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <ClassNames>\n      {({ css, cx }) => (\n        <>\n          <div\n            className={cx(\n              queryBuilderClasses.buttonBackground,\n              css(styles.buttonBackground),\n              classes?.buttonBackground\n            )}\n          >\n            <HvButton\n              variant=\"secondarySubtle\"\n              onClick={() => {\n                dispatchAction({ type: \"add-rule\", id });\n              }}\n              disabled={readOnly}\n              startIcon={<Add />}\n            >\n              {level === 0 && labels.query?.addRule?.label != null\n                ? labels.query?.addRule?.label\n                : labels.group.addRule.label}\n            </HvButton>\n          </div>\n          {level <= normalizedMaxDepth && (\n            <div\n              className={cx(\n                queryBuilderClasses.buttonBackground,\n                css(styles.buttonBackground),\n                classes?.buttonBackground\n              )}\n            >\n              <HvButton\n                variant=\"secondarySubtle\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-group\", id });\n                }}\n                disabled={readOnly}\n                startIcon={<Add />}\n              >\n                {level === 0 && labels.query?.addGroup?.label != null\n                  ? labels.query?.addGroup?.label\n                  : labels.group.addGroup.label}\n              </HvButton>\n            </div>\n          )}\n        </>\n      )}\n    </ClassNames>\n  );\n\n  const DeleteIcon = withTooltip(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <Delete\n            className={\n              readOnly\n                ? cx(\n                    queryBuilderClasses.topRemoveButtonDisabled,\n                    css(styles.topRemoveButtonDisabled),\n                    classes?.topRemoveButtonDisabled\n                  )\n                : \"\"\n            }\n          />\n        )}\n      </ClassNames>\n    ),\n    level === 0 && labels.query?.delete?.tooltip\n      ? labels.query?.delete?.tooltip\n      : labels.group.delete.tooltip,\n    \"top\"\n  );\n\n  const onClickCombinator = useCallback(\n    (item) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            queryBuilderClasses.root,\n            level === 0\n              ? queryBuilderClasses.topGroup\n              : queryBuilderClasses.subGroup,\n            css(styles.root),\n            level === 0 ? css(styles.topGroup) : css(styles.subGroup),\n            classes?.root,\n            level === 0 ? classes?.topGroup : classes?.subGroup\n          )}\n        >\n          <HvGrid container>\n            <HvGrid item>\n              <HvMultiButton\n                className={cx(\n                  queryBuilderClasses.combinator,\n                  queryBuilderClasses.topCombinator,\n                  css(styles.combinator),\n                  css(styles.topCombinator),\n                  classes?.combinator,\n                  classes?.topCombinator\n                )}\n                disabled={readOnly}\n              >\n                {combinators &&\n                  combinators.map((item) => (\n                    <HvButton\n                      key={item.operand}\n                      className={cx(\n                        queryBuilderClasses.combinatorButton,\n                        css(styles.combinatorButton),\n                        classes?.combinatorButton\n                      )}\n                      selected={item.operand === combinator}\n                      onClick={() => item.operand && onClickCombinator(item)}\n                      disabled={readOnly}\n                      size={\"xs\"}\n                    >\n                      {item.label}\n                    </HvButton>\n                  ))}\n              </HvMultiButton>\n            </HvGrid>\n            <HvGrid item>\n              <div\n                className={cx(\n                  queryBuilderClasses.buttonBackground,\n                  queryBuilderClasses.topRemoveButton,\n                  css(styles.buttonBackground),\n                  css(styles.topRemoveButton),\n                  classes?.buttonBackground,\n                  classes?.topRemoveButton\n                )}\n              >\n                <HvButton\n                  icon\n                  className={cx(\n                    queryBuilderClasses.removeButton,\n                    css(styles.removeButton),\n                    classes?.removeButton\n                  )}\n                  onClick={() => {\n                    askAction({\n                      actions: [{ type: \"remove-node\", id }],\n                      dialog:\n                        level === 0 && labels.query?.delete != null\n                          ? labels.query.delete\n                          : labels.group.delete,\n                    });\n                  }}\n                  aria-label={\n                    level === 0 && labels.query?.delete?.ariaLabel\n                      ? labels.query?.delete?.ariaLabel\n                      : labels.group.delete.ariaLabel\n                  }\n                  disabled={readOnly}\n                  variant=\"secondaryGhost\"\n                >\n                  <DeleteIcon />\n                </HvButton>\n              </div>\n            </HvGrid>\n          </HvGrid>\n          {rules?.length > 0 && (\n            <div\n              className={cx(\n                queryBuilderClasses.rulesContainer,\n                level > 0 && queryBuilderClasses.subRulesContainer,\n                level === 0 && queryBuilderClasses.topRulesContainer,\n                css(styles.rulesContainer),\n                level > 0 && css(styles.subRulesContainer),\n                level === 0 && css(styles.topRulesContainer),\n                classes?.rulesContainer,\n                level > 0 && classes?.subRulesContainer,\n                level === 0 && classes?.topRulesContainer\n              )}\n            >\n              {rules.map((rule, index) => {\n                if (\"combinator\" in rule) {\n                  return (\n                    <RuleGroup\n                      key={rule.id ?? index}\n                      level={level + 1}\n                      {...rule}\n                      id={rule.id}\n                      classes={classes}\n                    />\n                  );\n                }\n\n                const isInvalid =\n                  combinator === \"and\" &&\n                  rules.some((r, i) => {\n                    if (\"attribute\" in r) {\n                      if (\n                        r.attribute === rule.attribute &&\n                        r.id !== rule.id &&\n                        i < index\n                      ) {\n                        return true;\n                      }\n                    }\n                    return false;\n                  });\n\n                return (\n                  <Rule\n                    key={rule.id ?? index}\n                    {...rule}\n                    isInvalid={isInvalid}\n                    id={rule.id}\n                    combinator={combinator}\n                  />\n                );\n              })}\n            </div>\n          )}\n          {rules?.length === 0 && (\n            <HvEmptyState\n              title={labels.empty?.title}\n              message={\n                <>\n                  <HvTypography\n                    variant=\"link\"\n                    component=\"a\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-rule\", id });\n                    }}\n                    style={{ cursor: \"pointer\", textDecoration: \"underline\" }}\n                  >\n                    {`${labels.empty?.createCondition}`}\n                  </HvTypography>\n                  {level <= normalizedMaxDepth && (\n                    <>\n                      {`${labels.empty?.spacer}`}\n                      <HvTypography\n                        variant=\"link\"\n                        component=\"a\"\n                        onClick={() => {\n                          dispatchAction({ type: \"add-group\", id });\n                        }}\n                        style={{\n                          cursor: \"pointer\",\n                          textDecoration: \"underline\",\n                        }}\n                      >\n                        {`${labels.empty?.createGroup}`}\n                      </HvTypography>\n                    </>\n                  )}\n                </>\n              }\n              icon={<Info />}\n            />\n          )}\n          <HvGrid container>\n            <HvGrid\n              item\n              className={cx(\n                queryBuilderClasses.actionButtonContainer,\n                queryBuilderClasses.topActionButtonContainer,\n                css(styles.actionButtonContainer),\n                css(styles.topActionButtonContainer),\n                classes?.actionButtonContainer,\n                classes?.topActionButtonContainer\n              )}\n            >\n              {actionButtons}\n            </HvGrid>\n          </HvGrid>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","context","useContext","QueryBuilderContext","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","normalizedMaxDepth","actionButtons","ClassNames","children","css","cx","_Fragment","_jsx","className","queryBuilderClasses","buttonBackground","styles","HvButton","variant","onClick","type","disabled","startIcon","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","_jsxs","HvGrid","container","HvMultiButton","topCombinator","map","combinatorButton","selected","size","topRemoveButton","icon","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","title","empty","message","HvTypography","component","style","cursor","textDecoration","createCondition","spacer","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":"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"}

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const horizontalScrollListItemClasses = require("./horizontalScrollListItemClasses.cjs");
 const react = require("@emotion/react");
-const clsx = require("clsx");
 const HorizontalScrollListItem_styles = require("./HorizontalScrollListItem.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const setId = require("../../../../utils/setId.cjs");
@@ -23,10 +22,11 @@ const HvHorizontalScrollListItem = ({
   const Tooltip = tooltipWrapper;
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx("li", {
       id,
-      className: clsx.clsx(className, classes == null ? void 0 : classes.root, horizontalScrollListItemClasses.default.root, css(HorizontalScrollListItem_styles.styles.root)),
+      className: cx(horizontalScrollListItemClasses.default.root, css(HorizontalScrollListItem_styles.styles.root), className, classes == null ? void 0 : classes.root),
       "aria-current": selected,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
         id: buttonId,
@@ -34,12 +34,12 @@ const HvHorizontalScrollListItem = ({
         tabIndex: 0,
         onClick,
         onKeyDown,
-        className: clsx.clsx(classes == null ? void 0 : classes.button, horizontalScrollListItemClasses.default.button, css(HorizontalScrollListItem_styles.styles.button)),
+        className: cx(horizontalScrollListItemClasses.default.button, css(HorizontalScrollListItem_styles.styles.button), classes == null ? void 0 : classes.button),
         "aria-labelledby": labelId,
         ...others,
         children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
           id: labelId,
-          className: clsx.clsx(classes == null ? void 0 : classes.text, horizontalScrollListItemClasses.default.text, css(HorizontalScrollListItem_styles.styles.text), selected && clsx.clsx(classes == null ? void 0 : classes.selected, horizontalScrollListItemClasses.default.selected, css(HorizontalScrollListItem_styles.styles.selected))),
+          className: cx(horizontalScrollListItemClasses.default.text, selected && horizontalScrollListItemClasses.default.selected, css(HorizontalScrollListItem_styles.styles.text), selected && css(HorizontalScrollListItem_styles.styles.selected), classes == null ? void 0 : classes.text, selected && (classes == null ? void 0 : classes.selected)),
           variant,
           children
         })

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\";\nimport horizontalScrollListItemClasses, {\n  HvHorizontalScrollListItemClasses,\n} from \"./horizontalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { styles } from \"./HorizontalScrollListItem.styles\";\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,\n  selected,\n  children,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\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    <ClassNames>\n      {({ css }) => (\n        <li\n          id={id}\n          className={clsx(\n            className,\n            classes?.root,\n            horizontalScrollListItemClasses.root,\n            css(styles.root)\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={clsx(\n              classes?.button,\n              horizontalScrollListItemClasses.button,\n              css(styles.button)\n            )}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={clsx(\n                classes?.text,\n                horizontalScrollListItemClasses.text,\n                css(styles.text),\n                selected &&\n                  clsx(\n                    classes?.selected,\n                    horizontalScrollListItemClasses.selected,\n                    css(styles.selected)\n                  )\n              )}\n              variant={variant}\n            >\n              {children}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","selected","children","onClick","onKeyDown","tooltipWrapper","others","variant","labelId","setId","buttonId","Tooltip","ClassNames","css","clsx","root","horizontalScrollListItemClasses","styles","role","tabIndex","button","text"],"mappings":";;;;;;;;AAiCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7BC,QAAAA,UAAUN,WAAW,UAAU;AAC/BO,QAAAA,UAAUC,MAAAA,MAAMX,IAAI,OAAO;AAC3BY,QAAAA,WAAWD,MAAAA,MAAMX,IAAI,QAAQ;AACnC,QAAMa,UAAUN;AAEhB,wCACGO,MAAAA,YAAU;AAAA,IAAAV,UACRA,CAAC;AAAA,MAAEW;AAAAA,IAAAA,qCACF,MAAA;AAAA,MACEf;AAAAA,MACAC,WAAWe,KACTf,KAAAA,WACAC,mCAASe,MACTC,wCAAgCD,MAChCF,IAAII,uCAAOF,IAAI,CAAC;AAAA,MAElB,gBAAcd;AAAAA,MAASC,yCAEvB,OAAA;AAAA,QACEJ,IAAIY;AAAAA,QACJQ,MAAK;AAAA,QACLC,UAAU;AAAA,QACVhB;AAAAA,QACAC;AAAAA,QACAL,WAAWe,KAAAA,KACTd,mCAASoB,QACTJ,gCAAAA,QAAgCI,QAChCP,IAAII,uCAAOG,MAAM,CAAC;AAAA,QAEpB,mBAAiBZ;AAAAA,QAAQ,GACrBF;AAAAA,QAAMJ,yCAETS,SAAO;AAAA,UACNb,IAAIU;AAAAA,UACJT,WAAWe,KAAAA,KACTd,mCAASqB,MACTL,wCAAgCK,MAChCR,IAAII,uCAAOI,IAAI,GACfpB,YACEa,UACEd,mCAASC,UACTe,gCAAgCf,QAAAA,UAChCY,IAAII,gCAAAA,OAAOhB,QAAQ,CAAC,CACrB;AAAA,UAELM;AAAAA,UAAiBL;AAAAA,QAAAA,CAER;AAAA,MAAA,CACD;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;;"}
+{"version":3,"file":"HorizontalScrollListItem.cjs","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport horizontalScrollListItemClasses, {\n  HvHorizontalScrollListItemClasses,\n} from \"./horizontalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { styles } from \"./HorizontalScrollListItem.styles\";\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,\n  selected,\n  children,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\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    <ClassNames>\n      {({ css, cx }) => (\n        <li\n          id={id}\n          className={cx(\n            horizontalScrollListItemClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={cx(\n              horizontalScrollListItemClasses.button,\n              css(styles.button),\n              classes?.button\n            )}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={cx(\n                horizontalScrollListItemClasses.text,\n                selected && horizontalScrollListItemClasses.selected,\n                css(styles.text),\n                selected && css(styles.selected),\n                classes?.text,\n                selected && classes?.selected\n              )}\n              variant={variant}\n            >\n              {children}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","selected","children","onClick","onKeyDown","tooltipWrapper","others","variant","labelId","setId","buttonId","Tooltip","ClassNames","css","cx","horizontalScrollListItemClasses","root","styles","role","tabIndex","button","text"],"mappings":";;;;;;;AAgCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7BC,QAAAA,UAAUN,WAAW,UAAU;AAC/BO,QAAAA,UAAUC,MAAAA,MAAMX,IAAI,OAAO;AAC3BY,QAAAA,WAAWD,MAAAA,MAAMX,IAAI,QAAQ;AACnC,QAAMa,UAAUN;AAEhB,wCACGO,MAAAA,YAAU;AAAA,IAAAV,UACRA,CAAC;AAAA,MAAEW;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,MAAA;AAAA,MACEhB;AAAAA,MACAC,WAAWe,GACTC,wCAAgCC,MAChCH,IAAII,uCAAOD,IAAI,GACfjB,WACAC,mCAASgB,IAAI;AAAA,MAEf,gBAAcf;AAAAA,MAASC,yCAEvB,OAAA;AAAA,QACEJ,IAAIY;AAAAA,QACJQ,MAAK;AAAA,QACLC,UAAU;AAAA,QACVhB;AAAAA,QACAC;AAAAA,QACAL,WAAWe,GACTC,gCAAgCK,QAAAA,QAChCP,IAAII,gCAAAA,OAAOG,MAAM,GACjBpB,mCAASoB,MAAM;AAAA,QAEjB,mBAAiBZ;AAAAA,QAAQ,GACrBF;AAAAA,QAAMJ,yCAETS,SAAO;AAAA,UACNb,IAAIU;AAAAA,UACJT,WAAWe,GACTC,gCAAAA,QAAgCM,MAChCpB,YAAYc,wCAAgCd,UAC5CY,IAAII,uCAAOI,IAAI,GACfpB,YAAYY,IAAII,uCAAOhB,QAAQ,GAC/BD,mCAASqB,MACTpB,aAAYD,mCAASC,SAAQ;AAAA,UAE/BM;AAAAA,UAAiBL;AAAAA,QAAAA,CAER;AAAA,MAAA,CACD;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;;"}

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const scrollToHorizontalClasses = require("./scrollToHorizontalClasses.cjs");
 const react = require("@emotion/react");
-const clsx = require("clsx");
 const ScrollToHorizontal_styles = require("./ScrollToHorizontal.styles.cjs");
 const useScrollTo = require("../useScrollTo.cjs");
 const React = require("react");
@@ -62,11 +61,12 @@ const HvScrollToHorizontal = ({
   const NotSelected = React.useCallback(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: clsx.clsx(classes == null ? void 0 : classes.notSelectedRoot, scrollToHorizontalClasses.default.notSelectedRoot, css(ScrollToHorizontal_styles.styles.notSelectedRoot)),
+        className: cx(scrollToHorizontalClasses.default.notSelectedRoot, css(ScrollToHorizontal_styles.styles.notSelectedRoot), classes == null ? void 0 : classes.notSelectedRoot),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: clsx.clsx(classes == null ? void 0 : classes.notSelected, scrollToHorizontalClasses.default.notSelected, css(ScrollToHorizontal_styles.styles.notSelected))
+          className: cx(scrollToHorizontalClasses.default.notSelected, css(ScrollToHorizontal_styles.styles.notSelected), classes == null ? void 0 : classes.notSelected)
         })
       })
     });
@@ -74,11 +74,12 @@ const HvScrollToHorizontal = ({
   const Selected = React.useCallback(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, {
         height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
         width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-        className: clsx.clsx(classes == null ? void 0 : classes.selected, scrollToHorizontalClasses.default.selected, css(ScrollToHorizontal_styles.styles.selected))
+        className: cx(scrollToHorizontalClasses.default.selected, css(ScrollToHorizontal_styles.styles.selected), classes == null ? void 0 : classes.selected)
       })
     });
   }, [classes == null ? void 0 : classes.selected, activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize]);
@@ -106,16 +107,17 @@ const HvScrollToHorizontal = ({
   });
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx("ol", {
-      className: clsx.clsx(className, classes == null ? void 0 : classes.root, scrollToHorizontalClasses.default.root, css(ScrollToHorizontal_styles.styles.root), css({
+      className: cx(scrollToHorizontalClasses.default.root, position === "sticky" && scrollToHorizontalClasses.default.positionSticky, position === "fixed" && scrollToHorizontalClasses.default.positionFixed, css(ScrollToHorizontal_styles.styles.root), css({
         width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${uikitStyles.theme.spacing(upMd ? 4 : 2)})` : "100%",
         marginTop: 0,
         marginBottom: 0,
         marginRight: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
         marginLeft: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
         backgroundColor: hexToRgbA.default(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
-      }), position === "sticky" && clsx.clsx(classes == null ? void 0 : classes.positionSticky, scrollToHorizontalClasses.default.positionSticky, css(ScrollToHorizontal_styles.styles.positionSticky)), position === "fixed" && clsx.clsx(classes == null ? void 0 : classes.positionFixed, scrollToHorizontalClasses.default.positionFixed, css(ScrollToHorizontal_styles.styles.positionFixed))),
+      }), position === "sticky" && css(ScrollToHorizontal_styles.styles.positionSticky), position === "fixed" && css(ScrollToHorizontal_styles.styles.positionFixed), className, classes == null ? void 0 : classes.root, position === "sticky" && (classes == null ? void 0 : classes.positionSticky), position === "fixed" && (classes == null ? void 0 : classes.positionFixed)),
       id: elementId,
       ...others,
       children: tabs

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToHorizontalClasses, {\n  HvScrollToHorizontalClasses,\n} from \"./scrollToHorizontalClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./ScrollToHorizontal.styles\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToHorizontalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"top\",\n  ...others\n}: HvScrollToHorizontalProps) => {\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css }) => (\n          <div\n            className={clsx(\n              classes?.notSelectedRoot,\n              scrollToHorizontalClasses.notSelectedRoot,\n              css(styles.notSelectedRoot)\n            )}\n          >\n            <div\n              className={clsx(\n                classes?.notSelected,\n                scrollToHorizontalClasses.notSelected,\n                css(styles.notSelected)\n              )}\n            />\n          </div>\n        )}\n      </ClassNames>\n    );\n  }, [classes?.notSelectedRoot, classes?.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css }) => (\n          <CurrentStep\n            height={activeTheme?.scrollTo.dotSelectedSize}\n            width={activeTheme?.scrollTo.dotSelectedSize}\n            className={clsx(\n              classes?.selected,\n              scrollToHorizontalClasses.selected,\n              css(styles.selected)\n            )}\n          />\n        )}\n      </ClassNames>\n    );\n  }, [classes?.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKeypress(event, Enter) === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <ol\n          className={clsx(\n            className,\n            classes?.root,\n            scrollToHorizontalClasses.root,\n            css(styles.root),\n            css({\n              width:\n                position === \"fixed\" && (upMd || downSm)\n                  ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n                  : \"100%\",\n              marginTop: 0,\n              marginBottom: 0,\n              marginRight:\n                position === \"fixed\" && (upMd || downSm)\n                  ? theme.spacing(upMd ? 4 : 2)\n                  : 0,\n              marginLeft:\n                position === \"fixed\" && (upMd || downSm)\n                  ? theme.spacing(upMd ? 4 : 2)\n                  : 0,\n              backgroundColor: fade(\n                activeTheme?.colors.modes[selectedMode].atmo2,\n                activeTheme?.scrollTo.backgroundColorOpacity\n              ),\n            }),\n            position === \"sticky\" &&\n              clsx(\n                classes?.positionSticky,\n                scrollToHorizontalClasses.positionSticky,\n                css(styles.positionSticky)\n              ),\n            position === \"fixed\" &&\n              clsx(\n                classes?.positionFixed,\n                scrollToHorizontalClasses.positionFixed,\n                css(styles.positionFixed)\n              )\n          )}\n          id={elementId}\n          {...others}\n        >\n          {tabs}\n        </ol>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","ClassNames","children","css","clsx","notSelectedRoot","scrollToHorizontalClasses","styles","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKeypress","_jsx","key","root","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","fade","colors","modes","atmo2","backgroundColorOpacity","positionSticky","positionFixed"],"mappings":"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"}
+{"version":3,"file":"ScrollToHorizontal.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToHorizontalClasses, {\n  HvScrollToHorizontalClasses,\n} from \"./scrollToHorizontalClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./ScrollToHorizontal.styles\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToHorizontalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"top\",\n  ...others\n}: HvScrollToHorizontalProps) => {\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              scrollToHorizontalClasses.notSelectedRoot,\n              css(styles.notSelectedRoot),\n              classes?.notSelectedRoot\n            )}\n          >\n            <div\n              className={cx(\n                scrollToHorizontalClasses.notSelected,\n                css(styles.notSelected),\n                classes?.notSelected\n              )}\n            />\n          </div>\n        )}\n      </ClassNames>\n    );\n  }, [classes?.notSelectedRoot, classes?.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <CurrentStep\n            height={activeTheme?.scrollTo.dotSelectedSize}\n            width={activeTheme?.scrollTo.dotSelectedSize}\n            className={cx(\n              scrollToHorizontalClasses.selected,\n              css(styles.selected),\n              classes?.selected\n            )}\n          />\n        )}\n      </ClassNames>\n    );\n  }, [classes?.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKeypress(event, Enter) === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <ol\n          className={cx(\n            scrollToHorizontalClasses.root,\n            position === \"sticky\" && scrollToHorizontalClasses.positionSticky,\n            position === \"fixed\" && scrollToHorizontalClasses.positionFixed,\n            css(styles.root),\n            css({\n              width:\n                position === \"fixed\" && (upMd || downSm)\n                  ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n                  : \"100%\",\n              marginTop: 0,\n              marginBottom: 0,\n              marginRight:\n                position === \"fixed\" && (upMd || downSm)\n                  ? theme.spacing(upMd ? 4 : 2)\n                  : 0,\n              marginLeft:\n                position === \"fixed\" && (upMd || downSm)\n                  ? theme.spacing(upMd ? 4 : 2)\n                  : 0,\n              backgroundColor: fade(\n                activeTheme?.colors.modes[selectedMode].atmo2,\n                activeTheme?.scrollTo.backgroundColorOpacity\n              ),\n            }),\n            position === \"sticky\" && css(styles.positionSticky),\n            position === \"fixed\" && css(styles.positionFixed),\n            className,\n            classes?.root,\n            position === \"sticky\" && classes?.positionSticky,\n            position === \"fixed\" && classes?.positionFixed\n          )}\n          id={elementId}\n          {...others}\n        >\n          {tabs}\n        </ol>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","ClassNames","children","css","cx","scrollToHorizontalClasses","notSelectedRoot","styles","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKeypress","_jsx","key","root","positionSticky","positionFixed","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","fade","colors","modes","atmo2","backgroundColorOpacity"],"mappings":"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"}

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const scrollToVerticalClasses = require("./scrollToVerticalClasses.cjs");
 const ScrollToVertical_styles = require("./ScrollToVertical.styles.cjs");
-const clsx = require("clsx");
 const useScrollTo = require("../useScrollTo.cjs");
 const React = require("react");
 const withTooltip = require("../withTooltip.cjs");
@@ -75,11 +74,12 @@ const HvScrollToVertical = ({
   const dynamicClasses = ScrollToVertical_styles.generateDynamicStyles(options.length);
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx("ol", {
-      className: clsx.clsx(className, classes == null ? void 0 : classes.root, scrollToVerticalClasses.default.root, css(ScrollToVertical_styles.styles.root), css({
+      className: cx(scrollToVerticalClasses.default.root, position === "fixed" && scrollToVerticalClasses.default.positionFixed, position === "absolute" && scrollToVerticalClasses.default.positionAbsolute, css(ScrollToVertical_styles.styles.root), css({
         backgroundColor: hexToRgbA.default(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
-      }), position === "fixed" && clsx.clsx(classes == null ? void 0 : classes.positionFixed, scrollToVerticalClasses.default.positionFixed, css(dynamicClasses.positionFixed)), position === "absolute" && clsx.clsx(classes == null ? void 0 : classes.positionAbsolute, scrollToVerticalClasses.default.positionAbsolute, css(dynamicClasses.positionAbsolute))),
+      }), position === "fixed" && css(dynamicClasses.positionFixed), position === "absolute" && css(dynamicClasses.positionAbsolute), className, classes == null ? void 0 : classes.root, position === "fixed" && (classes == null ? void 0 : classes.positionFixed), position === "absolute" && (classes == null ? void 0 : classes.positionAbsolute)),
       id: elementId,
       ...others,
       children: tabs

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToVerticalClasses, {\n  HvScrollToVerticalClasses,\n} from \"./scrollToVerticalClasses\";\nimport { generateDynamicStyles, styles } from \"./ScrollToVertical.styles\";\nimport { clsx } from \"clsx\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { ClassNames } from \"@emotion/react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToVerticalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToVerticalPositions = \"absolute\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"left\",\n  ...others\n}: HvScrollToVerticalProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKeypress(event, Enter) === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const dynamicClasses = generateDynamicStyles(options.length);\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <ol\n          className={clsx(\n            className,\n            classes?.root,\n            scrollToVerticalClasses.root,\n            css(styles.root),\n            css({\n              backgroundColor: fade(\n                activeTheme?.colors.modes[selectedMode].atmo2,\n                activeTheme?.scrollTo.backgroundColorOpacity\n              ),\n            }),\n            position === \"fixed\" &&\n              clsx(\n                classes?.positionFixed,\n                scrollToVerticalClasses.positionFixed,\n                css(dynamicClasses.positionFixed)\n              ),\n            position === \"absolute\" &&\n              clsx(\n                classes?.positionAbsolute,\n                scrollToVerticalClasses.positionAbsolute,\n                css(dynamicClasses.positionAbsolute)\n              )\n          )}\n          id={elementId}\n          {...others}\n        >\n          {tabs}\n        </ol>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToVertical","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKeypress","key","dynamicClasses","generateDynamicStyles","length","ClassNames","children","css","clsx","root","scrollToVerticalClasses","styles","backgroundColor","fade","colors","modes","atmo2","scrollTo","backgroundColorOpacity","positionFixed","positionAbsolute"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAM;AAAA,EAAEA;AAAM,IAAIC;AAwDX,MAAMC,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClB,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAU,SAAA;AAE1CC,QAAAA,YAAYC,YAAAA,QAAYlB,IAAI,oBAAoB;AAEhD,QAAA,CAACmB,eAAeC,WAAW,IAAIC,wBACnCpB,sBACAC,iBACAC,MACAO,QACAD,SACAL,QAAQ;AAGV,QAAMkB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAgB;AAEtB,UAAMC,kBAAkBA,MAAM;AAC5BvB,2CAAWmB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BpB,WAAAA,QAAQqB,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAOrB,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAMsB,OAAOzB,QAAQqB,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvBrC,IAAIsC,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpCpB,SAAUkB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CpB,2CAAUkB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAWjB,OAAO1B,KAAK,MAAM,MAAM;AACrB0B,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CnB,6CAAUiB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAAK;AAAA,EAAA,CAIpC;AAEKS,QAAAA,iBAAiBC,wBAAAA,sBAAsBlC,QAAQmC,MAAM;AAE3D,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,qCACF,MAAA;AAAA,MACExC,WAAWyC,KACTzC,KAAAA,WACAC,mCAASyC,MACTC,wBAAAA,QAAwBD,MACxBF,IAAII,wBAAAA,OAAOF,IAAI,GACfF,IAAI;AAAA,QACFK,iBAAiBC,UACfvC,QAAAA,2CAAawC,OAAOC,MAAMxC,cAAcyC,OACxC1C,2CAAa2C,SAASC,sBAAsB;AAAA,MAE/C,CAAA,GACD/C,aAAa,WACXqC,KAAAA,KACExC,mCAASmD,eACTT,wBAAAA,QAAwBS,eACxBZ,IAAIL,eAAeiB,aAAa,CAAC,GAErChD,aAAa,cACXqC,UACExC,mCAASoD,kBACTV,gCAAwBU,kBACxBb,IAAIL,eAAekB,gBAAgB,CAAC,CACrC;AAAA,MAEL5D,IAAIiB;AAAAA,MAAU,GACVJ;AAAAA,MAAMiC,UAETZ;AAAAA,IAAAA,CAAI;AAAA,EAAA,CAGE;AAEjB;;"}
+{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToVerticalClasses, {\n  HvScrollToVerticalClasses,\n} from \"./scrollToVerticalClasses\";\nimport { generateDynamicStyles, styles } from \"./ScrollToVertical.styles\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { ClassNames } from \"@emotion/react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToVerticalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToVerticalPositions = \"absolute\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"left\",\n  ...others\n}: HvScrollToVerticalProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKeypress(event, Enter) === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const dynamicClasses = generateDynamicStyles(options.length);\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <ol\n          className={cx(\n            scrollToVerticalClasses.root,\n            position === \"fixed\" && scrollToVerticalClasses.positionFixed,\n            position === \"absolute\" && scrollToVerticalClasses.positionAbsolute,\n            css(styles.root),\n            css({\n              backgroundColor: fade(\n                activeTheme?.colors.modes[selectedMode].atmo2,\n                activeTheme?.scrollTo.backgroundColorOpacity\n              ),\n            }),\n            position === \"fixed\" && css(dynamicClasses.positionFixed),\n            position === \"absolute\" && css(dynamicClasses.positionAbsolute),\n            className,\n            classes?.root,\n            position === \"fixed\" && classes?.positionFixed,\n            position === \"absolute\" && classes?.positionAbsolute\n          )}\n          id={elementId}\n          {...others}\n        >\n          {tabs}\n        </ol>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToVertical","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKeypress","key","dynamicClasses","generateDynamicStyles","length","ClassNames","children","css","cx","scrollToVerticalClasses","root","positionFixed","positionAbsolute","styles","backgroundColor","fade","colors","modes","atmo2","scrollTo","backgroundColorOpacity"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM;AAAA,EAAEA;AAAM,IAAIC;AAwDX,MAAMC,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClB,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAU,SAAA;AAE1CC,QAAAA,YAAYC,YAAAA,QAAYlB,IAAI,oBAAoB;AAEhD,QAAA,CAACmB,eAAeC,WAAW,IAAIC,wBACnCpB,sBACAC,iBACAC,MACAO,QACAD,SACAL,QAAQ;AAGV,QAAMkB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAgB;AAEtB,UAAMC,kBAAkBA,MAAM;AAC5BvB,2CAAWmB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BpB,WAAAA,QAAQqB,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAOrB,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAMsB,OAAOzB,QAAQqB,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvBrC,IAAIsC,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpCpB,SAAUkB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CpB,2CAAUkB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAWjB,OAAO1B,KAAK,MAAM,MAAM;AACrB0B,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CnB,6CAAUiB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAAK;AAAA,EAAA,CAIpC;AAEKS,QAAAA,iBAAiBC,wBAAAA,sBAAsBlC,QAAQmC,MAAM;AAE3D,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,MAAA;AAAA,MACEzC,WAAWyC,GACTC,gCAAwBC,MACxBvC,aAAa,WAAWsC,wBAAAA,QAAwBE,eAChDxC,aAAa,cAAcsC,gCAAwBG,kBACnDL,IAAIM,wBAAAA,OAAOH,IAAI,GACfH,IAAI;AAAA,QACFO,iBAAiBC,UACfzC,QAAAA,2CAAa0C,OAAOC,MAAM1C,cAAc2C,OACxC5C,2CAAa6C,SAASC,sBAAsB;AAAA,MAE/C,CAAA,GACDjD,aAAa,WAAWoC,IAAIL,eAAeS,aAAa,GACxDxC,aAAa,cAAcoC,IAAIL,eAAeU,gBAAgB,GAC9D7C,WACAC,mCAAS0C,MACTvC,aAAa,YAAWH,mCAAS2C,gBACjCxC,aAAa,eAAcH,mCAAS4C,iBAAgB;AAAA,MAEtDpD,IAAIiB;AAAAA,MAAU,GACVJ;AAAAA,MAAMiC,UAETZ;AAAAA,IAAAA,CAAI;AAAA,EAAA,CAGE;AAEjB;;"}

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const verticalScrollListItemClasses = require("./verticalScrollListItemClasses.cjs");
 const react = require("@emotion/react");
-const clsx = require("clsx");
 const VerticalScrollListItem_styles = require("./VerticalScrollListItem.styles.cjs");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
@@ -30,9 +29,10 @@ const HvVerticalScrollListItem = ({
   const NotSelected = React.useCallback(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: clsx.clsx(classes == null ? void 0 : classes.notSelected, verticalScrollListItemClasses.default.notSelected, css(VerticalScrollListItem_styles.styles.notSelected))
+        className: cx(verticalScrollListItemClasses.default.notSelected, css(VerticalScrollListItem_styles.styles.notSelected), classes == null ? void 0 : classes.notSelected)
       })
     });
   }, [classes == null ? void 0 : classes.notSelected]);
@@ -42,10 +42,11 @@ const HvVerticalScrollListItem = ({
   }) : /* @__PURE__ */ jsxRuntime.jsx(NotSelected, {});
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx("li", {
       id,
-      className: clsx.clsx(className, classes == null ? void 0 : classes.root, verticalScrollListItemClasses.default.root, css(VerticalScrollListItem_styles.styles.root)),
+      className: cx(verticalScrollListItemClasses.default.root, css(VerticalScrollListItem_styles.styles.root), className, classes == null ? void 0 : classes.root),
       "aria-current": selected,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
         id: buttonId,
@@ -53,13 +54,13 @@ const HvVerticalScrollListItem = ({
         tabIndex: 0,
         onClick,
         onKeyDown,
-        className: clsx.clsx(classes == null ? void 0 : classes.button, verticalScrollListItemClasses.default.button, css(VerticalScrollListItem_styles.styles.button)),
+        className: cx(verticalScrollListItemClasses.default.button, css(VerticalScrollListItem_styles.styles.button), classes == null ? void 0 : classes.button),
         "aria-label": ariaLabel,
         "aria-labelledby": labelId,
         ...others,
         children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
           id: labelId,
-          className: clsx.clsx(classes == null ? void 0 : classes.text, verticalScrollListItemClasses.default.text, css(VerticalScrollListItem_styles.styles.text)),
+          className: cx(verticalScrollListItemClasses.default.text, css(VerticalScrollListItem_styles.styles.text), classes == null ? void 0 : classes.text),
           variant,
           children: icon
         })

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 { HvBaseProps } from \"@core/types\";\nimport verticalScrollListItemClasses, {\n  HvVerticalScrollListItemClasses,\n} from \"./verticalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { styles } from \"./VerticalScrollListItem.styles\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useCallback } from \"react\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@core/hooks\";\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,\n  selected,\n  \"aria-label\": ariaLabel,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\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 NotSelected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css }) => (\n          <div\n            className={clsx(\n              classes?.notSelected,\n              verticalScrollListItemClasses.notSelected,\n              css(styles.notSelected)\n            )}\n          />\n        )}\n      </ClassNames>\n    );\n  }, [classes?.notSelected]);\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <NotSelected />\n  );\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <li\n          id={id}\n          className={clsx(\n            className,\n            classes?.root,\n            verticalScrollListItemClasses.root,\n            css(styles.root)\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={clsx(\n              classes?.button,\n              verticalScrollListItemClasses.button,\n              css(styles.button)\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={clsx(\n                classes?.text,\n                verticalScrollListItemClasses.text,\n                css(styles.text)\n              )}\n              variant={variant}\n            >\n              {icon}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","NotSelected","useCallback","ClassNames","children","css","clsx","notSelected","verticalScrollListItemClasses","styles","icon","_jsx","CurrentStep","height","scrollTo","dotSelectedSize","width","root","role","tabIndex","button","text"],"mappings":";;;;;;;;;;;AAkCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAE5BC,QAAAA,UAAwCR,WAAW,UAAU;AAE7DS,QAAAA,UAAUC,MAAAA,MAAMb,IAAI,OAAO;AAE3Bc,QAAAA,WAAWD,MAAAA,MAAMb,IAAI,QAAQ;AAEnC,QAAMe,UAAUR;AAEVS,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,0CACGC,MAAAA,YAAU;AAAA,MAAAC,UACRA,CAAC;AAAA,QAAEC;AAAAA,MAAAA,qCACF,OAAA;AAAA,QACEnB,WAAWoB,KAAAA,KACTnB,mCAASoB,aACTC,8BAAAA,QAA8BD,aAC9BF,IAAII,qCAAOF,WAAW,CAAC;AAAA,MAAA,CACvB;AAAA,IAAA,CAGK;AAAA,EAAA,GAEd,CAACpB,mCAASoB,WAAW,CAAC;AAEnBG,QAAAA,OAAOtB,WACXuB,2BAAAA,IAACC,6BAAW;AAAA,IACVC,QAAQnB,2CAAaoB,SAASC;AAAAA,IAC9BC,OAAOtB,2CAAaoB,SAASC;AAAAA,EAAgB,CAAA,IAG9Cd,2BAAAA,IAAAA,aACF,CAAA,CAAA;AAED,wCACGE,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,qCACF,MAAA;AAAA,MACEpB;AAAAA,MACAC,WAAWoB,KACTpB,KAAAA,WACAC,mCAAS8B,MACTT,sCAA8BS,MAC9BZ,IAAII,qCAAOQ,IAAI,CAAC;AAAA,MAElB,gBAAc7B;AAAAA,MAASgB,yCAEvB,OAAA;AAAA,QACEnB,IAAIc;AAAAA,QACJmB,MAAK;AAAA,QACLC,UAAU;AAAA,QACV7B;AAAAA,QACAC;AAAAA,QACAL,WAAWoB,KAAAA,KACTnB,mCAASiC,QACTZ,8BAAAA,QAA8BY,QAC9Bf,IAAII,qCAAOW,MAAM,CAAC;AAAA,QAEpB,cAAY/B;AAAAA,QACZ,mBAAiBQ;AAAAA,QAAQ,GACrBJ;AAAAA,QAAMW,yCAETJ,SAAO;AAAA,UACNf,IAAIY;AAAAA,UACJX,WAAWoB,KAAAA,KACTnB,mCAASkC,MACTb,8BAAAA,QAA8Ba,MAC9BhB,IAAII,qCAAOY,IAAI,CAAC;AAAA,UAElBzB;AAAAA,UAAiBQ,UAEhBM;AAAAA,QAAAA,CAAI;AAAA,MAAA,CACG;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;;"}
+{"version":3,"file":"VerticalScrollListItem.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport verticalScrollListItemClasses, {\n  HvVerticalScrollListItemClasses,\n} from \"./verticalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./VerticalScrollListItem.styles\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useCallback } from \"react\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@core/hooks\";\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,\n  selected,\n  \"aria-label\": ariaLabel,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\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 NotSelected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              verticalScrollListItemClasses.notSelected,\n              css(styles.notSelected),\n              classes?.notSelected\n            )}\n          />\n        )}\n      </ClassNames>\n    );\n  }, [classes?.notSelected]);\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <NotSelected />\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <li\n          id={id}\n          className={cx(\n            verticalScrollListItemClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={cx(\n              verticalScrollListItemClasses.button,\n              css(styles.button),\n              classes?.button\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={cx(\n                verticalScrollListItemClasses.text,\n                css(styles.text),\n                classes?.text\n              )}\n              variant={variant}\n            >\n              {icon}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","NotSelected","useCallback","ClassNames","children","css","cx","verticalScrollListItemClasses","notSelected","styles","icon","_jsx","CurrentStep","height","scrollTo","dotSelectedSize","width","root","role","tabIndex","button","text"],"mappings":";;;;;;;;;;AAiCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAE5BC,QAAAA,UAAwCR,WAAW,UAAU;AAE7DS,QAAAA,UAAUC,MAAAA,MAAMb,IAAI,OAAO;AAE3Bc,QAAAA,WAAWD,MAAAA,MAAMb,IAAI,QAAQ;AAEnC,QAAMe,UAAUR;AAEVS,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,0CACGC,MAAAA,YAAU;AAAA,MAAAC,UACRA,CAAC;AAAA,QAAEC;AAAAA,QAAKC;AAAAA,MAAAA,qCACP,OAAA;AAAA,QACEpB,WAAWoB,GACTC,8BAA8BC,QAAAA,aAC9BH,IAAII,8BAAAA,OAAOD,WAAW,GACtBrB,mCAASqB,WAAW;AAAA,MAAA,CACpB;AAAA,IAAA,CAGK;AAAA,EAAA,GAEd,CAACrB,mCAASqB,WAAW,CAAC;AAEnBE,QAAAA,OAAOtB,WACXuB,2BAAAA,IAACC,6BAAW;AAAA,IACVC,QAAQnB,2CAAaoB,SAASC;AAAAA,IAC9BC,OAAOtB,2CAAaoB,SAASC;AAAAA,EAAgB,CAAA,IAG9Cd,2BAAAA,IAAAA,aACF,CAAA,CAAA;AAED,wCACGE,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,MAAA;AAAA,MACErB;AAAAA,MACAC,WAAWoB,GACTC,sCAA8BU,MAC9BZ,IAAII,qCAAOQ,IAAI,GACf/B,WACAC,mCAAS8B,IAAI;AAAA,MAEf,gBAAc7B;AAAAA,MAASgB,yCAEvB,OAAA;AAAA,QACEnB,IAAIc;AAAAA,QACJmB,MAAK;AAAA,QACLC,UAAU;AAAA,QACV7B;AAAAA,QACAC;AAAAA,QACAL,WAAWoB,GACTC,8BAA8Ba,QAAAA,QAC9Bf,IAAII,8BAAAA,OAAOW,MAAM,GACjBjC,mCAASiC,MAAM;AAAA,QAEjB,cAAY/B;AAAAA,QACZ,mBAAiBQ;AAAAA,QAAQ,GACrBJ;AAAAA,QAAMW,yCAETJ,SAAO;AAAA,UACNf,IAAIY;AAAAA,UACJX,WAAWoB,GACTC,8BAA8Bc,QAAAA,MAC9BhB,IAAII,8BAAAA,OAAOY,IAAI,GACflC,mCAASkC,IAAI;AAAA,UAEfzB;AAAAA,UAAiBQ,UAEhBM;AAAAA,QAAAA,CAAI;AAAA,MAAA,CACG;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;;"}

package/dist/esm/components/Banner/BannerContent/BannerContent.js

@@ -37,7 +37,7 @@ const HvBannerContent = forwardRef(({
           message: cx(bannerContentClasses.message, css(styles.message), classes == null ? void 0 : classes.message),
           action: cx(bannerContentClasses.action, css(styles.action), classes == null ? void 0 : classes.action)
         },
-        className: cx(bannerContentClasses.baseVariant, css(styles.baseVariant), classes == null ? void 0 : classes.baseVariant, bannerContentClasses[variant], css(styles[variant]), classes == null ? void 0 : classes[variant]),
+        className: cx(bannerContentClasses.baseVariant, bannerContentClasses[variant], css(styles.baseVariant), css(styles[variant]), classes == null ? void 0 : classes.baseVariant, classes == null ? void 0 : classes[variant]),
         message: /* @__PURE__ */ jsx(HvMessageContainer, {
           id,
           icon,

package/dist/esm/components/Banner/BannerContent/BannerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.js","sources":["../../../../../src/components/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { HvBaseProps } from \"@core/types\";\nimport { iconVariant } from \"@core/utils\";\nimport {\n  HvActionGeneric,\n  HvBannerActionPosition,\n  HvBannerVariant,\n} from \"@core/components\";\nimport bannerContentClasses, {\n  HvBannerContentClasses,\n} from \"./bannerContentClasses\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./BannerContent.styles\";\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\">,\n    HvBaseProps {\n  /** The message to display. */\n  content?: string;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** onClose function. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: HvActionContainerProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n  (\n    {\n      id,\n      classes,\n      showIcon = false,\n      customIcon,\n      variant = \"default\",\n      onClose,\n      actions,\n      actionsCallback,\n      actionsPosition = \"auto\",\n      content,\n      actionProps,\n      ...others\n    },\n    ref\n  ) => {\n    const icon =\n      customIcon || (showIcon && iconVariant(variant, \"base_dark\", undefined));\n\n    // default to inline\n    // this might try to be more intelligent in the future,\n    // taking into account the content length, available space,\n    // number of actions, etc..\n    const effectiveActionsPosition =\n      actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              bannerContentClasses.outContainer,\n              css(styles.outContainer),\n              classes?.outContainer\n            )}\n          >\n            <SnackbarContent\n              ref={ref}\n              id={id}\n              classes={{\n                root: cx(\n                  bannerContentClasses.root,\n                  css(styles.root),\n                  classes?.root\n                ),\n                message: cx(\n                  bannerContentClasses.message,\n                  css(styles.message),\n                  classes?.message\n                ),\n                action: cx(\n                  bannerContentClasses.action,\n                  css(styles.action),\n                  classes?.action\n                ),\n              }}\n              className={cx(\n                bannerContentClasses.baseVariant,\n                css(styles.baseVariant),\n                classes?.baseVariant,\n                bannerContentClasses[variant],\n                css(styles[variant]),\n                classes?.[variant]\n              )}\n              message={\n                <HvMessageContainer\n                  id={id}\n                  icon={icon}\n                  {...(effectiveActionsPosition === \"inline\" && {\n                    actionsOnMessage: actions,\n                    actionsOnMessageCallback: actionsCallback,\n                  })}\n                  message={content}\n                />\n              }\n              action={\n                <HvActionContainer\n                  id={id}\n                  onClose={onClose}\n                  {...(effectiveActionsPosition === \"bottom-right\" && {\n                    action: actions,\n                    actionCallback: actionsCallback,\n                  })}\n                  {...actionProps}\n                />\n              }\n              {...others}\n            />\n          </div>\n        )}\n      </ClassNames>\n    );\n  }\n);\n"],"names":["HvBannerContent","forwardRef","id","classes","showIcon","customIcon","variant","onClose","actions","actionsCallback","actionsPosition","content","actionProps","others","ref","icon","iconVariant","undefined","effectiveActionsPosition","ClassNames","children","css","cx","className","bannerContentClasses","outContainer","styles","SnackbarContent","root","message","action","baseVariant","HvMessageContainer","actionsOnMessage","actionsOnMessageCallback","HvActionContainer","actionCallback"],"mappings":";;;;;;;;;AAgDaA,MAAAA,kBAAkBC,WAC7B,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC,UAAU;AAAA,EACVC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,kBAAkB;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACL,GACAC,QACG;AACH,QAAMC,OACJV,cAAeD,YAAYY,YAAYV,SAAS,aAAaW,MAAS;AAMlEC,QAAAA,2BACJR,oBAAoB,SAAS,WAAWA;AAE1C,6BACGS,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,OAAA;AAAA,MACEC,WAAWD,GACTE,qBAAqBC,cACrBJ,IAAIK,OAAOD,YAAY,GACvBtB,mCAASsB,YAAY;AAAA,MACrBL,8BAEDO,iBAAe;AAAA,QACdb;AAAAA,QACAZ;AAAAA,QACAC,SAAS;AAAA,UACPyB,MAAMN,GACJE,qBAAqBI,MACrBP,IAAIK,OAAOE,IAAI,GACfzB,mCAASyB,IAAI;AAAA,UAEfC,SAASP,GACPE,qBAAqBK,SACrBR,IAAIK,OAAOG,OAAO,GAClB1B,mCAAS0B,OAAO;AAAA,UAElBC,QAAQR,GACNE,qBAAqBM,QACrBT,IAAIK,OAAOI,MAAM,GACjB3B,mCAAS2B,MAAM;AAAA,QAEnB;AAAA,QACAP,WAAWD,GACTE,qBAAqBO,aACrBV,IAAIK,OAAOK,WAAW,GACtB5B,mCAAS4B,aACTP,qBAAqBlB,OAAO,GAC5Be,IAAIK,OAAOpB,OAAO,CAAC,GACnBH,mCAAUG,QAAQ;AAAA,QAEpBuB,6BACGG,oBAAkB;AAAA,UACjB9B;AAAAA,UACAa;AAAAA,UAAW,GACNG,6BAA6B,YAAY;AAAA,YAC5Ce,kBAAkBzB;AAAAA,YAClB0B,0BAA0BzB;AAAAA,UAC5B;AAAA,UACAoB,SAASlB;AAAAA,QAAAA,CAEZ;AAAA,QACDmB,4BACGK,mBAAiB;AAAA,UAChBjC;AAAAA,UACAK;AAAAA,UAAiB,GACZW,6BAA6B,kBAAkB;AAAA,YAClDY,QAAQtB;AAAAA,YACR4B,gBAAgB3B;AAAAA,UAClB;AAAA,UAAC,GACGG;AAAAA,QAAAA,CAEP;AAAA,QAAA,GACGC;AAAAA,MAAAA,CAAM;AAAA,IAAA,CACV;AAAA,EAAA,CAGK;AAEjB,CAAC;"}
+{"version":3,"file":"BannerContent.js","sources":["../../../../../src/components/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { HvBaseProps } from \"@core/types\";\nimport { iconVariant } from \"@core/utils\";\nimport {\n  HvActionGeneric,\n  HvBannerActionPosition,\n  HvBannerVariant,\n} from \"@core/components\";\nimport bannerContentClasses, {\n  HvBannerContentClasses,\n} from \"./bannerContentClasses\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./BannerContent.styles\";\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\">,\n    HvBaseProps {\n  /** The message to display. */\n  content?: string;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** onClose function. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: HvActionContainerProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n  (\n    {\n      id,\n      classes,\n      showIcon = false,\n      customIcon,\n      variant = \"default\",\n      onClose,\n      actions,\n      actionsCallback,\n      actionsPosition = \"auto\",\n      content,\n      actionProps,\n      ...others\n    },\n    ref\n  ) => {\n    const icon =\n      customIcon || (showIcon && iconVariant(variant, \"base_dark\", undefined));\n\n    // default to inline\n    // this might try to be more intelligent in the future,\n    // taking into account the content length, available space,\n    // number of actions, etc..\n    const effectiveActionsPosition =\n      actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              bannerContentClasses.outContainer,\n              css(styles.outContainer),\n              classes?.outContainer\n            )}\n          >\n            <SnackbarContent\n              ref={ref}\n              id={id}\n              classes={{\n                root: cx(\n                  bannerContentClasses.root,\n                  css(styles.root),\n                  classes?.root\n                ),\n                message: cx(\n                  bannerContentClasses.message,\n                  css(styles.message),\n                  classes?.message\n                ),\n                action: cx(\n                  bannerContentClasses.action,\n                  css(styles.action),\n                  classes?.action\n                ),\n              }}\n              className={cx(\n                bannerContentClasses.baseVariant,\n                bannerContentClasses[variant],\n                css(styles.baseVariant),\n                css(styles[variant]),\n                classes?.baseVariant,\n                classes?.[variant]\n              )}\n              message={\n                <HvMessageContainer\n                  id={id}\n                  icon={icon}\n                  {...(effectiveActionsPosition === \"inline\" && {\n                    actionsOnMessage: actions,\n                    actionsOnMessageCallback: actionsCallback,\n                  })}\n                  message={content}\n                />\n              }\n              action={\n                <HvActionContainer\n                  id={id}\n                  onClose={onClose}\n                  {...(effectiveActionsPosition === \"bottom-right\" && {\n                    action: actions,\n                    actionCallback: actionsCallback,\n                  })}\n                  {...actionProps}\n                />\n              }\n              {...others}\n            />\n          </div>\n        )}\n      </ClassNames>\n    );\n  }\n);\n"],"names":["HvBannerContent","forwardRef","id","classes","showIcon","customIcon","variant","onClose","actions","actionsCallback","actionsPosition","content","actionProps","others","ref","icon","iconVariant","undefined","effectiveActionsPosition","ClassNames","children","css","cx","className","bannerContentClasses","outContainer","styles","SnackbarContent","root","message","action","baseVariant","HvMessageContainer","actionsOnMessage","actionsOnMessageCallback","HvActionContainer","actionCallback"],"mappings":";;;;;;;;;AAgDaA,MAAAA,kBAAkBC,WAC7B,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC,UAAU;AAAA,EACVC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,kBAAkB;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACL,GACAC,QACG;AACH,QAAMC,OACJV,cAAeD,YAAYY,YAAYV,SAAS,aAAaW,MAAS;AAMlEC,QAAAA,2BACJR,oBAAoB,SAAS,WAAWA;AAE1C,6BACGS,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,OAAA;AAAA,MACEC,WAAWD,GACTE,qBAAqBC,cACrBJ,IAAIK,OAAOD,YAAY,GACvBtB,mCAASsB,YAAY;AAAA,MACrBL,8BAEDO,iBAAe;AAAA,QACdb;AAAAA,QACAZ;AAAAA,QACAC,SAAS;AAAA,UACPyB,MAAMN,GACJE,qBAAqBI,MACrBP,IAAIK,OAAOE,IAAI,GACfzB,mCAASyB,IAAI;AAAA,UAEfC,SAASP,GACPE,qBAAqBK,SACrBR,IAAIK,OAAOG,OAAO,GAClB1B,mCAAS0B,OAAO;AAAA,UAElBC,QAAQR,GACNE,qBAAqBM,QACrBT,IAAIK,OAAOI,MAAM,GACjB3B,mCAAS2B,MAAM;AAAA,QAEnB;AAAA,QACAP,WAAWD,GACTE,qBAAqBO,aACrBP,qBAAqBlB,OAAO,GAC5Be,IAAIK,OAAOK,WAAW,GACtBV,IAAIK,OAAOpB,OAAO,CAAC,GACnBH,mCAAS4B,aACT5B,mCAAUG,QAAQ;AAAA,QAEpBuB,6BACGG,oBAAkB;AAAA,UACjB9B;AAAAA,UACAa;AAAAA,UAAW,GACNG,6BAA6B,YAAY;AAAA,YAC5Ce,kBAAkBzB;AAAAA,YAClB0B,0BAA0BzB;AAAAA,UAC5B;AAAA,UACAoB,SAASlB;AAAAA,QAAAA,CAEZ;AAAA,QACDmB,4BACGK,mBAAiB;AAAA,UAChBjC;AAAAA,UACAK;AAAAA,UAAiB,GACZW,6BAA6B,kBAAkB;AAAA,YAClDY,QAAQtB;AAAAA,YACR4B,gBAAgB3B;AAAAA,UAClB;AAAA,UAAC,GACGG;AAAAA,QAAAA,CAEP;AAAA,QAAA,GACGC;AAAAA,MAAAA,CAAM;AAAA,IAAA,CACV;AAAA,EAAA,CAGK;AAEjB,CAAC;"}

package/dist/esm/components/Card/Card.js

@@ -1,4 +1,3 @@
-import { clsx } from "clsx";
 import { ClassNames } from "@emotion/react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { styles } from "./Card.styles.js";
@@ -18,22 +17,23 @@ const HvCard = ({
 }) => {
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxs(HvBox, {
       "aria-selected": selectable ? selected : void 0,
-      className: clsx(css(styles.root), css({
+      className: cx("HvIsCardGridElement", cardClasses.root, selectable && cardClasses.selectable, selected && cardClasses.selected, css(styles.root), css({
         backgroundColor: bgcolor && theme.colors[bgcolor] || theme.card.backgroundColor
-      }), "HvIsCardGridElement", cardClasses.root, classes == null ? void 0 : classes.root, className, selectable && clsx(css(styles.selectable), cardClasses.selectable, classes == null ? void 0 : classes.selectable), selected && clsx(css(styles.selected), cardClasses.selected, classes == null ? void 0 : classes.selected)),
+      }), selectable && css(styles.selectable), selected && css(styles.selected), className, classes == null ? void 0 : classes.root, selectable && css(styles.selectable), selected && css(styles.selected)),
       ...others,
       children: [/* @__PURE__ */ jsxs("div", {
-        className: clsx(css(styles.semanticContainer), cardClasses.semanticContainer, classes == null ? void 0 : classes.semanticContainer),
+        className: cx(cardClasses.semanticContainer, css(styles.semanticContainer), classes == null ? void 0 : classes.semanticContainer),
         children: [/* @__PURE__ */ jsx("div", {
-          className: clsx(css(styles.semanticBar), css({
+          className: cx(cardClasses.semanticBar, css(styles.semanticBar), css({
             height: selected ? 4 : 2,
             backgroundColor: statusColor === "sema0" ? selected ? theme.colors.secondary : theme.colors.atmo4 : theme.colors[statusColor]
-          }), cardClasses.semanticBar, classes == null ? void 0 : classes.semanticBar)
+          }), classes == null ? void 0 : classes.semanticBar)
         }), /* @__PURE__ */ jsx("div", {
-          className: clsx(css(styles.icon), cardClasses.icon, classes == null ? void 0 : classes.icon),
+          className: cx(cardClasses.icon, css(styles.icon), classes == null ? void 0 : classes.icon),
           children: icon
         })]
       }), children]

package/dist/esm/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBox } from \"@core/components\";\nimport {\n  HvBaseProps,\n  HvAtmosphereColorKeys,\n  HvSemanticColorKeys,\n} from \"@core/types\";\nimport { styles } from \"./Card.styles\";\nimport cardClasses, { HvCardClasses } from \"./cardClasses\";\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = ({\n  classes,\n  className,\n  children,\n  icon,\n  selectable = false,\n  selected = false,\n  statusColor = \"sema0\",\n  bgcolor,\n  ...others\n}: HvCardProps) => {\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvBox\n          aria-selected={selectable ? selected : undefined}\n          className={clsx(\n            css(styles.root),\n            css({\n              backgroundColor:\n                (bgcolor && theme.colors[bgcolor]) ||\n                theme.card.backgroundColor,\n            }),\n            \"HvIsCardGridElement\",\n            cardClasses.root,\n            classes?.root,\n            className,\n            selectable &&\n              clsx(\n                css(styles.selectable),\n                cardClasses.selectable,\n                classes?.selectable\n              ),\n            selected &&\n              clsx(\n                css(styles.selected),\n                cardClasses.selected,\n                classes?.selected\n              )\n          )}\n          {...others}\n        >\n          <div\n            className={clsx(\n              css(styles.semanticContainer),\n              cardClasses.semanticContainer,\n              classes?.semanticContainer\n            )}\n          >\n            <div\n              className={clsx(\n                css(styles.semanticBar),\n                css({\n                  height: selected ? 4 : 2,\n                  backgroundColor:\n                    statusColor === \"sema0\"\n                      ? selected\n                        ? theme.colors.secondary\n                        : theme.colors.atmo4\n                      : theme.colors[statusColor],\n                }),\n                cardClasses.semanticBar,\n                classes?.semanticBar\n              )}\n            />\n            <div\n              className={clsx(\n                css(styles.icon),\n                cardClasses.icon,\n                classes?.icon\n              )}\n            >\n              {icon}\n            </div>\n          </div>\n          {children}\n        </HvBox>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCard","classes","className","children","icon","selectable","selected","statusColor","bgcolor","others","ClassNames","css","HvBox","undefined","clsx","styles","root","backgroundColor","theme","colors","card","cardClasses","_jsxs","semanticContainer","_jsx","semanticBar","height","secondary","atmo4"],"mappings":";;;;;;;AAwCO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,6BACGC,YAAU;AAAA,IAAAP,UACRA,CAAC;AAAA,MAAEQ;AAAAA,IAAAA,2BACDC,OAAK;AAAA,MACJ,iBAAeP,aAAaC,WAAWO;AAAAA,MACvCX,WAAWY,KACTH,IAAII,OAAOC,IAAI,GACfL,IAAI;AAAA,QACFM,iBACGT,WAAWU,MAAMC,OAAOX,OAAO,KAChCU,MAAME,KAAKH;AAAAA,MACd,CAAA,GACD,uBACAI,YAAYL,MACZf,mCAASe,MACTd,WACAG,cACES,KACEH,IAAII,OAAOV,UAAU,GACrBgB,YAAYhB,YACZJ,mCAASI,UAAU,GAEvBC,YACEQ,KACEH,IAAII,OAAOT,QAAQ,GACnBe,YAAYf,UACZL,mCAASK,QAAQ,CAClB;AAAA,MACH,GACEG;AAAAA,MAAMN,WAEVmB,qBAAA,OAAA;AAAA,QACEpB,WAAWY,KACTH,IAAII,OAAOQ,iBAAiB,GAC5BF,YAAYE,mBACZtB,mCAASsB,iBAAiB;AAAA,QAC1BpB,WAEFqB,oBAAA,OAAA;AAAA,UACEtB,WAAWY,KACTH,IAAII,OAAOU,WAAW,GACtBd,IAAI;AAAA,YACFe,QAAQpB,WAAW,IAAI;AAAA,YACvBW,iBACEV,gBAAgB,UACZD,WACEY,MAAMC,OAAOQ,YACbT,MAAMC,OAAOS,QACfV,MAAMC,OAAOZ,WAAW;AAAA,UAC/B,CAAA,GACDc,YAAYI,aACZxB,mCAASwB,WAAW;AAAA,QAAA,CACpB,GAEJD,oBAAA,OAAA;AAAA,UACEtB,WAAWY,KACTH,IAAII,OAAOX,IAAI,GACfiB,YAAYjB,MACZH,mCAASG,IAAI;AAAA,UACbD,UAEDC;AAAAA,QAAAA,CACG,CAAA;AAAA,MAAA,CAAA,GAEPD,QAAQ;AAAA,IAAA,CAAA;AAAA,EAAA,CAGF;AAEjB;"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBox } from \"@core/components\";\nimport {\n  HvBaseProps,\n  HvAtmosphereColorKeys,\n  HvSemanticColorKeys,\n} from \"@core/types\";\nimport { styles } from \"./Card.styles\";\nimport cardClasses, { HvCardClasses } from \"./cardClasses\";\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = ({\n  classes,\n  className,\n  children,\n  icon,\n  selectable = false,\n  selected = false,\n  statusColor = \"sema0\",\n  bgcolor,\n  ...others\n}: HvCardProps) => {\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvBox\n          aria-selected={selectable ? selected : undefined}\n          className={cx(\n            \"HvIsCardGridElement\",\n            cardClasses.root,\n            selectable && cardClasses.selectable,\n            selected && cardClasses.selected,\n            css(styles.root),\n            css({\n              backgroundColor:\n                (bgcolor && theme.colors[bgcolor]) ||\n                theme.card.backgroundColor,\n            }),\n            selectable && css(styles.selectable),\n            selected && css(styles.selected),\n            className,\n            classes?.root,\n            selectable && css(styles.selectable),\n            selected && css(styles.selected)\n          )}\n          {...others}\n        >\n          <div\n            className={cx(\n              cardClasses.semanticContainer,\n              css(styles.semanticContainer),\n              classes?.semanticContainer\n            )}\n          >\n            <div\n              className={cx(\n                cardClasses.semanticBar,\n                css(styles.semanticBar),\n                css({\n                  height: selected ? 4 : 2,\n                  backgroundColor:\n                    statusColor === \"sema0\"\n                      ? selected\n                        ? theme.colors.secondary\n                        : theme.colors.atmo4\n                      : theme.colors[statusColor],\n                }),\n                classes?.semanticBar\n              )}\n            />\n            <div\n              className={cx(cardClasses.icon, css(styles.icon), classes?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n          {children}\n        </HvBox>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCard","classes","className","children","icon","selectable","selected","statusColor","bgcolor","others","ClassNames","css","cx","HvBox","undefined","cardClasses","root","styles","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","semanticBar","height","secondary","atmo4"],"mappings":";;;;;;AAuCO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,6BACGC,YAAU;AAAA,IAAAP,UACRA,CAAC;AAAA,MAAEQ;AAAAA,MAAKC;AAAAA,IAAAA,2BACNC,OAAK;AAAA,MACJ,iBAAeR,aAAaC,WAAWQ;AAAAA,MACvCZ,WAAWU,GACT,uBACAG,YAAYC,MACZX,cAAcU,YAAYV,YAC1BC,YAAYS,YAAYT,UACxBK,IAAIM,OAAOD,IAAI,GACfL,IAAI;AAAA,QACFO,iBACGV,WAAWW,MAAMC,OAAOZ,OAAO,KAChCW,MAAME,KAAKH;AAAAA,MAAAA,CACd,GACDb,cAAcM,IAAIM,OAAOZ,UAAU,GACnCC,YAAYK,IAAIM,OAAOX,QAAQ,GAC/BJ,WACAD,mCAASe,MACTX,cAAcM,IAAIM,OAAOZ,UAAU,GACnCC,YAAYK,IAAIM,OAAOX,QAAQ,CAAC;AAAA,MAChC,GACEG;AAAAA,MAAMN,WAEVmB,qBAAA,OAAA;AAAA,QACEpB,WAAWU,GACTG,YAAYQ,mBACZZ,IAAIM,OAAOM,iBAAiB,GAC5BtB,mCAASsB,iBAAiB;AAAA,QAC1BpB,WAEFqB,oBAAA,OAAA;AAAA,UACEtB,WAAWU,GACTG,YAAYU,aACZd,IAAIM,OAAOQ,WAAW,GACtBd,IAAI;AAAA,YACFe,QAAQpB,WAAW,IAAI;AAAA,YACvBY,iBACEX,gBAAgB,UACZD,WACEa,MAAMC,OAAOO,YACbR,MAAMC,OAAOQ,QACfT,MAAMC,OAAOb,WAAW;AAAA,UAAA,CAC/B,GACDN,mCAASwB,WAAW;AAAA,QAAA,CACpB,GAEJD,oBAAA,OAAA;AAAA,UACEtB,WAAWU,GAAGG,YAAYX,MAAMO,IAAIM,OAAOb,IAAI,GAAGH,mCAASG,IAAI;AAAA,UAAED,UAEhEC;AAAAA,QAAAA,CACG,CAAA;AAAA,MAAA,CAAA,GAEPD,QAAQ;AAAA,IAAA,CAAA;AAAA,EAAA,CAGF;AAEjB;"}