@hitachivantara/uikit-react-core 5.17.0 → 5.18.0

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.styles.cjs","sources":["../../../../src/components/TagsInput/TagsInput.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n  HvTag,\n  HvCharCounter,\n  HvFormElement,\n  HvInfoMessage,\n  HvInput,\n  HvLabel,\n  HvListContainer,\n  HvListItem,\n  HvSuggestions,\n  HvWarningText,\n  HvFormElementProps,\n  HvLabelProps,\n  HvInfoMessageProps,\n  HvCharCounterProps,\n  HvWarningTextProps,\n  HvListItemProps,\n  HvTagProps,\n  HvInputProps,\n  HvSuggestionsProps,\n} from \"@core/components\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport tagsInputClasses from \"./tagsInputClasses\";\nimport baseInputClasses from \"../BaseInput/baseInputClasses\";\nimport suggestionsClasses from \"../Forms/Suggestions/suggestionsClasses\";\nimport listItemClasses from \"../ListContainer/ListItem/listItemClasses\";\n\nexport const StyledFormElement = styled((props: HvFormElementProps) => (\n  <HvFormElement {...props} />\n))({\n  display: \"inline-block\",\n  width: \"100%\",\n});\n\nexport const StyledLabelContainer = styled(\"div\")({\n  float: \"left\",\n  display: \"flex\",\n  alignItems: \"flex-start\",\n});\n\nexport const StyledLabel = styled((props: HvLabelProps) => (\n  <HvLabel {...props} />\n))({\n  display: \"block\",\n  float: \"left\",\n  paddingBottom: \"6px\",\n});\n\nexport const StyledDescription = styled((props: HvInfoMessageProps) => (\n  <HvInfoMessage {...props} />\n))({\n  display: \"block\",\n  float: \"left\",\n});\n\nexport const StyledCharCounter = styled((props: HvCharCounterProps) => (\n  <HvCharCounter {...props} />\n))(() => ({\n  display: \"block\",\n  float: \"right\",\n  textAlign: \"right\",\n  marginBottom: \"6px\",\n}));\n\nexport const StyledTagsList = styled(\n  HvListContainer,\n  transientOptions\n)(\n  ({\n    $disabled,\n    $singleLine,\n    $error,\n    $resizable,\n    $invalid,\n    $readOnly,\n  }: {\n    $disabled: boolean;\n    $singleLine: boolean;\n    $error: boolean;\n    $resizable: boolean;\n    $invalid: boolean;\n    $readOnly: boolean;\n  }) => ({\n    display: \"flex\",\n    alignContent: \"flex-start\",\n    float: \"left\",\n    clear: \"both\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    height: \"32px\",\n    padding: 5,\n    overflow: \"auto\",\n    position: \"relative\",\n\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.tagsInput.borderColor}`,\n    borderRadius: theme.radii.base,\n\n    \"&:hover\": {\n      cursor: \"text\",\n      border: `1px solid ${theme.tagsInput.hoverColor}`,\n    },\n\n    [`& .${baseInputClasses.inputRoot}`]: {\n      border: \"none\",\n    },\n\n    \"&:focus, &:focus-within, &:focus-visible\": {\n      outlineColor: \"#52A8EC\",\n      outlineStyle: \"solid\",\n      outlineWidth: \"0px\",\n      outlineOffset: \"-1px\",\n      boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n    },\n\n    ...($disabled && {\n      backgroundColor: theme.tagsInput.disabledBackgroundColor,\n      border: `1px solid ${theme.colors.atmo4}`,\n\n      \"&:focus-within, &:hover\": {\n        border: `1px solid ${theme.colors.atmo4}`,\n      },\n    }),\n\n    ...($readOnly && {\n      backgroundColor: theme.tagsInput.readOnlyBackgroundColor,\n      border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n      \"&:hover\": {\n        border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n      },\n    }),\n\n    ...($singleLine && {\n      overflowX: \"hidden\",\n      overflowY: \"hidden\",\n      height: 32,\n      display: \"table-row\",\n      paddingTop: 0,\n    }),\n\n    ...($error && {\n      border: `1px solid ${theme.colors.negative}`,\n    }),\n\n    ...($resizable && {\n      width: \"auto\",\n      resize: \"both\",\n      overflow: \"auto\",\n    }),\n\n    ...($invalid && {\n      border: `1px solid ${theme.colors.negative}!important`,\n    }),\n  })\n);\n\nexport const StyledError = styled((props: HvWarningTextProps) => (\n  <HvWarningText {...props} />\n))({\n  float: \"left\",\n});\n\nexport const StyledListItem = styled(\n  (props: HvListItemProps) => <HvListItem {...props} />,\n  transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n  marginBottom: 2,\n  height: 24,\n  lineHeight: \"24px\",\n  \"&:not(:last-child)\": {\n    marginBottom: 2,\n  },\n  [`&.${listItemClasses.gutters}`]: {\n    padding: \"0 5px\",\n  },\n  ...($singleLine && {\n    display: \"table-cell\",\n    paddingTop: \"2px!important\",\n  }),\n}));\n\nexport const StyledTag = styled(\n  (props: HvTagProps) => <HvTag {...props} />,\n  transientOptions\n)(({ $selected }: { $selected: boolean }) => ({\n  [`& .${tagsInputClasses.chipRoot}`]: {\n    maxWidth: \"none\",\n  },\n  ...($selected && {\n    outlineColor: \"#52A8EC\",\n    outlineStyle: \"solid\",\n    outlineWidth: \"0px\",\n    outlineOffset: \"-1px\",\n    boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n  }),\n}));\n\nexport const StyledInputListItem = styled(\n  (props: HvListItemProps) => <HvListItem {...props} />,\n  transientOptions\n)(\n  ({\n    $singleLine,\n    $isTagSelected,\n  }: {\n    $singleLine: boolean;\n    $isTagSelected: boolean;\n  }) => ({\n    display: \"flex\",\n    flexGrow: 1,\n    height: 24,\n    lineHeight: \"24px\",\n    [`&.${listItemClasses.gutters}`]: {\n      padding: \"0 5px\",\n    },\n    ...($singleLine && {\n      display: \"table-cell\",\n      minWidth: 100,\n      width: \"100%\",\n      paddingTop: \"3px!important\",\n      verticalAlign: \"middle\",\n    }),\n    ...($isTagSelected && {\n      [`& .${baseInputClasses.inputRoot}`]: {\n        backgroundColor: theme.colors.atmo1,\n      },\n    }),\n  })\n);\n\nexport const StyledInput = styled(\n  (props: HvInputProps) => <HvInput {...props} />,\n  transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n  [`& .${baseInputClasses.root}`]: {\n    width: \"100%\",\n    border: \"none\",\n    [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n      background: \"none\",\n    },\n    [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n      background: \"none\",\n    },\n  },\n  [`&& .${baseInputClasses.inputRoot}`]: {\n    marginLeft: 0,\n    marginRight: 0,\n    flex: \"1 1 auto\",\n    minWidth: 48,\n    height: 24,\n    lineHeight: \"24px\",\n    padding: 0,\n    border: \"none\",\n  },\n  [`& .${baseInputClasses.inputBorderContainer}`]: {\n    border: \"none\",\n    background: \"none\",\n  },\n  [`& .${baseInputClasses.inputRootFocused}`]: {\n    outline: \"none!important\",\n    boxShadow: \"none!important\",\n  },\n  [`& .${baseInputClasses.root} .${baseInputClasses.inputRootReadOnly}`]: {\n    backgroundColor: \"transparent \",\n    border: \"none\",\n    \"&:hover\": {\n      border: \"none\",\n    },\n  },\n  [`&& .${baseInputClasses.input}`]: {\n    marginLeft: 0,\n  },\n  ...($singleLine && {}),\n}));\n\nexport const StyledSuggestions = styled((props: HvSuggestionsProps) => (\n  <HvSuggestions {...props} />\n))({\n  width: \"100%\",\n  position: \"relative\",\n  top: 59,\n  [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n    width: \"100%\",\n  },\n});\n"],"names":["StyledFormElement","_styled","props","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabelContainer","StyledLabel","HvLabel","StyledDescription","HvInfoMessage","StyledCharCounter","HvCharCounter","display","float","textAlign","marginBottom","StyledTagsList","HvListContainer","_extends","transientOptions","$disabled","$singleLine","$error","$resizable","$invalid","$readOnly","alignContent","clear","width","maxWidth","height","padding","overflow","position","flexDirection","flexWrap","backgroundColor","theme","colors","atmo1","border","tagsInput","borderColor","borderRadius","radii","base","cursor","hoverColor","baseInputClasses","inputRoot","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","disabledBackgroundColor","atmo4","readOnlyBackgroundColor","readOnlyBorderColor","overflowX","overflowY","paddingTop","negative","resize","StyledError","HvWarningText","StyledListItem","HvListItem","lineHeight","listItemClasses","gutters","StyledTag","HvTag","$selected","tagsInputClasses","chipRoot","StyledInputListItem","$isTagSelected","flexGrow","minWidth","verticalAlign","StyledInput","HvInput","root","tagInputBorderContainer","background","marginLeft","marginRight","flex","inputBorderContainer","inputRootFocused","outline","inputRootReadOnly","input","StyledSuggestions","HvSuggestions","top","suggestionsClasses","list"],"mappings":"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"}
+{"version":3,"file":"TagsInput.styles.cjs","sources":["../../../../src/components/TagsInput/TagsInput.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n  HvTag,\n  HvCharCounter,\n  HvFormElement,\n  HvInfoMessage,\n  HvInput,\n  HvLabel,\n  HvListContainer,\n  HvListItem,\n  HvSuggestions,\n  HvWarningText,\n  HvFormElementProps,\n  HvLabelProps,\n  HvInfoMessageProps,\n  HvCharCounterProps,\n  HvWarningTextProps,\n  HvListItemProps,\n  HvTagProps,\n  HvInputProps,\n  HvSuggestionsProps,\n  baseInputClasses,\n  listItemClasses,\n  suggestionsClasses,\n} from \"@core/components\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport tagsInputClasses from \"./tagsInputClasses\";\n\nexport const StyledFormElement = styled((props: HvFormElementProps) => (\n  <HvFormElement {...props} />\n))({\n  display: \"inline-block\",\n  width: \"100%\",\n});\n\nexport const StyledLabelContainer = styled(\"div\")({\n  float: \"left\",\n  display: \"flex\",\n  alignItems: \"flex-start\",\n});\n\nexport const StyledLabel = styled((props: HvLabelProps) => (\n  <HvLabel {...props} />\n))({\n  display: \"block\",\n  float: \"left\",\n  paddingBottom: \"6px\",\n});\n\nexport const StyledDescription = styled((props: HvInfoMessageProps) => (\n  <HvInfoMessage {...props} />\n))({\n  display: \"block\",\n  float: \"left\",\n});\n\nexport const StyledCharCounter = styled((props: HvCharCounterProps) => (\n  <HvCharCounter {...props} />\n))(() => ({\n  display: \"block\",\n  float: \"right\",\n  textAlign: \"right\",\n  marginBottom: \"6px\",\n}));\n\nexport const StyledTagsList = styled(\n  HvListContainer,\n  transientOptions\n)(\n  ({\n    $disabled,\n    $singleLine,\n    $error,\n    $resizable,\n    $invalid,\n    $readOnly,\n  }: {\n    $disabled: boolean;\n    $singleLine: boolean;\n    $error: boolean;\n    $resizable: boolean;\n    $invalid: boolean;\n    $readOnly: boolean;\n  }) => ({\n    display: \"flex\",\n    alignContent: \"flex-start\",\n    float: \"left\",\n    clear: \"both\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    height: \"32px\",\n    padding: 5,\n    overflow: \"auto\",\n    position: \"relative\",\n\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.tagsInput.borderColor}`,\n    borderRadius: theme.radii.base,\n\n    \"&:hover\": {\n      cursor: \"text\",\n      border: `1px solid ${theme.tagsInput.hoverColor}`,\n    },\n\n    [`& .${baseInputClasses.inputRoot}`]: {\n      border: \"none\",\n    },\n\n    \"&:focus, &:focus-within, &:focus-visible\": {\n      outlineColor: \"#52A8EC\",\n      outlineStyle: \"solid\",\n      outlineWidth: \"0px\",\n      outlineOffset: \"-1px\",\n      boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n    },\n\n    ...($disabled && {\n      backgroundColor: theme.tagsInput.disabledBackgroundColor,\n      border: `1px solid ${theme.colors.atmo4}`,\n\n      \"&:focus-within, &:hover\": {\n        border: `1px solid ${theme.colors.atmo4}`,\n      },\n    }),\n\n    ...($readOnly && {\n      backgroundColor: theme.tagsInput.readOnlyBackgroundColor,\n      border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n      \"&:hover\": {\n        border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n      },\n    }),\n\n    ...($singleLine && {\n      overflowX: \"hidden\",\n      overflowY: \"hidden\",\n      height: 32,\n      display: \"table-row\",\n      paddingTop: 0,\n    }),\n\n    ...($error && {\n      border: `1px solid ${theme.colors.negative}`,\n    }),\n\n    ...($resizable && {\n      width: \"auto\",\n      resize: \"both\",\n      overflow: \"auto\",\n    }),\n\n    ...($invalid && {\n      border: `1px solid ${theme.colors.negative}!important`,\n    }),\n  })\n);\n\nexport const StyledError = styled((props: HvWarningTextProps) => (\n  <HvWarningText {...props} />\n))({\n  float: \"left\",\n});\n\nexport const StyledListItem = styled(\n  (props: HvListItemProps) => <HvListItem {...props} />,\n  transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n  marginBottom: 2,\n  height: 24,\n  lineHeight: \"24px\",\n  \"&:not(:last-child)\": {\n    marginBottom: 2,\n  },\n  [`&.${listItemClasses.gutters}`]: {\n    padding: \"0 5px\",\n  },\n  ...($singleLine && {\n    display: \"table-cell\",\n    paddingTop: \"2px!important\",\n  }),\n}));\n\nexport const StyledTag = styled(\n  (props: HvTagProps) => <HvTag {...props} />,\n  transientOptions\n)(({ $selected }: { $selected: boolean }) => ({\n  [`& .${tagsInputClasses.chipRoot}`]: {\n    maxWidth: \"none\",\n  },\n  ...($selected && {\n    outlineColor: \"#52A8EC\",\n    outlineStyle: \"solid\",\n    outlineWidth: \"0px\",\n    outlineOffset: \"-1px\",\n    boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n  }),\n}));\n\nexport const StyledInputListItem = styled(\n  (props: HvListItemProps) => <HvListItem {...props} />,\n  transientOptions\n)(\n  ({\n    $singleLine,\n    $isTagSelected,\n  }: {\n    $singleLine: boolean;\n    $isTagSelected: boolean;\n  }) => ({\n    display: \"flex\",\n    flexGrow: 1,\n    height: 24,\n    lineHeight: \"24px\",\n    [`&.${listItemClasses.gutters}`]: {\n      padding: \"0 5px\",\n    },\n    ...($singleLine && {\n      display: \"table-cell\",\n      minWidth: 100,\n      width: \"100%\",\n      paddingTop: \"3px!important\",\n      verticalAlign: \"middle\",\n    }),\n    ...($isTagSelected && {\n      [`& .${baseInputClasses.inputRoot}`]: {\n        backgroundColor: theme.colors.atmo1,\n      },\n    }),\n  })\n);\n\nexport const StyledInput = styled(\n  (props: HvInputProps) => <HvInput {...props} />,\n  transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n  [`& .${baseInputClasses.root}`]: {\n    width: \"100%\",\n    border: \"none\",\n    [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n      background: \"none\",\n    },\n    [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n      background: \"none\",\n    },\n  },\n  [`&& .${baseInputClasses.inputRoot}`]: {\n    marginLeft: 0,\n    marginRight: 0,\n    flex: \"1 1 auto\",\n    minWidth: 48,\n    height: 24,\n    lineHeight: \"24px\",\n    padding: 0,\n    border: \"none\",\n  },\n  [`& .${baseInputClasses.inputBorderContainer}`]: {\n    border: \"none\",\n    background: \"none\",\n  },\n  [`& .${baseInputClasses.inputRootFocused}`]: {\n    outline: \"none!important\",\n    boxShadow: \"none!important\",\n  },\n  [`& .${baseInputClasses.root} .${baseInputClasses.inputRootReadOnly}`]: {\n    backgroundColor: \"transparent \",\n    border: \"none\",\n    \"&:hover\": {\n      border: \"none\",\n    },\n  },\n  [`&& .${baseInputClasses.input}`]: {\n    marginLeft: 0,\n  },\n  ...($singleLine && {}),\n}));\n\nexport const StyledSuggestions = styled((props: HvSuggestionsProps) => (\n  <HvSuggestions {...props} />\n))({\n  width: \"100%\",\n  position: \"relative\",\n  top: 59,\n  [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n    width: \"100%\",\n  },\n});\n"],"names":["StyledFormElement","_styled","props","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabelContainer","StyledLabel","HvLabel","StyledDescription","HvInfoMessage","StyledCharCounter","HvCharCounter","display","float","textAlign","marginBottom","StyledTagsList","HvListContainer","_extends","transientOptions","$disabled","$singleLine","$error","$resizable","$invalid","$readOnly","alignContent","clear","width","maxWidth","height","padding","overflow","position","flexDirection","flexWrap","backgroundColor","theme","colors","atmo1","border","tagsInput","borderColor","borderRadius","radii","base","cursor","hoverColor","baseInputClasses","inputRoot","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","disabledBackgroundColor","atmo4","readOnlyBackgroundColor","readOnlyBorderColor","overflowX","overflowY","paddingTop","negative","resize","StyledError","HvWarningText","StyledListItem","HvListItem","lineHeight","listItemClasses","gutters","StyledTag","HvTag","$selected","tagsInputClasses","chipRoot","StyledInputListItem","$isTagSelected","flexGrow","minWidth","verticalAlign","StyledInput","HvInput","root","tagInputBorderContainer","background","marginLeft","marginRight","flex","inputBorderContainer","inputRootFocused","outline","inputRootReadOnly","input","StyledSuggestions","HvSuggestions","top","suggestionsClasses","list"],"mappings":"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"}

