npm - @hitachivantara/uikit-react-core - Versions diffs - 5.28.0 → 5.29.0 - Mend

@hitachivantara/uikit-react-core 5.28.0 → 5.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (446) hide show

package/dist/cjs/components/Calendar/SingleCalendar/CalendarCell.cjs CHANGED Viewed

@@ -4,22 +4,24 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const utils = require("../utils.cjs");
 const CalendarCell_styles = require("./CalendarCell.styles.cjs");
+const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const Typography = require("../../Typography/Typography.cjs");
-const HvCalendarCell = ({
-  classes: classesProp,
-  onChange,
-  onKeyDown,
-  calendarValue,
-  firstDayOfCurrentMonth,
-  value,
-  isDateSelectionMode,
-  today,
-  locale,
-  minimumDate,
-  maximumDate,
-  rangeMode = false,
-  ...others
-}) => {
+const HvCalendarCell = (props) => {
+  const {
+    classes: classesProp,
+    onChange,
+    onKeyDown,
+    calendarValue,
+    firstDayOfCurrentMonth,
+    value,
+    isDateSelectionMode,
+    today,
+    locale,
+    minimumDate,
+    maximumDate,
+    rangeMode = false,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvCalendarCell", props);
   const {
     classes,
     cx

package/dist/cjs/components/Calendar/SingleCalendar/CalendarCell.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarCell.cjs","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import { SyntheticEvent, useRef } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n isSameDay,\n isSameMonth,\n dateInProvidedValueRange,\n checkIfDateIsDisabled,\n isDateRangeProp,\n} from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport CalendarModel from \"../model\";\n\nimport { staticClasses, useClasses } from \"./CalendarCell.styles\";\n\nexport { staticClasses as calendarCellClasses };\n\nexport type HvCalendarCellClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarCell = ({\n classes: classesProp,\n onChange,\n onKeyDown,\n calendarValue,\n firstDayOfCurrentMonth,\n value,\n isDateSelectionMode,\n today,\n locale,\n minimumDate,\n maximumDate,\n rangeMode = false,\n ...others\n}: ~~HvCalendarCellProps)~~ => {\n const { classes, cx } = useClasses(classesProp);\n\n const buttonEl = useRef<HTMLButtonElement>(null);\n\n const startDate = isDateRangeProp(calendarValue)\n ? calendarValue.startDate\n : undefined;\n const endDate = isDateRangeProp(calendarValue)\n ? calendarValue.endDate\n : undefined;\n const isCellToday = isSameDay(value, today);\n const isCellSelected = isSameDay(calendarValue, value);\n const inMonth = isSameMonth(value, firstDayOfCurrentMonth);\n const isCellAfterStartingDate =\n rangeMode && value && startDate ? value >= startDate : false;\n const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;\n const isDateInSelectionRange =\n calendarValue && rangeMode\n ? dateInProvidedValueRange(value, calendarValue)\n : false;\n const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);\n const startBookend = isSameDay(startDate, value);\n const endBookend = isSameDay(endDate, value);\n const isSelecting = isDateSelectionMode && isCellAfterStartingDate;\n\n const handleClick = (event: SyntheticEvent) => {\n if (value) {\n onChange?.(event, value);\n if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());\n }\n };\n\n const handleKeyDown = (event) => {\n onKeyDown?.(event);\n };\n\n const renderDate = () => (\n <button\n ref={buttonEl}\n type=\"button\"\n className={cx(classes.cellContainer, {\n [classes.focusSelection]: inMonth,\n })}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n disabled={isDateDisabled \|\| !inMonth}\n data-in-month={inMonth}\n {...others}\n >\n <HvTypography\n variant={isCellToday ? \"label\" : \"body\"}\n className={cx(classes.calendarDate, {\n [classes.calendarDateSelected]: inMonth && isCellSelected,\n [classes.calendarDateNotInMonth]: !inMonth,\n [classes.calendarDateInSelectionRange]:\n inMonth && rangeMode && isDateInSelectionRange,\n [classes.calendarDateDisabled]: isDateDisabled,\n [classes.startBookend]:\n inMonth &&\n ((startBookend && rangeMode) \|\|\n (isCellStartingDate && isDateSelectionMode)),\n [classes.endBookend]: inMonth && endBookend && rangeMode,\n })}\n >\n {value && value.getDate()}\n </HvTypography>\n </button>\n );\n\n return (\n <div\n className={cx(classes.dateWrapper, {\n [classes.cellsInRange]: inMonth && rangeMode && isSelecting,\n [classes.cellsOutsideRange]: rangeMode && !isSelecting,\n })}\n data-calendar-cell=\"calendarCell\"\n >\n {renderDate()}\n </div>\n );\n};\n\nexport interface HvCalendarCellProps {\n /*\n A Jss Object used to override or extend the component styles.\n /\n classes?: HvCalendarCellClasses;\n /\n Identifier.\n /\n id?: string;\n /\n The text to be shown on the main part of the header.\n /\n calendarValue?: string \| Date \| DateRangeProp;\n /\n The text to be shown on the main part of the header.\n /\n value?: Date;\n /\n Locale to be used by the calendar.\n /\n locale?: string;\n /\n Callback to define the input date.\n /\n onChange?: (event: SyntheticEvent, value: Date \| DateRangeProp) => void;\n /\n Callback to handle input onFocus.\n */\n onFocus?: React.FocusEventHandler<any>;\n\n calendarModel?: CalendarModel;\n onKeyDown?: (event: KeyboardEvent) => void;\n\n today?: Date;\n minimumDate?: Date;\n maximumDate?: Date;\n firstDayOfCurrentMonth?: Date;\n isDateSelectionMode?: boolean;\n rangeMode?: boolean;\n tabIndex?: number;\n}\n\nexport default HvCalendarCell;\n"],"names":["HvCalendarCell","classes","classesProp","onChange","onKeyDown","calendarValue","firstDayOfCurrentMonth","value","isDateSelectionMode","today","locale","minimumDate","maximumDate","rangeMode","others","cx","useClasses","buttonEl","useRef","startDate","isDateRangeProp","undefined","endDate","isCellToday","isSameDay","isCellSelected","inMonth","isSameMonth","isCellAfterStartingDate","isCellStartingDate","isDateInSelectionRange","dateInProvidedValueRange","isDateDisabled","checkIfDateIsDisabled","startBookend","endBookend","isSelecting","handleClick","event","current","setTimeout","focus","handleKeyDown","renderDate","jsx","cellContainer","focusSelection","HvTypography","calendarDate","calendarDateSelected","calendarDateNotInMonth","calendarDateInSelectionRange","calendarDateDisabled","getDate","dateWrapper","cellsInRange","cellsOutsideRange"],"mappings":"~~;;;;;;;AAoBO~~,~~MAAMA~~,iBAAiBA,~~CAAC~~;AAAA,~~EAC7BC~~,SAASC;AAAAA,~~EACTC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~,YAAY;AAAA,~~EACZ~~,GAAGC;~~AACgB~~,~~MAAM~~;~~AACnB~~,QAAA;AAAA,~~IAAEb~~;AAAAA,~~IAASc~~;AAAAA,EAAAA,IAAOC,oBAAAA,~~WAAWd~~,WAAW;~~AAExCe~~,QAAAA,WAAWC,aAA0B,IAAI;AAE/C,QAAMC,YAAYC,MAAAA,~~gBAAgBf~~,aAAa,IAC3CA,~~cAAcc~~,YACdE;AACJ,QAAMC,UAAUF,MAAAA,~~gBAAgBf~~,aAAa,IACzCA,~~cAAciB~~,UACdD;AACEE,QAAAA,cAAcC,MAAAA,~~UAAUjB~~,OAAOE,KAAK;~~AACpCgB~~,QAAAA,iBAAiBD,MAAAA,~~UAAUnB~~,eAAeE,KAAK;AAC/~~CmB~~,QAAAA,UAAUC,MAAAA,~~YAAYpB~~,OAAOD,sBAAsB;AACzD,~~QAAMsB~~,~~0BACJf~~,aAAaN,~~SAASY~~,~~YAAYZ~~,~~SAASY~~,YAAY;AACzD,QAAMU,~~qBAAqBhB~~,~~YAAYW~~,MAAAA,~~UAAUjB~~,~~OAAOY~~,SAAS,IAAI;AACrE,QAAMW,~~yBACJzB~~,iBAAiBQ,~~YACbkB~~,~~MAAyBxB~~,yBAAAA,OAAOF,aAAa,IAC7C;AACN,~~QAAM2B~~,iBAAiBC,MAAAA,~~sBAAsB1B~~,OAAOI,aAAaC,WAAW;~~AACtEsB~~,QAAAA,eAAeV,MAAAA,UAAUL,~~WAAWZ~~,KAAK;~~AACzC4B~~,QAAAA,aAAaX,MAAAA,UAAUF,~~SAASf~~,KAAK;AAC3C,~~QAAM6B~~,~~cAAc5B~~,~~uBAAuBoB~~;AAErCS,QAAAA,cAAcA,CAACC,UAA0B;AAC7C,~~QAAI/B~~,OAAO;AACTJ,~~2CAAWmC~~,~~OAAO/B~~;AAClB,~~UAAIU~~,SAASsB;AAASC,mBAAW,MAAA;;AAAMvB,4DAAUsB,YAAVtB,mBAAmBwB;AAAAA,SAAO;AAAA,IACnE;AAAA,EAAA;AAGF,QAAMC,gBAAiBJ,CAAU,UAAA;AAC/~~BlC~~,~~2CAAYkC~~;AAAAA,EAAK;AAGbK,QAAAA,aAAaA,MACjBC,2BAAAA,IAAC,UACC,EAAA,KAAK3B,UACL,MAAK,UACL,WAAWF,~~GAAGd~~,~~QAAQ4C~~,eAAe;AAAA,IACnC,~~CAAC5C~~,~~QAAQ6C~~,cAAc,GAAGpB;AAAAA,EAC3B,CAAA,GACD,SAASW,aACT,WAAWK,eACX,UAAUV,kBAAkB,CAACN,SAC7B,iBAAeA,SACf,~~GAAIZ~~,QAEJ,~~UAAC8B~~,+BAAAG,WAAAA,cAAA,EACC,SAASxB,cAAc,UAAU,QACjC,WAAWR,~~GAAGd~~,~~QAAQ+C~~,cAAc;AAAA,IAClC,~~CAAC/C~~,~~QAAQgD~~,oBAAoB,GAAGvB,WAAWD;AAAAA,IAC3C,~~CAACxB~~,~~QAAQiD~~,sBAAsB,GAAG,CAACxB;AAAAA,IACnC,~~CAACzB~~,~~QAAQkD~~,4BAA4B,GACnCzB,~~WAAWb~~,~~aAAaiB~~;AAAAA,IAC1B,~~CAAC7B~~,~~QAAQmD~~,oBAAoB,GAAGpB;AAAAA,IAChC,~~CAAC/B~~,~~QAAQiC~~,YAAY,GACnBR,YACEQ,~~gBAAgBrB~~,~~aACfgB~~,~~sBAAsBrB~~;AAAAA,IAC3B,CAACP,~~QAAQkC~~,UAAU,GAAGT,WAAWS,~~cAActB~~;AAAAA,EAAAA,CAChD,GAEAN,UAAAA,SAASA,~~MAAM8C~~,WAClB,EACF,CAAA;AAGF,SACGT,2BAAAA,IAAA,OAAA,EACC,WAAW7B,~~GAAGd~~,~~QAAQqD~~,aAAa;AAAA,IACjC,~~CAACrD~~,~~QAAQsD~~,YAAY,GAAG7B,~~WAAWb~~,~~aAAauB~~;AAAAA,IAChD,~~CAACnC~~,~~QAAQuD~~,iBAAiB,~~GAAG3C~~,aAAa,~~CAACuB~~;AAAAA,EAAAA,CAC5C,GACD,sBAAmB,gBAElBO,uBACH,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"CalendarCell.cjs","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import { SyntheticEvent, useRef } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport {\n isSameDay,\n isSameMonth,\n dateInProvidedValueRange,\n checkIfDateIsDisabled,\n isDateRangeProp,\n} from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport CalendarModel from \"../model\";\n\nimport { staticClasses, useClasses } from \"./CalendarCell.styles\";\n\nexport { staticClasses as calendarCellClasses };\n\nexport type HvCalendarCellClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarCell = (props: HvCalendarCellProps) => {\n const {\n classes: classesProp,\n onChange,\n onKeyDown,\n calendarValue,\n firstDayOfCurrentMonth,\n value,\n isDateSelectionMode,\n today,\n locale,\n minimumDate,\n maximumDate,\n rangeMode = false,\n ...others\n } = useDefaultProps(\"HvCalendarCell\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const buttonEl = useRef<HTMLButtonElement>(null);\n\n const startDate = isDateRangeProp(calendarValue)\n ? calendarValue.startDate\n : undefined;\n const endDate = isDateRangeProp(calendarValue)\n ? calendarValue.endDate\n : undefined;\n const isCellToday = isSameDay(value, today);\n const isCellSelected = isSameDay(calendarValue, value);\n const inMonth = isSameMonth(value, firstDayOfCurrentMonth);\n const isCellAfterStartingDate =\n rangeMode && value && startDate ? value >= startDate : false;\n const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;\n const isDateInSelectionRange =\n calendarValue && rangeMode\n ? dateInProvidedValueRange(value, calendarValue)\n : false;\n const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);\n const startBookend = isSameDay(startDate, value);\n const endBookend = isSameDay(endDate, value);\n const isSelecting = isDateSelectionMode && isCellAfterStartingDate;\n\n const handleClick = (event: SyntheticEvent) => {\n if (value) {\n onChange?.(event, value);\n if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());\n }\n };\n\n const handleKeyDown = (event) => {\n onKeyDown?.(event);\n };\n\n const renderDate = () => (\n <button\n ref={buttonEl}\n type=\"button\"\n className={cx(classes.cellContainer, {\n [classes.focusSelection]: inMonth,\n })}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n disabled={isDateDisabled \|\| !inMonth}\n data-in-month={inMonth}\n {...others}\n >\n <HvTypography\n variant={isCellToday ? \"label\" : \"body\"}\n className={cx(classes.calendarDate, {\n [classes.calendarDateSelected]: inMonth && isCellSelected,\n [classes.calendarDateNotInMonth]: !inMonth,\n [classes.calendarDateInSelectionRange]:\n inMonth && rangeMode && isDateInSelectionRange,\n [classes.calendarDateDisabled]: isDateDisabled,\n [classes.startBookend]:\n inMonth &&\n ((startBookend && rangeMode) \|\|\n (isCellStartingDate && isDateSelectionMode)),\n [classes.endBookend]: inMonth && endBookend && rangeMode,\n })}\n >\n {value && value.getDate()}\n </HvTypography>\n </button>\n );\n\n return (\n <div\n className={cx(classes.dateWrapper, {\n [classes.cellsInRange]: inMonth && rangeMode && isSelecting,\n [classes.cellsOutsideRange]: rangeMode && !isSelecting,\n })}\n data-calendar-cell=\"calendarCell\"\n >\n {renderDate()}\n </div>\n );\n};\n\nexport interface HvCalendarCellProps {\n /*\n A Jss Object used to override or extend the component styles.\n /\n classes?: HvCalendarCellClasses;\n /\n Identifier.\n /\n id?: string;\n /\n The text to be shown on the main part of the header.\n /\n calendarValue?: string \| Date \| DateRangeProp;\n /\n The text to be shown on the main part of the header.\n /\n value?: Date;\n /\n Locale to be used by the calendar.\n /\n locale?: string;\n /\n Callback to define the input date.\n /\n onChange?: (event: SyntheticEvent, value: Date \| DateRangeProp) => void;\n /\n Callback to handle input onFocus.\n */\n onFocus?: React.FocusEventHandler<any>;\n\n calendarModel?: CalendarModel;\n onKeyDown?: (event: KeyboardEvent) => void;\n\n today?: Date;\n minimumDate?: Date;\n maximumDate?: Date;\n firstDayOfCurrentMonth?: Date;\n isDateSelectionMode?: boolean;\n rangeMode?: boolean;\n tabIndex?: number;\n}\n\nexport default HvCalendarCell;\n"],"names":["HvCalendarCell","props","classes","classesProp","onChange","onKeyDown","calendarValue","firstDayOfCurrentMonth","value","isDateSelectionMode","today","locale","minimumDate","maximumDate","rangeMode","others","useDefaultProps","cx","useClasses","buttonEl","useRef","startDate","isDateRangeProp","undefined","endDate","isCellToday","isSameDay","isCellSelected","inMonth","isSameMonth","isCellAfterStartingDate","isCellStartingDate","isDateInSelectionRange","dateInProvidedValueRange","isDateDisabled","checkIfDateIsDisabled","startBookend","endBookend","isSelecting","handleClick","event","current","setTimeout","focus","handleKeyDown","renderDate","jsx","cellContainer","focusSelection","HvTypography","calendarDate","calendarDateSelected","calendarDateNotInMonth","calendarDateInSelectionRange","calendarDateDisabled","getDate","dateWrapper","cellsInRange","cellsOutsideRange"],"mappings":"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"}

