@hitachivantara/uikit-react-core 5.24.1 → 5.24.3

package/dist/cjs/components/BulkActions/BulkActions.cjs

@@ -78,10 +78,6 @@ const HvBulkActions = (props) => {
       },
       [`& .${BulkActions_styles.staticClasses.selectAll}:focus-within div`]: {
         backgroundColor: hexToRgbA.hexToRgbA(baseColor, 0.3)
-      },
-      // IE fallback code (using focus-within-polyfill)
-      [`& .${BulkActions_styles.staticClasses.selectAll}.focus-within div`]: {
-        backgroundColor: hexToRgbA.hexToRgbA(baseColor, 0.3)
       }
     }), className),
     ...others,

package/dist/cjs/components/BulkActions/BulkActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.cjs","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"@core/components/CheckBox\";\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"@core/components/ActionsGeneric\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const baseColor =\n    activeTheme?.colors?.modes[selectedMode].base_light ||\n    theme.colors.base_light;\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        isSemantic &&\n          css({\n            [`& .${staticClasses.selectAll} div`]: {\n              color: theme.colors.base_dark,\n\n              \"&:hover:not(:disabled)\": {\n                backgroundColor: hexToRgbA(baseColor, 0.3),\n              },\n\n              \"& *\": {\n                color: theme.colors.base_dark,\n                backgroundColor: \"transparent\",\n              },\n            },\n\n            [`& .${staticClasses.selectAll}:focus-within div`]: {\n              backgroundColor: hexToRgbA(baseColor, 0.3),\n            },\n\n            // IE fallback code (using focus-within-polyfill)\n            [`& .${staticClasses.selectAll}.focus-within div`]: {\n              backgroundColor: hexToRgbA(baseColor, 0.3),\n            },\n          }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ??\n                `Select all ${numTotal} items across all pages`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":["HvBulkActions","props","id","className","classes","classesProp","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","useDefaultProps","cx","css","useClasses","activeTheme","selectedMode","useTheme","baseColor","colors","modes","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","HvTypography","component","disabled","variant","children","_jsxs","_Fragment","_jsx","root","staticClasses","selectAll","color","base_dark","backgroundColor","hexToRgbA","selectAllContainer","HvCheckBox","setId","checked","onChange","indeterminate","label","divider","HvButton","selectAllPages","onClick","HvActionsGeneric","category"],"mappings":"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"}
+{"version":3,"file":"BulkActions.cjs","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"@core/components/CheckBox\";\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"@core/components/ActionsGeneric\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const baseColor =\n    activeTheme?.colors?.modes[selectedMode].base_light ||\n    theme.colors.base_light;\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        isSemantic &&\n          css({\n            [`& .${staticClasses.selectAll} div`]: {\n              color: theme.colors.base_dark,\n\n              \"&:hover:not(:disabled)\": {\n                backgroundColor: hexToRgbA(baseColor, 0.3),\n              },\n\n              \"& *\": {\n                color: theme.colors.base_dark,\n                backgroundColor: \"transparent\",\n              },\n            },\n\n            [`& .${staticClasses.selectAll}:focus-within div`]: {\n              backgroundColor: hexToRgbA(baseColor, 0.3),\n            },\n          }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ??\n                `Select all ${numTotal} items across all pages`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":["HvBulkActions","props","id","className","classes","classesProp","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","useDefaultProps","cx","css","useClasses","activeTheme","selectedMode","useTheme","baseColor","colors","modes","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","HvTypography","component","disabled","variant","children","_jsxs","_Fragment","_jsx","root","staticClasses","selectAll","color","base_dark","backgroundColor","hexToRgbA","selectAllContainer","HvCheckBox","setId","checked","onChange","indeterminate","label","divider","HvButton","selectAllPages","onClick","HvActionsGeneric","category"],"mappings":"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"}

package/dist/cjs/components/Card/Card.cjs

@@ -26,10 +26,10 @@ const HvCard = (props) => {
     "aria-selected": selectable ? selected : void 0,
     className: cx("HvIsCardGridElement", classes.root, css({
       backgroundColor: bgcolor && uikitStyles.theme.colors[bgcolor] || uikitStyles.theme.card.backgroundColor
-    }), className, {
+    }), {
       [classes.selectable]: selectable,
       [classes.selected]: selected
-    }),
+    }, className),
     ...others,
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
       className: classes.semanticContainer,

package/dist/cjs/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\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 = (props: HvCardProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    icon,\n    selectable = false,\n    selected = false,\n    statusColor = \"sema0\",\n    bgcolor,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <HvBox\n      aria-selected={selectable ? selected : undefined}\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        css({\n          backgroundColor:\n            (bgcolor && theme.colors[bgcolor]) || theme.card.backgroundColor,\n        }),\n        className,\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        }\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div\n          className={cx(\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 className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","props","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","useDefaultProps","css","cx","useClasses","HvBox","undefined","root","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;;AA0CaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUX,KAAK;AAE7B,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,YAAAA,WAAWZ,WAAW;AACnD,yCACGa,IAAAA,OAAK;AAAA,IACJ,iBAAeT,aAAaC,WAAWS;AAAAA,IACvCb,WAAWU,GACT,uBACAZ,QAAQgB,MACRL,IAAI;AAAA,MACFM,iBACGT,WAAWU,kBAAMC,OAAOX,OAAO,KAAMU,YAAAA,MAAME,KAAKH;AAAAA,IACpD,CAAA,GACDf,WACA;AAAA,MACE,CAACF,QAAQK,UAAU,GAAGA;AAAAA,MACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,IAAAA,CAExB;AAAA,IAAE,GACEG;AAAAA,IAAMN,WAEVkB,2BAAAA,KAAA,OAAA;AAAA,MAAKnB,WAAWF,QAAQsB;AAAAA,MAAkBnB,WACxCoB,2BAAAA,IAAA,OAAA;AAAA,QACErB,WAAWU,GACTD,IAAI;AAAA,UACFa,QAAQlB,WAAW,IAAI;AAAA,UACvBW,iBACEV,gBAAgB,UACZD,WACEY,YAAMC,MAAAA,OAAOM,YACbP,YAAAA,MAAMC,OAAOO,QACfR,YAAAA,MAAMC,OAAOZ,WAAW;AAAA,QAAA,CAC/B,GACDP,QAAQ2B,WACV;AAAA,MAAA,CACD,GACDJ,2BAAAA,IAAA,OAAA;AAAA,QAAKrB,WAAWF,QAAQI;AAAAA,QAAKD,UAAEC;AAAAA,MAAAA,CAAU,CAAC;AAAA,IACvC,CAAA,GACJD,QAAQ;AAAA,EAAA,CACJ;AAEX;;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\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 = (props: HvCardProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    icon,\n    selectable = false,\n    selected = false,\n    statusColor = \"sema0\",\n    bgcolor,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <HvBox\n      aria-selected={selectable ? selected : undefined}\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        css({\n          backgroundColor:\n            (bgcolor && theme.colors[bgcolor]) || theme.card.backgroundColor,\n        }),\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div\n          className={cx(\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 className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","props","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","useDefaultProps","css","cx","useClasses","HvBox","undefined","root","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;;AA0CaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUX,KAAK;AAE7B,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,YAAAA,WAAWZ,WAAW;AACnD,yCACGa,IAAAA,OAAK;AAAA,IACJ,iBAAeT,aAAaC,WAAWS;AAAAA,IACvCb,WAAWU,GACT,uBACAZ,QAAQgB,MACRL,IAAI;AAAA,MACFM,iBACGT,WAAWU,kBAAMC,OAAOX,OAAO,KAAMU,YAAAA,MAAME,KAAKH;AAAAA,IAAAA,CACpD,GACD;AAAA,MACE,CAACjB,QAAQK,UAAU,GAAGA;AAAAA,MACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,OAEtBJ,SACF;AAAA,IAAE,GACEO;AAAAA,IAAMN,WAEVkB,2BAAAA,KAAA,OAAA;AAAA,MAAKnB,WAAWF,QAAQsB;AAAAA,MAAkBnB,WACxCoB,2BAAAA,IAAA,OAAA;AAAA,QACErB,WAAWU,GACTD,IAAI;AAAA,UACFa,QAAQlB,WAAW,IAAI;AAAA,UACvBW,iBACEV,gBAAgB,UACZD,WACEY,YAAMC,MAAAA,OAAOM,YACbP,YAAAA,MAAMC,OAAOO,QACfR,YAAAA,MAAMC,OAAOZ,WAAW;AAAA,QAAA,CAC/B,GACDP,QAAQ2B,WACV;AAAA,MAAA,CACD,GACDJ,2BAAAA,IAAA,OAAA;AAAA,QAAKrB,WAAWF,QAAQI;AAAAA,QAAKD,UAAEC;AAAAA,MAAAA,CAAU,CAAC;AAAA,IACvC,CAAA,GACJD,QAAQ;AAAA,EAAA,CACJ;AAEX;;;"}

package/dist/cjs/components/Card/Card.styles.cjs

@@ -12,7 +12,7 @@ const {
     position: "relative",
     outline: uikitStyles.theme.card.outline,
     borderRadius: uikitStyles.theme.card.borderRadius,
-    "&.focus-visible": {
+    "&:focus-visible": {
       ...focusUtils.outlineStyles
     },
     "&:focus": {

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.cjs","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCard\", {\n  root: {\n    overflow: \"visible\",\n    position: \"relative\",\n    outline: theme.card.outline,\n    borderRadius: theme.card.borderRadius,\n    \"&.focus-visible\": {\n      ...outlineStyles,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  selected: {\n    outline: `1px solid ${theme.colors.secondary}`,\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n    \"&:focus\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  selectable: {\n    \"&:hover\": {\n      outline: `1px solid ${theme.card.hoverColor}`,\n    },\n  },\n  semanticContainer: {\n    position: \"relative\",\n    \"& > *\": {\n      position: \"absolute\",\n      zIndex: 1,\n    },\n  },\n  icon: {\n    top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n    right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n  },\n  semanticBar: {\n    width: \"100%\",\n    top: -1,\n    right: 0,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","overflow","position","outline","theme","card","borderRadius","outlineStyles","selected","colors","secondary","selectable","hoverColor","semanticContainer","zIndex","icon","top","iconMargin","space","xs","right","semanticBar","width"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAASC,YAAAA,MAAMC,KAAKF;AAAAA,IACpBG,cAAcF,YAAAA,MAAMC,KAAKC;AAAAA,IACzB,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTJ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAK,UAAU;AAAA,IACRL,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACnC,WAAW;AAAA,MACTP,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACrC;AAAA,IACA,WAAW;AAAA,MACTP,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACrC;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACV,WAAW;AAAA,MACTR,SAAU,aAAYC,YAAAA,MAAMC,KAAKO;AAAAA,IACnC;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBX,UAAU;AAAA,IACV,SAAS;AAAA,MACPA,UAAU;AAAA,MACVY,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJC,KAAM,QAAOZ,YAAAA,MAAMC,KAAKY,gBAAgBb,kBAAMc,MAAMC;AAAAA,IACpDC,OAAQ,QAAOhB,YAAAA,MAAMC,KAAKY,gBAAgBb,kBAAMc,MAAMC;AAAAA,EACxD;AAAA,EACAE,aAAa;AAAA,IACXC,OAAO;AAAA,IACPN,KAAK;AAAA,IACLI,OAAO;AAAA,EACT;AACF,CAAC;;;"}
+{"version":3,"file":"Card.styles.cjs","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCard\", {\n  root: {\n    overflow: \"visible\",\n    position: \"relative\",\n    outline: theme.card.outline,\n    borderRadius: theme.card.borderRadius,\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  selected: {\n    outline: `1px solid ${theme.colors.secondary}`,\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n    \"&:focus\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  selectable: {\n    \"&:hover\": {\n      outline: `1px solid ${theme.card.hoverColor}`,\n    },\n  },\n  semanticContainer: {\n    position: \"relative\",\n    \"& > *\": {\n      position: \"absolute\",\n      zIndex: 1,\n    },\n  },\n  icon: {\n    top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n    right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n  },\n  semanticBar: {\n    width: \"100%\",\n    top: -1,\n    right: 0,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","overflow","position","outline","theme","card","borderRadius","outlineStyles","selected","colors","secondary","selectable","hoverColor","semanticContainer","zIndex","icon","top","iconMargin","space","xs","right","semanticBar","width"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAASC,YAAAA,MAAMC,KAAKF;AAAAA,IACpBG,cAAcF,YAAAA,MAAMC,KAAKC;AAAAA,IACzB,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTJ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAK,UAAU;AAAA,IACRL,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACnC,WAAW;AAAA,MACTP,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACrC;AAAA,IACA,WAAW;AAAA,MACTP,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACrC;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACV,WAAW;AAAA,MACTR,SAAU,aAAYC,YAAAA,MAAMC,KAAKO;AAAAA,IACnC;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBX,UAAU;AAAA,IACV,SAAS;AAAA,MACPA,UAAU;AAAA,MACVY,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJC,KAAM,QAAOZ,YAAAA,MAAMC,KAAKY,gBAAgBb,kBAAMc,MAAMC;AAAAA,IACpDC,OAAQ,QAAOhB,YAAAA,MAAMC,KAAKY,gBAAgBb,kBAAMc,MAAMC;AAAAA,EACxD;AAAA,EACAE,aAAa;AAAA,IACXC,OAAO;AAAA,IACPN,KAAK;AAAA,IACLI,OAAO;AAAA,EACT;AACF,CAAC;;;"}

package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.styles.cjs

@@ -27,10 +27,6 @@ const {
     },
     "&>*:focus-within": {
       zIndex: 1
-    },
-    // IE fallback code (using focus-within-polyfill)
-    "&>*.focus-within": {
-      zIndex: 1
     }
   },
   horizontal: {

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.styles.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n  root: {\n    display: \"inline-block\",\n    padding: 0,\n    margin: 0,\n    overflow: \"hidden\",\n    verticalAlign: \"top\",\n  },\n  label: { marginBottom: theme.space.xs },\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n    // IE fallback code (using focus-within-polyfill)\n    \"&>*.focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    \"&>*:not(:first-of-type)\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative}`,\n  },\n  selectAll: {},\n  error: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","padding","margin","overflow","verticalAlign","label","marginBottom","theme","space","xs","group","vertical","flexDirection","zIndex","horizontal","flexWrap","marginLeft","sm","invalid","paddingBottom","borderBottom","colors","negative","selectAll","error"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,eAAe;AAAA,EACjB;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,EAAG;AAAA,EACtCC,OAAO;AAAA,IAAEV,SAAS;AAAA,EAAO;AAAA,EACzBW,UAAU;AAAA,IACRC,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA;AAAA,IAEA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACVF,eAAe;AAAA,IACfG,UAAU;AAAA,IAEV,2BAA2B;AAAA,MACzBC,YAAYT,YAAAA,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACPC,eAAeZ,YAAAA,MAAMC,MAAMC;AAAAA,IAC3BW,cAAe,aAAYb,YAAAA,MAAMc,OAAOC;AAAAA,EAC1C;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,OAAO,CAAC;AACV,CAAC;;;"}
+{"version":3,"file":"CheckBoxGroup.styles.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n  root: {\n    display: \"inline-block\",\n    padding: 0,\n    margin: 0,\n    overflow: \"hidden\",\n    verticalAlign: \"top\",\n  },\n  label: { marginBottom: theme.space.xs },\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    \"&>*:not(:first-of-type)\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative}`,\n  },\n  selectAll: {},\n  error: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","padding","margin","overflow","verticalAlign","label","marginBottom","theme","space","xs","group","vertical","flexDirection","zIndex","horizontal","flexWrap","marginLeft","sm","invalid","paddingBottom","borderBottom","colors","negative","selectAll","error"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,eAAe;AAAA,EACjB;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,EAAG;AAAA,EACtCC,OAAO;AAAA,IAAEV,SAAS;AAAA,EAAO;AAAA,EACzBW,UAAU;AAAA,IACRC,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACVF,eAAe;AAAA,IACfG,UAAU;AAAA,IAEV,2BAA2B;AAAA,MACzBC,YAAYT,YAAAA,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACPC,eAAeZ,YAAAA,MAAMC,MAAMC;AAAAA,IAC3BW,cAAe,aAAYb,YAAAA,MAAMc,OAAOC;AAAAA,EAC1C;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,OAAO,CAAC;AACV,CAAC;;;"}

package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs

@@ -17,7 +17,7 @@ const {
   root: {
     display: "inline-block",
     width: "auto",
-    "&.focus-visible $icon": {
+    "&:focus-visible $icon": {
       ...focusUtils.outlineStyles
     }
   },

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&.focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    height: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.dropDownMenu.borderRadius,\n    border: theme.dropDownMenu.borderClosed,\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: theme.dropDownMenu.borderOpened,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","radii","base","borderOpened","menuListRoot","menuList"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,IACjCG,QAAQF,YAAAA,MAAMC,aAAaE;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,YAAAA,MAAMY,MAAMC,QAAQb,kBAAMY,MAAMC;AAAAA,IACjDX,QAAQF,YAAAA,MAAMC,aAAaa;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;;;"}
+{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&:focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    height: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.dropDownMenu.borderRadius,\n    border: theme.dropDownMenu.borderClosed,\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: theme.dropDownMenu.borderOpened,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","radii","base","borderOpened","menuListRoot","menuList"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,IACjCG,QAAQF,YAAAA,MAAMC,aAAaE;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,YAAAA,MAAMY,MAAMC,QAAQb,kBAAMY,MAAMC;AAAAA,IACjDX,QAAQF,YAAAA,MAAMC,aAAaa;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;;;"}

package/dist/cjs/components/FilterGroup/RightPanel/RightPanel.styles.cjs

@@ -25,10 +25,6 @@ const {
     },
     "&:focus-within": {
       zIndex: 1
-    },
-    // IE fallback code (using focus-within-polyfill)
-    "&.focus-within": {
-      zIndex: 1
     }
   },
   selectAll: {

package/dist/cjs/components/FilterGroup/RightPanel/RightPanel.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.styles.cjs","sources":["../../../../../src/components/FilterGroup/RightPanel/RightPanel.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvFilterGroupRightPanel\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  search: {\n    marginBottom: theme.spacing(\"xs\"),\n  },\n  list: {\n    width: \"calc(100% + 8px)\",\n    height: \"calc(100% - 70px)\",\n    overflowY: \"auto\",\n    margin: -4,\n    padding: 4,\n  },\n  selectAllContainer: {\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&\": {\n      position: \"relative\",\n      zIndex: 0,\n    },\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n    // IE fallback code (using focus-within-polyfill)\n    \"&.focus-within\": {\n      zIndex: 1,\n    },\n  },\n  selectAll: {\n    width: \"100%\",\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","search","marginBottom","theme","spacing","list","width","height","overflowY","margin","padding","selectAllContainer","position","zIndex","selectAll"],"mappings":";;;;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,QAAQ;AAAA,IACNC,cAAcC,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,oBAAoB;AAAA;AAAA,IAElB,KAAK;AAAA,MACHC,UAAU;AAAA,MACVC,QAAQ;AAAA,IACV;AAAA,IACA,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA;AAAA,IAEA,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTR,OAAO;AAAA,EACT;AACF,CAAC;;;"}
+{"version":3,"file":"RightPanel.styles.cjs","sources":["../../../../../src/components/FilterGroup/RightPanel/RightPanel.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvFilterGroupRightPanel\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  search: {\n    marginBottom: theme.spacing(\"xs\"),\n  },\n  list: {\n    width: \"calc(100% + 8px)\",\n    height: \"calc(100% - 70px)\",\n    overflowY: \"auto\",\n    margin: -4,\n    padding: 4,\n  },\n  selectAllContainer: {\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&\": {\n      position: \"relative\",\n      zIndex: 0,\n    },\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  selectAll: {\n    width: \"100%\",\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","search","marginBottom","theme","spacing","list","width","height","overflowY","margin","padding","selectAllContainer","position","zIndex","selectAll"],"mappings":";;;;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,QAAQ;AAAA,IACNC,cAAcC,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,oBAAoB;AAAA;AAAA,IAElB,KAAK;AAAA,MACHC,UAAU;AAAA,MACVC,QAAQ;AAAA,IACV;AAAA,IACA,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTR,OAAO;AAAA,EACT;AACF,CAAC;;;"}

package/dist/cjs/components/Footer/Footer.cjs

@@ -22,9 +22,9 @@ const HvFooter = (props) => {
   } = Footer_styles.useClasses(classesProp);
   const isSmDown = material.useMediaQuery(muiTheme.breakpoints.down("sm"));
   return /* @__PURE__ */ jsxRuntime.jsxs("footer", {
-    className: cx(classes.root, className, {
+    className: cx(classes.root, {
       [classes.small]: isSmDown
-    }),
+    }, className),
     ...others,
     children: [/* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
       variant: "highlightText",

package/dist/cjs/components/Footer/Footer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.cjs","sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Footer.styles\";\n\nexport { staticClasses as footerClasses };\n\nexport type HvFooterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFooterProps extends HvBaseProps {\n  name?: React.ReactNode;\n  copyright?: React.ReactNode;\n  links?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFooterClasses;\n}\n\n/**\n * A Footer is a way of providing extra information at the end of a page.\n */\nexport const HvFooter = (props: HvFooterProps) => {\n  const {\n    name = \"Hitachi Vantara\",\n    copyright = `© Hitachi Vantara Corporation ${new Date().getFullYear()}. All Rights Reserved.`,\n    links,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvFooter\", props);\n  const muiTheme = useTheme();\n  const { classes, cx } = useClasses(classesProp);\n\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n\n  return (\n    <footer\n      className={cx(classes.root, className, { [classes.small]: isSmDown })}\n      {...others}\n    >\n      <HvTypography variant=\"highlightText\" className={classes.name}>\n        {name}\n      </HvTypography>\n      <div className={classes.rightContainer}>\n        <HvTypography className={classes.copyright}>{copyright}</HvTypography>\n        {links && <div className={classes.separator} />}\n        {links}\n      </div>\n    </footer>\n  );\n};\n"],"names":["HvFooter","props","name","copyright","Date","getFullYear","links","classes","classesProp","className","others","useDefaultProps","muiTheme","useTheme","cx","useClasses","isSmDown","useMediaQuery","breakpoints","down","root","small","children","_jsx","HvTypography","variant","_jsxs","rightContainer","separator"],"mappings":";;;;;;;;AAuBaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC,OAAO;AAAA,IACPC,YAAa,kCAAoCC,oBAAAA,QAAOC,YAAY;AAAA,IACpEC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYV,KAAK;AACrC,QAAMW,WAAWC,OAAAA;AACX,QAAA;AAAA,IAAEN;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,cAAAA,WAAWP,WAAW;AAE9C,QAAMQ,WAAWC,SAAAA,cAAcL,SAASM,YAAYC,KAAK,IAAI,CAAC;AAE9D,yCACE,UAAA;AAAA,IACEV,WAAWK,GAAGP,QAAQa,MAAMX,WAAW;AAAA,MAAE,CAACF,QAAQc,KAAK,GAAGL;AAAAA,IAAAA,CAAU;AAAA,IAAE,GAClEN;AAAAA,IAAMY,UAAA,CAEVC,2BAAAA,IAACC,yBAAY;AAAA,MAACC,SAAQ;AAAA,MAAgBhB,WAAWF,QAAQL;AAAAA,MAAKoB,UAC3DpB;AAAAA,IAAAA,CACW,GACdwB,2BAAAA,KAAA,OAAA;AAAA,MAAKjB,WAAWF,QAAQoB;AAAAA,MAAeL,UAAA,CACrCC,2BAAAA,IAACC,yBAAY;AAAA,QAACf,WAAWF,QAAQJ;AAAAA,QAAUmB,UAAEnB;AAAAA,MAAAA,CAAwB,GACpEG,SAASiB,2BAAAA,IAAA,OAAA;AAAA,QAAKd,WAAWF,QAAQqB;AAAAA,MAAY,CAAA,GAC7CtB,KAAK;AAAA,IAAA,CACH,CAAC;AAAA,EAAA,CACA;AAEZ;;;"}
+{"version":3,"file":"Footer.cjs","sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Footer.styles\";\n\nexport { staticClasses as footerClasses };\n\nexport type HvFooterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFooterProps extends HvBaseProps {\n  name?: React.ReactNode;\n  copyright?: React.ReactNode;\n  links?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFooterClasses;\n}\n\n/**\n * A Footer is a way of providing extra information at the end of a page.\n */\nexport const HvFooter = (props: HvFooterProps) => {\n  const {\n    name = \"Hitachi Vantara\",\n    copyright = `© Hitachi Vantara Corporation ${new Date().getFullYear()}. All Rights Reserved.`,\n    links,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvFooter\", props);\n  const muiTheme = useTheme();\n  const { classes, cx } = useClasses(classesProp);\n\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n\n  return (\n    <footer\n      className={cx(classes.root, { [classes.small]: isSmDown }, className)}\n      {...others}\n    >\n      <HvTypography variant=\"highlightText\" className={classes.name}>\n        {name}\n      </HvTypography>\n      <div className={classes.rightContainer}>\n        <HvTypography className={classes.copyright}>{copyright}</HvTypography>\n        {links && <div className={classes.separator} />}\n        {links}\n      </div>\n    </footer>\n  );\n};\n"],"names":["HvFooter","props","name","copyright","Date","getFullYear","links","classes","classesProp","className","others","useDefaultProps","muiTheme","useTheme","cx","useClasses","isSmDown","useMediaQuery","breakpoints","down","root","small","children","_jsx","HvTypography","variant","_jsxs","rightContainer","separator"],"mappings":";;;;;;;;AAuBaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC,OAAO;AAAA,IACPC,YAAa,kCAAoCC,oBAAAA,QAAOC,YAAY;AAAA,IACpEC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYV,KAAK;AACrC,QAAMW,WAAWC,OAAAA;AACX,QAAA;AAAA,IAAEN;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,cAAAA,WAAWP,WAAW;AAE9C,QAAMQ,WAAWC,SAAAA,cAAcL,SAASM,YAAYC,KAAK,IAAI,CAAC;AAE9D,yCACE,UAAA;AAAA,IACEV,WAAWK,GAAGP,QAAQa,MAAM;AAAA,MAAE,CAACb,QAAQc,KAAK,GAAGL;AAAAA,OAAYP,SAAS;AAAA,IAAE,GAClEC;AAAAA,IAAMY,UAAA,CAEVC,2BAAAA,IAACC,yBAAY;AAAA,MAACC,SAAQ;AAAA,MAAgBhB,WAAWF,QAAQL;AAAAA,MAAKoB,UAC3DpB;AAAAA,IAAAA,CACW,GACdwB,2BAAAA,KAAA,OAAA;AAAA,MAAKjB,WAAWF,QAAQoB;AAAAA,MAAeL,UAAA,CACrCC,2BAAAA,IAACC,yBAAY;AAAA,QAACf,WAAWF,QAAQJ;AAAAA,QAAUmB,UAAEnB;AAAAA,MAAAA,CAAwB,GACpEG,SAASiB,2BAAAA,IAAA,OAAA;AAAA,QAAKd,WAAWF,QAAQqB;AAAAA,MAAY,CAAA,GAC7CtB,KAAK;AAAA,IAAA,CACH,CAAC;AAAA,EAAA,CACA;AAEZ;;;"}

package/dist/cjs/components/GlobalActions/GlobalActions.cjs

@@ -1,20 +1,29 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const styles = require("@mui/material/styles");
+const material = require("@mui/material");
 const isString = require("lodash/isString");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const useTheme = require("../../hooks/useTheme.cjs");
 const GlobalActions_styles = require("./GlobalActions.styles.cjs");
-const globalActionsClasses = require("./globalActionsClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const isString__default = /* @__PURE__ */ _interopDefault(isString);
+const getBreakpointStyles = (isUpMd, isSmDown) => isUpMd ? {
+  width: `calc(100% - 2 * ${uikitStyles.theme.spacing(4)})`,
+  marginLeft: `${uikitStyles.theme.spacing(4)}`,
+  marginRight: `${uikitStyles.theme.spacing(4)}`
+} : isSmDown ? {
+  width: `calc(100% - 2 * ${uikitStyles.theme.spacing(2)})`,
+  marginLeft: `${uikitStyles.theme.spacing(2)}`,
+  marginRight: `${uikitStyles.theme.spacing(2)}`
+} : {};
 const HvGlobalActions = (props) => {
   const {
     children,
-    classes,
+    classes: classesProp,
     className,
     title,
     variant = "global",
@@ -23,40 +32,52 @@ const HvGlobalActions = (props) => {
     position: positionProp,
     ...others
   } = useDefaultProps.useDefaultProps("HvGlobalActions", props);
+  const muiTheme = styles.useTheme();
   const {
     activeTheme
   } = useTheme.useTheme();
-  const muiTheme = styles.useTheme();
+  const {
+    classes,
+    cx,
+    css
+  } = GlobalActions_styles.useClasses(classesProp);
+  const isSmDown = material.useMediaQuery(muiTheme.breakpoints.down("sm"));
+  const isUpMd = material.useMediaQuery(muiTheme.breakpoints.up("md"));
+  const fixedPositionCss = positionProp === "fixed" && getBreakpointStyles(isUpMd, isSmDown);
   const headingLevelToApply = headingLevel || (variant === "global" ? 1 : 2);
   const backButtonRenderer = () => {
     if (backButton) {
-      return /* @__PURE__ */ jsxRuntime.jsx(GlobalActions_styles.StyledBackButton, {
-        className: clsx.clsx(globalActionsClasses.default.backButton, classes == null ? void 0 : classes.backButton),
+      return /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.backButton,
         children: backButton
       });
     }
   };
   const position = positionProp || (variant === "global" ? "sticky" : "relative");
-  return /* @__PURE__ */ jsxRuntime.jsx(GlobalActions_styles.StyledRoot, {
-    $variant: variant,
-    $position: position,
-    className: clsx.clsx(className, globalActionsClasses.default.root, classes == null ? void 0 : classes.root, position === "sticky" && clsx.clsx(classes == null ? void 0 : classes.positionSticky, globalActionsClasses.default.positionSticky), position === "fixed" && clsx.clsx(classes == null ? void 0 : classes.positionFixed, globalActionsClasses.default.positionFixed), variant === "global" && clsx.clsx(classes == null ? void 0 : classes.global, globalActionsClasses.default.global)),
-    $breakpoints: muiTheme.breakpoints,
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: cx(classes.root, {
+      [classes.positionSticky]: position === "sticky",
+      [classes.positionFixed]: position === "fixed",
+      [classes.global]: variant === "global"
+    }, css(fixedPositionCss), className),
     ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsxs(GlobalActions_styles.StyledWrapper, {
-      className: clsx.clsx(globalActionsClasses.default.wrapper, classes == null ? void 0 : classes.wrapper, variant === "global" && clsx.clsx(classes == null ? void 0 : classes.globalWrapperComplement, globalActionsClasses.default.globalWrapperComplement), variant === "section" && clsx.clsx(classes == null ? void 0 : classes.globalSectionArea, globalActionsClasses.default.globalSectionArea)),
-      $variant: variant,
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: cx(classes.wrapper, {
+        [classes.globalWrapperComplement]: variant === "global",
+        [classes.globalSectionArea]: variant === "section"
+      }),
       children: [variant === "global" && backButtonRenderer(), !isString__default.default(title) ? title : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
         variant: variant === "global" ? "title3" : activeTheme == null ? void 0 : activeTheme.globalActions.sectionVariant,
         component: `h${headingLevelToApply}`,
-        className: clsx.clsx(globalActionsClasses.default.name, classes == null ? void 0 : classes.name),
+        className: classes.name,
         children: title
-      }), children && /* @__PURE__ */ jsxRuntime.jsx(GlobalActions_styles.StyledActions, {
-        className: clsx.clsx(globalActionsClasses.default.actions, classes == null ? void 0 : classes.actions),
+      }), children && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.actions,
         children
       })]
     })
   });
 };
+exports.globalActionsClasses = GlobalActions_styles.staticClasses;
 exports.HvGlobalActions = HvGlobalActions;
 //# sourceMappingURL=GlobalActions.cjs.map

package/dist/cjs/components/GlobalActions/GlobalActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalActions.cjs","sources":["../../../../src/components/GlobalActions/GlobalActions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport isString from \"lodash/isString\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme as useHvTheme } from \"@core/hooks/useTheme\";\n\nimport {\n  StyledActions,\n  StyledBackButton,\n  StyledRoot,\n  StyledWrapper,\n} from \"./GlobalActions.styles\";\nimport globalActionsClasses, {\n  HvGlobalActionsClasses,\n} from \"./globalActionsClasses\";\n\nexport type HvGlobalActionsVariant = \"global\" | \"section\";\n\nexport type HvGlobalActionsPosition = \"sticky\" | \"fixed\" | \"relative\";\n\nexport type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HvGlobalActionsProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title?: React.ReactNode;\n  /** Denotes if this is a global or section component. */\n  variant?: HvGlobalActionsVariant;\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** Heading Level to apply to Title Area. */\n  headingLevel?: HvGlobalActionsHeadingLevel;\n  /**\n   * Position of the Global Actions.\n   * Defaults to `sticky` when it is a global title and `relative` when it's a section title.\n   */\n  position?: HvGlobalActionsPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGlobalActionsClasses;\n}\n\n/**\n * Global Actions are actions that affect the entire page they live in.\n * They should persist while scrolling down the screen.\n */\nexport const HvGlobalActions = (props: HvGlobalActionsProps) => {\n  const {\n    children,\n    classes,\n    className,\n    title,\n    variant = \"global\",\n    backButton,\n    headingLevel,\n    position: positionProp,\n    ...others\n  } = useDefaultProps(\"HvGlobalActions\", props);\n\n  const { activeTheme } = useHvTheme();\n\n  const muiTheme = useTheme();\n\n  const headingLevelToApply = headingLevel || (variant === \"global\" ? 1 : 2);\n\n  const backButtonRenderer = () => {\n    if (backButton) {\n      return (\n        <StyledBackButton\n          className={clsx(globalActionsClasses.backButton, classes?.backButton)}\n        >\n          {backButton}\n        </StyledBackButton>\n      );\n    }\n  };\n\n  const position =\n    positionProp || (variant === \"global\" ? \"sticky\" : \"relative\");\n\n  return (\n    <StyledRoot\n      $variant={variant}\n      $position={position}\n      className={clsx(\n        className,\n        globalActionsClasses.root,\n        classes?.root,\n        position === \"sticky\" &&\n          clsx(classes?.positionSticky, globalActionsClasses.positionSticky),\n        position === \"fixed\" &&\n          clsx(classes?.positionFixed, globalActionsClasses.positionFixed),\n        variant === \"global\" &&\n          clsx(classes?.global, globalActionsClasses.global)\n      )}\n      $breakpoints={muiTheme.breakpoints}\n      {...others}\n    >\n      <StyledWrapper\n        className={clsx(\n          globalActionsClasses.wrapper,\n          classes?.wrapper,\n          variant === \"global\" &&\n            clsx(\n              classes?.globalWrapperComplement,\n              globalActionsClasses.globalWrapperComplement\n            ),\n          variant === \"section\" &&\n            clsx(\n              classes?.globalSectionArea,\n              globalActionsClasses.globalSectionArea\n            )\n        )}\n        $variant={variant}\n      >\n        {variant === \"global\" && backButtonRenderer()}\n        {!isString(title) ? (\n          title\n        ) : (\n          <HvTypography\n            variant={\n              variant === \"global\"\n                ? \"title3\"\n                : activeTheme?.globalActions.sectionVariant\n            }\n            component={`h${headingLevelToApply}`}\n            className={clsx(globalActionsClasses.name, classes?.name)}\n          >\n            {title}\n          </HvTypography>\n        )}\n        {children && (\n          <StyledActions\n            className={clsx(globalActionsClasses.actions, classes?.actions)}\n          >\n            {children}\n          </StyledActions>\n        )}\n      </StyledWrapper>\n    </StyledRoot>\n  );\n};\n"],"names":["HvGlobalActions","props","children","classes","className","title","variant","backButton","headingLevel","position","positionProp","others","useDefaultProps","activeTheme","useHvTheme","muiTheme","useTheme","headingLevelToApply","backButtonRenderer","StyledBackButton","clsx","globalActionsClasses","StyledRoot","$variant","$position","root","positionSticky","positionFixed","global","$breakpoints","breakpoints","StyledWrapper","wrapper","globalWrapperComplement","globalSectionArea","isString","_jsx","HvTypography","globalActions","sectionVariant","component","name","StyledActions","actions"],"mappings":";;;;;;;;;;;;;AAkDaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC,UAAUC;AAAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,mBAAmBX,KAAK;AAEtC,QAAA;AAAA,IAAEY;AAAAA,MAAgBC,SAAW,SAAA;AAEnC,QAAMC,WAAWC,OAAAA;AAEjB,QAAMC,sBAAsBT,iBAAiBF,YAAY,WAAW,IAAI;AAExE,QAAMY,qBAAqBA,MAAM;AAC/B,QAAIX,YAAY;AACd,4CACGY,qBAAAA,kBAAgB;AAAA,QACff,WAAWgB,KAAAA,KAAKC,qBAAAA,QAAqBd,YAAYJ,mCAASI,UAAU;AAAA,QAAEL,UAErEK;AAAAA,MAAAA,CACe;AAAA,IAEtB;AAAA,EAAA;AAGF,QAAME,WACJC,iBAAiBJ,YAAY,WAAW,WAAW;AAErD,wCACGgB,qBAAAA,YAAU;AAAA,IACTC,UAAUjB;AAAAA,IACVkB,WAAWf;AAAAA,IACXL,WAAWgB,KAAAA,KACThB,WACAiB,qBAAAA,QAAqBI,MACrBtB,mCAASsB,MACThB,aAAa,YACXW,KAAAA,KAAKjB,mCAASuB,gBAAgBL,qBAAAA,QAAqBK,cAAc,GACnEjB,aAAa,WACXW,KAAAA,KAAKjB,mCAASwB,eAAeN,qBAAAA,QAAqBM,aAAa,GACjErB,YAAY,YACVc,KAAKjB,KAAAA,mCAASyB,QAAQP,qBAAAA,QAAqBO,MAAM,CACrD;AAAA,IACAC,cAAcd,SAASe;AAAAA,IAAY,GAC/BnB;AAAAA,IAAMT,0CAET6B,oCAAa;AAAA,MACZ3B,WAAWgB,KAAAA,KACTC,qBAAqBW,QAAAA,SACrB7B,mCAAS6B,SACT1B,YAAY,YACVc,KAAAA,KACEjB,mCAAS8B,yBACTZ,6BAAqBY,uBACvB,GACF3B,YAAY,aACVc,UACEjB,mCAAS+B,mBACTb,6BAAqBa,iBACvB,CACJ;AAAA,MACAX,UAAUjB;AAAAA,MAAQJ,WAEjBI,YAAY,YAAYY,mBAAmB,GAC3C,CAACiB,kBAAAA,QAAS9B,KAAK,IACdA,QAEA+B,2BAAAA,IAACC,WAAAA,cAAY;AAAA,QACX/B,SACEA,YAAY,WACR,WACAO,2CAAayB,cAAcC;AAAAA,QAEjCC,WAAY,IAAGvB;AAAAA,QACfb,WAAWgB,KAAAA,KAAKC,qBAAAA,QAAqBoB,MAAMtC,mCAASsC,IAAI;AAAA,QAAEvC,UAEzDG;AAAAA,MAAAA,CACW,GAEfH,YACCkC,2BAAAA,IAACM,oCAAa;AAAA,QACZtC,WAAWgB,KAAAA,KAAKC,qBAAAA,QAAqBsB,SAASxC,mCAASwC,OAAO;AAAA,QAAEzC;AAAAA,MAAAA,CAGnD,CAChB;AAAA,IAAA,CACY;AAAA,EAAA,CACL;AAEhB;;"}
+{"version":3,"file":"GlobalActions.cjs","sources":["../../../../src/components/GlobalActions/GlobalActions.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\nimport isString from \"lodash/isString\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./GlobalActions.styles\";\n\nexport { staticClasses as globalActionsClasses };\nexport type HvGlobalActionsClasses = ExtractNames<typeof useClasses>;\n\nexport type HvGlobalActionsVariant = \"global\" | \"section\";\nexport type HvGlobalActionsPosition = \"sticky\" | \"fixed\" | \"relative\";\nexport type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HvGlobalActionsProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title?: React.ReactNode;\n  /** Denotes if this is a global or section component. */\n  variant?: HvGlobalActionsVariant;\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** Heading Level to apply to Title Area. */\n  headingLevel?: HvGlobalActionsHeadingLevel;\n  /**\n   * Position of the Global Actions.\n   * Defaults to `sticky` when it is a global title and `relative` when it's a section title.\n   */\n  position?: HvGlobalActionsPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGlobalActionsClasses;\n}\n\nconst getBreakpointStyles = (isUpMd, isSmDown) =>\n  isUpMd\n    ? {\n        width: `calc(100% - 2 * ${theme.spacing(4)})`,\n        marginLeft: `${theme.spacing(4)}`,\n        marginRight: `${theme.spacing(4)}`,\n      }\n    : isSmDown\n    ? {\n        width: `calc(100% - 2 * ${theme.spacing(2)})`,\n        marginLeft: `${theme.spacing(2)}`,\n        marginRight: `${theme.spacing(2)}`,\n      }\n    : {};\n\n/**\n * Global Actions are actions that affect the entire page they live in.\n * They should persist while scrolling down the screen.\n */\nexport const HvGlobalActions = (props: HvGlobalActionsProps) => {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    title,\n    variant = \"global\",\n    backButton,\n    headingLevel,\n    position: positionProp,\n    ...others\n  } = useDefaultProps(\"HvGlobalActions\", props);\n  const muiTheme = useMuiTheme();\n  const { activeTheme } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const isUpMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const fixedPositionCss =\n    positionProp === \"fixed\" && getBreakpointStyles(isUpMd, isSmDown);\n\n  const headingLevelToApply = headingLevel || (variant === \"global\" ? 1 : 2);\n\n  const backButtonRenderer = () => {\n    if (backButton) {\n      return <div className={classes.backButton}>{backButton}</div>;\n    }\n  };\n\n  const position =\n    positionProp || (variant === \"global\" ? \"sticky\" : \"relative\");\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.global]: variant === \"global\",\n        },\n        css(fixedPositionCss),\n        className\n      )}\n      {...others}\n    >\n      <div\n        className={cx(classes.wrapper, {\n          [classes.globalWrapperComplement]: variant === \"global\",\n          [classes.globalSectionArea]: variant === \"section\",\n        })}\n      >\n        {variant === \"global\" && backButtonRenderer()}\n        {!isString(title) ? (\n          title\n        ) : (\n          <HvTypography\n            variant={\n              variant === \"global\"\n                ? \"title3\"\n                : activeTheme?.globalActions.sectionVariant\n            }\n            component={`h${headingLevelToApply}`}\n            className={classes.name}\n          >\n            {title}\n          </HvTypography>\n        )}\n        {children && <div className={classes.actions}>{children}</div>}\n      </div>\n    </div>\n  );\n};\n"],"names":["getBreakpointStyles","isUpMd","isSmDown","width","theme","spacing","marginLeft","marginRight","HvGlobalActions","props","children","classes","classesProp","className","title","variant","backButton","headingLevel","position","positionProp","others","useDefaultProps","muiTheme","useMuiTheme","activeTheme","useTheme","cx","css","useClasses","useMediaQuery","breakpoints","down","up","fixedPositionCss","headingLevelToApply","backButtonRenderer","root","positionSticky","positionFixed","global","wrapper","globalWrapperComplement","globalSectionArea","isString","_jsx","HvTypography","globalActions","sectionVariant","component","name","actions"],"mappings":";;;;;;;;;;;;;AAqCA,MAAMA,sBAAsBA,CAACC,QAAQC,aACnCD,SACI;AAAA,EACEE,OAAQ,mBAAkBC,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EACzCC,YAAa,GAAEF,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EAC9BE,aAAc,GAAEH,YAAAA,MAAMC,QAAQ,CAAC;AACjC,IACAH,WACA;AAAA,EACEC,OAAQ,mBAAkBC,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EACzCC,YAAa,GAAEF,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EAC9BE,aAAc,GAAEH,YAAAA,MAAMC,QAAQ,CAAC;AACjC,IACA;AAMOG,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC,UAAUC;AAAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,mBAAmBZ,KAAK;AAC5C,QAAMa,WAAWC,OAAAA;AACX,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAC3B,QAAA;AAAA,IAAEd;AAAAA,IAASe;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,qBAAAA,WAAWhB,WAAW;AACnD,QAAMV,WAAW2B,SAAAA,cAAcP,SAASQ,YAAYC,KAAK,IAAI,CAAC;AAC9D,QAAM9B,SAAS4B,SAAAA,cAAcP,SAASQ,YAAYE,GAAG,IAAI,CAAC;AAE1D,QAAMC,mBACJd,iBAAiB,WAAWnB,oBAAoBC,QAAQC,QAAQ;AAElE,QAAMgC,sBAAsBjB,iBAAiBF,YAAY,WAAW,IAAI;AAExE,QAAMoB,qBAAqBA,MAAM;AAC/B,QAAInB,YAAY;AACd,4CAAO,OAAA;AAAA,QAAKH,WAAWF,QAAQK;AAAAA,QAAWN,UAAEM;AAAAA,MAAAA,CAAgB;AAAA,IAC9D;AAAA,EAAA;AAGF,QAAME,WACJC,iBAAiBJ,YAAY,WAAW,WAAW;AAErD,wCACE,OAAA;AAAA,IACEF,WAAWa,GACTf,QAAQyB,MACR;AAAA,MACE,CAACzB,QAAQ0B,cAAc,GAAGnB,aAAa;AAAA,MACvC,CAACP,QAAQ2B,aAAa,GAAGpB,aAAa;AAAA,MACtC,CAACP,QAAQ4B,MAAM,GAAGxB,YAAY;AAAA,IAAA,GAEhCY,IAAIM,gBAAgB,GACpBpB,SACF;AAAA,IAAE,GACEO;AAAAA,IAAMV,0CAEV,OAAA;AAAA,MACEG,WAAWa,GAAGf,QAAQ6B,SAAS;AAAA,QAC7B,CAAC7B,QAAQ8B,uBAAuB,GAAG1B,YAAY;AAAA,QAC/C,CAACJ,QAAQ+B,iBAAiB,GAAG3B,YAAY;AAAA,MAAA,CAC1C;AAAA,MAAEL,WAEFK,YAAY,YAAYoB,mBAAmB,GAC3C,CAACQ,kBAAAA,QAAS7B,KAAK,IACdA,QAEA8B,2BAAAA,IAACC,WAAAA,cAAY;AAAA,QACX9B,SACEA,YAAY,WACR,WACAS,2CAAasB,cAAcC;AAAAA,QAEjCC,WAAY,IAAGd;AAAAA,QACfrB,WAAWF,QAAQsC;AAAAA,QAAKvC,UAEvBI;AAAAA,MAAAA,CACW,GAEfJ,YAAYkC,2BAAAA,IAAA,OAAA;AAAA,QAAK/B,WAAWF,QAAQuC;AAAAA,QAAQxC;AAAAA,MAAAA,CAAgB,CAAC;AAAA,IAAA,CAC3D;AAAA,EAAA,CACF;AAET;;;"}

package/dist/cjs/components/GlobalActions/GlobalActions.styles.cjs

@@ -1,54 +1,23 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e13e65q53"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e13e65q53",
-  label: "StyledRoot"
-}, transientOptions.transientOptions))(({
-  $position,
-  $variant,
-  $breakpoints
-}) => ({
-  position: "relative",
-  ...$position === "sticky" && {
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvGlobalActions", {
+  root: {
+    position: "relative"
+  },
+  positionSticky: {
     width: "100%",
     position: "sticky"
   },
-  ...$position === "fixed" && {
+  positionFixed: {
     width: "100%",
-    position: "fixed",
-    [$breakpoints.up("md")]: {
-      width: `calc(100% - 2*${uikitStyles.theme.spacing(4)}px)`,
-      marginLeft: `${uikitStyles.theme.spacing(4)}px`,
-      marginRight: `${uikitStyles.theme.spacing(4)}px`
-    },
-    [$breakpoints.down("sm")]: {
-      width: `calc(100% - 2*${uikitStyles.theme.space.sm}px)`,
-      marginLeft: `${uikitStyles.theme.space.sm}px`,
-      marginRight: `${uikitStyles.theme.space.sm}px`
-    }
+    position: "fixed"
   },
-  ...$variant === "global" && {
+  global: {
     zIndex: `calc(${uikitStyles.theme.zIndices.banner} - 2)`,
     top: 0,
     left: 0,
@@ -62,32 +31,17 @@ const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.N
       opacity: "75%"
     },
     backdropFilter: "blur(1px)"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvR2xvYmFsQWN0aW9ucy9HbG9iYWxBY3Rpb25zLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzBCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvR2xvYmFsQWN0aW9ucy9HbG9iYWxBY3Rpb25zLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEJyZWFrcG9pbnRzIGFzIE11aUJyZWFrcG9pbnRzIH0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkcG9zaXRpb24sXG4gICAgJHZhcmlhbnQsXG4gICAgJGJyZWFrcG9pbnRzLFxuICB9OiB7XG4gICAgJHBvc2l0aW9uOiBzdHJpbmc7XG4gICAgJHZhcmlhbnQ6IHN0cmluZztcbiAgICAkYnJlYWtwb2ludHM6IE11aUJyZWFrcG9pbnRzO1xuICB9KSA9PiAoe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgLi4uKCRwb3NpdGlvbiA9PT0gXCJzdGlja3lcIiAmJiB7XG4gICAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgICBwb3NpdGlvbjogXCJzdGlja3lcIixcbiAgICB9KSxcbiAgICAuLi4oJHBvc2l0aW9uID09PSBcImZpeGVkXCIgJiYge1xuICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgcG9zaXRpb246IFwiZml4ZWRcIixcblxuICAgICAgWyRicmVha3BvaW50cy51cChcIm1kXCIpXToge1xuICAgICAgICB3aWR0aDogYGNhbGMoMTAwJSAtIDIqJHt0aGVtZS5zcGFjaW5nKDQpfXB4KWAsXG4gICAgICAgIG1hcmdpbkxlZnQ6IGAke3RoZW1lLnNwYWNpbmcoNCl9cHhgLFxuICAgICAgICBtYXJnaW5SaWdodDogYCR7dGhlbWUuc3BhY2luZyg0KX1weGAsXG4gICAgICB9LFxuICAgICAgWyRicmVha3BvaW50cy5kb3duKFwic21cIildOiB7XG4gICAgICAgIHdpZHRoOiBgY2FsYygxMDAlIC0gMioke3RoZW1lLnNwYWNlLnNtfXB4KWAsXG4gICAgICAgIG1hcmdpbkxlZnQ6IGAke3RoZW1lLnNwYWNlLnNtfXB4YCxcbiAgICAgICAgbWFyZ2luUmlnaHQ6IGAke3RoZW1lLnNwYWNlLnNtfXB4YCxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgLi4uKCR2YXJpYW50ID09PSBcImdsb2JhbFwiICYmIHtcbiAgICAgIHpJbmRleDogYGNhbGMoJHt0aGVtZS56SW5kaWNlcy5iYW5uZXJ9IC0gMilgLFxuXG4gICAgICB0b3A6IDAsXG4gICAgICBsZWZ0OiAwLFxuXG4gICAgICBcIiY6YmVmb3JlXCI6IHtcbiAgICAgICAgY29udGVudDogXCInJ1wiLFxuICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICBoZWlnaHQ6IDcyLFxuICAgICAgICB0b3A6IDAsXG4gICAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMixcbiAgICAgICAgb3BhY2l0eTogXCI3NSVcIixcbiAgICAgIH0sXG4gICAgICBiYWNrZHJvcEZpbHRlcjogXCJibHVyKDFweClcIixcbiAgICB9KSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCYWNrQnV0dG9uID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgbWFyZ2luUmlnaHQ6IHRoZW1lLnNwYWNlLnhzLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRXcmFwcGVyID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICR2YXJpYW50IH06IHsgJHZhcmlhbnQ6IHN0cmluZyB9KSA9PiAoe1xuICBoZWlnaHQ6IDUyLFxuICBwYWRkaW5nUmlnaHQ6IHRoZW1lLnNwYWNlLnhzLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiZmxleC1zdGFydFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBib3JkZXI6IHRoZW1lLmdsb2JhbEFjdGlvbnMuYm9yZGVyLFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLmdsb2JhbEFjdGlvbnMuYm9yZGVyUmFkaXVzLFxuICAuLi4oJHZhcmlhbnQgPT09IFwiZ2xvYmFsXCIgJiYge1xuICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgdG9wOiAwLFxuICAgIGxlZnQ6IDAsXG4gICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBwYWRkaW5nOiB0aGVtZS5zcGFjZS54cyxcbiAgICBtYXJnaW5Ub3A6IHRoZW1lLnNwYWNlLnhzLFxuICB9KSxcbiAgLi4uKCR2YXJpYW50ID09PSBcInNlY3Rpb25cIiAmJiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5nbG9iYWxBY3Rpb25zLnNlY3Rpb25CYWNrZ3JvdW5kQ29sb3IsXG4gICAgYm9yZGVyVG9wOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgcGFkZGluZ0xlZnQ6IHRoZW1lLmdsb2JhbEFjdGlvbnMuc2VjdGlvblBhZGRpbmdMZWZ0LFxuICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEFjdGlvbnMgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiZmxleC1lbmRcIixcbiAgbWFyZ2luTGVmdDogXCJhdXRvXCIsXG4gIFwiJiA+ICo6bm90KDpmaXJzdC1vZi10eXBlKSBcIjoge1xuICAgIG1hcmdpbkxlZnQ6IHRoZW1lLnNwYWNlLnhzLFxuICB9LFxufSk7XG4iXX0= */");
-const StyledBackButton = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e13e65q52"
-} : {
-  target: "e13e65q52",
-  label: "StyledBackButton"
-})({
-  marginRight: uikitStyles.theme.space.xs
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvR2xvYmFsQWN0aW9ucy9HbG9iYWxBY3Rpb25zLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMERnQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0dsb2JhbEFjdGlvbnMvR2xvYmFsQWN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBCcmVha3BvaW50cyBhcyBNdWlCcmVha3BvaW50cyB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHBvc2l0aW9uLFxuICAgICR2YXJpYW50LFxuICAgICRicmVha3BvaW50cyxcbiAgfToge1xuICAgICRwb3NpdGlvbjogc3RyaW5nO1xuICAgICR2YXJpYW50OiBzdHJpbmc7XG4gICAgJGJyZWFrcG9pbnRzOiBNdWlCcmVha3BvaW50cztcbiAgfSkgPT4gKHtcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIC4uLigkcG9zaXRpb24gPT09IFwic3RpY2t5XCIgJiYge1xuICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgcG9zaXRpb246IFwic3RpY2t5XCIsXG4gICAgfSksXG4gICAgLi4uKCRwb3NpdGlvbiA9PT0gXCJmaXhlZFwiICYmIHtcbiAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgIHBvc2l0aW9uOiBcImZpeGVkXCIsXG5cbiAgICAgIFskYnJlYWtwb2ludHMudXAoXCJtZFwiKV06IHtcbiAgICAgICAgd2lkdGg6IGBjYWxjKDEwMCUgLSAyKiR7dGhlbWUuc3BhY2luZyg0KX1weClgLFxuICAgICAgICBtYXJnaW5MZWZ0OiBgJHt0aGVtZS5zcGFjaW5nKDQpfXB4YCxcbiAgICAgICAgbWFyZ2luUmlnaHQ6IGAke3RoZW1lLnNwYWNpbmcoNCl9cHhgLFxuICAgICAgfSxcbiAgICAgIFskYnJlYWtwb2ludHMuZG93bihcInNtXCIpXToge1xuICAgICAgICB3aWR0aDogYGNhbGMoMTAwJSAtIDIqJHt0aGVtZS5zcGFjZS5zbX1weClgLFxuICAgICAgICBtYXJnaW5MZWZ0OiBgJHt0aGVtZS5zcGFjZS5zbX1weGAsXG4gICAgICAgIG1hcmdpblJpZ2h0OiBgJHt0aGVtZS5zcGFjZS5zbX1weGAsXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkdmFyaWFudCA9PT0gXCJnbG9iYWxcIiAmJiB7XG4gICAgICB6SW5kZXg6IGBjYWxjKCR7dGhlbWUuekluZGljZXMuYmFubmVyfSAtIDIpYCxcblxuICAgICAgdG9wOiAwLFxuICAgICAgbGVmdDogMCxcblxuICAgICAgXCImOmJlZm9yZVwiOiB7XG4gICAgICAgIGNvbnRlbnQ6IFwiJydcIixcbiAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgaGVpZ2h0OiA3MixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzIsXG4gICAgICAgIG9wYWNpdHk6IFwiNzUlXCIsXG4gICAgICB9LFxuICAgICAgYmFja2Ryb3BGaWx0ZXI6IFwiYmx1cigxcHgpXCIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja0J1dHRvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkV3JhcHBlciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkdmFyaWFudCB9OiB7ICR2YXJpYW50OiBzdHJpbmcgfSkgPT4gKHtcbiAgaGVpZ2h0OiA1MixcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgYm9yZGVyOiB0aGVtZS5nbG9iYWxBY3Rpb25zLmJvcmRlcixcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS5nbG9iYWxBY3Rpb25zLmJvcmRlclJhZGl1cyxcbiAgLi4uKCR2YXJpYW50ID09PSBcImdsb2JhbFwiICYmIHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHRvcDogMCxcbiAgICBsZWZ0OiAwLFxuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgcGFkZGluZzogdGhlbWUuc3BhY2UueHMsXG4gICAgbWFyZ2luVG9wOiB0aGVtZS5zcGFjZS54cyxcbiAgfSksXG4gIC4uLigkdmFyaWFudCA9PT0gXCJzZWN0aW9uXCIgJiYge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuZ2xvYmFsQWN0aW9ucy5zZWN0aW9uQmFja2dyb3VuZENvbG9yLFxuICAgIGJvcmRlclRvcDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgIHBhZGRpbmdMZWZ0OiB0aGVtZS5nbG9iYWxBY3Rpb25zLnNlY3Rpb25QYWRkaW5nTGVmdCxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBY3Rpb25zID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtZW5kXCIsXG4gIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxuICBcIiYgPiAqOm5vdCg6Zmlyc3Qtb2YtdHlwZSkgXCI6IHtcbiAgICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS54cyxcbiAgfSxcbn0pO1xuIl19 */");
-const StyledWrapper = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e13e65q51"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e13e65q51",
-  label: "StyledWrapper"
-}, transientOptions.transientOptions))(({
-  $variant
-}) => ({
-  height: 52,
-  paddingRight: uikitStyles.theme.space.xs,
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  border: uikitStyles.theme.globalActions.border,
-  borderRadius: uikitStyles.theme.globalActions.borderRadius,
-  ...$variant === "global" && {
+  },
+  wrapper: {
+    height: 52,
+    paddingRight: uikitStyles.theme.space.xs,
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    border: uikitStyles.theme.globalActions.border,
+    borderRadius: uikitStyles.theme.globalActions.borderRadius
+  },
+  globalWrapperComplement: {
     position: "absolute",
     top: 0,
     left: 0,
@@ -96,28 +50,27 @@ const StyledWrapper = /* @__PURE__ */ _styled__default.default("div", process.en
     padding: uikitStyles.theme.space.xs,
     marginTop: uikitStyles.theme.space.xs
   },
-  ...$variant === "section" && {
+  globalSectionArea: {
     backgroundColor: uikitStyles.theme.globalActions.sectionBackgroundColor,
     borderTop: `1px solid ${uikitStyles.theme.colors.atmo4}`,
     paddingLeft: uikitStyles.theme.globalActions.sectionPaddingLeft
+  },
+  backButton: {
+    marginRight: uikitStyles.theme.space.xs
+  },
+  name: {
+    flexGrow: 1
+  },
+  actions: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    marginLeft: "auto",
+    "& > *:not(:first-child) ": {
+      marginLeft: uikitStyles.theme.space.xs
+    }
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvR2xvYmFsQWN0aW9ucy9HbG9iYWxBY3Rpb25zLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEQ2QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0dsb2JhbEFjdGlvbnMvR2xvYmFsQWN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBCcmVha3BvaW50cyBhcyBNdWlCcmVha3BvaW50cyB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHBvc2l0aW9uLFxuICAgICR2YXJpYW50LFxuICAgICRicmVha3BvaW50cyxcbiAgfToge1xuICAgICRwb3NpdGlvbjogc3RyaW5nO1xuICAgICR2YXJpYW50OiBzdHJpbmc7XG4gICAgJGJyZWFrcG9pbnRzOiBNdWlCcmVha3BvaW50cztcbiAgfSkgPT4gKHtcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIC4uLigkcG9zaXRpb24gPT09IFwic3RpY2t5XCIgJiYge1xuICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgcG9zaXRpb246IFwic3RpY2t5XCIsXG4gICAgfSksXG4gICAgLi4uKCRwb3NpdGlvbiA9PT0gXCJmaXhlZFwiICYmIHtcbiAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgIHBvc2l0aW9uOiBcImZpeGVkXCIsXG5cbiAgICAgIFskYnJlYWtwb2ludHMudXAoXCJtZFwiKV06IHtcbiAgICAgICAgd2lkdGg6IGBjYWxjKDEwMCUgLSAyKiR7dGhlbWUuc3BhY2luZyg0KX1weClgLFxuICAgICAgICBtYXJnaW5MZWZ0OiBgJHt0aGVtZS5zcGFjaW5nKDQpfXB4YCxcbiAgICAgICAgbWFyZ2luUmlnaHQ6IGAke3RoZW1lLnNwYWNpbmcoNCl9cHhgLFxuICAgICAgfSxcbiAgICAgIFskYnJlYWtwb2ludHMuZG93bihcInNtXCIpXToge1xuICAgICAgICB3aWR0aDogYGNhbGMoMTAwJSAtIDIqJHt0aGVtZS5zcGFjZS5zbX1weClgLFxuICAgICAgICBtYXJnaW5MZWZ0OiBgJHt0aGVtZS5zcGFjZS5zbX1weGAsXG4gICAgICAgIG1hcmdpblJpZ2h0OiBgJHt0aGVtZS5zcGFjZS5zbX1weGAsXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkdmFyaWFudCA9PT0gXCJnbG9iYWxcIiAmJiB7XG4gICAgICB6SW5kZXg6IGBjYWxjKCR7dGhlbWUuekluZGljZXMuYmFubmVyfSAtIDIpYCxcblxuICAgICAgdG9wOiAwLFxuICAgICAgbGVmdDogMCxcblxuICAgICAgXCImOmJlZm9yZVwiOiB7XG4gICAgICAgIGNvbnRlbnQ6IFwiJydcIixcbiAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgaGVpZ2h0OiA3MixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzIsXG4gICAgICAgIG9wYWNpdHk6IFwiNzUlXCIsXG4gICAgICB9LFxuICAgICAgYmFja2Ryb3BGaWx0ZXI6IFwiYmx1cigxcHgpXCIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja0J1dHRvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkV3JhcHBlciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkdmFyaWFudCB9OiB7ICR2YXJpYW50OiBzdHJpbmcgfSkgPT4gKHtcbiAgaGVpZ2h0OiA1MixcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgYm9yZGVyOiB0aGVtZS5nbG9iYWxBY3Rpb25zLmJvcmRlcixcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS5nbG9iYWxBY3Rpb25zLmJvcmRlclJhZGl1cyxcbiAgLi4uKCR2YXJpYW50ID09PSBcImdsb2JhbFwiICYmIHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHRvcDogMCxcbiAgICBsZWZ0OiAwLFxuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgcGFkZGluZzogdGhlbWUuc3BhY2UueHMsXG4gICAgbWFyZ2luVG9wOiB0aGVtZS5zcGFjZS54cyxcbiAgfSksXG4gIC4uLigkdmFyaWFudCA9PT0gXCJzZWN0aW9uXCIgJiYge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuZ2xvYmFsQWN0aW9ucy5zZWN0aW9uQmFja2dyb3VuZENvbG9yLFxuICAgIGJvcmRlclRvcDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgIHBhZGRpbmdMZWZ0OiB0aGVtZS5nbG9iYWxBY3Rpb25zLnNlY3Rpb25QYWRkaW5nTGVmdCxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBY3Rpb25zID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtZW5kXCIsXG4gIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxuICBcIiYgPiAqOm5vdCg6Zmlyc3Qtb2YtdHlwZSkgXCI6IHtcbiAgICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS54cyxcbiAgfSxcbn0pO1xuIl19 */");
-const StyledActions = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e13e65q50"
-} : {
-  target: "e13e65q50",
-  label: "StyledActions"
-})({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  marginLeft: "auto",
-  "& > *:not(:first-of-type) ": {
-    marginLeft: uikitStyles.theme.space.xs
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvR2xvYmFsQWN0aW9ucy9HbG9iYWxBY3Rpb25zLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUY2QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0dsb2JhbEFjdGlvbnMvR2xvYmFsQWN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBCcmVha3BvaW50cyBhcyBNdWlCcmVha3BvaW50cyB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHBvc2l0aW9uLFxuICAgICR2YXJpYW50LFxuICAgICRicmVha3BvaW50cyxcbiAgfToge1xuICAgICRwb3NpdGlvbjogc3RyaW5nO1xuICAgICR2YXJpYW50OiBzdHJpbmc7XG4gICAgJGJyZWFrcG9pbnRzOiBNdWlCcmVha3BvaW50cztcbiAgfSkgPT4gKHtcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIC4uLigkcG9zaXRpb24gPT09IFwic3RpY2t5XCIgJiYge1xuICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgcG9zaXRpb246IFwic3RpY2t5XCIsXG4gICAgfSksXG4gICAgLi4uKCRwb3NpdGlvbiA9PT0gXCJmaXhlZFwiICYmIHtcbiAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgIHBvc2l0aW9uOiBcImZpeGVkXCIsXG5cbiAgICAgIFskYnJlYWtwb2ludHMudXAoXCJtZFwiKV06IHtcbiAgICAgICAgd2lkdGg6IGBjYWxjKDEwMCUgLSAyKiR7dGhlbWUuc3BhY2luZyg0KX1weClgLFxuICAgICAgICBtYXJnaW5MZWZ0OiBgJHt0aGVtZS5zcGFjaW5nKDQpfXB4YCxcbiAgICAgICAgbWFyZ2luUmlnaHQ6IGAke3RoZW1lLnNwYWNpbmcoNCl9cHhgLFxuICAgICAgfSxcbiAgICAgIFskYnJlYWtwb2ludHMuZG93bihcInNtXCIpXToge1xuICAgICAgICB3aWR0aDogYGNhbGMoMTAwJSAtIDIqJHt0aGVtZS5zcGFjZS5zbX1weClgLFxuICAgICAgICBtYXJnaW5MZWZ0OiBgJHt0aGVtZS5zcGFjZS5zbX1weGAsXG4gICAgICAgIG1hcmdpblJpZ2h0OiBgJHt0aGVtZS5zcGFjZS5zbX1weGAsXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkdmFyaWFudCA9PT0gXCJnbG9iYWxcIiAmJiB7XG4gICAgICB6SW5kZXg6IGBjYWxjKCR7dGhlbWUuekluZGljZXMuYmFubmVyfSAtIDIpYCxcblxuICAgICAgdG9wOiAwLFxuICAgICAgbGVmdDogMCxcblxuICAgICAgXCImOmJlZm9yZVwiOiB7XG4gICAgICAgIGNvbnRlbnQ6IFwiJydcIixcbiAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgaGVpZ2h0OiA3MixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzIsXG4gICAgICAgIG9wYWNpdHk6IFwiNzUlXCIsXG4gICAgICB9LFxuICAgICAgYmFja2Ryb3BGaWx0ZXI6IFwiYmx1cigxcHgpXCIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja0J1dHRvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkV3JhcHBlciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkdmFyaWFudCB9OiB7ICR2YXJpYW50OiBzdHJpbmcgfSkgPT4gKHtcbiAgaGVpZ2h0OiA1MixcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgYm9yZGVyOiB0aGVtZS5nbG9iYWxBY3Rpb25zLmJvcmRlcixcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS5nbG9iYWxBY3Rpb25zLmJvcmRlclJhZGl1cyxcbiAgLi4uKCR2YXJpYW50ID09PSBcImdsb2JhbFwiICYmIHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHRvcDogMCxcbiAgICBsZWZ0OiAwLFxuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgcGFkZGluZzogdGhlbWUuc3BhY2UueHMsXG4gICAgbWFyZ2luVG9wOiB0aGVtZS5zcGFjZS54cyxcbiAgfSksXG4gIC4uLigkdmFyaWFudCA9PT0gXCJzZWN0aW9uXCIgJiYge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuZ2xvYmFsQWN0aW9ucy5zZWN0aW9uQmFja2dyb3VuZENvbG9yLFxuICAgIGJvcmRlclRvcDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgIHBhZGRpbmdMZWZ0OiB0aGVtZS5nbG9iYWxBY3Rpb25zLnNlY3Rpb25QYWRkaW5nTGVmdCxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBY3Rpb25zID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtZW5kXCIsXG4gIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxuICBcIiYgPiAqOm5vdCg6Zmlyc3Qtb2YtdHlwZSkgXCI6IHtcbiAgICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS54cyxcbiAgfSxcbn0pO1xuIl19 */");
-exports.StyledActions = StyledActions;
-exports.StyledBackButton = StyledBackButton;
-exports.StyledRoot = StyledRoot;
-exports.StyledWrapper = StyledWrapper;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=GlobalActions.styles.cjs.map