package/dist/cjs/components/TimePicker/TimePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvFormElement,\n  HvBaseDropdown,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n  HvBaseDropdownProps,\n  useControlled,\n  useUniqueId,\n  setId,\n  ExtractNames,\n} from \"../..\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: Partial<HvTimePickerClasses>;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n  const {\n    classes: classesProp = {},\n    className,\n\n    id: idProp,\n    name,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n    hoursPlaceholder = \"hh\",\n    minutesPlaceholder = \"mm\",\n    secondsPlaceholder = \"ss\",\n\n    value: valueProp,\n    defaultValue: defaultValueProp,\n\n    timeFormat,\n    showSeconds,\n    disableExpand,\n    locale = \"en\",\n\n    onToggle,\n    onChange,\n\n    // misc properties:\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    ...others\n  } = props;\n  const id = useUniqueId(idProp, \"hvtimepicker\");\n  const ref = useRef<HTMLDivElement>(null);\n  const { classes, cx } = useClasses(classesProp);\n\n  const stateProps: TimeFieldStateOptions = {\n    value: toTime(valueProp),\n    defaultValue: toTime(defaultValueProp),\n    label,\n    locale,\n    isRequired: required,\n    isReadOnly: readOnly,\n    isDisabled: disabled,\n    granularity: \"second\",\n    hourCycle: getFormat(timeFormat),\n    onChange: (value) => {\n      const { hour: hours, minute: minutes, second: seconds } = value;\n      onChange?.({ hours, minutes, seconds });\n    },\n  };\n  const state = useTimeFieldState(stateProps);\n  const { labelProps, fieldProps } = useTimeField(\n    {\n      ...stateProps,\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n    },\n    state,\n    ref\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n  const [validationState] = useControlled(status, \"standBy\");\n\n  const placeholders = useMemo(\n    () => ({\n      hour: hoursPlaceholder,\n      minute: minutesPlaceholder,\n      second: secondsPlaceholder,\n    }),\n    [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = validationState === \"invalid\";\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(id, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      status={validationState}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel label={label} className={classes.label} {...labelProps} />\n          )}\n          {description && (\n            <HvInfoMessage className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvBaseDropdown\n        role=\"combobox\"\n        variableWidth\n        disabled={disabled}\n        readOnly={readOnly}\n        placeholder={\n          placeholder && !state.value ? (\n            placeholder\n          ) : (\n            <Placeholder\n              ref={ref}\n              name={name}\n              state={state}\n              placeholders={placeholders}\n              className={cx(classes.placeholder, {\n                [classes.placeholderDisabled]: disabled,\n              })}\n              {...fieldProps}\n            />\n          )\n        }\n        classes={{\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          panel: classes.dropdownPanel,\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        placement=\"right\"\n        adornment={\n          <TimeIcon\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.icon}\n          />\n        }\n        expanded={open}\n        onToggle={(evt, newOpen) => {\n          if (disableExpand) return;\n          setOpen(newOpen);\n          onToggle?.(evt, newOpen);\n        }}\n        onContainerCreation={(containerRef) => {\n          containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n        }}\n        aria-haspopup=\"dialog\"\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        disablePortal={disablePortal}\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        {...dropdownProps}\n      >\n        <div ref={ref} className={classes.timePopperContainer}>\n          {state.segments.map((segment, i) => (\n            <Unit\n              key={i}\n              state={state}\n              segment={segment}\n              placeholder={placeholders[segment.type]}\n              onAdd={() => state.increment(segment.type)}\n              onSub={() => state.decrement(segment.type)}\n              onChange={(evt, val) => {\n                state.setSegment(segment.type, Number(val));\n              }}\n            />\n          ))}\n        </div>\n      </HvBaseDropdown>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(id, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":"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"}
+{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvFormElement,\n  HvBaseDropdown,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n  HvBaseDropdownProps,\n  useControlled,\n  useUniqueId,\n  setId,\n  ExtractNames,\n} from \"../..\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n  const {\n    classes: classesProp = {},\n    className,\n\n    id: idProp,\n    name,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n    hoursPlaceholder = \"hh\",\n    minutesPlaceholder = \"mm\",\n    secondsPlaceholder = \"ss\",\n\n    value: valueProp,\n    defaultValue: defaultValueProp,\n\n    timeFormat,\n    showSeconds,\n    disableExpand,\n    locale = \"en\",\n\n    onToggle,\n    onChange,\n\n    // misc properties:\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    ...others\n  } = props;\n  const id = useUniqueId(idProp, \"hvtimepicker\");\n  const ref = useRef<HTMLDivElement>(null);\n  const { classes, cx } = useClasses(classesProp);\n\n  const stateProps: TimeFieldStateOptions = {\n    value: toTime(valueProp),\n    defaultValue: toTime(defaultValueProp),\n    label,\n    locale,\n    isRequired: required,\n    isReadOnly: readOnly,\n    isDisabled: disabled,\n    granularity: \"second\",\n    hourCycle: getFormat(timeFormat),\n    onChange: (value) => {\n      const { hour: hours, minute: minutes, second: seconds } = value;\n      onChange?.({ hours, minutes, seconds });\n    },\n  };\n  const state = useTimeFieldState(stateProps);\n  const { labelProps, fieldProps } = useTimeField(\n    {\n      ...stateProps,\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n    },\n    state,\n    ref\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n  const [validationState] = useControlled(status, \"standBy\");\n\n  const placeholders = useMemo(\n    () => ({\n      hour: hoursPlaceholder,\n      minute: minutesPlaceholder,\n      second: secondsPlaceholder,\n    }),\n    [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = validationState === \"invalid\";\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(id, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      status={validationState}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel label={label} className={classes.label} {...labelProps} />\n          )}\n          {description && (\n            <HvInfoMessage className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvBaseDropdown\n        role=\"combobox\"\n        variableWidth\n        disabled={disabled}\n        readOnly={readOnly}\n        placeholder={\n          placeholder && !state.value ? (\n            placeholder\n          ) : (\n            <Placeholder\n              ref={ref}\n              name={name}\n              state={state}\n              placeholders={placeholders}\n              className={cx(classes.placeholder, {\n                [classes.placeholderDisabled]: disabled,\n              })}\n              {...fieldProps}\n            />\n          )\n        }\n        classes={{\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          panel: classes.dropdownPanel,\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        placement=\"right\"\n        adornment={\n          <TimeIcon\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.icon}\n          />\n        }\n        expanded={open}\n        onToggle={(evt, newOpen) => {\n          if (disableExpand) return;\n          setOpen(newOpen);\n          onToggle?.(evt, newOpen);\n        }}\n        onContainerCreation={(containerRef) => {\n          containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n        }}\n        aria-haspopup=\"dialog\"\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        disablePortal={disablePortal}\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        {...dropdownProps}\n      >\n        <div ref={ref} className={classes.timePopperContainer}>\n          {state.segments.map((segment, i) => (\n            <Unit\n              key={i}\n              state={state}\n              segment={segment}\n              placeholder={placeholders[segment.type]}\n              onAdd={() => state.increment(segment.type)}\n              onSub={() => state.decrement(segment.type)}\n              onChange={(evt, val) => {\n                state.setSegment(segment.type, Number(val));\n              }}\n            />\n          ))}\n        </div>\n      </HvBaseDropdown>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(id, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":"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"}