package/dist/cjs/components/Calendar/SingleCalendar/CalendarCell.styles.cjs CHANGED Viewed

@@ -4,7 +4,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../../utils/focusUtils.cjs");
 const classes = require("../../../utils/classes.cjs");
 const hover = {
-  backgroundColor: uikitStyles.theme.calendar.cellHoverColor,
+  backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
   cursor: "pointer"
 };
 const {

package/dist/cjs/components/Calendar/SingleCalendar/CalendarCell.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarCell.styles.cjs","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hover = {\n backgroundColor: theme.~~calendar~~.~~cellHoverColor~~,\n cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarCell\", {\n cellContainer: {\n cursor: \"pointer\",\n border: 0,\n padding: 0,\n margin: 0,\n backgroundColor: \"transparent\",\n },\n focusSelection: {\n \"&:hover\": {\n ...hover,\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...hover,\n ...outlineStyles,\n },\n },\n calendarDate: {\n display: \"flex\",\n justifyContent: \"center\",\n flexDirection: \"column\",\n textAlign: \"center\",\n height: \"40px\",\n width: \"40px\",\n },\n calendarDateSelected: {\n backgroundColor: theme.colors.atmo3,\n color: theme.colors.secondary,\n \"&:hover\": {\n ...hover,\n },\n },\n calendarDateNotInMonth: {\n color: theme.colors.secondary_60,\n cursor: \"not-allowed\",\n },\n calendarDateInSelectionRange: {\n backgroundColor: theme.colors.atmo3,\n },\n calendarDateDisabled: {\n color: theme.colors.secondary_60,\n cursor: \"no-drop\",\n },\n startBookend: {\n borderLeft: `1px solid ${theme.colors.secondary}`,\n },\n endBookend: {\n borderRight: `1px solid ${theme.colors.secondary}`,\n },\n dateWrapper: {\n width: \"40px\",\n height: \"40px\",\n },\n cellsInRange: {\n \"&:focus\": {\n outside: \"none\",\n },\n },\n cellsOutsideRange: {\n \"&:focus\": {\n outside: \"none\",\n },\n },\n});\n"],"names":["hover","backgroundColor","theme","~~calendar~~","~~cellHoverColor~~","cursor","staticClasses","useClasses","createClasses","cellContainer","border","padding","margin","focusSelection","outline","outlineStyles","calendarDate","display","justifyContent","flexDirection","textAlign","height","width","calendarDateSelected","~~colors","~~atmo3","color","secondary","calendarDateNotInMonth","secondary_60","calendarDateInSelectionRange","calendarDateDisabled","startBookend","borderLeft","endBookend","borderRight","dateWrapper","cellsInRange","outside","cellsOutsideRange"],"mappings":";;;;;AAMA,MAAMA,QAAQ;AAAA,EACZC,iBAAiBC,YAAAA,MAAMC,~~SAASC~~;AAAAA,~~EAChCC~~,QAAQ;AACV;AAEa,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,eAAe;AAAA,IACbJ,QAAQ;AAAA,IACRK,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRX,iBAAiB;AAAA,EACnB;AAAA,EACAY,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,GAAGb;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTc,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGd;AAAAA,MACH,GAAGe,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,eAAe;AAAA,IACfC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,EACT;AAAA,EACAC,sBAAsB;AAAA,IACpBtB,iBAAiBC,YAAAA,~~MAAMsB~~,~~OAAOC~~;AAAAA,IAC9BC,~~OAAOxB~~,YAAAA,~~MAAMsB~~,~~OAAOG~~;AAAAA,IACpB,WAAW;AAAA,MACT,~~GAAG3B~~;AAAAA,IACL;AAAA,EACF;AAAA,~~EACA4B~~,wBAAwB;AAAA,IACtBF,~~OAAOxB~~,YAAAA,~~MAAMsB~~,~~OAAOK~~;AAAAA,~~IACpBxB~~,QAAQ;AAAA,EACV;AAAA,~~EACAyB~~,8BAA8B;AAAA,~~IAC5B7B~~,iBAAiBC,YAAAA,~~MAAMsB~~,~~OAAOC~~;AAAAA,EAChC;AAAA,EACAM,sBAAsB;AAAA,IACpBL,~~OAAOxB~~,YAAAA,~~MAAMsB~~,~~OAAOK~~;AAAAA,~~IACpBxB~~,QAAQ;AAAA,EACV;AAAA,~~EACA2B~~,cAAc;AAAA,IACZC,YAAa,~~aAAY/B~~,~~YAAMsB~~,MAAAA,~~OAAOG~~,SAAU;AAAA,EAClD;AAAA,EACAO,YAAY;AAAA,IACVC,aAAc,~~aAAYjC~~,~~YAAMsB~~,MAAAA,~~OAAOG~~,SAAU;AAAA,EACnD;AAAA,EACAS,aAAa;AAAA,~~IACXd~~,OAAO;AAAA,IACPD,QAAQ;AAAA,EACV;AAAA,~~EACAgB~~,cAAc;AAAA,IACZ,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACTD,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;;;"}
1	+ {"version":3,"file":"CalendarCell.styles.cjs","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hover = {\n backgroundColor: theme.colors.containerBackgroundHover,\n cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarCell\", {\n cellContainer: {\n cursor: \"pointer\",\n border: 0,\n padding: 0,\n margin: 0,\n backgroundColor: \"transparent\",\n },\n focusSelection: {\n \"&:hover\": {\n ...hover,\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...hover,\n ...outlineStyles,\n },\n },\n calendarDate: {\n display: \"flex\",\n justifyContent: \"center\",\n flexDirection: \"column\",\n textAlign: \"center\",\n height: \"40px\",\n width: \"40px\",\n },\n calendarDateSelected: {\n backgroundColor: theme.colors.atmo3,\n color: theme.colors.secondary,\n \"&:hover\": {\n ...hover,\n },\n },\n calendarDateNotInMonth: {\n color: theme.colors.secondary_60,\n cursor: \"not-allowed\",\n },\n calendarDateInSelectionRange: {\n backgroundColor: theme.colors.atmo3,\n },\n calendarDateDisabled: {\n color: theme.colors.secondary_60,\n cursor: \"no-drop\",\n },\n startBookend: {\n borderLeft: `1px solid ${theme.colors.secondary}`,\n },\n endBookend: {\n borderRight: `1px solid ${theme.colors.secondary}`,\n },\n dateWrapper: {\n width: \"40px\",\n height: \"40px\",\n },\n cellsInRange: {\n \"&:focus\": {\n outside: \"none\",\n },\n },\n cellsOutsideRange: {\n \"&:focus\": {\n outside: \"none\",\n },\n },\n});\n"],"names":["hover","backgroundColor","theme","colors","containerBackgroundHover","cursor","staticClasses","useClasses","createClasses","cellContainer","border","padding","margin","focusSelection","outline","outlineStyles","calendarDate","display","justifyContent","flexDirection","textAlign","height","width","calendarDateSelected","atmo3","color","secondary","calendarDateNotInMonth","secondary_60","calendarDateInSelectionRange","calendarDateDisabled","startBookend","borderLeft","endBookend","borderRight","dateWrapper","cellsInRange","outside","cellsOutsideRange"],"mappings":";;;;;AAMA,MAAMA,QAAQ;AAAA,EACZC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,EAC9BC,QAAQ;AACV;AAEa,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,eAAe;AAAA,IACbJ,QAAQ;AAAA,IACRK,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRX,iBAAiB;AAAA,EACnB;AAAA,EACAY,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,GAAGb;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTc,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGd;AAAAA,MACH,GAAGe,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,eAAe;AAAA,IACfC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,EACT;AAAA,EACAC,sBAAsB;AAAA,IACpBtB,iBAAiBC,YAAAA,MAAMC,OAAOqB;AAAAA,IAC9BC,OAAOvB,YAAAA,MAAMC,OAAOuB;AAAAA,IACpB,WAAW;AAAA,MACT,GAAG1B;AAAAA,IACL;AAAA,EACF;AAAA,EACA2B,wBAAwB;AAAA,IACtBF,OAAOvB,YAAAA,MAAMC,OAAOyB;AAAAA,IACpBvB,QAAQ;AAAA,EACV;AAAA,EACAwB,8BAA8B;AAAA,IAC5B5B,iBAAiBC,YAAAA,MAAMC,OAAOqB;AAAAA,EAChC;AAAA,EACAM,sBAAsB;AAAA,IACpBL,OAAOvB,YAAAA,MAAMC,OAAOyB;AAAAA,IACpBvB,QAAQ;AAAA,EACV;AAAA,EACA0B,cAAc;AAAA,IACZC,YAAa,aAAY9B,YAAMC,MAAAA,OAAOuB,SAAU;AAAA,EAClD;AAAA,EACAO,YAAY;AAAA,IACVC,aAAc,aAAYhC,YAAMC,MAAAA,OAAOuB,SAAU;AAAA,EACnD;AAAA,EACAS,aAAa;AAAA,IACXb,OAAO;AAAA,IACPD,QAAQ;AAAA,EACV;AAAA,EACAe,cAAc;AAAA,IACZ,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACTD,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/components/Card/Card.cjs CHANGED Viewed

