@hitachivantara/uikit-react-core 5.28.1 → 5.30.0

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

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.styles.cjs","sources":["../../../../src/components/BaseSwitch/BaseSwitch.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(\"HvBaseSwitch\", {\n  root: {\n    padding: theme.baseSwitch.padding,\n    cursor: \"pointer\",\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: theme.baseSwitch.borderRadius,\n\n    \"&:hover\": {\n      backgroundColor: theme.baseSwitch.hoverBackgroundColor,\n    },\n\n    // Higher CSS specificity here\n    \"& $switchBase\": {\n      \"&:hover\": {\n        backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n      },\n\n      \"&$checked\": {\n        transform: \"translateX(16px)\",\n        \"& + $track\": {\n          opacity: theme.baseSwitch.checkedOpacity,\n          backgroundColor: theme.baseSwitch.checkedTrackBackgroundColor,\n        },\n        \"&:hover\": {\n          backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n        },\n      },\n    },\n\n    // Higher CSS specificity here\n    \"&$disabled\": {\n      \"& $switchBase\": {\n        \"& + $track\": {\n          opacity: theme.baseSwitch.disabled.trackOpacity,\n          backgroundColor: theme.baseSwitch.disabled.trackBackgroundColor,\n          border: theme.baseSwitch.disabled.trackBorder,\n        },\n      },\n    },\n  },\n  switch: {\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    padding: theme.baseSwitch.padding,\n\n    \"&$readOnly $switchBase\": {\n      cursor: \"default\",\n    },\n  },\n  switchBase: {\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    padding: theme.baseSwitch.padding,\n  },\n  track: {\n    opacity: theme.baseSwitch.track.opacity,\n    borderRadius: theme.baseSwitch.track.borderRadius,\n    height: theme.baseSwitch.track.height,\n    width: theme.baseSwitch.track.width,\n    border: theme.baseSwitch.track.border,\n    backgroundColor: theme.baseSwitch.track.backgroundColor,\n  },\n  thumb: {\n    position: \"relative\",\n    left: theme.baseSwitch.thumb.left,\n    width: theme.baseSwitch.thumb.width,\n    height: theme.baseSwitch.thumb.height,\n    border: theme.baseSwitch.thumb.border,\n    backgroundColor: theme.baseSwitch.thumb.backgroundColor,\n    marginLeft: theme.baseSwitch.thumb.marginLeft,\n    marginTop: theme.baseSwitch.thumb.marginTop,\n    boxShadow: theme.baseSwitch.thumb.boxShadow,\n  },\n  checked: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $switch\": {\n      cursor: \"not-allowed\",\n    },\n\n    \"& $thumb\": {\n      backgroundColor: theme.baseSwitch.disabled.thumbBackgroundColor,\n      border: theme.baseSwitch.disabled.thumbBorder,\n    },\n  },\n  readOnly: {},\n  focusVisible: {\n    borderRadius: theme.baseSwitch.focusBorderRadius,\n    ...outlineStyles,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","baseSwitch","cursor","width","height","alignItems","justifyContent","borderRadius","backgroundColor","hoverBackgroundColor","hoverBaseBackgroundColor","transform","opacity","checkedOpacity","checkedTrackBackgroundColor","disabled","trackOpacity","trackBackgroundColor","border","trackBorder","switch","switchBase","track","thumb","position","left","marginLeft","marginTop","boxShadow","checked","thumbBackgroundColor","thumbBorder","readOnly","focusVisible","focusBorderRadius","outlineStyles"],"mappings":"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"}
+{"version":3,"file":"BaseSwitch.styles.cjs","sources":["../../../../src/components/BaseSwitch/BaseSwitch.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(\"HvBaseSwitch\", {\n  root: {\n    padding: 0,\n    cursor: \"pointer\",\n    width: \"40px\",\n    height: \"32px\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: theme.radii.base,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.primary_20,\n    },\n\n    // Higher CSS specificity here\n    \"& $switchBase\": {\n      \"&:hover\": {\n        backgroundColor: \"transparent\",\n      },\n\n      \"&$checked\": {\n        transform: \"translateX(16px)\",\n        \"& + $track\": {\n          opacity: 1,\n          backgroundColor: theme.colors.secondary,\n        },\n        \"&:hover\": {\n          backgroundColor: \"transparent\",\n        },\n      },\n    },\n\n    // Higher CSS specificity here\n    \"&$disabled\": {\n      \"& $switchBase\": {\n        \"& + $track\": {\n          opacity: 1,\n          backgroundColor: theme.colors.atmo3,\n          border: `solid 1px ${theme.colors.secondary_60}`,\n        },\n      },\n    },\n  },\n  switch: {\n    width: \"40px\",\n    height: \"32px\",\n    padding: 0,\n\n    \"&$readOnly $switchBase\": {\n      cursor: \"default\",\n    },\n  },\n  switchBase: {\n    width: \"40px\",\n    height: \"32px\",\n    padding: 0,\n  },\n  track: {\n    opacity: 1,\n    borderRadius: \"15px\",\n    height: \"16px\",\n    width: \"32px\",\n    border: `solid 1px ${theme.colors.secondary}`,\n    backgroundColor: theme.colors.atmo1,\n  },\n  thumb: {\n    position: \"relative\",\n    left: \"-9px\",\n    width: \"12px\",\n    height: \"12px\",\n    border: `solid 1px ${theme.colors.secondary}`,\n    backgroundColor: theme.colors.atmo1,\n    marginLeft: \"2px\",\n    marginTop: 0,\n    boxShadow: \"none\",\n  },\n  checked: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $switch\": {\n      cursor: \"not-allowed\",\n    },\n\n    \"& $thumb\": {\n      backgroundColor: theme.colors.atmo3,\n      border: `solid 1px ${theme.colors.secondary_60}`,\n    },\n  },\n  readOnly: {},\n  focusVisible: {\n    borderRadius: \"8px\",\n    ...outlineStyles,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","cursor","width","height","alignItems","justifyContent","borderRadius","theme","radii","base","backgroundColor","colors","primary_20","transform","opacity","secondary","atmo3","border","secondary_60","switch","switchBase","track","atmo1","thumb","position","left","marginLeft","marginTop","boxShadow","checked","disabled","readOnly","focusVisible","outlineStyles"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,IAE1B,WAAW;AAAA,MACTC,iBAAiBH,YAAAA,MAAMI,OAAOC;AAAAA,IAChC;AAAA;AAAA,IAGA,iBAAiB;AAAA,MACf,WAAW;AAAA,QACTF,iBAAiB;AAAA,MACnB;AAAA,MAEA,aAAa;AAAA,QACXG,WAAW;AAAA,QACX,cAAc;AAAA,UACZC,SAAS;AAAA,UACTJ,iBAAiBH,YAAAA,MAAMI,OAAOI;AAAAA,QAChC;AAAA,QACA,WAAW;AAAA,UACTL,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA;AAAA,IAGA,cAAc;AAAA,MACZ,iBAAiB;AAAA,QACf,cAAc;AAAA,UACZI,SAAS;AAAA,UACTJ,iBAAiBH,YAAAA,MAAMI,OAAOK;AAAAA,UAC9BC,QAAS,aAAYV,YAAMI,MAAAA,OAAOO,YAAa;AAAA,QACjD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,QAAQ;AAAA,IACNjB,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRH,SAAS;AAAA,IAET,0BAA0B;AAAA,MACxBC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAmB,YAAY;AAAA,IACVlB,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRH,SAAS;AAAA,EACX;AAAA,EACAqB,OAAO;AAAA,IACLP,SAAS;AAAA,IACTR,cAAc;AAAA,IACdH,QAAQ;AAAA,IACRD,OAAO;AAAA,IACPe,QAAS,aAAYV,YAAMI,MAAAA,OAAOI,SAAU;AAAA,IAC5CL,iBAAiBH,YAAAA,MAAMI,OAAOW;AAAAA,EAChC;AAAA,EACAC,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNvB,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRc,QAAS,aAAYV,YAAMI,MAAAA,OAAOI,SAAU;AAAA,IAC5CL,iBAAiBH,YAAAA,MAAMI,OAAOW;AAAAA,IAC9BI,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAC,SAAS,CAAC;AAAA,EACVC,UAAU;AAAA,IACR7B,QAAQ;AAAA,IAER,aAAa;AAAA,MACXA,QAAQ;AAAA,IACV;AAAA,IAEA,YAAY;AAAA,MACVS,iBAAiBH,YAAAA,MAAMI,OAAOK;AAAAA,MAC9BC,QAAS,aAAYV,YAAMI,MAAAA,OAAOO,YAAa;AAAA,IACjD;AAAA,EACF;AAAA,EACAa,UAAU,CAAC;AAAA,EACXC,cAAc;AAAA,IACZ1B,cAAc;AAAA,IACd,GAAG2B,WAAAA;AAAAA,EACL;AACF,CAAC;;;"}

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

@@ -55,13 +55,8 @@ const HvBulkActions = (props) => {
     [classes.semantic]: isSemantic
   }, isSemantic && css({
     [`& .${BulkActions_styles.staticClasses.selectAll} div`]: {
-      color: uikitStyles.theme.bulkActions.semanticColor,
       "&:hover:not(:disabled)": {
         backgroundColor: hexToRgbA.hexToRgbA(baseColor, 0.3)
-      },
-      "& *": {
-        color: uikitStyles.theme.bulkActions.semanticColor,
-        backgroundColor: "transparent"
       }
     },
     [`& .${BulkActions_styles.staticClasses.selectAll}:focus-within div`]: {

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 {\n  HvButton,\n  HvButtonProps,\n  HvButtonVariant,\n} 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, colors } = useTheme();\n\n  const baseColor = colors?.base_light || 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.bulkActions.semanticColor,\n\n              \"&:hover:not(:disabled)\": {\n                backgroundColor: hexToRgbA(baseColor, 0.3),\n              },\n\n              \"& *\": {\n                color: theme.bulkActions.semanticColor,\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={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\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","colors","useTheme","baseColor","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","jsx","HvTypography","disabled","jsxs","Fragment","root","staticClasses","selectAll","color","bulkActions","semanticColor","backgroundColor","hexToRgbA","selectAllContainer","HvCheckBox","setId","divider","HvButton","selectAllPages","actionButtonVariant","HvActionsGeneric"],"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 {\n  HvButton,\n  HvButtonProps,\n  HvButtonVariant,\n} 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, colors } = useTheme();\n\n  const baseColor = colors?.base_light || 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              \"&:hover:not(:disabled)\": {\n                backgroundColor: hexToRgbA(baseColor, 0.3),\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={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\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","colors","useTheme","baseColor","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","jsx","HvTypography","disabled","jsxs","Fragment","root","staticClasses","selectAll","backgroundColor","hexToRgbA","selectAllContainer","HvCheckBox","setId","divider","HvButton","selectAllPages","bulkActions","actionButtonVariant","HvActionsGeneric"],"mappings":"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"}

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

@@ -9,13 +9,20 @@ const {
   root: {
     display: "flex",
     alignItems: "center",
-    border: uikitStyles.theme.bulkActions.border,
-    backgroundColor: uikitStyles.theme.bulkActions.backgroundColor,
-    padding: uikitStyles.theme.bulkActions.padding,
+    border: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    backgroundColor: uikitStyles.theme.colors.atmo2,
+    padding: uikitStyles.theme.spacing("xs", "md"),
     marginBottom: uikitStyles.theme.space.xs
   },
   semantic: {
-    backgroundColor: uikitStyles.theme.bulkActions.anySelectedBackgroundColor
+    backgroundColor: uikitStyles.theme.colors.primary_20,
+    "& $selectAll div": {
+      color: "inherit",
+      "& *": {
+        color: "inherit",
+        backgroundColor: "transparent"
+      }
+    }
   },
   actions: {
     display: "inline-flex",
@@ -28,7 +35,7 @@ const {
   selectAll: {},
   selectAllPages: {},
   divider: {
-    display: uikitStyles.theme.bulkActions.separatorDisplay,
+    display: "flex",
     backgroundColor: uikitStyles.theme.colors.atmo4,
     width: "1px",
     height: "32px",

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

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.styles.cjs","sources":["../../../../src/components/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    border: theme.bulkActions.border,\n    backgroundColor: theme.bulkActions.backgroundColor,\n    padding: theme.bulkActions.padding,\n    marginBottom: theme.space.xs,\n  },\n  semantic: {\n    backgroundColor: theme.bulkActions.anySelectedBackgroundColor,\n  },\n  actions: { display: \"inline-flex\", marginLeft: \"auto\" },\n  selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n  selectAll: {},\n  selectAllPages: {},\n  divider: {\n    display: theme.bulkActions.separatorDisplay,\n    backgroundColor: theme.colors.atmo4,\n    width: \"1px\",\n    height: \"32px\",\n    marginLeft: theme.space.sm,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","border","theme","bulkActions","backgroundColor","padding","marginBottom","space","xs","semantic","anySelectedBackgroundColor","actions","marginLeft","selectAllContainer","selectAll","selectAllPages","divider","separatorDisplay","colors","atmo4","width","height","sm"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,QAAQC,YAAAA,MAAMC,YAAYF;AAAAA,IAC1BG,iBAAiBF,YAAAA,MAAMC,YAAYC;AAAAA,IACnCC,SAASH,YAAAA,MAAMC,YAAYE;AAAAA,IAC3BC,cAAcJ,YAAAA,MAAMK,MAAMC;AAAAA,EAC5B;AAAA,EACAC,UAAU;AAAA,IACRL,iBAAiBF,YAAAA,MAAMC,YAAYO;AAAAA,EACrC;AAAA,EACAC,SAAS;AAAA,IAAEZ,SAAS;AAAA,IAAea,YAAY;AAAA,EAAO;AAAA,EACtDC,oBAAoB;AAAA,IAAEd,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC5Dc,WAAW,CAAC;AAAA,EACZC,gBAAgB,CAAC;AAAA,EACjBC,SAAS;AAAA,IACPjB,SAASG,YAAAA,MAAMC,YAAYc;AAAAA,IAC3Bb,iBAAiBF,YAAAA,MAAMgB,OAAOC;AAAAA,IAC9BC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRT,YAAYV,YAAAA,MAAMK,MAAMe;AAAAA,EAC1B;AACF,CAAC;;;"}
+{"version":3,"file":"BulkActions.styles.cjs","sources":["../../../../src/components/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    border: `1px solid ${theme.colors.atmo4}`,\n    backgroundColor: theme.colors.atmo2,\n    padding: theme.spacing(\"xs\", \"md\"),\n    marginBottom: theme.space.xs,\n  },\n  semantic: {\n    backgroundColor: theme.colors.primary_20,\n    \"& $selectAll div\": {\n      color: \"inherit\",\n\n      \"& *\": {\n        color: \"inherit\",\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  actions: { display: \"inline-flex\", marginLeft: \"auto\" },\n  selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n  selectAll: {},\n  selectAllPages: {},\n  divider: {\n    display: \"flex\",\n    backgroundColor: theme.colors.atmo4,\n    width: \"1px\",\n    height: \"32px\",\n    marginLeft: theme.space.sm,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","border","theme","colors","atmo4","backgroundColor","atmo2","padding","spacing","marginBottom","space","xs","semantic","primary_20","color","actions","marginLeft","selectAllContainer","selectAll","selectAllPages","divider","width","height","sm"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,QAAS,aAAYC,YAAMC,MAAAA,OAAOC,KAAM;AAAA,IACxCC,iBAAiBH,YAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,SAASL,YAAAA,MAAMM,QAAQ,MAAM,IAAI;AAAA,IACjCC,cAAcP,YAAAA,MAAMQ,MAAMC;AAAAA,EAC5B;AAAA,EACAC,UAAU;AAAA,IACRP,iBAAiBH,YAAAA,MAAMC,OAAOU;AAAAA,IAC9B,oBAAoB;AAAA,MAClBC,OAAO;AAAA,MAEP,OAAO;AAAA,QACLA,OAAO;AAAA,QACPT,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACAU,SAAS;AAAA,IAAEhB,SAAS;AAAA,IAAeiB,YAAY;AAAA,EAAO;AAAA,EACtDC,oBAAoB;AAAA,IAAElB,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC5DkB,WAAW,CAAC;AAAA,EACZC,gBAAgB,CAAC;AAAA,EACjBC,SAAS;AAAA,IACPrB,SAAS;AAAA,IACTM,iBAAiBH,YAAAA,MAAMC,OAAOC;AAAAA,IAC9BiB,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRN,YAAYd,YAAAA,MAAMQ,MAAMa;AAAAA,EAC1B;AACF,CAAC;;;"}

package/dist/cjs/components/Button/Button.cjs

@@ -44,7 +44,7 @@ const HvButton = React.forwardRef((props, ref) => {
     activeTheme
   } = useTheme.useTheme();
   const variant = mapVariant(variantProp ?? (icon ? "secondaryGhost" : "primary"), activeTheme == null ? void 0 : activeTheme.name);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Component, { ref, className: cx(classes.root, css(Button_styles.getVariantStyles(variant)), size && css(Button_styles.getSizeStyles(size)), radius && css(Button_styles.getRadiusStyles(radius)), overrideIconColors && css(Button_styles.getOverrideColors()), {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Component, { ref, className: cx(classes.root, classes[variant], size && css(Button_styles.getSizeStyles(size)), radius && css(Button_styles.getRadiusStyles(radius)), overrideIconColors && css(Button_styles.getOverrideColors()), {
     [classes.icon]: icon,
     [classes.disabled]: disabled
   }, className), ...Component === "button" && {

package/dist/cjs/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  getVariantStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Button. */\n      variant?: HvButtonVariant;\n      /** Whether the Button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the Button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: ReactElement;\n      /** Element placed after the children. */\n      endIcon?: ReactElement;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the Button is selected or not. */\n      selected?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n  props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"button\">(\n    props: HvButtonProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      variant: variantProp,\n      disabled = false,\n      className,\n      startIcon,\n      endIcon,\n      icon = false,\n      size,\n      radius,\n      overrideIconColors = true,\n      component: Component = \"button\",\n      ...others\n    } = useDefaultProps(\"HvButton\", props);\n    const { classes, css, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n    const variant = mapVariant(\n      variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n      activeTheme?.name\n    );\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          css(getVariantStyles(variant)),\n          size && css(getSizeStyles(size)),\n          radius && css(getRadiusStyles(radius)),\n          overrideIconColors && css(getOverrideColors()),\n          {\n            [classes.icon]: icon,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...(Component === \"button\" && { type: \"button\" })}\n        {...(disabled && {\n          disabled: true,\n          tabIndex: -1,\n          \"aria-disabled\": true,\n        })}\n        {...others}\n      >\n        {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n        {children}\n        {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n      </Component>\n    );\n  }\n);\n"],"names":["mapVariant","variant","theme","deprecatedVariantMap","secondary","ghost","mappedVariant","console","warn","HvButton","forwardRef","props","ref","id","classes","classesProp","children","variantProp","disabled","className","startIcon","endIcon","icon","size","radius","overrideIconColors","component","Component","others","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","name","jsxs","root","getVariantStyles","getSizeStyles","getRadiusStyles","getOverrideColors","type","tabIndex","jsx"],"mappings":";;;;;;;AAuDA,MAAMA,aAAaA,CACjBC,SACAC,UACoB;AACpB,MAAIA,UAAU;AAAcD,WAAAA;AAE5B,QAAME,uBAAwD;AAAA,IAC5DC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA;AAGHC,QAAAA,gBAAgBH,qBAAqBF,OAAO;AAElD,MAAIK,eAAe;AAEjBC,YAAQC,KACL,mBAAkBP,OAAQ,gCAA+BK,aAAc,IAC1E;AAAA,EACF;AAEA,SAAOA,iBAAiBL;AAC1B;AAKO,MAAMQ,WAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAf,SAASgB;AAAAA,IACTC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,qBAAqB;AAAA,IACrBC,WAAWC,YAAY;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYlB,KAAK;AAC/B,QAAA;AAAA,IAAEG;AAAAA,IAASgB;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWjB,WAAW;AAC7C,QAAA;AAAA,IAAEkB;AAAAA,MAAgBC,SAAS,SAAA;AACjC,QAAMjC,UAAUD,WACdiB,gBAAgBK,OAAO,mBAAmB,YAC1CW,2CAAaE,IACf;AAEA,SACGC,gCAAA,WAAA,EACC,KACA,WAAWL,GACTjB,QAAQuB,MACRP,IAAIQ,+BAAiBrC,OAAO,CAAC,GAC7BsB,QAAQO,IAAIS,cAAchB,cAAAA,IAAI,CAAC,GAC/BC,UAAUM,IAAIU,cAAAA,gBAAgBhB,MAAM,CAAC,GACrCC,sBAAsBK,IAAIW,cAAAA,kBAAmB,CAAA,GAC7C;AAAA,IACE,CAAC3B,QAAQQ,IAAI,GAAGA;AAAAA,IAChB,CAACR,QAAQI,QAAQ,GAAGA;AAAAA,EAEtBC,GAAAA,SACF,GACKQ,GAAAA,cAAc,YAAY;AAAA,IAAEe,MAAM;AAAA,EAAS,GAC3CxB,GAAAA,YAAY;AAAA,IACfA,UAAU;AAAA,IACVyB,UAAU;AAAA,IACV,iBAAiB;AAAA,EAAA,GAEff,GAAAA,QAEHR,UAAAA;AAAAA,IAAAA,aAAcwB,2BAAAA,IAAA,QAAA,EAAK,WAAW9B,QAAQM,WAAYA,UAAU,WAAA;AAAA,IAC5DJ;AAAAA,IACAK,WAAYuB,2BAAAA,IAAA,QAAA,EAAK,WAAW9B,QAAQO,SAAUA,UAAQ,SAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CACF;;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Button. */\n      variant?: HvButtonVariant;\n      /** Whether the Button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the Button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: ReactElement;\n      /** Element placed after the children. */\n      endIcon?: ReactElement;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the Button is selected or not. */\n      selected?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n  props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"button\">(\n    props: HvButtonProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      variant: variantProp,\n      disabled = false,\n      className,\n      startIcon,\n      endIcon,\n      icon = false,\n      size,\n      radius,\n      overrideIconColors = true,\n      component: Component = \"button\",\n      ...others\n    } = useDefaultProps(\"HvButton\", props);\n    const { classes, css, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n    const variant = mapVariant(\n      variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n      activeTheme?.name\n    );\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          size && css(getSizeStyles(size)),\n          radius && css(getRadiusStyles(radius)),\n          overrideIconColors && css(getOverrideColors()),\n          {\n            [classes.icon]: icon,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...(Component === \"button\" && { type: \"button\" })}\n        {...(disabled && {\n          disabled: true,\n          tabIndex: -1,\n          \"aria-disabled\": true,\n        })}\n        {...others}\n      >\n        {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n        {children}\n        {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n      </Component>\n    );\n  }\n);\n"],"names":["mapVariant","variant","theme","deprecatedVariantMap","secondary","ghost","mappedVariant","console","warn","HvButton","forwardRef","props","ref","id","classes","classesProp","children","variantProp","disabled","className","startIcon","endIcon","icon","size","radius","overrideIconColors","component","Component","others","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","name","jsxs","root","getSizeStyles","getRadiusStyles","getOverrideColors","type","tabIndex","jsx"],"mappings":";;;;;;;AAsDA,MAAMA,aAAaA,CACjBC,SACAC,UACoB;AACpB,MAAIA,UAAU;AAAcD,WAAAA;AAE5B,QAAME,uBAAwD;AAAA,IAC5DC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA;AAGHC,QAAAA,gBAAgBH,qBAAqBF,OAAO;AAElD,MAAIK,eAAe;AAEjBC,YAAQC,KACL,mBAAkBP,OAAQ,gCAA+BK,aAAc,IAC1E;AAAA,EACF;AAEA,SAAOA,iBAAiBL;AAC1B;AAKO,MAAMQ,WAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAf,SAASgB;AAAAA,IACTC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,qBAAqB;AAAA,IACrBC,WAAWC,YAAY;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYlB,KAAK;AAC/B,QAAA;AAAA,IAAEG;AAAAA,IAASgB;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWjB,WAAW;AAC7C,QAAA;AAAA,IAAEkB;AAAAA,MAAgBC,SAAS,SAAA;AACjC,QAAMjC,UAAUD,WACdiB,gBAAgBK,OAAO,mBAAmB,YAC1CW,2CAAaE,IACf;AAGE,SAAAC,gCAAC,WACC,EAAA,KACA,WAAWL,GACTjB,QAAQuB,MACRvB,QAAQb,OAAO,GACfsB,QAAQO,IAAIQ,cAAAA,cAAcf,IAAI,CAAC,GAC/BC,UAAUM,IAAIS,cAAgBf,gBAAAA,MAAM,CAAC,GACrCC,sBAAsBK,IAAIU,cAAAA,kBAAmB,CAAA,GAC7C;AAAA,IACE,CAAC1B,QAAQQ,IAAI,GAAGA;AAAAA,IAChB,CAACR,QAAQI,QAAQ,GAAGA;AAAAA,EAEtBC,GAAAA,SACF,GACKQ,GAAAA,cAAc,YAAY;AAAA,IAAEc,MAAM;AAAA,EAAS,GAC3CvB,GAAAA,YAAY;AAAA,IACfA,UAAU;AAAA,IACVwB,UAAU;AAAA,IACV,iBAAiB;AAAA,EAAA,GAEfd,GAAAA,QAEHR,UAAAA;AAAAA,IAAAA,aAAcuB,2BAAAA,IAAA,QAAA,EAAK,WAAW7B,QAAQM,WAAYA,UAAU,WAAA;AAAA,IAC5DJ;AAAAA,IACAK,WAAYsB,2BAAAA,IAAA,QAAA,EAAK,WAAW7B,QAAQO,SAAUA,UAAQ,SAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CACF;;;"}

package/dist/cjs/components/Button/Button.styles.cjs

@@ -28,8 +28,8 @@ const {
     lineHeight: "11px",
     letterSpacing: 0,
     height: "32px",
-    borderRadius: uikitStyles.theme.button.borderRadius,
-    padding: uikitStyles.theme.button.padding
+    borderRadius: uikitStyles.theme.radii.base,
+    padding: uikitStyles.theme.spacing("xs", "sm")
   },
   startIcon: {
     marginLeft: `calc(-1 * ${uikitStyles.theme.space.xs})`
@@ -50,68 +50,63 @@ const {
     padding: 0,
     height: "fit-content",
     minWidth: "unset"
-  }
-});
-const getVariantStyles = (variant) => {
-  const variantStyles = {
-    primary: {
-      color: uikitStyles.theme.colors.atmo1,
-      backgroundColor: uikitStyles.theme.colors.primary,
-      "&:hover, &:focus-visible": {
-        backgroundColor: uikitStyles.theme.colors.primary_80
-      }
-    },
-    primarySubtle: {
-      color: uikitStyles.theme.colors.primary,
-      backgroundColor: "transparent",
-      border: `1px solid ${uikitStyles.theme.colors.primary}`,
-      "&:hover, &:focus-visible": {
-        backgroundColor: uikitStyles.theme.button.hoverColor
-      }
-    },
-    primaryGhost: {
-      color: uikitStyles.theme.colors.primary,
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: uikitStyles.theme.button.hoverColor
-      },
-      "&:disabled": {
-        backgroundColor: "transparent"
-      }
-    },
-    secondarySubtle: {
-      color: uikitStyles.theme.colors.secondary,
-      backgroundColor: uikitStyles.theme.button.secondaryBackgroundColor,
-      border: `1px solid ${uikitStyles.theme.button.secondarySubtleBorderColor}`,
-      "&:hover, &:focus-visible": {
-        backgroundColor: uikitStyles.theme.button.hoverColor
-      }
+  },
+  primary: {
+    color: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.primary,
+    "&:hover, &:focus-visible": {
+      backgroundColor: uikitStyles.theme.colors.primary_80
+    }
+  },
+  primarySubtle: {
+    color: uikitStyles.theme.colors.primary,
+    backgroundColor: "transparent",
+    border: `1px solid ${uikitStyles.theme.colors.primary}`,
+    "&:hover, &:focus-visible": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    }
+  },
+  primaryGhost: {
+    color: uikitStyles.theme.colors.primary,
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
     },
-    secondaryGhost: {
-      color: uikitStyles.theme.colors.secondary,
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: uikitStyles.theme.button.hoverColor
-      },
-      "&:disabled": {
-        backgroundColor: "transparent"
-      }
+    "&:disabled": {
+      backgroundColor: "transparent"
+    }
+  },
+  secondarySubtle: {
+    color: uikitStyles.theme.colors.secondary,
+    backgroundColor: "transparent",
+    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+    "&:hover, &:focus-visible": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    }
+  },
+  secondaryGhost: {
+    color: uikitStyles.theme.colors.secondary,
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
     },
-    semantic: {
-      color: uikitStyles.theme.colors.base_dark,
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: uikitStyles.theme.button.semanticColor
-      },
-      "&:disabled": {
-        backgroundColor: uikitStyles.theme.button.semanticColorDisabled
-      }
+    "&:disabled": {
+      backgroundColor: "transparent"
+    }
+  },
+  semantic: {
+    color: uikitStyles.theme.colors.base_dark,
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: "rgba(251, 252, 252, 0.3)"
     },
-    secondary: void 0,
-    ghost: void 0
-  };
-  return variantStyles[variant];
-};
+    "&:disabled": {
+      backgroundColor: "rgba(251, 252, 252, 0.1)"
+    }
+  },
+  secondary: {},
+  ghost: {}
+});
 const getRadiusStyles = (radius) => ({
   borderRadius: uikitStyles.theme.radii[radius]
 });
@@ -129,7 +124,6 @@ const getOverrideColors = () => ({
 exports.getOverrideColors = getOverrideColors;
 exports.getRadiusStyles = getRadiusStyles;
 exports.getSizeStyles = getSizeStyles;
-exports.getVariantStyles = getVariantStyles;
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;
 //# sourceMappingURL=Button.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.cjs","sources":["../../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    minWidth: \"70px\",\n\n    whiteSpace: \"nowrap\",\n\n    \"&:hover\": {},\n    \"&:focus\": {},\n    \"&:focus-visible\": { ...outlineStyles },\n    \"&:active\": {},\n\n    // default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: theme.fontSizes.base,\n    fontWeight: theme.fontWeights.semibold,\n    lineHeight: \"11px\",\n    letterSpacing: 0,\n    height: \"32px\",\n    borderRadius: theme.button.borderRadius,\n    padding: theme.button.padding,\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n\n  disabled: {\n    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo4,\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n  },\n\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    minWidth: \"unset\",\n  },\n});\n\nexport const getVariantStyles = (variant: HvButtonVariant) => {\n  const variantStyles: Record<HvButtonVariant, CSSInterpolation> = {\n    primary: {\n      color: theme.colors.atmo1,\n      backgroundColor: theme.colors.primary,\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.colors.primary_80,\n      },\n    },\n    primarySubtle: {\n      color: theme.colors.primary,\n      backgroundColor: \"transparent\",\n      border: `1px solid ${theme.colors.primary}`,\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.button.hoverColor,\n      },\n    },\n    primaryGhost: {\n      color: theme.colors.primary,\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.button.hoverColor,\n      },\n      \"&:disabled\": {\n        backgroundColor: \"transparent\",\n      },\n    },\n    secondarySubtle: {\n      color: theme.colors.secondary,\n      backgroundColor: theme.button.secondaryBackgroundColor,\n      border: `1px solid ${theme.button.secondarySubtleBorderColor}`,\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.button.hoverColor,\n      },\n    },\n    secondaryGhost: {\n      color: theme.colors.secondary,\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.button.hoverColor,\n      },\n      \"&:disabled\": {\n        backgroundColor: \"transparent\",\n      },\n    },\n    semantic: {\n      color: theme.colors.base_dark,\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.button.semanticColor,\n      },\n      \"&:disabled\": {\n        backgroundColor: theme.button.semanticColorDisabled,\n      },\n    },\n    secondary: undefined,\n    ghost: undefined,\n  };\n\n  return variantStyles[variant];\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n  borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n  height: theme.sizes[size],\n  paddingLeft: theme.space[size],\n  paddingRight: theme.space[size],\n  fontSize: theme.fontSizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","justifyContent","textTransform","cursor","minWidth","whiteSpace","outlineStyles","fontFamily","theme","body","fontSize","fontSizes","base","fontWeight","fontWeights","semibold","lineHeight","letterSpacing","height","borderRadius","button","padding","startIcon","marginLeft","space","xs","endIcon","marginRight","focusVisible","disabled","color","colors","secondary_60","borderColor","atmo4","backgroundColor","atmo3","pointerEvents","icon","margin","getVariantStyles","variant","variantStyles","primary","atmo1","primary_80","primarySubtle","border","hoverColor","primaryGhost","secondarySubtle","secondary","secondaryBackgroundColor","secondarySubtleBorderColor","secondaryGhost","semantic","base_dark","semanticColor","semanticColorDisabled","undefined","ghost","getRadiusStyles","radius","radii","getSizeStyles","size","sizes","paddingLeft","paddingRight","getOverrideColors","fill"],"mappings":"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"}
+{"version":3,"file":"Button.styles.cjs","sources":["../../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    minWidth: \"70px\",\n\n    whiteSpace: \"nowrap\",\n\n    \"&:hover\": {},\n    \"&:focus\": {},\n    \"&:focus-visible\": { ...outlineStyles },\n    \"&:active\": {},\n\n    // default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: theme.fontSizes.base,\n    fontWeight: theme.fontWeights.semibold,\n    lineHeight: \"11px\",\n    letterSpacing: 0,\n    height: \"32px\",\n    borderRadius: theme.radii.base,\n    padding: theme.spacing(\"xs\", \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n\n  disabled: {\n    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo4,\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n  },\n\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    minWidth: \"unset\",\n  },\n\n  primary: {\n    color: theme.colors.atmo1,\n    backgroundColor: theme.colors.primary,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.primary_80,\n    },\n  },\n  primarySubtle: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    border: `1px solid ${theme.colors.primary}`,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  primaryGhost: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  secondarySubtle: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    border: `1px solid ${theme.colors.secondary}`,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  secondaryGhost: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n    },\n    \"&:disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n  secondary: {},\n  ghost: {},\n});\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n  borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n  height: theme.sizes[size],\n  paddingLeft: theme.space[size],\n  paddingRight: theme.space[size],\n  fontSize: theme.fontSizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","justifyContent","textTransform","cursor","minWidth","whiteSpace","outlineStyles","fontFamily","theme","body","fontSize","fontSizes","base","fontWeight","fontWeights","semibold","lineHeight","letterSpacing","height","borderRadius","radii","padding","spacing","startIcon","marginLeft","space","xs","endIcon","marginRight","focusVisible","disabled","color","colors","secondary_60","borderColor","atmo4","backgroundColor","atmo3","pointerEvents","icon","margin","primary","atmo1","primary_80","primarySubtle","border","containerBackgroundHover","primaryGhost","secondarySubtle","secondary","secondaryGhost","semantic","base_dark","ghost","getRadiusStyles","radius","getSizeStyles","size","sizes","paddingLeft","paddingRight","getOverrideColors","fill"],"mappings":"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"}

package/dist/cjs/components/Calendar/CalendarHeader/CalendarHeader.cjs

@@ -13,6 +13,7 @@ const setId = require("../../../utils/setId.cjs");
 const utils = require("../utils.cjs");
 const CalendarHeader_styles = require("./CalendarHeader.styles.cjs");
 const FormElementValueContext = require("../../Forms/FormElement/context/FormElementValueContext.cjs");
+const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const FormElementContext = require("../../Forms/FormElement/context/FormElementContext.cjs");
 const FormElementDescriptorsContext = require("../../Forms/FormElement/context/FormElementDescriptorsContext.cjs");
 const Typography = require("../../Typography/Typography.cjs");
@@ -25,19 +26,20 @@ const isNil__default = /* @__PURE__ */ _interopDefault(isNil);
 dayjs__default.default.extend(localeData__default.default);
 dayjs__default.default.extend(localizedFormat__default.default);
 dayjs__default.default.extend(customParseFormat__default.default);
-const HvCalendarHeader = ({
-  id,
-  value,
-  locale = "en-US",
-  classes: classesProp,
-  onChange,
-  showEndDate,
-  showDayOfWeek = false,
-  onFocus,
-  invalidDateLabel = "Invalid Date",
-  ...others
-}) => {
+const HvCalendarHeader = (props) => {
   var _a;
+  const {
+    id,
+    value,
+    locale = "en-US",
+    classes: classesProp,
+    onChange,
+    showEndDate,
+    showDayOfWeek = false,
+    onFocus,
+    invalidDateLabel = "Invalid Date",
+    ...others
+  } = useDefaultProps.useDefaultProps("HvCalendarHeader", props);
   const {
     classes,
     cx

package/dist/cjs/components/Calendar/CalendarHeader/CalendarHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.cjs","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\n\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport isNil from \"lodash/isNil\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"@core/components/Forms\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nexport const HvCalendarHeader = ({\n  id,\n  value,\n  locale = \"en-US\",\n  classes: classesProp,\n  onChange,\n  showEndDate,\n  showDayOfWeek = false,\n  onFocus,\n  invalidDateLabel = \"Invalid Date\",\n  ...others\n}: HvCalendarHeaderProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue: string | Date | DateRangeProp | undefined =\n    value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n  const [dateValue, setDateValue] = useState<\n    string | Date | DateRangeProp | undefined\n  >(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const localId = id ?? setId(elementId, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n  );\n\n  const validateInput = (incomingValid) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(formatToLocale(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event, date) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput\n      ? localeParsedDate.toDate()\n      : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler = (event) => {\n    if (isNil(editedValue)) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler = (event) => {\n    if (!isKey(event, \"Enter\") || isNil(editedValue) || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? dayjs(localValue).locale(locale).format(\"L\")\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler = (event) => {\n    setEditedValue(event.target.value);\n  };\n  return (\n    <>\n      <div\n        id={localId}\n        className={cx(classes.root, {\n          [classes.invalid]: !isValidValue && inputValue !== \"\",\n        })}\n      >\n        {showDayOfWeek && (\n          <HvTypography className={classes.headerDayOfWeek}>\n            {weekdayDisplay || \"\\u00A0\"}\n          </HvTypography>\n        )}\n\n        <div className={classes.headerDate}>\n          <input\n            type=\"text\"\n            id={setId(localId, \"header-input\")}\n            placeholder={localeFormat}\n            value={inputValue}\n            className={classes.input}\n            onBlur={onBlurHandler}\n            onFocus={onFocusHandler}\n            onChange={onChangeHandler}\n            onKeyDown={keyDownHandler}\n            aria-labelledby={label?.[0]?.id}\n            {...others}\n          />\n        </div>\n      </div>\n      {!isValidValue && inputValue !== \"\" && (\n        <div role=\"presentation\" className={classes.inputBorderContainer} />\n      )}\n      <div style={{ height: 32 }}>\n        {!isValidValue && inputValue !== \"\" && (\n          <HvTypography\n            component=\"span\"\n            variant=\"body\"\n            className={classes?.invalidMessageStyling}\n          >\n            <Info color=\"brand\" iconSize=\"S\" />\n            {invalidDateLabel}\n          </HvTypography>\n        )}\n      </div>\n    </>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEventHandler<any>,\n    formattedDate: string | null\n  ) => void;\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":["dayjs","extend","localeData","localizedFormat","customParseFormat","HvCalendarHeader","id","value","locale","classes","classesProp","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","others","cx","useClasses","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","isNil","keyDownHandler","isKey","preventDefault","onFocusHandler","formattedDate","onChangeHandler","target","jsxs","Fragment","root","invalid","HvTypography","headerDayOfWeek","headerDate","input","jsx","inputBorderContainer","height","invalidMessageStyling","Info","formElementType"],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.cjs","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\n\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport isNil from \"lodash/isNil\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"@core/components/Forms\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nexport const HvCalendarHeader = (props: HvCalendarHeaderProps) => {\n  const {\n    id,\n    value,\n    locale = \"en-US\",\n    classes: classesProp,\n    onChange,\n    showEndDate,\n    showDayOfWeek = false,\n    onFocus,\n    invalidDateLabel = \"Invalid Date\",\n    ...others\n  } = useDefaultProps(\"HvCalendarHeader\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue: string | Date | DateRangeProp | undefined =\n    value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n  const [dateValue, setDateValue] = useState<\n    string | Date | DateRangeProp | undefined\n  >(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const localId = id ?? setId(elementId, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n  );\n\n  const validateInput = (incomingValid) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(formatToLocale(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event, date) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput\n      ? localeParsedDate.toDate()\n      : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler = (event) => {\n    if (isNil(editedValue)) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler = (event) => {\n    if (!isKey(event, \"Enter\") || isNil(editedValue) || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? dayjs(localValue).locale(locale).format(\"L\")\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler = (event) => {\n    setEditedValue(event.target.value);\n  };\n  return (\n    <>\n      <div\n        id={localId}\n        className={cx(classes.root, {\n          [classes.invalid]: !isValidValue && inputValue !== \"\",\n        })}\n      >\n        {showDayOfWeek && (\n          <HvTypography className={classes.headerDayOfWeek}>\n            {weekdayDisplay || \"\\u00A0\"}\n          </HvTypography>\n        )}\n\n        <div className={classes.headerDate}>\n          <input\n            type=\"text\"\n            id={setId(localId, \"header-input\")}\n            placeholder={localeFormat}\n            value={inputValue}\n            className={classes.input}\n            onBlur={onBlurHandler}\n            onFocus={onFocusHandler}\n            onChange={onChangeHandler}\n            onKeyDown={keyDownHandler}\n            aria-labelledby={label?.[0]?.id}\n            {...others}\n          />\n        </div>\n      </div>\n      {!isValidValue && inputValue !== \"\" && (\n        <div role=\"presentation\" className={classes.inputBorderContainer} />\n      )}\n      <div style={{ height: 32 }}>\n        {!isValidValue && inputValue !== \"\" && (\n          <HvTypography\n            component=\"span\"\n            variant=\"body\"\n            className={classes?.invalidMessageStyling}\n          >\n            <Info color=\"brand\" iconSize=\"S\" />\n            {invalidDateLabel}\n          </HvTypography>\n        )}\n      </div>\n    </>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEventHandler<any>,\n    formattedDate: string | null\n  ) => void;\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":["dayjs","extend","localeData","localizedFormat","customParseFormat","HvCalendarHeader","props","id","value","locale","classes","classesProp","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","others","useDefaultProps","cx","useClasses","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","isNil","keyDownHandler","isKey","preventDefault","onFocusHandler","formattedDate","onChangeHandler","target","jsxs","Fragment","root","invalid","HvTypography","headerDayOfWeek","headerDate","input","jsx","inputBorderContainer","height","invalidMessageStyling","Info","formElementType"],"mappings":"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"}

package/dist/cjs/components/Calendar/CalendarHeader/CalendarHeader.styles.cjs

@@ -10,18 +10,14 @@ const {
   root: {
     marginTop: uikitStyles.theme.spacing("xs"),
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    borderBottom: uikitStyles.theme.calendar.headerInputBorderBottom,
-    borderTop: uikitStyles.theme.calendar.headerInputBorderTop,
-    borderLeft: uikitStyles.theme.calendar.headerInputBorderLeft,
-    borderRight: uikitStyles.theme.calendar.headerInputBorderRight,
-    borderRadius: uikitStyles.theme.calendar.borderRadius,
+    border: `1px solid ${uikitStyles.theme.colors.secondary_80}`,
     "&:hover, &:focus": {
       borderBottom: `1px solid ${uikitStyles.theme.colors.secondary}`
     }
   },
   invalid: {},
   headerDayOfWeek: {
-    color: uikitStyles.theme.calendar.headerInputFontColor,
+    color: uikitStyles.theme.colors.secondary_80,
     paddingLeft: uikitStyles.theme.spacing("xs")
   },
   headerDate: {},
@@ -30,11 +26,10 @@ const {
     backgroundColor: "transparent",
     padding: `5px ${uikitStyles.theme.spacing("xs")}`,
     fontFamily: uikitStyles.theme.fontFamily.body,
-    color: uikitStyles.theme.calendar.headerInputFontColor,
-    fontSize: uikitStyles.theme.calendar.headerInputFontSize,
-    letterSpacing: uikitStyles.theme.calendar.headerInputFontLetterSpacing,
-    lineHeight: uikitStyles.theme.calendar.headerInputFontLineHeight,
-    fontWeight: uikitStyles.theme.calendar.headerInputFontWeight,
+    color: uikitStyles.theme.colors.secondary_80,
+    fontSize: uikitStyles.theme.fontSizes.base,
+    lineHeight: uikitStyles.theme.lineHeights.base,
+    fontWeight: uikitStyles.theme.fontWeights.normal,
     width: "100%",
     "&::placeholder": {
       color: uikitStyles.theme.colors.secondary_60

package/dist/cjs/components/Calendar/CalendarHeader/CalendarHeader.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.styles.cjs","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    marginTop: theme.spacing(\"xs\"),\n    backgroundColor: theme.colors.atmo1,\n    borderBottom: theme.calendar.headerInputBorderBottom,\n    borderTop: theme.calendar.headerInputBorderTop,\n    borderLeft: theme.calendar.headerInputBorderLeft,\n    borderRight: theme.calendar.headerInputBorderRight,\n    borderRadius: theme.calendar.borderRadius,\n    \"&:hover, &:focus\": {\n      borderBottom: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.calendar.headerInputFontColor,\n    paddingLeft: theme.spacing(\"xs\"),\n  },\n  headerDate: {},\n  input: {\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    padding: `5px ${theme.spacing(\"xs\")}`,\n    fontFamily: theme.fontFamily.body,\n\n    color: theme.calendar.headerInputFontColor,\n    fontSize: theme.calendar.headerInputFontSize,\n    letterSpacing: theme.calendar.headerInputFontLetterSpacing,\n    lineHeight: theme.calendar.headerInputFontLineHeight,\n    fontWeight: theme.calendar.headerInputFontWeight,\n    width: \"100%\",\n    \"&::placeholder\": {\n      color: theme.colors.secondary_60,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  inputBorderContainer: {\n    backgroundColor: theme.colors.negative,\n    height: 1,\n    marginTop: -1,\n  },\n  invalidMessageStyling: {\n    display: \"flex\",\n    alignItems: \"center\",\n    color: theme.colors.negative,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","marginTop","theme","spacing","backgroundColor","colors","atmo1","borderBottom","calendar","headerInputBorderBottom","borderTop","headerInputBorderTop","borderLeft","headerInputBorderLeft","borderRight","headerInputBorderRight","borderRadius","secondary","invalid","headerDayOfWeek","color","headerInputFontColor","paddingLeft","headerDate","input","border","padding","fontFamily","body","fontSize","headerInputFontSize","letterSpacing","headerInputFontLetterSpacing","lineHeight","headerInputFontLineHeight","fontWeight","headerInputFontWeight","width","secondary_60","outline","outlineStyles","inputBorderContainer","negative","height","invalidMessageStyling","display","alignItems"],"mappings":";;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,WAAWC,YAAAA,MAAMC,QAAQ,IAAI;AAAA,IAC7BC,iBAAiBF,YAAAA,MAAMG,OAAOC;AAAAA,IAC9BC,cAAcL,YAAAA,MAAMM,SAASC;AAAAA,IAC7BC,WAAWR,YAAAA,MAAMM,SAASG;AAAAA,IAC1BC,YAAYV,YAAAA,MAAMM,SAASK;AAAAA,IAC3BC,aAAaZ,YAAAA,MAAMM,SAASO;AAAAA,IAC5BC,cAAcd,YAAAA,MAAMM,SAASQ;AAAAA,IAC7B,oBAAoB;AAAA,MAClBT,cAAe,aAAYL,YAAMG,MAAAA,OAAOY,SAAU;AAAA,IACpD;AAAA,EACF;AAAA,EACAC,SAAS,CAAC;AAAA,EACVC,iBAAiB;AAAA,IACfC,OAAOlB,YAAAA,MAAMM,SAASa;AAAAA,IACtBC,aAAapB,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EACjC;AAAA,EACAoB,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLC,QAAQ;AAAA,IACRrB,iBAAiB;AAAA,IACjBsB,SAAU,OAAMxB,YAAAA,MAAMC,QAAQ,IAAI,CAAE;AAAA,IACpCwB,YAAYzB,YAAAA,MAAMyB,WAAWC;AAAAA,IAE7BR,OAAOlB,YAAAA,MAAMM,SAASa;AAAAA,IACtBQ,UAAU3B,YAAAA,MAAMM,SAASsB;AAAAA,IACzBC,eAAe7B,YAAAA,MAAMM,SAASwB;AAAAA,IAC9BC,YAAY/B,YAAAA,MAAMM,SAAS0B;AAAAA,IAC3BC,YAAYjC,YAAAA,MAAMM,SAAS4B;AAAAA,IAC3BC,OAAO;AAAA,IACP,kBAAkB;AAAA,MAChBjB,OAAOlB,YAAAA,MAAMG,OAAOiC;AAAAA,IACtB;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBrC,iBAAiBF,YAAAA,MAAMG,OAAOqC;AAAAA,IAC9BC,QAAQ;AAAA,IACR1C,WAAW;AAAA,EACb;AAAA,EACA2C,uBAAuB;AAAA,IACrBC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ1B,OAAOlB,YAAAA,MAAMG,OAAOqC;AAAAA,EACtB;AACF,CAAC;;;"}
+{"version":3,"file":"CalendarHeader.styles.cjs","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    marginTop: theme.spacing(\"xs\"),\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.colors.secondary_80}`,\n    \"&:hover, &:focus\": {\n      borderBottom: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.secondary_80,\n    paddingLeft: theme.spacing(\"xs\"),\n  },\n  headerDate: {},\n  input: {\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    padding: `5px ${theme.spacing(\"xs\")}`,\n    fontFamily: theme.fontFamily.body,\n\n    color: theme.colors.secondary_80,\n    fontSize: theme.fontSizes.base,\n    lineHeight: theme.lineHeights.base,\n    fontWeight: theme.fontWeights.normal,\n    width: \"100%\",\n    \"&::placeholder\": {\n      color: theme.colors.secondary_60,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  inputBorderContainer: {\n    backgroundColor: theme.colors.negative,\n    height: 1,\n    marginTop: -1,\n  },\n  invalidMessageStyling: {\n    display: \"flex\",\n    alignItems: \"center\",\n    color: theme.colors.negative,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","marginTop","theme","spacing","backgroundColor","colors","atmo1","border","secondary_80","borderBottom","secondary","invalid","headerDayOfWeek","color","paddingLeft","headerDate","input","padding","fontFamily","body","fontSize","fontSizes","base","lineHeight","lineHeights","fontWeight","fontWeights","normal","width","secondary_60","outline","outlineStyles","inputBorderContainer","negative","height","invalidMessageStyling","display","alignItems"],"mappings":";;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,WAAWC,YAAAA,MAAMC,QAAQ,IAAI;AAAA,IAC7BC,iBAAiBF,YAAAA,MAAMG,OAAOC;AAAAA,IAC9BC,QAAS,aAAYL,YAAMG,MAAAA,OAAOG,YAAa;AAAA,IAC/C,oBAAoB;AAAA,MAClBC,cAAe,aAAYP,YAAMG,MAAAA,OAAOK,SAAU;AAAA,IACpD;AAAA,EACF;AAAA,EACAC,SAAS,CAAC;AAAA,EACVC,iBAAiB;AAAA,IACfC,OAAOX,YAAAA,MAAMG,OAAOG;AAAAA,IACpBM,aAAaZ,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EACjC;AAAA,EACAY,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLT,QAAQ;AAAA,IACRH,iBAAiB;AAAA,IACjBa,SAAU,OAAMf,YAAAA,MAAMC,QAAQ,IAAI,CAAE;AAAA,IACpCe,YAAYhB,YAAAA,MAAMgB,WAAWC;AAAAA,IAE7BN,OAAOX,YAAAA,MAAMG,OAAOG;AAAAA,IACpBY,UAAUlB,YAAAA,MAAMmB,UAAUC;AAAAA,IAC1BC,YAAYrB,YAAAA,MAAMsB,YAAYF;AAAAA,IAC9BG,YAAYvB,YAAAA,MAAMwB,YAAYC;AAAAA,IAC9BC,OAAO;AAAA,IACP,kBAAkB;AAAA,MAChBf,OAAOX,YAAAA,MAAMG,OAAOwB;AAAAA,IACtB;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpB5B,iBAAiBF,YAAAA,MAAMG,OAAO4B;AAAAA,IAC9BC,QAAQ;AAAA,IACRjC,WAAW;AAAA,EACb;AAAA,EACAkC,uBAAuB;AAAA,IACrBC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZxB,OAAOX,YAAAA,MAAMG,OAAO4B;AAAAA,EACtB;AACF,CAAC;;;"}