package/dist/cjs/components/TimePicker/Unit/Unit.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Unit_styles = require("./Unit.styles.cjs");
@@ -16,56 +15,55 @@ const Unit = ({
   onAdd,
   onSub
 }) => {
+  const {
+    classes
+  } = Unit_styles.useClasses();
   const {
     type,
     text
   } = segment;
   const placeholder = placeholderProp ?? segment.placeholder;
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css
-    }) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: css(Unit_styles.styles.root),
-      children: [type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {
-        onClick: onAdd
-      }), type === "literal" && /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: css(Unit_styles.styles.separator),
-        children: text
-      }), type === "dayPeriod" && /* @__PURE__ */ jsxRuntime.jsx(ToggleButton.HvToggleButton, {
-        className: css(Unit_styles.styles.periodToggle),
-        onClick: onAdd,
-        children: text
-      }), ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-        id,
-        disableClear: true,
-        style: {
-          ...uikitStyles.theme.typography.title3
-        },
-        classes: {
-          input: css(Unit_styles.styles.input),
-          root: css(Unit_styles.styles.inputContainer),
-          inputBorderContainer: css(Unit_styles.styles.inputBorderContainer),
-          inputRoot: css(Unit_styles.styles.inputRoot)
-        },
-        onKeyDown: (event) => {
-          if (event.key === "Enter") {
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        },
-        required: true,
-        status: state.validationState,
-        value: text.padStart(2, "0"),
-        onChange,
-        placeholder,
-        inputProps: {
-          autoComplete: "off",
-          type: "number"
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: classes.root,
+    children: [type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {
+      onClick: onAdd
+    }), type === "literal" && /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: classes.separator,
+      children: text
+    }), type === "dayPeriod" && /* @__PURE__ */ jsxRuntime.jsx(ToggleButton.HvToggleButton, {
+      className: classes.periodToggle,
+      onClick: onAdd,
+      children: text
+    }), ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
+      id,
+      disableClear: true,
+      style: {
+        ...uikitStyles.theme.typography.title3
+      },
+      classes: {
+        input: classes.input,
+        root: classes.inputContainer,
+        inputBorderContainer: classes.inputBorderContainer,
+        inputRoot: classes.inputRoot
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          event.stopPropagation();
         }