@@ -23,7 +23,7 @@ const HvCard = (props) => {
     cx
   } = Card_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsxs(Box.HvBox, { className: cx("HvIsCardGridElement", classes.root, css({
-    backgroundColor: bgcolor && uikitStyles.theme.colors[bgcolor] || uikitStyles.theme.card.backgroundColor
+    backgroundColor: bgcolor && uikitStyles.theme.colors[bgcolor]
   }), {
     [classes.selectable]: selectable,
     [classes.selected]: selected

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n /** The renderable content inside the icon slot of the header. /\n icon?: React.ReactNode;\n /* Whether the card is selectable. /\n selectable?: boolean;\n /* Whether the card is currently selected. /\n selected?: boolean;\n /* The background color of the card. /\n bgcolor?:\n \| \"sema0\"\n \| HvSemanticColorKeys\n \| HvAtmosphereColorKeys\n \| \"transparent\";\n /\n The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n * To set another color, the borderTop should be override.\n /\n statusColor?: \"sema0\" \| HvSemanticColorKeys \| HvAtmosphereColorKeys;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvCardClasses;\n}\n\n/\n A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = (props: HvCardProps) => {\n const {\n classes: classesProp,\n className,\n children,\n icon,\n selectable = false,\n selected = false,\n statusColor = \"sema0\",\n bgcolor,\n ...others\n } = useDefaultProps(\"HvCard\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n\n return (\n <HvBox\n className={cx(\n \"HvIsCardGridElement\",\n classes.root,\n css({\n backgroundColor~~:\n (~~bgcolor && theme.colors[bgcolor]~~) \|\| theme.card.backgroundColor~~,\n }),\n {\n [classes.selectable]: selectable,\n [classes.selected]: selected,\n },\n className\n )}\n {...others}\n >\n <div className={classes.semanticContainer}>\n <div\n className={cx(\n css({\n height: selected ? 4 : 2,\n backgroundColor:\n statusColor === \"sema0\"\n ? selected\n ? theme.colors.secondary\n : theme.colors.atmo4\n : theme.colors[statusColor],\n }),\n classes.semanticBar\n )}\n />\n <div className={classes.icon}>{icon}</div>\n </div>\n {children}\n </HvBox>\n );\n};\n"],"names":["HvCard","props","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","useDefaultProps","css","cx","useClasses","HvBox","root","backgroundColor","theme","colors","~~card","~~jsxs","semanticContainer","jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;;AA0CaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUX,KAAK;AAE7B,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,YAAAA,WAAWZ,WAAW;AAEnD,yCACGa,IACC,OAAA,EAAA,WAAWF,GACT,uBACAZ,QAAQe,MACRJ,IAAI;AAAA,IACFK,~~iBACGR~~,WAAWS,kBAAMC,OAAOV,OAAO~~,KAAMS,YAAAA,MAAME,KAAKH~~;~~AAAAA~~,~~EAAAA~~,~~CACpD~~,GACD;AAAA,IACE,~~CAAChB~~,QAAQK,UAAU,GAAGA;AAAAA,IACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,EAEtBJ,GAAAA,SACF,GACA,GAAIO,QAEJ,UAAA;AAAA,~~IAACW~~,2BAAA,KAAA,OAAA,EAAI,~~WAAWpB~~,~~QAAQqB~~,mBACtB,UAAA;AAAA,MAACC,2BAAAA,IAAA,OAAA,EACC,~~WAAWV~~,GACTD,IAAI;AAAA,~~QACFY~~,~~QAAQjB~~,WAAW,IAAI;AAAA,QACvBU,iBACET,gBAAgB,UACZD,WACEW,YAAMC,MAAAA,~~OAAOM~~,~~YACbP~~,YAAAA,MAAMC,~~OAAOO~~,~~QACfR~~,YAAAA,MAAMC,OAAOX,WAAW;AAAA,MAAA,CAC/B,GACDP,~~QAAQ0B~~,WACV,GAAE;AAAA,MAEHJ,2BAAA,IAAA,OAAA,EAAI,~~WAAWtB~~,QAAQI,MAAOA,UAAK,MAAA;AAAA,IAAA,GACtC;AAAA,IACCD;AAAAA,EACH,EAAA,CAAA;AAEJ;;;"}
1	+ {"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n /** The renderable content inside the icon slot of the header. /\n icon?: React.ReactNode;\n /* Whether the card is selectable. /\n selectable?: boolean;\n /* Whether the card is currently selected. /\n selected?: boolean;\n /* The background color of the card. /\n bgcolor?:\n \| \"sema0\"\n \| HvSemanticColorKeys\n \| HvAtmosphereColorKeys\n \| \"transparent\";\n /\n The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n * To set another color, the borderTop should be override.\n /\n statusColor?: \"sema0\" \| HvSemanticColorKeys \| HvAtmosphereColorKeys;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvCardClasses;\n}\n\n/\n A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = (props: HvCardProps) => {\n const {\n classes: classesProp,\n className,\n children,\n icon,\n selectable = false,\n selected = false,\n statusColor = \"sema0\",\n bgcolor,\n ...others\n } = useDefaultProps(\"HvCard\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n\n return (\n <HvBox\n className={cx(\n \"HvIsCardGridElement\",\n classes.root,\n css({\n backgroundColor: bgcolor && theme.colors[bgcolor],\n }),\n {\n [classes.selectable]: selectable,\n [classes.selected]: selected,\n },\n className\n )}\n {...others}\n >\n <div className={classes.semanticContainer}>\n <div\n className={cx(\n css({\n height: selected ? 4 : 2,\n backgroundColor:\n statusColor === \"sema0\"\n ? selected\n ? theme.colors.secondary\n : theme.colors.atmo4\n : theme.colors[statusColor],\n }),\n classes.semanticBar\n )}\n />\n <div className={classes.icon}>{icon}</div>\n </div>\n {children}\n </HvBox>\n );\n};\n"],"names":["HvCard","props","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","useDefaultProps","css","cx","useClasses","HvBox","root","backgroundColor","theme","colors","jsxs","semanticContainer","jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;;AA0CaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUX,KAAK;AAE7B,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,YAAAA,WAAWZ,WAAW;AAEnD,yCACGa,IACC,OAAA,EAAA,WAAWF,GACT,uBACAZ,QAAQe,MACRJ,IAAI;AAAA,IACFK,iBAAiBR,WAAWS,kBAAMC,OAAOV,OAAO;AAAA,EAAA,CACjD,GACD;AAAA,IACE,CAACR,QAAQK,UAAU,GAAGA;AAAAA,IACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,EAEtBJ,GAAAA,SACF,GACA,GAAIO,QAEJ,UAAA;AAAA,IAACU,2BAAA,KAAA,OAAA,EAAI,WAAWnB,QAAQoB,mBACtB,UAAA;AAAA,MAACC,2BAAAA,IAAA,OAAA,EACC,WAAWT,GACTD,IAAI;AAAA,QACFW,QAAQhB,WAAW,IAAI;AAAA,QACvBU,iBACET,gBAAgB,UACZD,WACEW,YAAMC,MAAAA,OAAOK,YACbN,YAAAA,MAAMC,OAAOM,QACfP,YAAAA,MAAMC,OAAOX,WAAW;AAAA,MAAA,CAC/B,GACDP,QAAQyB,WACV,GAAE;AAAA,MAEHJ,2BAAA,IAAA,OAAA,EAAI,WAAWrB,QAAQI,MAAOA,UAAK,MAAA;AAAA,IAAA,GACtC;AAAA,IACCD;AAAAA,EACH,EAAA,CAAA;AAEJ;;;"}

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

@@ -10,8 +10,8 @@ const {
   root: {
     overflow: "visible",
     position: "relative",
-    outline: uikitStyles.theme.card.outline,
-    borderRadius: uikitStyles.theme.card.borderRadius,
+    outline: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    borderRadius: `0px 0px ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round}`,
     "&:focus-visible": {
       ...focusUtils.outlineStyles
     },
@@ -30,7 +30,7 @@ const {
   },
   selectable: {
     "&:hover": {
-      outline: `1px solid ${uikitStyles.theme.card.hoverColor}`
+      outline: `1px solid ${uikitStyles.theme.colors.primary}`
     }
   },
   semanticContainer: {
@@ -41,8 +41,8 @@ const {
     }
   },
   icon: {
-    top: `calc(${uikitStyles.theme.card.iconMargin} + ${uikitStyles.theme.space.xs})`,
-    right: `calc(${uikitStyles.theme.card.iconMargin} + ${uikitStyles.theme.space.xs})`
+    top: uikitStyles.theme.space.xs,
+    right: uikitStyles.theme.space.xs
   },
   semanticBar: {
     width: "100%",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.styles.cjs","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCard\", {\n root: {\n overflow: \"visible\",\n position: \"relative\",\n outline: theme.~~card~~.~~outline,\~~n borderRadius: theme.~~card~~.~~borderRadius,\~~n \"&:focus-visible\": {\n ...outlineStyles,\n },\n \"&:focus\": {\n outline: \"none\",\n },\n },\n selected: {\n outline: `1px solid ${theme.colors.secondary}`,\n \"&:hover\": {\n outline: `1px solid ${theme.colors.secondary}`,\n },\n \"&:focus\": {\n outline: `1px solid ${theme.colors.secondary}`,\n },\n },\n selectable: {\n \"&:hover\": {\n outline: `1px solid ${theme.~~card~~.~~hoverColor~~}`,\n },\n },\n semanticContainer: {\n position: \"relative\",\n \"& > *\": {\n position: \"absolute\",\n zIndex: 1,\n },\n },\n icon: {\n top: ~~`calc(${~~theme.~~card.iconMargin} + ${theme.~~space.xs~~})`,\~~n right: ~~`calc(${~~theme.~~card.iconMargin} + ${theme.~~space.xs~~})`,\~~n },\n semanticBar: {\n width: \"100%\",\n top: -1,\n right: 0,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","overflow","position","outline","theme","~~card~~","borderRadius","~~outlineStyles~~","~~selected~~","~~colors~~","secondary","selectable","~~hoverColor~~","semanticContainer","zIndex","icon","top","~~iconMargin","~~space","xs","right","semanticBar","width"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,~~SAASC~~,~~YAAAA~~,~~MAAMC~~,~~KAAKF~~;~~AAAAA~~,~~IACpBG~~,~~cAAcF~~,YAAAA,MAAMC,~~KAAKC~~;~~AAAAA~~,~~IACzB~~,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,~~MACTJ~~,SAAS;AAAA,IACX;AAAA,EACF;AAAA,~~EACAK~~,UAAU;AAAA,~~IACRL~~,SAAU,aAAYC,~~YAAMK~~,MAAAA,~~OAAOC~~,SAAU;AAAA,IAC7C,WAAW;AAAA,~~MACTP~~,SAAU,aAAYC,~~YAAMK~~,MAAAA,~~OAAOC~~,SAAU;AAAA,IAC/C;AAAA,IACA,WAAW;AAAA,~~MACTP~~,SAAU,aAAYC,~~YAAMK~~,MAAAA,~~OAAOC~~,SAAU;AAAA,IAC/C;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACV,WAAW;AAAA,~~MACTR~~,SAAU,aAAYC,YAAMC,MAAAA,~~KAAKO~~,~~UAAW~~;AAAA,~~IAC9C~~;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,~~IACjBX~~,UAAU;AAAA,IACV,SAAS;AAAA,MACPA,UAAU;AAAA,~~MACVY~~,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJC,~~KAAM~~,~~QAAOZ~~,~~YAAMC~~,~~MAAAA,KAAKY,UAAW,MAAKb,kBAAMc,~~MAAMC~~,EAAG~~;~~AAAA~~,~~IACvDC~~,~~OAAQ~~,~~QAAOhB~~,~~YAAMC~~,~~MAAAA,KAAKY,UAAW,MAAKb,kBAAMc,~~MAAMC~~,EAAG~~;~~AAAA~~,~~EAC3D~~;AAAA,EACAE,aAAa;AAAA,IACXC,OAAO;AAAA,~~IACPN~~,KAAK;AAAA,~~IACLI~~,OAAO;AAAA,EACT;AACF,CAAC;;;"}
1	+ {"version":3,"file":"Card.styles.cjs","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCard\", {\n root: {\n overflow: \"visible\",\n position: \"relative\",\n outline: `1px solid ${theme.colors.atmo4}`,\n borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n \"&:focus\": {\n outline: \"none\",\n },\n },\n selected: {\n outline: `1px solid ${theme.colors.secondary}`,\n \"&:hover\": {\n outline: `1px solid ${theme.colors.secondary}`,\n },\n \"&:focus\": {\n outline: `1px solid ${theme.colors.secondary}`,\n },\n },\n selectable: {\n \"&:hover\": {\n outline: `1px solid ${theme.colors.primary}`,\n },\n },\n semanticContainer: {\n position: \"relative\",\n \"& > *\": {\n position: \"absolute\",\n zIndex: 1,\n },\n },\n icon: {\n top: theme.space.xs,\n right: theme.space.xs,\n },\n semanticBar: {\n width: \"100%\",\n top: -1,\n right: 0,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","overflow","position","outline","theme","colors","atmo4","borderRadius","radii","round","outlineStyles","selected","secondary","selectable","primary","semanticContainer","zIndex","icon","top","space","xs","right","semanticBar","width"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAAU,aAAYC,YAAMC,MAAAA,OAAOC,KAAM;AAAA,IACzCC,cAAe,WAAUH,YAAAA,MAAMI,MAAMC,KAAM,IAAGL,YAAAA,MAAMI,MAAMC,KAAM;AAAA,IAChE,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTP,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAQ,UAAU;AAAA,IACRR,SAAU,aAAYC,YAAMC,MAAAA,OAAOO,SAAU;AAAA,IAC7C,WAAW;AAAA,MACTT,SAAU,aAAYC,YAAMC,MAAAA,OAAOO,SAAU;AAAA,IAC/C;AAAA,IACA,WAAW;AAAA,MACTT,SAAU,aAAYC,YAAMC,MAAAA,OAAOO,SAAU;AAAA,IAC/C;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACV,WAAW;AAAA,MACTV,SAAU,aAAYC,YAAMC,MAAAA,OAAOS,OAAQ;AAAA,IAC7C;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBb,UAAU;AAAA,IACV,SAAS;AAAA,MACPA,UAAU;AAAA,MACVc,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJC,KAAKd,YAAAA,MAAMe,MAAMC;AAAAA,IACjBC,OAAOjB,YAAAA,MAAMe,MAAMC;AAAAA,EACrB;AAAA,EACAE,aAAa;AAAA,IACXC,OAAO;AAAA,IACPL,KAAK;AAAA,IACLG,OAAO;AAAA,EACT;AACF,CAAC;;;"}

package/dist/cjs/components/Card/Header/Header.cjs CHANGED Viewed

@@ -2,38 +2,30 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const MuiCardHeader = require("@mui/material/CardHeader");
-const useTheme = require("../../../hooks/useTheme.cjs");
 const Header_styles = require("./Header.styles.cjs");
+const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiCardHeader__default = /* @__PURE__ */ _interopDefault(MuiCardHeader);
-const HvCardHeader = ({
-  classes: classesProp,
-  className,
-  title,
-  subheader,
-  icon,
-  onClick,
-  ...others
-}) => {
+const HvCardHeader = (props) => {
   const {
-    activeTheme
-  } = useTheme.useTheme();
+    classes: classesProp,
+    className,
+    title,
+    subheader,
+    icon,
+    onClick,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvCardHeader", props);
   const {
     classes,
-    css,
     cx
   } = Header_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsx(MuiCardHeader__default.default, { title, subheader, action: icon, onClick, className: cx(classes.root, className), classes: {
-    title: cx(css({
-      ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-    }), {
+    title: cx({
       [classes.titleShort]: icon,
       [classes.title]: !icon
     }),
-    subheader: cx(css({
-      ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.subheaderVariant],
-      color: activeTheme == null ? void 0 : activeTheme.card.subheaderColor
-    }), classes.subheader),
+    subheader: classes.subheader,
     action: classes.action,
     content: classes.content
   }, ...others });

package/dist/cjs/components/Card/Header/Header.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.cjs","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ~~useTheme~~ } from \"@core/~~hooks~~/~~useTheme~~\";\nimport { ~~ExtractNames~~ } from \"@core/~~utils/classes~~\";\n\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps\n extends Omit<MuiCardHeaderProps, \"classes\">,\n HvBaseProps<HTMLDivElement, \"title\"> {\n /** The renderable content inside the title slot of the header. /\n title: React.ReactNode;\n /* The renderable content inside the subheader slot of the header. /\n subheader?: React.ReactNode;\n /* The renderable content inside the icon slot of the header. /\n icon?: React.ReactNode;\n /* The function that will be executed when this section is clicked. /\n onClick?: React.MouseEventHandler<HTMLDivElement> \| undefined;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = ({\n classes: classesProp,\n className,\n title,\n subheader,\n icon,\n onClick,\n ...others\n~~}: HvCardHeaderProps) => {\n~~ ~~const { activeTheme~~ } = ~~useTheme~~();\n const { classes, ~~css,~~ cx } = useClasses(classesProp);\n\n return (\n <MuiCardHeader\n title={title}\n subheader={subheader}\n action={icon}\n onClick={onClick}\n className={cx(classes.root, className)}\n classes={{\n title: cx(~~\n css(~~{\n ~~...activeTheme?.typography[activeTheme?.card.titleVariant],\n~~ ~~}),\n {\n~~ [classes.titleShort]: icon,\n [classes.title]: !icon,\n }\n ),\n subheader: ~~cx(\n css({\n ...activeTheme?.typography[activeTheme?.card.subheaderVariant],\n color: activeTheme?.card.subheaderColor,\n }),\n~~ classes.subheader~~\n )~~,\n action: classes.action,\n content: classes.content,\n }}\n {...others}\n />\n );\n};\n"],"names":["HvCardHeader","classes","classesProp","className","title","subheader","icon","onClick","others","~~activeTheme~~","~~useTheme","css","~~cx","useClasses","jsx","MuiCardHeader","root","~~typography","card","titleVariant","~~titleShort","~~subheaderVariant","color","subheaderColor","~~action","content"],"mappings":";;;;;;;;~~AA6BO~~,~~MAAMA~~,eAAeA,~~CAAC~~;AAAA,~~EAC3BC~~,SAASC;AAAAA,~~EACTC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACA~~,GAAGC;~~AACc~~,~~MAAM;AACjB~~,~~QAAA;AAAA~~,~~IAAEC;AAAAA~~,~~MAAgBC~~,~~SAAS~~,~~SAAA~~;~~AAC3B~~,QAAA;AAAA,~~IAAET~~;AAAAA,~~IAASU~~;AAAAA,~~IAAKC;AAAAA,~~EAAAA,IAAOC,cAAAA,~~WAAWX~~,WAAW;~~AAEnD~~,~~SACGY~~,2BAAAA,IAAAC,uBAAAA,SAAA,EACC,OACA,WACA,~~QAAQT~~,MACR,SACA,~~WAAWM~~,~~GAAGX~~,~~QAAQe~~,~~MAAMb~~,SAAS,GACrC,SAAS;AAAA,IACPC,~~OAAOQ~~,~~GACLD,IAAI~~;AAAA,~~MACF~~,~~GAAGF~~,~~2CAAaQ~~,~~WAAWR,2CAAaS,KAAKC;AAAAA,IAAY,CAC1D,GACD;AAAA,MACE,CAAClB,QAAQmB,~~UAAU,~~GAAGd~~;AAAAA,MACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,IAAAA,~~CAEtB~~;AAAA,~~IACAD~~,~~WAAWO~~,~~GACTD,IAAI~~;~~AAAA,MACF,GAAGF,2CAAaQ,WAAWR,2CAAaS,KAAKG;~~AAAAA,~~MAC7CC~~,~~OAAOb~~,~~2CAAaS,KAAKK~~;AAAAA,~~IAAAA,CAC1B,GACDtB,QAAQI,SACV;AAAA,IACAmB,QAAQvB,QAAQuB;AAAAA,~~IAChBC,~~SAASxB~~,~~QAAQwB~~;AAAAA,EAAAA,~~GAEfjB~~,GAAAA,OACJ,CAAA;AAEN;;;"}
1	+ {"version":3,"file":"Header.cjs","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps\n extends Omit<MuiCardHeaderProps, \"classes\">,\n HvBaseProps<HTMLDivElement, \"title\"> {\n /** The renderable content inside the title slot of the header. /\n title: React.ReactNode;\n /* The renderable content inside the subheader slot of the header. /\n subheader?: React.ReactNode;\n /* The renderable content inside the icon slot of the header. /\n icon?: React.ReactNode;\n /* The function that will be executed when this section is clicked. /\n onClick?: React.MouseEventHandler<HTMLDivElement> \| undefined;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = (props: HvCardHeaderProps) => {\n const {\n classes: classesProp,\n className,\n title,\n subheader,\n icon,\n onClick,\n ...others\n } = useDefaultProps(\"HvCardHeader\", props);\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <MuiCardHeader\n title={title}\n subheader={subheader}\n action={icon}\n onClick={onClick}\n className={cx(classes.root, className)}\n classes={{\n title: cx({\n [classes.titleShort]: icon,\n [classes.title]: !icon,\n }),\n subheader: classes.subheader,\n action: classes.action,\n content: classes.content,\n }}\n {...others}\n />\n );\n};\n"],"names":["HvCardHeader","props","classes","classesProp","className","title","subheader","icon","onClick","others","useDefaultProps","cx","useClasses","jsx","MuiCardHeader","root","titleShort","action","content"],"mappings":";;;;;;;;AA6BaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBT,KAAK;AACnC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,cAAAA,WAAWT,WAAW;AAE9C,SACGU,2BAAAA,IAAAC,uBAAAA,SAAA,EACC,OACA,WACA,QAAQP,MACR,SACA,WAAWI,GAAGT,QAAQa,MAAMX,SAAS,GACrC,SAAS;AAAA,IACPC,OAAOM,GAAG;AAAA,MACR,CAACT,QAAQc,UAAU,GAAGT;AAAAA,MACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,IAAAA,CACnB;AAAA,IACDD,WAAWJ,QAAQI;AAAAA,IACnBW,QAAQf,QAAQe;AAAAA,IAChBC,SAAShB,QAAQgB;AAAAA,EAAAA,GAEfT,GAAAA,OACJ,CAAA;AAEN;;;"}

package/dist/cjs/components/Card/Header/Header.styles.cjs CHANGED Viewed

@@ -15,9 +15,11 @@ const {
     marginRight: "30px"
   },
   title: {
+    ...uikitStyles.theme.typography.label,
     fontFamily: uikitStyles.theme.fontFamily.body
   },
   subheader: {
+    ...uikitStyles.theme.typography.caption1,
     fontFamily: uikitStyles.theme.fontFamily.body
   },
   content: {},

package/dist/cjs/components/Card/Header/Header.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.styles.cjs","sources":["../../../../../src/components/Card/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardHeader\", {\n root: { padding: `15px ${theme.space.sm}`, position: \"relative\" },\n titleShort: {\n fontFamily: theme.fontFamily.body,\n marginRight: \"30px\",\n },\n title: {\n fontFamily: theme.fontFamily.body,\n },\n subheader: {\n fontFamily: theme.fontFamily.body,\n },\n content: {},\n action: {\n position: \"absolute\",\n right: 20,\n marginTop: 0,\n marginRight: \"0px\",\n paddingLeft: theme.space.xs,\n top: \"15px\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","position","titleShort","fontFamily","body","marginRight","title","subheader","content","action","right","marginTop","paddingLeft","xs","top"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IAAEC,SAAU,QAAOC,YAAMC,MAAAA,MAAMC,EAAG;AAAA,IAAGC,UAAU;AAAA,EAAW;AAAA,EAChEC,YAAY;AAAA,IACVC,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,IAC7BC,aAAa;AAAA,EACf;AAAA,EACAC,OAAO;AAAA,~~IACLH~~,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,~~EACAG~~,WAAW;AAAA,~~IACTJ~~,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,~~EACAI~~,SAAS,CAAC;AAAA,EACVC,QAAQ;AAAA,~~IACNR~~,UAAU;AAAA,~~IACVS~~,OAAO;AAAA,IACPC,WAAW;AAAA,~~IACXN~~,aAAa;AAAA,~~IACbO~~,~~aAAad~~,YAAAA,MAAMC,~~MAAMc~~;AAAAA,IACzBC,KAAK;AAAA,EACP;AACF,CAAC;;;"}
1	+ {"version":3,"file":"Header.styles.cjs","sources":["../../../../../src/components/Card/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardHeader\", {\n root: { padding: `15px ${theme.space.sm}`, position: \"relative\" },\n titleShort: {\n fontFamily: theme.fontFamily.body,\n marginRight: \"30px\",\n },\n title: {\n ...theme.typography.label,\n fontFamily: theme.fontFamily.body,\n },\n subheader: {\n ...theme.typography.caption1,\n fontFamily: theme.fontFamily.body,\n },\n content: {},\n action: {\n position: \"absolute\",\n right: 20,\n marginTop: 0,\n marginRight: \"0px\",\n paddingLeft: theme.space.xs,\n top: \"15px\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","position","titleShort","fontFamily","body","marginRight","title","typography","label","subheader","caption1","content","action","right","marginTop","paddingLeft","xs","top"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IAAEC,SAAU,QAAOC,YAAMC,MAAAA,MAAMC,EAAG;AAAA,IAAGC,UAAU;AAAA,EAAW;AAAA,EAChEC,YAAY;AAAA,IACVC,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,IAC7BC,aAAa;AAAA,EACf;AAAA,EACAC,OAAO;AAAA,IACL,GAAGR,YAAAA,MAAMS,WAAWC;AAAAA,IACpBL,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAK,WAAW;AAAA,IACT,GAAGX,YAAAA,MAAMS,WAAWG;AAAAA,IACpBP,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAO,SAAS,CAAC;AAAA,EACVC,QAAQ;AAAA,IACNX,UAAU;AAAA,IACVY,OAAO;AAAA,IACPC,WAAW;AAAA,IACXT,aAAa;AAAA,IACbU,aAAajB,YAAAA,MAAMC,MAAMiB;AAAAA,IACzBC,KAAK;AAAA,EACP;AACF,CAAC;;;"}

package/dist/cjs/components/Carousel/Carousel.styles.cjs CHANGED Viewed

@@ -29,7 +29,7 @@ const {
       top: 0
     },
     "& $controls": {
-      display: uikitStyles.theme.carousel.xsControlsDisplay
+      display: "flex"
     }
   },
   fullscreen: {
@@ -60,9 +60,9 @@ const {
     alignItems: "center",
     position: "relative",
     height: 32,
-    justifyContent: uikitStyles.theme.carousel.controlsJustifyContent,
-    backgroundColor: uikitStyles.theme.carousel.controlsBackgroundColor,
-    border: uikitStyles.theme.carousel.controlsBorder,
+    justifyContent: "center",
+    backgroundColor: uikitStyles.theme.colors.atmo2,
+    border: `1px solid ${uikitStyles.theme.colors.atmo4}`,
     gap: uikitStyles.theme.space.xs,
     "&:has($dots)": {
       justifyContent: "center"
@@ -87,7 +87,7 @@ const {
     top: uikitStyles.theme.space.xs,
     right: uikitStyles.theme.space.md,
     zIndex: 1,
-    display: uikitStyles.theme.carousel.counterContainerDisplay
+    display: "none"
   },
   counter: {
     color: uikitStyles.theme.colors.base_light,
@@ -157,12 +157,12 @@ const {
       textAlign: "center",
       aspectRatio: "16/9",
       opacity: "50%",
-      borderRadius: uikitStyles.theme.carousel.thumbnailBorderRadius
+      borderRadius: uikitStyles.theme.radii.round
     }
   },
   thumbnailSelected: {
     "& img": {
-      border: uikitStyles.theme.carousel.thumbnailSelectedBorder,
+      border: "none",
       opacity: "100%"
     }
   }

package/dist/cjs/components/Carousel/Carousel.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.styles.cjs","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n /** Styles applied to the component root class. */\n root: {\n display: \"flex\",\n alignItems: \"stretch\",\n flexDirection: \"column\",\n backgroundColor: theme.colors.atmo1,\n margin: 0,\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(2),\n },\n xs: {\n \"&:not(._)\": {\n padding: 0,\n },\n // put dots on top of Slide\n \"& $dots\": {\n position: \"relative\",\n top: \"-40px\",\n },\n \"& $actions\": {\n top: 0,\n },\n \"& $controls\": {\n display: ~~theme.carousel.xsControlsDisplay~~,\n },\n },\n fullscreen: {\n width: \"100vw\",\n height: \"100vh\",\n position: \"fixed\",\n inset: 0,\n zIndex: theme.zIndices.modal,\n \"&:not(._)\": {\n padding: theme.spacing(\"xs\", \"xl\"),\n },\n },\n title: {\n display: \"flex\",\n justifyContent: \"flex-start\",\n marginBottom: theme.space.xs,\n },\n actions: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n right: 0,\n\n position: \"relative\",\n },\n closeButton: {},\n\n mainContainer: {},\n\n controls: {\n display: \"flex\",\n alignItems: \"center\",\n position: \"relative\",\n height: 32,\n justifyContent: ~~theme.carousel.controlsJustifyContent~~,\n backgroundColor: theme.~~carousel~~.~~controlsBackgroundColor~~,\n border: theme.~~carousel~~.~~controlsBorder,\~~n gap: theme.space.xs,\n \"&:has($dots)\": {\n justifyContent: \"center\",\n },\n },\n pageCounter: {},\n\n main: {\n padding: 0,\n display: \"flex\",\n flexDirection: \"column\",\n position: \"relative\",\n \"&:hover $slideControls\": {\n opacity: 1,\n },\n },\n mainXs: {},\n mainFullscreen: {\n maxHeight: \"80vh\",\n },\n counterContainer: {\n position: \"absolute\",\n top: theme.space.xs,\n right: theme.space.md,\n zIndex: 1,\n display: ~~theme.carousel.counterContainerDisplay~~,\n },\n counter: {\n color: theme.colors.base_light,\n backgroundColor: theme.colors.base_dark,\n padding: theme.spacing(0, \"sm\"),\n },\n slideControls: {\n position: \"absolute\",\n left: 0,\n right: 0,\n top: `calc(50% - (32px / 2))`,\n padding: theme.spacing(0, \"sm\"),\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n opacity: 0,\n \"& button\": {\n zIndex: 1,\n },\n \"&:focus-within\": {\n opacity: 1,\n },\n },\n slidesViewport: {\n overflow: \"hidden\",\n },\n slidesContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n height: \"100%\",\n },\n\n dots: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: theme.space.xs,\n height: theme.space.md,\n },\n dotsXs: {},\n dot: {\n width: 5,\n height: 5,\n margin: theme.space.xs,\n borderRadius: \"50%\",\n backgroundColor: theme.colors.atmo4,\n },\n dotSelected: {\n width: 10,\n height: 10,\n backgroundColor: theme.colors.secondary_80,\n },\n\n panel: {\n display: \"flex\",\n width: \"100%\",\n overflowX: \"auto\", // \"hidden\",\n overflowY: \"hidden\",\n padding: theme.spacing(\"xs\", \"2px\", \"2px\"),\n },\n thumbnail: {\n height: \"unset\",\n padding: 0,\n \"& img\": {\n width: \"100%\",\n height: \"100%\",\n textAlign: \"center\",\n aspectRatio: \"16/9\",\n opacity: \"50%\",\n borderRadius: theme.~~carousel~~.~~thumbnailBorderRadius~~,\n },\n },\n thumbnailSelected: {\n \"& img\": {\n border: ~~theme.carousel.thumbnailSelectedBorder~~,\n opacity: \"100%\",\n },\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","flexDirection","backgroundColor","theme","colors","atmo1","margin","paddingTop","spacing","paddingBottom","xs","padding","position","top","~~carousel","xsControlsDisplay","~~fullscreen","width","height","inset","zIndex","zIndices","modal","title","justifyContent","marginBottom","space","actions","right","closeButton","mainContainer","controls","~~controlsJustifyContent~~","~~controlsBackgroundColor","~~border","~~controlsBorder~~","gap","pageCounter","main","opacity","mainXs","mainFullscreen","maxHeight","counterContainer","md","~~counterContainerDisplay","~~counter","color","base_light","base_dark","slideControls","left","slidesViewport","overflow","slidesContainer","dots","dotsXs","dot","borderRadius","~~atmo4","~~dotSelected","secondary_80","panel","overflowX","overflowY","thumbnail","textAlign","aspectRatio","~~thumbnailBorderRadius~~","~~thumbnailSelected~~","~~thumbnailSelectedBorder~~"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,IAC9BC,QAAQ;AAAA,IACRC,YAAYJ,YAAAA,MAAMK,QAAQ,CAAC;AAAA,IAC3BC,eAAeN,YAAAA,MAAMK,QAAQ,CAAC;AAAA,EAChC;AAAA,EACAE,IAAI;AAAA,IACF,aAAa;AAAA,MACXC,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,WAAW;AAAA,MACTC,UAAU;AAAA,MACVC,KAAK;AAAA,IACP;AAAA,IACA,cAAc;AAAA,MACZA,KAAK;AAAA,IACP;AAAA,IACA,eAAe;AAAA,MACbd,~~SAASI,YAAAA,MAAMW,SAASC~~;~~AAAAA~~,~~IAC1B~~;AAAA,EACF;AAAA,~~EACAC~~,YAAY;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,~~IACRN~~,UAAU;AAAA,~~IACVO~~,OAAO;AAAA,IACPC,~~QAAQjB~~,YAAAA,~~MAAMkB~~,SAASC;AAAAA,IACvB,aAAa;AAAA,~~MACXX~~,SAASR,YAAAA,MAAMK,QAAQ,MAAM,IAAI;AAAA,IACnC;AAAA,EACF;AAAA,~~EACAe~~,OAAO;AAAA,~~IACLxB~~,SAAS;AAAA,~~IACTyB~~,gBAAgB;AAAA,IAChBC,~~cAActB~~,YAAAA,~~MAAMuB~~,~~MAAMhB~~;AAAAA,EAC5B;AAAA,~~EACAiB~~,SAAS;AAAA,~~IACP5B~~,SAAS;AAAA,~~IACTyB~~,gBAAgB;AAAA,IAChBI,OAAO;AAAA,~~IAEPhB~~,UAAU;AAAA,EACZ;AAAA,~~EACAiB~~,aAAa,CAAC;AAAA,EAEdC,eAAe,CAAC;AAAA,EAEhBC,UAAU;AAAA,~~IACRhC~~,SAAS;AAAA,IACTC,YAAY;AAAA,IACZY,UAAU;AAAA,~~IACVM~~,QAAQ;AAAA,IACRM,~~gBAAgBrB,YAAAA,MAAMW,SAASkB~~;~~AAAAA~~,~~IAC/B9B~~,iBAAiBC,YAAAA,~~MAAMW~~,~~SAASmB~~;AAAAA,~~IAChCC~~,~~QAAQ/B~~,~~YAAAA~~,~~MAAMW~~,~~SAASqB~~;~~AAAAA~~,~~IACvBC~~,~~KAAKjC~~,YAAAA,~~MAAMuB~~,~~MAAMhB~~;AAAAA,IACjB,gBAAgB;AAAA,~~MACdc~~,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,~~EACAa~~,aAAa,CAAC;AAAA,EAEdC,MAAM;AAAA,~~IACJ3B~~,SAAS;AAAA,IACTZ,SAAS;AAAA,IACTE,eAAe;AAAA,IACfW,UAAU;AAAA,IACV,0BAA0B;AAAA,~~MACxB2B~~,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAC,QAAQ,CAAC;AAAA,EACTC,gBAAgB;AAAA,IACdC,WAAW;AAAA,EACb;AAAA,EACAC,kBAAkB;AAAA,~~IAChB/B~~,UAAU;AAAA,IACVC,KAAKV,YAAAA,~~MAAMuB~~,~~MAAMhB~~;AAAAA,~~IACjBkB~~,~~OAAOzB~~,YAAAA,~~MAAMuB~~,~~MAAMkB~~;AAAAA,~~IACnBxB~~,QAAQ;AAAA,~~IACRrB~~,~~SAASI,YAAAA,MAAMW,~~SAAS+B;~~AAAAA~~,~~EAC1B~~;AAAA,~~EACAC~~,SAAS;AAAA,IACPC,~~OAAO5C~~,YAAAA,MAAMC,~~OAAO4C~~;AAAAA,~~IACpB9C~~,iBAAiBC,YAAAA,MAAMC,~~OAAO6C~~;AAAAA,~~IAC9BtC~~,SAASR,YAAAA,MAAMK,QAAQ,GAAG,IAAI;AAAA,EAChC;AAAA,~~EACA0C~~,eAAe;AAAA,~~IACbtC~~,UAAU;AAAA,~~IACVuC~~,MAAM;AAAA,~~IACNvB~~,OAAO;AAAA,~~IACPf~~,KAAM;AAAA,IACNF,SAASR,YAAAA,MAAMK,QAAQ,GAAG,IAAI;AAAA,IAC9BT,SAAS;AAAA,IACTE,eAAe;AAAA,IACfD,YAAY;AAAA,~~IACZwB~~,gBAAgB;AAAA,~~IAChBe~~,SAAS;AAAA,IACT,YAAY;AAAA,~~MACVnB~~,QAAQ;AAAA,IACV;AAAA,IACA,kBAAkB;AAAA,~~MAChBmB~~,SAAS;AAAA,IACX;AAAA,EACF;AAAA,~~EACAa~~,gBAAgB;AAAA,IACdC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,~~IACfvD~~,SAAS;AAAA,IACTE,eAAe;AAAA,~~IACfiB~~,QAAQ;AAAA,EACV;AAAA,~~EAEAqC~~,MAAM;AAAA,~~IACJxD~~,SAAS;AAAA,IACTC,YAAY;AAAA,~~IACZwB~~,gBAAgB;AAAA,~~IAChBY~~,~~KAAKjC~~,YAAAA,~~MAAMuB~~,~~MAAMhB~~;AAAAA,~~IACjBQ~~,~~QAAQf~~,YAAAA,~~MAAMuB~~,~~MAAMkB~~;AAAAA,EACtB;AAAA,~~EACAY~~,QAAQ,CAAC;AAAA,EACTC,KAAK;AAAA,~~IACHxC~~,OAAO;AAAA,IACPC,QAAQ;AAAA,~~IACRZ~~,QAAQH,YAAAA,~~MAAMuB~~,~~MAAMhB~~;AAAAA,~~IACpBgD~~,cAAc;AAAA,~~IACdxD~~,iBAAiBC,YAAAA,MAAMC,~~OAAOuD~~;AAAAA,EAChC;AAAA,~~EACAC~~,aAAa;AAAA,~~IACX3C~~,OAAO;AAAA,IACPC,QAAQ;AAAA,~~IACRhB~~,iBAAiBC,YAAAA,MAAMC,~~OAAOyD~~;AAAAA,EAChC;AAAA,EAEAC,OAAO;AAAA,~~IACL/D~~,SAAS;AAAA,~~IACTkB~~,OAAO;AAAA,~~IACP8C~~,WAAW;AAAA;AAAA,IACXC,WAAW;AAAA,~~IACXrD~~,SAASR,YAAAA,MAAMK,QAAQ,MAAM,OAAO,KAAK;AAAA,EAC3C;AAAA,~~EACAyD~~,WAAW;AAAA,~~IACT/C~~,QAAQ;AAAA,~~IACRP~~,SAAS;AAAA,IACT,SAAS;AAAA,~~MACPM~~,OAAO;AAAA,MACPC,QAAQ;AAAA,~~MACRgD~~,WAAW;AAAA,MACXC,aAAa;AAAA,~~MACb5B~~,SAAS;AAAA,~~MACTmB~~,~~cAAcvD~~,YAAAA,~~MAAMW~~,~~SAASsD~~;AAAAA,~~IAC/B~~;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjB,SAAS;AAAA,~~MACPnC~~,QAAQ~~/B,YAAAA,MAAMW,SAASwD~~;~~AAAAA~~,~~MACvB/B~~,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;;;"}
1	+ {"version":3,"file":"Carousel.styles.cjs","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n /** Styles applied to the component root class. */\n root: {\n display: \"flex\",\n alignItems: \"stretch\",\n flexDirection: \"column\",\n backgroundColor: theme.colors.atmo1,\n margin: 0,\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(2),\n },\n xs: {\n \"&:not(._)\": {\n padding: 0,\n },\n // put dots on top of Slide\n \"& $dots\": {\n position: \"relative\",\n top: \"-40px\",\n },\n \"& $actions\": {\n top: 0,\n },\n \"& $controls\": {\n display: \"flex\",\n },\n },\n fullscreen: {\n width: \"100vw\",\n height: \"100vh\",\n position: \"fixed\",\n inset: 0,\n zIndex: theme.zIndices.modal,\n \"&:not(._)\": {\n padding: theme.spacing(\"xs\", \"xl\"),\n },\n },\n title: {\n display: \"flex\",\n justifyContent: \"flex-start\",\n marginBottom: theme.space.xs,\n },\n actions: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n right: 0,\n\n position: \"relative\",\n },\n closeButton: {},\n\n mainContainer: {},\n\n controls: {\n display: \"flex\",\n alignItems: \"center\",\n position: \"relative\",\n height: 32,\n justifyContent: \"center\",\n backgroundColor: theme.colors.atmo2,\n border: `1px solid ${theme.colors.atmo4}`,\n gap: theme.space.xs,\n \"&:has($dots)\": {\n justifyContent: \"center\",\n },\n },\n pageCounter: {},\n\n main: {\n padding: 0,\n display: \"flex\",\n flexDirection: \"column\",\n position: \"relative\",\n \"&:hover $slideControls\": {\n opacity: 1,\n },\n },\n mainXs: {},\n mainFullscreen: {\n maxHeight: \"80vh\",\n },\n counterContainer: {\n position: \"absolute\",\n top: theme.space.xs,\n right: theme.space.md,\n zIndex: 1,\n display: \"none\",\n },\n counter: {\n color: theme.colors.base_light,\n backgroundColor: theme.colors.base_dark,\n padding: theme.spacing(0, \"sm\"),\n },\n slideControls: {\n position: \"absolute\",\n left: 0,\n right: 0,\n top: `calc(50% - (32px / 2))`,\n padding: theme.spacing(0, \"sm\"),\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n opacity: 0,\n \"& button\": {\n zIndex: 1,\n },\n \"&:focus-within\": {\n opacity: 1,\n },\n },\n slidesViewport: {\n overflow: \"hidden\",\n },\n slidesContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n height: \"100%\",\n },\n\n dots: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: theme.space.xs,\n height: theme.space.md,\n },\n dotsXs: {},\n dot: {\n width: 5,\n height: 5,\n margin: theme.space.xs,\n borderRadius: \"50%\",\n backgroundColor: theme.colors.atmo4,\n },\n dotSelected: {\n width: 10,\n height: 10,\n backgroundColor: theme.colors.secondary_80,\n },\n\n panel: {\n display: \"flex\",\n width: \"100%\",\n overflowX: \"auto\", // \"hidden\",\n overflowY: \"hidden\",\n padding: theme.spacing(\"xs\", \"2px\", \"2px\"),\n },\n thumbnail: {\n height: \"unset\",\n padding: 0,\n \"& img\": {\n width: \"100%\",\n height: \"100%\",\n textAlign: \"center\",\n aspectRatio: \"16/9\",\n opacity: \"50%\",\n borderRadius: theme.radii.round,\n },\n },\n thumbnailSelected: {\n \"& img\": {\n border: \"none\",\n opacity: \"100%\",\n },\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","flexDirection","backgroundColor","theme","colors","atmo1","margin","paddingTop","spacing","paddingBottom","xs","padding","position","top","fullscreen","width","height","inset","zIndex","zIndices","modal","title","justifyContent","marginBottom","space","actions","right","closeButton","mainContainer","controls","atmo2","border","atmo4","gap","pageCounter","main","opacity","mainXs","mainFullscreen","maxHeight","counterContainer","md","counter","color","base_light","base_dark","slideControls","left","slidesViewport","overflow","slidesContainer","dots","dotsXs","dot","borderRadius","dotSelected","secondary_80","panel","overflowX","overflowY","thumbnail","textAlign","aspectRatio","radii","round","thumbnailSelected"],"mappings":"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"}

package/dist/cjs/components/CheckBox/CheckBox.styles.cjs CHANGED Viewed

@@ -16,8 +16,8 @@ const {
     height: "32px",
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.checkbox.hoverColor,
-      borderRadius: uikitStyles.theme.checkbox.borderRadius
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+      borderRadius: uikitStyles.theme.radii.base
     }
   },
   disabled: {

package/dist/cjs/components/CheckBox/CheckBox.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckBox.styles.cjs","sources":["../../../../src/components/CheckBox/CheckBox.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(\"HvCheckBox\", {\n root: { display: \"inline-block\" },\n container: {\n cursor: \"pointer\",\n display: \"flex\",\n height: \"32px\",\n transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n \"&:hover\": {\n backgroundColor: theme.~~checkbox~~.~~hoverColor~~,\n borderRadius: theme.~~checkbox~~.~~borderRadius~~,\n },\n },\n disabled: {\n cursor: \"not-allowed\",\n \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n },\n focusVisible: {\n ...outlineStyles,\n\n \"& div\": {\n backgroundColor: theme.colors.atmo3,\n },\n\n [`& $checkbox div > svg`]: {\n outline: \"none\",\n boxShadow: \"none\",\n },\n },\n invalidContainer: {\n borderBottom: `1px solid ${theme.colors.negative}`,\n\n \"&:hover\": {\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n },\n checkbox: { height: \"32px\" },\n invalidCheckbox: {\n borderBottom: `1px solid ${theme.colors.negative}`,\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n label: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n verticalAlign: \"middle\",\n paddingRight: theme.space.xs,\n whiteSpace: \"nowrap\",\n ...theme.typography.body,\n cursor: \"pointer\",\n height: \"32px\",\n lineHeight: \"32px\",\n width: \"100%\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","container","cursor","height","transition","backgroundColor","theme","~~checkbox~~","~~hoverColor~~","borderRadius","~~disabled~~","~~color~~","~~colors~~","secondary_60","focusVisible","outlineStyles","atmo3","outline","boxShadow","invalidContainer","borderBottom","negative","borderBottomLeftRadius","borderBottomRightRadius","invalidCheckbox","label","overflow","textOverflow","verticalAlign","paddingRight","space","xs","whiteSpace","typography","body","lineHeight","width"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IAAEC,SAAS;AAAA,EAAe;AAAA,EAChCC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACRF,SAAS;AAAA,IACTG,QAAQ;AAAA,IACRC,YAAY;AAAA,IAEZ,WAAW;AAAA,MACTC,iBAAiBC,YAAAA,MAAMC,~~SAASC~~;AAAAA,~~MAChCC~~,cAAcH,YAAAA,MAAMC~~,SAASE~~;AAAAA,~~IAC/B~~;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,~~IACRR~~,QAAQ;AAAA,IACR,YAAY;AAAA,~~MAAES~~,~~OAAOL~~,YAAAA,~~MAAMM~~,~~OAAOC~~;AAAAA,~~MAAcX~~,QAAQ;AAAA,IAAc;AAAA,EACxE;AAAA,~~EACAY~~,cAAc;AAAA,IACZ,GAAGC,WAAAA;AAAAA,IAEH,SAAS;AAAA,~~MACPV~~,iBAAiBC,YAAAA,~~MAAMM~~,~~OAAOI~~;AAAAA,IAChC;AAAA,IAEA,CAAE,uBAAsB,GAAG;AAAA,MACzBC,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,cAAe,~~aAAYd~~,~~YAAMM~~,MAAAA,~~OAAOS~~,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,~~EACAhB~~,UAAU;AAAA,~~IAAEJ~~,QAAQ;AAAA,EAAO;AAAA,~~EAC3BqB~~,iBAAiB;AAAA,~~IACfJ~~,cAAe,~~aAAYd~~,~~YAAMM~~,MAAAA,~~OAAOS~~,QAAS;AAAA,IACjDC,wBAAwB;AAAA,IACxBC,yBAAyB;AAAA,EAC3B;AAAA,~~EACAE~~,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,~~cAAcvB~~,YAAAA,~~MAAMwB~~,MAAMC;AAAAA,IAC1BC,YAAY;AAAA,IACZ,~~GAAG1B~~,YAAAA,~~MAAM2B~~,WAAWC;AAAAA,~~IACpBhC~~,QAAQ;AAAA,IACRC,QAAQ;AAAA,~~IACRgC~~,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AACF,CAAC;;;"}
1	+ {"version":3,"file":"CheckBox.styles.cjs","sources":["../../../../src/components/CheckBox/CheckBox.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(\"HvCheckBox\", {\n root: { display: \"inline-block\" },\n container: {\n cursor: \"pointer\",\n display: \"flex\",\n height: \"32px\",\n transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n borderRadius: theme.radii.base,\n },\n },\n disabled: {\n cursor: \"not-allowed\",\n \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n },\n focusVisible: {\n ...outlineStyles,\n\n \"& div\": {\n backgroundColor: theme.colors.atmo3,\n },\n\n [`& $checkbox div > svg`]: {\n outline: \"none\",\n boxShadow: \"none\",\n },\n },\n invalidContainer: {\n borderBottom: `1px solid ${theme.colors.negative}`,\n\n \"&:hover\": {\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n },\n checkbox: { height: \"32px\" },\n invalidCheckbox: {\n borderBottom: `1px solid ${theme.colors.negative}`,\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n label: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n verticalAlign: \"middle\",\n paddingRight: theme.space.xs,\n whiteSpace: \"nowrap\",\n ...theme.typography.body,\n cursor: \"pointer\",\n height: \"32px\",\n lineHeight: \"32px\",\n width: \"100%\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","container","cursor","height","transition","backgroundColor","theme","colors","containerBackgroundHover","borderRadius","radii","base","disabled","color","secondary_60","focusVisible","outlineStyles","atmo3","outline","boxShadow","invalidContainer","borderBottom","negative","borderBottomLeftRadius","borderBottomRightRadius","checkbox","invalidCheckbox","label","overflow","textOverflow","verticalAlign","paddingRight","space","xs","whiteSpace","typography","body","lineHeight","width"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IAAEC,SAAS;AAAA,EAAe;AAAA,EAChCC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACRF,SAAS;AAAA,IACTG,QAAQ;AAAA,IACRC,YAAY;AAAA,IAEZ,WAAW;AAAA,MACTC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,MAC9BC,cAAcH,YAAAA,MAAMI,MAAMC;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRV,QAAQ;AAAA,IACR,YAAY;AAAA,MAAEW,OAAOP,YAAAA,MAAMC,OAAOO;AAAAA,MAAcZ,QAAQ;AAAA,IAAc;AAAA,EACxE;AAAA,EACAa,cAAc;AAAA,IACZ,GAAGC,WAAAA;AAAAA,IAEH,SAAS;AAAA,MACPX,iBAAiBC,YAAAA,MAAMC,OAAOU;AAAAA,IAChC;AAAA,IAEA,CAAE,uBAAsB,GAAG;AAAA,MACzBC,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,cAAe,aAAYf,YAAMC,MAAAA,OAAOe,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IAAEtB,QAAQ;AAAA,EAAO;AAAA,EAC3BuB,iBAAiB;AAAA,IACfL,cAAe,aAAYf,YAAMC,MAAAA,OAAOe,QAAS;AAAA,IACjDC,wBAAwB;AAAA,IACxBC,yBAAyB;AAAA,EAC3B;AAAA,EACAG,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,cAAczB,YAAAA,MAAM0B,MAAMC;AAAAA,IAC1BC,YAAY;AAAA,IACZ,GAAG5B,YAAAA,MAAM6B,WAAWC;AAAAA,IACpBlC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRkC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AACF,CAAC;;;"}

package/dist/cjs/components/ColorPicker/ColorPicker.cjs CHANGED Viewed

@@ -6,7 +6,6 @@ const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useLabels = require("../../hooks/useLabels.cjs");
-const useTheme = require("../../hooks/useTheme.cjs");
 const setId = require("../../utils/setId.cjs");
 const ColorPicker_styles = require("./ColorPicker.styles.cjs");
 const PresetColors = require("./PresetColors/PresetColors.cjs");
@@ -62,9 +61,6 @@ const HvColorPicker = (props) => {
     css,
     cx
   } = ColorPicker_styles.useClasses(classesProp);
-  const {
-    activeTheme
-  } = useTheme.useTheme();
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
   const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
   const [color, setColor] = useControlled.useControlled(value, defaultValue);
@@ -121,11 +117,9 @@ const HvColorPicker = (props) => {
       }))
     }, adornment: iconOnly && color ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, { className: classes.headerColorIconOnly, color: [color, "transparent"] }) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ColorPicker, { className: classes.colorPickerIcon }) : void 0, placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, { className: classes.headerColorIcon, color: [color, "transparent"] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.headerColorValue, variant: activeTheme == null ? void 0 : activeTheme.colorPicker.inputValueVariant, children: color })
+      /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.headerColorValue, variant: "label", children: color })
     ] }) : placeholder, "aria-label": ariaLabel, "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { className: classes.panel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.colorPicker, children: [