-      }), type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {
-        onClick: onSub
-      })]
-    })
+      },
+      required: true,
+      status: state.validationState,
+      value: text.padStart(2, "0"),
+      onChange,
+      placeholder,
+      inputProps: {
+        autoComplete: "off",
+        type: "number"
+      }
+    }), type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {
+      onClick: onSub
+    })]
   });
 };
 exports.Unit = Unit;

package/dist/cjs/components/TimePicker/Unit/Unit.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Unit.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\nimport {\n  DropDownXS as SubtractTimeIcon,\n  DropUpXS as AddTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvInput, HvInputProps, HvToggleButton, theme } from \"../../..\";\nimport { styles } from \"./Unit.styles\";\n\ninterface UnitProps {\n  id?: string;\n  state: DateFieldState;\n  segment: DateSegment;\n  placeholder?: string;\n  /** Called when the value changes */\n  onChange?: HvInputProps[\"onChange\"];\n  /** Called when the up/add arrow is pressed */\n  onAdd?: () => void;\n  /** Called when the down/subtract arrow is pressed */\n  onSub?: () => void;\n}\n\nexport const Unit = ({\n  id,\n  state,\n  segment,\n  placeholder: placeholderProp,\n  onChange,\n  onAdd,\n  onSub,\n}: UnitProps) => {\n  const { type, text } = segment;\n  const placeholder = placeholderProp ?? segment.placeholder;\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <div className={css(styles.root)}>\n          {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n          {type === \"literal\" && (\n            <div className={css(styles.separator)}>{text}</div>\n          )}\n          {type === \"dayPeriod\" && (\n            <HvToggleButton\n              className={css(styles.periodToggle)}\n              onClick={onAdd}\n            >\n              {text}\n            </HvToggleButton>\n          )}\n          {[\"hour\", \"minute\", \"second\"].includes(type) && (\n            <HvInput\n              id={id}\n              disableClear\n              style={{\n                ...theme.typography.title3,\n              }}\n              classes={{\n                input: css(styles.input),\n                root: css(styles.inputContainer),\n                inputBorderContainer: css(styles.inputBorderContainer),\n                inputRoot: css(styles.inputRoot),\n              }}\n              onKeyDown={(event) => {\n                if ((event as KeyboardEvent).key === \"Enter\") {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              required\n              status={state.validationState}\n              value={text.padStart(2, \"0\")}\n              onChange={onChange}\n              placeholder={placeholder}\n              inputProps={{ autoComplete: \"off\", type: \"number\" }}\n            />\n          )}\n          {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Unit","id","state","segment","placeholder","placeholderProp","onChange","onAdd","onSub","type","text","ClassNames","children","css","className","styles","root","AddTimeIcon","onClick","separator","HvToggleButton","periodToggle","includes","_jsx","HvInput","disableClear","style","theme","typography","title3","classes","input","inputContainer","inputBorderContainer","inputRoot","onKeyDown","event","key","preventDefault","stopPropagation","required","status","validationState","value","padStart","inputProps","autoComplete","SubtractTimeIcon"],"mappings":";;;;;;;;;AAuBO,MAAMA,OAAOA,CAAC;AAAA,EACnBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAaC;AAAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AACS,MAAM;AACT,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,EAASP,IAAAA;AACjBC,QAAAA,cAAcC,mBAAmBF,QAAQC;AAE/C,wCACGO,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,sCACF,OAAA;AAAA,MAAKC,WAAWD,IAAIE,YAAAA,OAAOC,IAAI;AAAA,MAAEJ,WAC9BH,SAAS,4CAAcQ,gBAAAA,UAAW;AAAA,QAACC,SAASX;AAAAA,MAAQ,CAAA,GACpDE,SAAS,4CACR,OAAA;AAAA,QAAKK,WAAWD,IAAIE,YAAAA,OAAOI,SAAS;AAAA,QAAEP,UAAEF;AAAAA,MAAU,CAAA,GAEnDD,SAAS,8CACPW,aAAAA,gBAAc;AAAA,QACbN,WAAWD,IAAIE,YAAAA,OAAOM,YAAY;AAAA,QAClCH,SAASX;AAAAA,QAAMK,UAEdF;AAAAA,MAAAA,CACa,GAEjB,CAAC,QAAQ,UAAU,QAAQ,EAAEY,SAASb,IAAI,KACzCc,2BAAAA,IAACC,eAAO;AAAA,QACNvB;AAAAA,QACAwB,cAAY;AAAA,QACZC,OAAO;AAAA,UACL,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,QACtB;AAAA,QACAC,SAAS;AAAA,UACPC,OAAOlB,IAAIE,YAAAA,OAAOgB,KAAK;AAAA,UACvBf,MAAMH,IAAIE,YAAAA,OAAOiB,cAAc;AAAA,UAC/BC,sBAAsBpB,IAAIE,YAAAA,OAAOkB,oBAAoB;AAAA,UACrDC,WAAWrB,IAAIE,YAAAA,OAAOmB,SAAS;AAAA,QACjC;AAAA,QACAC,WAAYC,CAAU,UAAA;AACfA,cAAAA,MAAwBC,QAAQ,SAAS;AAC5CD,kBAAME,eAAe;AACrBF,kBAAMG,gBAAgB;AAAA,UACxB;AAAA,QACF;AAAA,QACAC,UAAQ;AAAA,QACRC,QAAQvC,MAAMwC;AAAAA,QACdC,OAAOjC,KAAKkC,SAAS,GAAG,GAAG;AAAA,QAC3BtC;AAAAA,QACAF;AAAAA,QACAyC,YAAY;AAAA,UAAEC,cAAc;AAAA,UAAOrC,MAAM;AAAA,QAAS;AAAA,MACnD,CAAA,GAEFA,SAAS,4CAAcsC,gBAAAA,YAAgB;AAAA,QAAC7B,SAASV;AAAAA,MAAAA,CAAQ,CAAC;AAAA,IAAA,CACxD;AAAA,EAAA,CAEG;AAEhB;;"}
+{"version":3,"file":"Unit.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\nimport {\n  DropDownXS as SubtractTimeIcon,\n  DropUpXS as AddTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvInput, HvInputProps, HvToggleButton, theme } from \"../../..\";\nimport { useClasses } from \"./Unit.styles\";\n\ninterface UnitProps {\n  id?: string;\n  state: DateFieldState;\n  segment: DateSegment;\n  placeholder?: string;\n  /** Called when the value changes */\n  onChange?: HvInputProps[\"onChange\"];\n  /** Called when the up/add arrow is pressed */\n  onAdd?: () => void;\n  /** Called when the down/subtract arrow is pressed */\n  onSub?: () => void;\n}\n\nexport const Unit = ({\n  id,\n  state,\n  segment,\n  placeholder: placeholderProp,\n  onChange,\n  onAdd,\n  onSub,\n}: UnitProps) => {\n  const { classes } = useClasses();\n  const { type, text } = segment;\n  const placeholder = placeholderProp ?? segment.placeholder;\n\n  return (\n    <div className={classes.root}>\n      {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n      {type === \"literal\" && <div className={classes.separator}>{text}</div>}\n      {type === \"dayPeriod\" && (\n        <HvToggleButton className={classes.periodToggle} onClick={onAdd}>\n          {text}\n        </HvToggleButton>\n      )}\n      {[\"hour\", \"minute\", \"second\"].includes(type) && (\n        <HvInput\n          id={id}\n          disableClear\n          style={{\n            ...theme.typography.title3,\n          }}\n          classes={{\n            input: classes.input,\n            root: classes.inputContainer,\n            inputBorderContainer: classes.inputBorderContainer,\n            inputRoot: classes.inputRoot,\n          }}\n          onKeyDown={(event) => {\n            if ((event as KeyboardEvent).key === \"Enter\") {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          }}\n          required\n          status={state.validationState}\n          value={text.padStart(2, \"0\")}\n          onChange={onChange}\n          placeholder={placeholder}\n          inputProps={{ autoComplete: \"off\", type: \"number\" }}\n        />\n      )}\n      {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n    </div>\n  );\n};\n"],"names":["Unit","id","state","segment","placeholder","placeholderProp","onChange","onAdd","onSub","classes","useClasses","type","text","className","root","children","AddTimeIcon","onClick","separator","HvToggleButton","periodToggle","includes","_jsx","HvInput","disableClear","style","theme","typography","title3","input","inputContainer","inputBorderContainer","inputRoot","onKeyDown","event","key","preventDefault","stopPropagation","required","status","validationState","value","padStart","inputProps","autoComplete","SubtractTimeIcon"],"mappings":";;;;;;;;AAsBO,MAAMA,OAAOA,CAAC;AAAA,EACnBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAaC;AAAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AACS,MAAM;AACT,QAAA;AAAA,IAAEC;AAAAA,MAAYC,YAAW,WAAA;AACzB,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,EAAST,IAAAA;AACjBC,QAAAA,cAAcC,mBAAmBF,QAAQC;AAE/C,yCACE,OAAA;AAAA,IAAKS,WAAWJ,QAAQK;AAAAA,IAAKC,WAC1BJ,SAAS,4CAAcK,gBAAAA,UAAW;AAAA,MAACC,SAASV;AAAAA,IAAQ,CAAA,GACpDI,SAAS,4CAAa,OAAA;AAAA,MAAKE,WAAWJ,QAAQS;AAAAA,MAAUH,UAAEH;AAAAA,IAAU,CAAA,GACpED,SAAS,8CACPQ,aAAAA,gBAAc;AAAA,MAACN,WAAWJ,QAAQW;AAAAA,MAAcH,SAASV;AAAAA,MAAMQ,UAC7DH;AAAAA,IAAAA,CACa,GAEjB,CAAC,QAAQ,UAAU,QAAQ,EAAES,SAASV,IAAI,KACzCW,2BAAAA,IAACC,eAAO;AAAA,MACNtB;AAAAA,MACAuB,cAAY;AAAA,MACZC,OAAO;AAAA,QACL,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,MACtB;AAAA,MACAnB,SAAS;AAAA,QACPoB,OAAOpB,QAAQoB;AAAAA,QACff,MAAML,QAAQqB;AAAAA,QACdC,sBAAsBtB,QAAQsB;AAAAA,QAC9BC,WAAWvB,QAAQuB;AAAAA,MACrB;AAAA,MACAC,WAAYC,CAAU,UAAA;AACfA,YAAAA,MAAwBC,QAAQ,SAAS;AAC5CD,gBAAME,eAAe;AACrBF,gBAAMG,gBAAgB;AAAA,QACxB;AAAA,MACF;AAAA,MACAC,UAAQ;AAAA,MACRC,QAAQrC,MAAMsC;AAAAA,MACdC,OAAO7B,KAAK8B,SAAS,GAAG,GAAG;AAAA,MAC3BpC;AAAAA,MACAF;AAAAA,MACAuC,YAAY;AAAA,QAAEC,cAAc;AAAA,QAAOjC,MAAM;AAAA,MAAS;AAAA,IACnD,CAAA,GAEFA,SAAS,4CAAckC,gBAAAA,YAAgB;AAAA,MAAC5B,SAAST;AAAAA,IAAAA,CAAQ,CAAC;AAAA,EAAA,CACxD;AAET;;"}