-      recommendedColorsPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(PresetColors.PresetColors, { className: cx((showCustomColors || showSavedColors) && css({
-        paddingBottom: activeTheme == null ? void 0 : activeTheme.colorPicker.recommendedColorsBottomPadding
-      }), classes.recommendedColorsRoot), colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0 }),
+      recommendedColorsPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(PresetColors.PresetColors, { className: classes.recommendedColorsRoot, colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0 }),
       showCustomColors && /* @__PURE__ */ jsxRuntime.jsx(Picker.Picker, { classes: {
         fields: cx({
           [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors

package/dist/cjs/components/ColorPicker/ColorPicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ColorState } from \"react-color\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n \"aria-describedby\"?: string;\n /** Class names to be applied. /\n className?: string;\n /* Id to be applied to the form element root node. /\n id?: string;\n /* The form element name. /\n name?: string;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /* The value color, in HEX format. /\n value?: string;\n /* The default value color, in HEX format. /\n defaultValue?: string;\n /* If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. /\n disabled?: boolean;\n /* If `true` the dropdown starts opened if `false` it starts closed. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* A function to be executed whenever the color changes. /\n onChange?: (color: string) => void;\n /* A function to be executed whenever the color change is complete. /\n onChangeComplete?: (color: string) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvColorPickerClasses;\n /* The placeholder value when nothing is selected. /\n placeholder?: string;\n /* Recommended colors. The colors are HEX values. /\n recommendedColors?: string[];\n /* Recommended colors position. /\n recommendedColorsPosition?: \"top\" \| \"bottom\";\n /* If `true`, the labels are shown. If `false`, they are not shown. /\n showLabels?: boolean;\n /* An object containing all the labels. /\n labels?: {\n recommendedColorsLabel?: string;\n customColorsLabel?: string;\n };\n /* Icon type for the input's end adornment. /\n dropdownIcon?: \"arrow\" \| \"colorPicker\";\n /* If `true`, the input only shows an icon. If `false`, the input shows text and icons. /\n iconOnly?: boolean;\n /* If `true`, the saved colors area is shown. If `false`, it is not shown. /\n showSavedColors?: boolean;\n /* If `true`, the custom colors area is shown. If `false`, it is not shown. /\n showCustomColors?: boolean;\n /* The saved colors. The colors are HEX values. /\n savedColorsValue?: string[];\n /* The default saved colors. The colors are HEX values. /\n defaultSavedColorsValue?: string[];\n /* Callback fired when a new saved color is added. /\n onSavedColorAdded?: (color?: string) => void;\n /* Callback fired when a new saved color is removed. /\n onSavedColorRemoved?: (color?: string) => void;\n /* Aria label to apply to delete saved color button. /\n deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n /* Aria label to apply to add saved color button. /\n addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n recommendedColorsLabel: \"Recommended colors:\",\n customColorsLabel: \"Custom colors:\",\n};\n\n/\n A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = (props: HvColorPickerProps) => {\n const {\n id,\n name,\n required = false,\n disabled = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n className,\n classes: classesProp,\n value,\n onChange,\n onChangeComplete,\n defaultValue = \"\",\n expanded,\n defaultExpanded = false,\n recommendedColorsPosition = \"top\",\n recommendedColors = [\n \"#95AFE8\",\n \"#E89E5D\",\n \"#83B8A6\",\n \"#70759C\",\n \"#C57E7E\",\n \"#FADA95\",\n \"#ADBFE8\",\n \"#E3B386\",\n \"#9AC6B7\",\n \"#8B90AF\",\n \"#CF9797\",\n \"#FAE1AA\",\n ],\n showLabels = true,\n labels: labelsProp,\n dropdownIcon = \"colorPicker\",\n placeholder = \"Select color...\",\n iconOnly = false,\n showSavedColors = true,\n showCustomColors = true,\n savedColorsValue,\n defaultSavedColorsValue = [],\n onSavedColorAdded,\n onSavedColorRemoved,\n deleteSavedColorButtonArialLabel = \"Delete saved color\",\n addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n } = useDefaultProps(\"HvColorPicker\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const [color, setColor] = useControlled(value, defaultValue);\n const [savedColors, setSavedColors] = useControlled(\n savedColorsValue,\n defaultSavedColorsValue\n );\n const elementId = useUniqueId(id, \"hvdropdown\");\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n setIsOpen(open);\n };\n\n const handleSelect = (val: ColorState \| { hex: string; source: string }) => {\n onChange?.(val.hex);\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChange = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChange?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChangeComplete = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleAddColor = () => {\n // When no color is provided, react-color sets the picker to #000000.\n // This is the color that should be added in this case.\n const colorToAdd = color \|\| \"#000000\";\n\n onSavedColorAdded?.(colorToAdd);\n setSavedColors([...savedColors, colorToAdd]);\n };\n\n const handleRemoveColor = (val: string, position: number) => {\n if (savedColors[position] === val) {\n const sColors = [...savedColors];\n sColors.splice(position, 1);\n onSavedColorRemoved?.(val);\n setSavedColors(sColors);\n }\n };\n\n const setFocusToContent = (containerRef: HTMLElement \| null) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n }\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n variableWidth\n className={className}\n expanded={isOpen}\n onToggle={handleToggle}\n onContainerCreation={setFocusToContent}\n classes={{\n root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n selection: cx(iconOnly && css({ padding: 0 })),\n }}\n adornment={\n iconOnly && color ? (\n <Checkbox\n className={classes.headerColorIconOnly}\n color={[color, \"transparent\"]}\n />\n ) : dropdownIcon === \"colorPicker\" ? (\n <ColorPicker className={classes.colorPickerIcon} />\n ) : undefined\n }\n placeholder={\n iconOnly ? undefined : color ? (\n <>\n <Checkbox\n className={classes.headerColorIcon}\n color={[color, \"transparent\"]}\n />\n <HvTypography\n className={classes.headerColorValue}\n variant={activeTheme?.colorPicker.inputValueVariant}\n >\n {color}\n </HvTypography>\n </>\n ) : (\n placeholder\n )\n }\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n >\n <HvPanel className={classes.panel}>\n <div className={classes.colorPicker}>\n {recommendedColorsPosition === \"top\" && (\n <PresetColors\n className={cx(\n (showCustomColors \|\| showSavedColors) &&\n css({\n paddingBottom:\n activeTheme?.colorPicker.recommendedColorsBottomPadding,\n }),\n classes.recommendedColorsRoot\n )}\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n {showCustomColors && (\n <Picker\n classes={{\n fields: cx({\n [classes.pickerFields]:\n recommendedColorsPosition === \"bottom\" \|\| showSavedColors,\n }),\n }}\n title={showLabels ? labels?.customColorsLabel : undefined}\n color={color}\n onChange={handleOnChange}\n onChangeComplete={handleOnChangeComplete}\n />\n )}\n {showSavedColors && (\n <SavedColors\n colors={savedColors}\n onAddColor={handleAddColor}\n onClickColor={handleSelect}\n onRemoveColor={handleRemoveColor}\n deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n addButtonAriaLabel={addSavedColorButtonAriaLabel}\n />\n )}\n {recommendedColorsPosition === \"bottom\" && (\n <PresetColors\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n </div>\n </HvPanel>\n </HvBaseDropdown>\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","props","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","jsxs","HvFormElement","root","labelContainer","jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","dropdownRootIconOnly","selection","padding","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","undefined","Fragment","headerColorIcon","HvTypography","headerColorValue","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","paddingBottom","recommendedColorsBottomPadding","recommendedColorsRoot","Picker","fields","pickerFields","SavedColors"],"mappings":"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"}
1	+ {"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ColorState } from \"react-color\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n \"aria-describedby\"?: string;\n /** Class names to be applied. /\n className?: string;\n /* Id to be applied to the form element root node. /\n id?: string;\n /* The form element name. /\n name?: string;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /* The value color, in HEX format. /\n value?: string;\n /* The default value color, in HEX format. /\n defaultValue?: string;\n /* If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. /\n disabled?: boolean;\n /* If `true` the dropdown starts opened if `false` it starts closed. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* A function to be executed whenever the color changes. /\n onChange?: (color: string) => void;\n /* A function to be executed whenever the color change is complete. /\n onChangeComplete?: (color: string) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvColorPickerClasses;\n /* The placeholder value when nothing is selected. /\n placeholder?: string;\n /* Recommended colors. The colors are HEX values. /\n recommendedColors?: string[];\n /* Recommended colors position. /\n recommendedColorsPosition?: \"top\" \| \"bottom\";\n /* If `true`, the labels are shown. If `false`, they are not shown. /\n showLabels?: boolean;\n /* An object containing all the labels. /\n labels?: {\n recommendedColorsLabel?: string;\n customColorsLabel?: string;\n };\n /* Icon type for the input's end adornment. /\n dropdownIcon?: \"arrow\" \| \"colorPicker\";\n /* If `true`, the input only shows an icon. If `false`, the input shows text and icons. /\n iconOnly?: boolean;\n /* If `true`, the saved colors area is shown. If `false`, it is not shown. /\n showSavedColors?: boolean;\n /* If `true`, the custom colors area is shown. If `false`, it is not shown. /\n showCustomColors?: boolean;\n /* The saved colors. The colors are HEX values. /\n savedColorsValue?: string[];\n /* The default saved colors. The colors are HEX values. /\n defaultSavedColorsValue?: string[];\n /* Callback fired when a new saved color is added. /\n onSavedColorAdded?: (color?: string) => void;\n /* Callback fired when a new saved color is removed. /\n onSavedColorRemoved?: (color?: string) => void;\n /* Aria label to apply to delete saved color button. /\n deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n /* Aria label to apply to add saved color button. /\n addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n recommendedColorsLabel: \"Recommended colors:\",\n customColorsLabel: \"Custom colors:\",\n};\n\n/\n A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = (props: HvColorPickerProps) => {\n const {\n id,\n name,\n required = false,\n disabled = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n className,\n classes: classesProp,\n value,\n onChange,\n onChangeComplete,\n defaultValue = \"\",\n expanded,\n defaultExpanded = false,\n recommendedColorsPosition = \"top\",\n recommendedColors = [\n \"#95AFE8\",\n \"#E89E5D\",\n \"#83B8A6\",\n \"#70759C\",\n \"#C57E7E\",\n \"#FADA95\",\n \"#ADBFE8\",\n \"#E3B386\",\n \"#9AC6B7\",\n \"#8B90AF\",\n \"#CF9797\",\n \"#FAE1AA\",\n ],\n showLabels = true,\n labels: labelsProp,\n dropdownIcon = \"colorPicker\",\n placeholder = \"Select color...\",\n iconOnly = false,\n showSavedColors = true,\n showCustomColors = true,\n savedColorsValue,\n defaultSavedColorsValue = [],\n onSavedColorAdded,\n onSavedColorRemoved,\n deleteSavedColorButtonArialLabel = \"Delete saved color\",\n addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n } = useDefaultProps(\"HvColorPicker\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const [color, setColor] = useControlled(value, defaultValue);\n const [savedColors, setSavedColors] = useControlled(\n savedColorsValue,\n defaultSavedColorsValue\n );\n const elementId = useUniqueId(id, \"hvdropdown\");\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n setIsOpen(open);\n };\n\n const handleSelect = (val: ColorState \| { hex: string; source: string }) => {\n onChange?.(val.hex);\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChange = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChange?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChangeComplete = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleAddColor = () => {\n // When no color is provided, react-color sets the picker to #000000.\n // This is the color that should be added in this case.\n const colorToAdd = color \|\| \"#000000\";\n\n onSavedColorAdded?.(colorToAdd);\n setSavedColors([...savedColors, colorToAdd]);\n };\n\n const handleRemoveColor = (val: string, position: number) => {\n if (savedColors[position] === val) {\n const sColors = [...savedColors];\n sColors.splice(position, 1);\n onSavedColorRemoved?.(val);\n setSavedColors(sColors);\n }\n };\n\n const setFocusToContent = (containerRef: HTMLElement \| null) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n }\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n variableWidth\n className={className}\n expanded={isOpen}\n onToggle={handleToggle}\n onContainerCreation={setFocusToContent}\n classes={{\n root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n selection: cx(iconOnly && css({ padding: 0 })),\n }}\n adornment={\n iconOnly && color ? (\n <Checkbox\n className={classes.headerColorIconOnly}\n color={[color, \"transparent\"]}\n />\n ) : dropdownIcon === \"colorPicker\" ? (\n <ColorPicker className={classes.colorPickerIcon} />\n ) : undefined\n }\n placeholder={\n iconOnly ? undefined : color ? (\n <>\n <Checkbox\n className={classes.headerColorIcon}\n color={[color, \"transparent\"]}\n />\n <HvTypography\n className={classes.headerColorValue}\n variant=\"label\"\n >\n {color}\n </HvTypography>\n </>\n ) : (\n placeholder\n )\n }\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n >\n <HvPanel className={classes.panel}>\n <div className={classes.colorPicker}>\n {recommendedColorsPosition === \"top\" && (\n <PresetColors\n className={classes.recommendedColorsRoot}\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n {showCustomColors && (\n <Picker\n classes={{\n fields: cx({\n [classes.pickerFields]:\n recommendedColorsPosition === \"bottom\" \|\| showSavedColors,\n }),\n }}\n title={showLabels ? labels?.customColorsLabel : undefined}\n color={color}\n onChange={handleOnChange}\n onChangeComplete={handleOnChangeComplete}\n />\n )}\n {showSavedColors && (\n <SavedColors\n colors={savedColors}\n onAddColor={handleAddColor}\n onClickColor={handleSelect}\n onRemoveColor={handleRemoveColor}\n deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n addButtonAriaLabel={addSavedColorButtonAriaLabel}\n />\n )}\n {recommendedColorsPosition === \"bottom\" && (\n <PresetColors\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n </div>\n </HvPanel>\n </HvBaseDropdown>\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","props","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","jsxs","HvFormElement","root","labelContainer","jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","dropdownRootIconOnly","selection","padding","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","undefined","Fragment","headerColorIcon","HvTypography","headerColorValue","join","trim","HvPanel","panel","colorPicker","PresetColors","recommendedColorsRoot","Picker","fields","pickerFields","SavedColors"],"mappings":"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"}