package/dist/cjs/components/TimePicker/Unit/Unit.styles.cjs

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const styles = {
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvTimePickerUnit", {
   root: {
     display: "flex",
     flexDirection: "column",
@@ -51,6 +55,7 @@ const styles = {
   inputBorderContainer: {
     top: 40
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Unit.styles.cjs.map

package/dist/cjs/components/TimePicker/Unit/Unit.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Unit.styles.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles = {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    textAlign: \"center\",\n    ...theme.typography.sTitle,\n  },\n\n  separator: {\n    width: 8,\n  },\n\n  periodToggle: {\n    height: 40,\n    width: 40,\n  },\n\n  element: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: 40,\n    width: 40,\n  },\n\n  input: {\n    ...theme.typography.sTitle,\n    fontWeight: 600,\n    textAlign: \"center\",\n    height: 40,\n    width: 40,\n    padding: 0,\n    margin: 0,\n    \"&::placeholder\": {\n      fontSize: 16,\n      fontWeight: 600,\n    },\n  },\n  inputRoot: {\n    width: 40,\n    height: 40,\n  },\n\n  subtractIcon: {\n    marginTop: theme.space.xs,\n  },\n  inputContainer: {\n    minWidth: 40,\n    maxWidth: 40,\n  },\n  inputBorderContainer: {\n    top: 40,\n  },\n} satisfies Record<string, CSSInterpolation>;\n"],"names":["styles","root","display","flexDirection","justifyContent","alignItems","textAlign","theme","typography","sTitle","separator","width","periodToggle","height","element","input","fontWeight","padding","margin","fontSize","inputRoot","subtractIcon","marginTop","space","xs","inputContainer","minWidth","maxWidth","inputBorderContainer","top"],"mappings":";;;AAGO,MAAMA,SAAS;AAAA,EACpBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,WAAW;AAAA,IACX,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,EACtB;AAAA,EAEAC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA,EAEAC,cAAc;AAAA,IACZC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAG,SAAS;AAAA,IACPZ,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZQ,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAI,OAAO;AAAA,IACL,GAAGR,YAAAA,MAAMC,WAAWC;AAAAA,IACpBO,YAAY;AAAA,IACZV,WAAW;AAAA,IACXO,QAAQ;AAAA,IACRF,OAAO;AAAA,IACPM,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,kBAAkB;AAAA,MAChBC,UAAU;AAAA,MACVH,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAI,WAAW;AAAA,IACTT,OAAO;AAAA,IACPE,QAAQ;AAAA,EACV;AAAA,EAEAQ,cAAc;AAAA,IACZC,WAAWf,YAAAA,MAAMgB,MAAMC;AAAAA,EACzB;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,EACP;AACF;;"}
+{"version":3,"file":"Unit.styles.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.styles.ts"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTimePickerUnit\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    textAlign: \"center\",\n    ...theme.typography.sTitle,\n  },\n\n  separator: {\n    width: 8,\n  },\n\n  periodToggle: {\n    height: 40,\n    width: 40,\n  },\n\n  element: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: 40,\n    width: 40,\n  },\n\n  input: {\n    ...theme.typography.sTitle,\n    fontWeight: 600,\n    textAlign: \"center\",\n    height: 40,\n    width: 40,\n    padding: 0,\n    margin: 0,\n    \"&::placeholder\": {\n      fontSize: 16,\n      fontWeight: 600,\n    },\n  },\n  inputRoot: {\n    width: 40,\n    height: 40,\n  },\n\n  subtractIcon: {\n    marginTop: theme.space.xs,\n  },\n  inputContainer: {\n    minWidth: 40,\n    maxWidth: 40,\n  },\n  inputBorderContainer: {\n    top: 40,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","justifyContent","alignItems","textAlign","theme","typography","sTitle","separator","width","periodToggle","height","element","input","fontWeight","padding","margin","fontSize","inputRoot","subtractIcon","marginTop","space","xs","inputContainer","minWidth","maxWidth","inputBorderContainer","top"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,WAAW;AAAA,IACX,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,EACtB;AAAA,EAEAC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA,EAEAC,cAAc;AAAA,IACZC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAG,SAAS;AAAA,IACPZ,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZQ,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAI,OAAO;AAAA,IACL,GAAGR,YAAAA,MAAMC,WAAWC;AAAAA,IACpBO,YAAY;AAAA,IACZV,WAAW;AAAA,IACXO,QAAQ;AAAA,IACRF,OAAO;AAAA,IACPM,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,kBAAkB;AAAA,MAChBC,UAAU;AAAA,MACVH,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAI,WAAW;AAAA,IACTT,OAAO;AAAA,IACPE,QAAQ;AAAA,EACV;AAAA,EAEAQ,cAAc;AAAA,IACZC,WAAWf,YAAAA,MAAMgB,MAAMC;AAAAA,EACzB;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,EACP;AACF,CAAC;;;"}

package/dist/cjs/index.cjs

@@ -37,7 +37,7 @@ const selectionListClasses = require("./components/SelectionList/selectionListCl
 const SelectionList = require("./components/SelectionList/SelectionList.cjs");
 const suggestionsClasses = require("./components/Forms/Suggestions/suggestionsClasses.cjs");
 const Suggestions = require("./components/Forms/Suggestions/Suggestions.cjs");
-const baseInputClasses = require("./components/BaseInput/baseInputClasses.cjs");
+const BaseInput_styles = require("./components/BaseInput/BaseInput.styles.cjs");
 const BaseInput = require("./components/BaseInput/BaseInput.cjs");
 const baseDropdownClasses = require("./components/BaseDropdown/baseDropdownClasses.cjs");
 const BaseDropdown = require("./components/BaseDropdown/BaseDropdown.cjs");
@@ -51,23 +51,23 @@ const badgeClasses = require("./components/Badge/badgeClasses.cjs");
 const Badge = require("./components/Badge/Badge.cjs");
 const buttonClasses = require("./components/Button/buttonClasses.cjs");
 const Button = require("./components/Button/Button.cjs");
-const cardClasses = require("./components/Card/cardClasses.cjs");
+const Card_styles = require("./components/Card/Card.styles.cjs");
 const Card = require("./components/Card/Card.cjs");
-const headerClasses = require("./components/Card/Header/headerClasses.cjs");
+const Header_styles = require("./components/Card/Header/Header.styles.cjs");
 const Header = require("./components/Card/Header/Header.cjs");
-const contentClasses = require("./components/Card/Content/contentClasses.cjs");
+const Content_styles = require("./components/Card/Content/Content.styles.cjs");
 const Content = require("./components/Card/Content/Content.cjs");
-const mediaClasses = require("./components/Card/Media/mediaClasses.cjs");
+const Media_styles = require("./components/Card/Media/Media.styles.cjs");
 const Media = require("./components/Card/Media/Media.cjs");
 const containerClasses = require("./components/Container/containerClasses.cjs");
 const Container = require("./components/Container/Container.cjs");
-const dialogClasses = require("./components/Dialog/dialogClasses.cjs");
 const titleClasses = require("./components/Dialog/Title/titleClasses.cjs");
 const Title = require("./components/Dialog/Title/Title.cjs");
-const contentClasses$1 = require("./components/Dialog/Content/contentClasses.cjs");
+const contentClasses = require("./components/Dialog/Content/contentClasses.cjs");
 const Content$1 = require("./components/Dialog/Content/Content.cjs");
 const actionsClasses = require("./components/Dialog/Actions/actionsClasses.cjs");
 const Actions = require("./components/Dialog/Actions/Actions.cjs");
+const Dialog_styles = require("./components/Dialog/Dialog.styles.cjs");
 const Dialog = require("./components/Dialog/Dialog.cjs");
 const emptyStateClasses = require("./components/EmptyState/emptyStateClasses.cjs");
 const EmptyState = require("./components/EmptyState/EmptyState.cjs");
@@ -75,7 +75,7 @@ const footerClasses = require("./components/Footer/footerClasses.cjs");
 const Footer = require("./components/Footer/Footer.cjs");
 const gridClasses = require("./components/Grid/gridClasses.cjs");
 const Grid = require("./components/Grid/Grid.cjs");
-const headerClasses$1 = require("./components/Header/headerClasses.cjs");
+const headerClasses = require("./components/Header/headerClasses.cjs");
 const Header$1 = require("./components/Header/Header.cjs");
 const actionsClasses$1 = require("./components/Header/Actions/actionsClasses.cjs");
 const Actions$1 = require("./components/Header/Actions/Actions.cjs");
@@ -123,7 +123,7 @@ const baseSwitchClasses = require("./components/BaseSwitch/baseSwitchClasses.cjs
 const BaseSwitch = require("./components/BaseSwitch/BaseSwitch.cjs");
 const checkBoxClasses = require("./components/CheckBox/checkBoxClasses.cjs");
 const CheckBox = require("./components/CheckBox/CheckBox.cjs");
-const inputClasses = require("./components/Input/inputClasses.cjs");
+const Input_styles = require("./components/Input/Input.styles.cjs");
 const Input = require("./components/Input/Input.cjs");
 const switchClasses = require("./components/Switch/switchClasses.cjs");
 const Switch = require("./components/Switch/Switch.cjs");
@@ -144,7 +144,7 @@ const Preview = require("./components/FileUploader/Preview/Preview.cjs");
 const fileClasses = require("./components/FileUploader/File/fileClasses.cjs");
 const File = require("./components/FileUploader/File/File.cjs");
 const FileUploader = require("./components/FileUploader/FileUploader.cjs");
-const dropDownMenuClasses = require("./components/DropDownMenu/dropDownMenuClasses.cjs");
+const DropDownMenu_styles = require("./components/DropDownMenu/DropDownMenu.styles.cjs");
 const DropDownMenu = require("./components/DropDownMenu/DropDownMenu.cjs");
 const Pagination_styles = require("./components/Pagination/Pagination.styles.cjs");
 const Pagination = require("./components/Pagination/Pagination.cjs");
@@ -179,9 +179,9 @@ const tableHeadClasses = require("./components/Table/TableHead/tableHeadClasses.
 const TableHead = require("./components/Table/TableHead/TableHead.cjs");
 const tableHeaderClasses = require("./components/Table/TableHeader/tableHeaderClasses.cjs");
 const TableHeader = require("./components/Table/TableHeader/TableHeader.cjs");
-const tableRowClasses = require("./components/Table/TableRow/tableRowClasses.cjs");
+const TableRow_styles = require("./components/Table/TableRow/TableRow.styles.cjs");
 const TableRow = require("./components/Table/TableRow/TableRow.cjs");
-const tableCellClasses = require("./components/Table/TableCell/tableCellClasses.cjs");
+const TableCell_styles = require("./components/Table/TableCell/TableCell.styles.cjs");
 const TableCell = require("./components/Table/TableCell/TableCell.cjs");
 const useTableStyles = require("./components/Table/hooks/useTableStyles.cjs");
 const useSortBy = require("./components/Table/hooks/useSortBy.cjs");
@@ -214,7 +214,7 @@ const calendarHeaderClasses = require("./components/Calendar/CalendarHeader/cale
 const CalendarHeader = require("./components/Calendar/CalendarHeader/CalendarHeader.cjs");
 const verticalNavigationClasses = require("./components/VerticalNavigation/verticalNavigationClasses.cjs");
 const VerticalNavigation = require("./components/VerticalNavigation/VerticalNavigation.cjs");
-const headerClasses$2 = require("./components/VerticalNavigation/Header/headerClasses.cjs");
+const headerClasses$1 = require("./components/VerticalNavigation/Header/headerClasses.cjs");
 const Header$2 = require("./components/VerticalNavigation/Header/Header.cjs");
 const actionClasses$1 = require("./components/VerticalNavigation/Actions/actionClasses.cjs");
 const actionsClasses$2 = require("./components/VerticalNavigation/Actions/actionsClasses.cjs");
@@ -231,27 +231,27 @@ const TreeViewItem = require("./components/VerticalNavigation/TreeView/TreeViewI
 const VerticalNavigationContext = require("./components/VerticalNavigation/VerticalNavigationContext.cjs");
 const sliderClasses = require("./components/Slider/sliderClasses.cjs");
 const Slider = require("./components/Slider/Slider.cjs");
-const filterGroupClasses = require("./components/FilterGroup/filterGroupClasses.cjs");
+const FilterGroup_styles = require("./components/FilterGroup/FilterGroup.styles.cjs");
 const FilterGroup = require("./components/FilterGroup/FilterGroup.cjs");
+const DatePicker_styles = require("./components/DatePicker/DatePicker.styles.cjs");
 const DatePicker = require("./components/DatePicker/DatePicker.cjs");
-const scrollToVerticalClasses = require("./components/ScrollTo/Vertical/scrollToVerticalClasses.cjs");
-const verticalScrollListItemClasses = require("./components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs");
+const VerticalScrollListItem_styles = require("./components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs");
+const ScrollToVertical_styles = require("./components/ScrollTo/Vertical/ScrollToVertical.styles.cjs");
 const ScrollToVertical = require("./components/ScrollTo/Vertical/ScrollToVertical.cjs");
-const scrollToHorizontalClasses = require("./components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs");
-const horizontalScrollListItemClasses = require("./components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs");
+const HorizontalScrollListItem_styles = require("./components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs");
+const ScrollToHorizontal_styles = require("./components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs");
 const ScrollToHorizontal = require("./components/ScrollTo/Horizontal/ScrollToHorizontal.cjs");
 const useScrollTo = require("./components/ScrollTo/useScrollTo.cjs");
-const inlineEditorClasses = require("./components/InlineEditor/inlineEditorClasses.cjs");
+const InlineEditor_styles = require("./components/InlineEditor/InlineEditor.styles.cjs");
 const InlineEditor = require("./components/InlineEditor/InlineEditor.cjs");
 const timeAgoClasses = require("./components/TimeAgo/timeAgoClasses.cjs");
 const TimeAgo = require("./components/TimeAgo/TimeAgo.cjs");
 const QueryBuilder_styles = require("./components/QueryBuilder/QueryBuilder.styles.cjs");
 const QueryBuilder = require("./components/QueryBuilder/QueryBuilder.cjs");
-const colorPickerClasses = require("./components/ColorPicker/colorPickerClasses.cjs");
+const ColorPicker_styles = require("./components/ColorPicker/ColorPicker.styles.cjs");
 const ColorPicker = require("./components/ColorPicker/ColorPicker.cjs");
 const Carousel_styles = require("./components/Carousel/Carousel.styles.cjs");
 const Carousel = require("./components/Carousel/Carousel.cjs");
-const CarouselSlide_styles = require("./components/Carousel/CarouselSlide/CarouselSlide.styles.cjs");
 const CarouselSlide = require("./components/Carousel/CarouselSlide/CarouselSlide.cjs");
 const TimePicker_styles = require("./components/TimePicker/TimePicker.styles.cjs");
 const TimePicker = require("./components/TimePicker/TimePicker.cjs");
@@ -347,7 +347,7 @@ exports.selectionListClasses = selectionListClasses.default;
 exports.HvSelectionList = SelectionList.HvSelectionList;
 exports.suggestionsClasses = suggestionsClasses.default;
 exports.HvSuggestions = Suggestions.HvSuggestions;
-exports.baseInputClasses = baseInputClasses.default;
+exports.baseInputClasses = BaseInput_styles.staticClasses;
 exports.HvBaseInput = BaseInput.HvBaseInput;
 exports.baseDropdownClasses = baseDropdownClasses.default;
 exports.HvBaseDropdown = BaseDropdown.HvBaseDropdown;
@@ -361,23 +361,23 @@ exports.badgeClasses = badgeClasses.default;
 exports.HvBadge = Badge.HvBadge;
 exports.buttonClasses = buttonClasses.default;
 exports.HvButton = Button.HvButton;
-exports.cardClasses = cardClasses.default;
+exports.cardClasses = Card_styles.staticClasses;
 exports.HvCard = Card.HvCard;
-exports.cardHeaderClasses = headerClasses.default;
+exports.cardHeaderClasses = Header_styles.staticClasses;
 exports.HvCardHeader = Header.HvCardHeader;
-exports.cardContentClasses = contentClasses.default;
+exports.cardContentClasses = Content_styles.staticClasses;
 exports.HvCardContent = Content.HvCardContent;
-exports.cardMediaClasses = mediaClasses.default;
+exports.cardMediaClasses = Media_styles.staticClasses;
 exports.HvCardMedia = Media.HvCardMedia;
 exports.containerClasses = containerClasses.default;
 exports.HvContainer = Container.HvContainer;
-exports.dialogClasses = dialogClasses.default;
 exports.dialogTitleClasses = titleClasses.default;
 exports.HvDialogTitle = Title.HvDialogTitle;
-exports.dialogContentClasses = contentClasses$1.default;
+exports.dialogContentClasses = contentClasses.default;
 exports.HvDialogContent = Content$1.HvDialogContent;
 exports.dialogActionClasses = actionsClasses.default;
 exports.HvDialogActions = Actions.HvDialogActions;
+exports.dialogClasses = Dialog_styles.staticClasses;
 exports.HvDialog = Dialog.HvDialog;
 exports.emptyStateClasses = emptyStateClasses.default;
 exports.HvEmptyState = EmptyState.HvEmptyState;
@@ -385,7 +385,7 @@ exports.footerClasses = footerClasses.default;
 exports.HvFooter = Footer.HvFooter;
 exports.gridClasses = gridClasses.default;
 exports.HvGrid = Grid.HvGrid;
-exports.headerClasses = headerClasses$1.default;
+exports.headerClasses = headerClasses.default;
 exports.HvHeader = Header$1.HvHeader;
 exports.headerActionsClasses = actionsClasses$1.default;
 exports.HvHeaderActions = Actions$1.HvHeaderActions;
@@ -434,7 +434,7 @@ exports.baseSwitchClasses = baseSwitchClasses.default;
 exports.HvBaseSwitch = BaseSwitch.HvBaseSwitch;
 exports.checkBoxClasses = checkBoxClasses.default;
 exports.HvCheckBox = CheckBox.HvCheckBox;
-exports.inputClasses = inputClasses.default;
+exports.inputClasses = Input_styles.staticClasses;
 exports.HvInput = Input.HvInput;
 exports.switchClasses = switchClasses.default;
 exports.HvSwitch = Switch.HvSwitch;
@@ -455,8 +455,8 @@ exports.HvFileUploaderPreview = Preview.HvFileUploaderPreview;
 exports.fileClasses = fileClasses.default;
 exports.HvFile = File.HvFile;
 exports.HvFileUploader = FileUploader.HvFileUploader;
-exports.dropDownMenuClasses = dropDownMenuClasses.default;
-exports.HvDropDownMenu = DropDownMenu.default;
+exports.dropDownMenuClasses = DropDownMenu_styles.staticClasses;
+exports.HvDropDownMenu = DropDownMenu.HvDropDownMenu;
 exports.paginationClasses = Pagination_styles.staticClasses;
 exports.HvPagination = Pagination.HvPagination;
 exports.actionsGenericClasses = actionsGenericClasses.default;
@@ -491,9 +491,9 @@ exports.tableHeadClasses = tableHeadClasses.default;
 exports.HvTableHead = TableHead.HvTableHead;
 exports.tableHeaderClasses = tableHeaderClasses.default;
 exports.HvTableHeader = TableHeader.HvTableHeader;
-exports.tableRowClasses = tableRowClasses.default;
+exports.tableRowClasses = TableRow_styles.staticClasses;
 exports.HvTableRow = TableRow.HvTableRow;
-exports.tableCellClasses = tableCellClasses.default;
+exports.tableCellClasses = TableCell_styles.staticClasses;
 exports.HvTableCell = TableCell.HvTableCell;
 exports.getHeaderFooterPropsHook = useTableStyles.getHeaderFooterPropsHook;
 exports.useHvTableStyles = useTableStyles.default;
@@ -560,7 +560,7 @@ exports.calendarHeaderClasses = calendarHeaderClasses.default;
 exports.HvCalendarHeader = CalendarHeader.HvCalendarHeader;
 exports.verticalNavigationClasses = verticalNavigationClasses.default;
 exports.HvVerticalNavigation = VerticalNavigation.HvVerticalNavigation;
-exports.verticalNavigationHeaderClasses = headerClasses$2.default;
+exports.verticalNavigationHeaderClasses = headerClasses$1.default;
 exports.HvVerticalNavigationHeader = Header$2.HvVerticalNavigationHeader;
 exports.actionClasses = actionClasses$1.default;
 exports.actionsClasses = actionsClasses$2.default;
@@ -577,27 +577,27 @@ exports.HvVerticalNavigationTreeViewItem = TreeViewItem.HvVerticalNavigationTree
 exports.VerticalNavigationContext = VerticalNavigationContext.VerticalNavigationContext;
 exports.sliderClasses = sliderClasses.default;
 exports.HvSlider = Slider.HvSlider;
-exports.filterGroupClasses = filterGroupClasses.default;
+exports.filterGroupClasses = FilterGroup_styles.staticClasses;
 exports.HvFilterGroup = FilterGroup.HvFilterGroup;
+exports.datePickerClasses = DatePicker_styles.staticClasses;
 exports.HvDatePicker = DatePicker.HvDatePicker;
-exports.scrollToVerticalClasses = scrollToVerticalClasses.default;
-exports.verticalScrollListItemClasses = verticalScrollListItemClasses.default;
+exports.verticalScrollListItemClasses = VerticalScrollListItem_styles.staticClasses;
+exports.scrollToVerticalClasses = ScrollToVertical_styles.staticClasses;
 exports.HvScrollToVertical = ScrollToVertical.HvScrollToVertical;
-exports.scrollToHorizontalClasses = scrollToHorizontalClasses.default;
-exports.horizontalScrollListItemClasses = horizontalScrollListItemClasses.default;
+exports.horizontalScrollListItemClasses = HorizontalScrollListItem_styles.staticClasses;
+exports.scrollToHorizontalClasses = ScrollToHorizontal_styles.staticClasses;
 exports.HvScrollToHorizontal = ScrollToHorizontal.HvScrollToHorizontal;
 exports.useScrollTo = useScrollTo.useScrollTo;
-exports.inlineEditorClasses = inlineEditorClasses.default;
+exports.inlineEditorClasses = InlineEditor_styles.staticClasses;
 exports.HvInlineEditor = InlineEditor.HvInlineEditor;
 exports.timeAgoClasses = timeAgoClasses.default;
 exports.HvTimeAgo = TimeAgo.HvTimeAgo;
 exports.queryBuilderClasses = QueryBuilder_styles.staticClasses;
 exports.HvQueryBuilder = QueryBuilder.HvQueryBuilder;
-exports.colorPickerClasses = colorPickerClasses.default;
+exports.colorPickerClasses = ColorPicker_styles.staticClasses;
 exports.HvColorPicker = ColorPicker.HvColorPicker;
-exports.carouselClasses = Carousel_styles.carouselClasses;
+exports.carouselClasses = Carousel_styles.staticClasses;
 exports.HvCarousel = Carousel.HvCarousel;
-exports.cc = CarouselSlide_styles.cc;
 exports.HvCarouselSlide = CarouselSlide.HvCarouselSlide;
 exports.timePickerClasses = TimePicker_styles.staticClasses;
 exports.HvTimePicker = TimePicker.HvTimePicker;