@hitachivantara/uikit-react-core 5.0.0-next.8 → 5.0.0

package/dist/esm/components/Calendar/utils.js

@@ -0,0 +1,142 @@
+import dayjs from "dayjs";
+import isNil from "lodash/isNil";
+import { DATETIMEFORMAT_OPTIONS, REPRESENTATION_VALUES } from "./enums.js";
+const CALENDAR_WEEKS = 6;
+const zeroPad = (value, length) => `${value}`.padStart(length, "0");
+const getMonthDays = (month, year) => new Date(year, month, 0).getDate();
+const getMonthFirstWeekday = (month, year) => new Date(year, month - 1, 1).getDay();
+const makeUTCDate = (year, monthIndex, day, hour = 1) => new Date(Date.UTC(year, monthIndex, day, hour));
+const isDate = (date) => Object.prototype.toString.call(date) === "[object Date]" && !Number.isNaN(date.valueOf());
+const isDateRangeProp = (date) => "startDate" in date;
+const isSameMonth = (date1, date2) => {
+  if (!(isDate(date1) && isDate(date2)))
+    return false;
+  return date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+};
+const isSameDay = (date1, date2) => {
+  if (!(isDate(date1) && isDate(date2)))
+    return false;
+  return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+};
+const getDateISO = (date) => {
+  if (!isDate(date))
+    return null;
+  return [date.getFullYear(), zeroPad(date.getMonth() + 1, 2), zeroPad(date.getDate(), 2)].join("-");
+};
+const getPreviousMonth = (month, year) => {
+  const prevMonth = month > 1 ? month - 1 : 12;
+  const prevMonthYear = month > 1 ? year : year - 1;
+  return {
+    month: prevMonth,
+    year: prevMonthYear
+  };
+};
+const getNextMonth = (month, year) => {
+  const nextMonth = month < 12 ? month + 1 : 1;
+  const nextMonthYear = month < 12 ? year : year + 1;
+  return {
+    month: nextMonth,
+    year: nextMonthYear
+  };
+};
+const uppercaseFirstLetter = (monthName) => monthName[0].toUpperCase() + monthName.substring(1);
+const getMonthNamesList = (locale, representationValue = REPRESENTATION_VALUES.LONG) => {
+  const options = {
+    month: representationValue,
+    timeZone: "UTC"
+  };
+  return [...new Array(12)].map((n, index) => {
+    const auxDate = makeUTCDate(1970, index, 1);
+    return uppercaseFirstLetter(Intl.DateTimeFormat(locale, options).format(auxDate));
+  });
+};
+const getWeekdayNamesList = (locale, dateTimeFormatValue = DATETIMEFORMAT_OPTIONS.LONG) => {
+  const options = {
+    weekday: dateTimeFormatValue,
+    timeZone: "UTC"
+  };
+  const weekdayNames = [];
+  for (let day = 4; day <= 10; day += 1) {
+    const auxDate = makeUTCDate(1970, 0, day);
+    weekdayNames.push(Intl.DateTimeFormat(locale, options).format(auxDate));
+  }
+  return weekdayNames;
+};
+const getMonthName = (date, locale, representationValue = REPRESENTATION_VALUES.LONG) => new Intl.DateTimeFormat(locale, {
+  month: representationValue
+}).format(date);
+const getFormattedDate = (date, locale, rep = REPRESENTATION_VALUES.SHORT) => `${date.getDate()} ${getMonthName(date, locale, rep)} ${date.getFullYear()}`;
+const createDatesArray = (month, year) => {
+  const monthDays = getMonthDays(month, year);
+  const daysFromPrevMonth = getMonthFirstWeekday(month, year);
+  const daysFromNextMonth = CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);
+  const prevMonthYear = getPreviousMonth(month, year);
+  const nextMonthYear = getNextMonth(month, year);
+  const prevMonthDays = getMonthDays(prevMonthYear.month, prevMonthYear.year);
+  const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {
+    const day = index + 1 + (prevMonthDays - daysFromPrevMonth);
+    return new Date(prevMonthYear.year, prevMonthYear.month - 1, day);
+  });
+  const currentMonthDates = [...new Array(monthDays)].map((n, index) => {
+    const day = index + 1;
+    return new Date(year, month - 1, day);
+  });
+  const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {
+    const day = index + 1;
+    return new Date(nextMonthYear.year, nextMonthYear.month - 1, day);
+  });
+  return [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];
+};
+const isRange = (date) => date != null && typeof date === "object" && "startDate" in date;
+const dateInProvidedValueRange = (date, providedValueRange) => {
+  const {
+    startDate,
+    endDate
+  } = providedValueRange;
+  if (!isRange(providedValueRange) || isNil(endDate))
+    return false;
+  const localEndDate = endDate;
+  const modStartDate = dayjs(startDate).format("YYYY-MM-DD");
+  const modEndDate = dayjs(localEndDate).format("YYYY-MM-DD");
+  const convertedDate = dayjs(date).format("YYYY-MM-DD");
+  return convertedDate >= modStartDate && convertedDate <= modEndDate;
+};
+const checkIfDateIsDisabled = (date, minimumDate, maximumDate) => {
+  if (!minimumDate && !maximumDate)
+    return false;
+  const modStartDate = minimumDate ? dayjs(minimumDate).format("YYYY-MM-DD") : void 0;
+  const modEndDate = maximumDate ? dayjs(maximumDate).format("YYYY-MM-DD") : void 0;
+  const convertedDate = dayjs(date).format("YYYY-MM-DD");
+  return modStartDate !== void 0 && convertedDate < modStartDate || modEndDate !== void 0 && convertedDate > modEndDate;
+};
+const formatToLocale = (date, locale) => {
+  return new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  }).format(date);
+};
+export {
+  CALENDAR_WEEKS,
+  checkIfDateIsDisabled,
+  createDatesArray,
+  dateInProvidedValueRange,
+  formatToLocale,
+  getDateISO,
+  getFormattedDate,
+  getMonthDays,
+  getMonthFirstWeekday,
+  getMonthName,
+  getMonthNamesList,
+  getNextMonth,
+  getPreviousMonth,
+  getWeekdayNamesList,
+  isDate,
+  isDateRangeProp,
+  isRange,
+  isSameDay,
+  isSameMonth,
+  makeUTCDate,
+  zeroPad
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/Calendar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/Calendar/utils.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport isNil from \"lodash/isNil\";\nimport { DateRangeProp } from \"./Calendar\";\nimport { DATETIMEFORMAT_OPTIONS, REPRESENTATION_VALUES } from \"./enums\";\n\n/**\n * Constant with the number of weeks to be displayed on the calendar.\n */\nexport const CALENDAR_WEEKS = 6;\n\n/**\n * Constant with the default locale that should be used as the default.\n */\nexport const DEFAULT_LOCALE = \"en\";\n\n/**\n * Pads a string value with leading zeroes(0) until length is reached.\n * For example: zeroPad(5, 2) => \"05\".\n *\n * @param {number} value - Value to be padded.\n * @param {number} length - Length of the value after the padding is added.\n * @returns {string} The value as a string with the received amount of padding.\n */\nexport const zeroPad = (value, length) => `${value}`.padStart(length, \"0\");\n\n/**\n * Returns the number of days in the month given a month and year.\n *\n * @param {number} month - Number of the month (1 to 12).\n * @param {number} year - Number of the year.\n * @returns {number} The number of days in a month for the received year.\n */\nexport const getMonthDays = (month, year) => new Date(year, month, 0).getDate();\n\n/**\n * Gets the week day of the first day of a given month and year.\n * From 0 (Sunday) to 6 (Saturday).\n *\n * @param {number} month - Number of the month (1 to 12).\n * @param {number} year - Number of the year.\n * @returns {number} The zero indexed week day where 0 is Sunday (0 to 6).\n */\nexport const getMonthFirstWeekday = (month, year) =>\n  new Date(year, month - 1, 1).getDay();\n\n/**\n * Creates a `Date` instance in UTC timezone.\n *\n * @param {number} year - The year of the date.\n * @param {number} monthIndex - The zero indexed month of the year (0 to 11).\n * @param {number} day - The day of the month.\n * @param {number} [hour=1] - The hour of the day.\n * @returns {Date} A `Date` instance in UTC timezone.\n */\nexport const makeUTCDate = (year, monthIndex, day, hour = 1) =>\n  new Date(Date.UTC(year, monthIndex, day, hour));\n\n/**\n * Checks if the received date is a valid date.\n *\n * @param {Date} date - The date to be validated.\n * @returns {boolean} A flag stating if the date is valid or not.\n */\nexport const isDate = (date): date is Date =>\n  Object.prototype.toString.call(date) === \"[object Date]\" &&\n  !Number.isNaN(date.valueOf());\n\nexport const isDateRangeProp = (date: any): date is DateRangeProp =>\n  \"startDate\" in date;\n/**\n * Checks if two dates are in the same month and year.\n *\n * @param {Date} date1 - First date.\n * @param {Date} date2 - Second date.\n * @returns {boolean} A flag stating if the dates are in the same month and year or not.\n */\nexport const isSameMonth = (date1, date2) => {\n  if (!(isDate(date1) && isDate(date2))) return false;\n\n  return (\n    date1.getMonth() === date2.getMonth() &&\n    date1.getFullYear() === date2.getFullYear()\n  );\n};\n\n/**\n * Checks if two dates are on the same day.\n *\n * @param {Date} date1 - First date.\n * @param {Date} date2 - Second date.\n * @returns {boolean} A flag stating if the dates are in the same day or not.\n */\nexport const isSameDay = (date1, date2) => {\n  if (!(isDate(date1) && isDate(date2))) return false;\n\n  return (\n    date1.getDate() === date2.getDate() &&\n    date1.getMonth() === date2.getMonth() &&\n    date1.getFullYear() === date2.getFullYear()\n  );\n};\n\n/**\n * Formats the received date using the ISO format (YYYY-MM-DD).\n *\n * @param {Date} date - The date to be formatted.\n * @returns {string || null} The formatted date in ISO format.\n */\nexport const getDateISO = (date) => {\n  if (!isDate(date)) return null;\n\n  return [\n    date.getFullYear(),\n    zeroPad(date.getMonth() + 1, 2),\n    zeroPad(date.getDate(), 2),\n  ].join(\"-\");\n};\n\n/**\n * Returns an object with the previous month taking also into consideration the year.\n * For example the previous month of January 2000 will be December 1999.\n *\n * @param {number} month - Number of the month.\n * @param {number} year - Number of the year.\n * @returns {({month: number, year: number})} Object with new month and year defined.\n */\nexport const getPreviousMonth = (month, year) => {\n  const prevMonth = month > 1 ? month - 1 : 12;\n  const prevMonthYear = month > 1 ? year : year - 1;\n\n  return { month: prevMonth, year: prevMonthYear };\n};\n\n/**\n * Returns an object with the next month taking also into consideration the year.\n * For example the next month of December 2000 will be January 2001.\n *\n * @param {number} month - Number of the month.\n * @param {number} year - Number of the year.\n * @returns {({month: number, year: number})} Object with new month and year defined.\n */\nexport const getNextMonth = (month, year) => {\n  const nextMonth = month < 12 ? month + 1 : 1;\n  const nextMonthYear = month < 12 ? year : year + 1;\n\n  return { month: nextMonth, year: nextMonthYear };\n};\n\nconst uppercaseFirstLetter = (monthName) =>\n  monthName[0].toUpperCase() + monthName.substring(1);\n\n/**\n * Returns a list with the names of all the months localized in the received locale and representation value.\n *\n * @param {string} locale - The locale to be applied to the Intl format.\n * @param {RepresentationValuesType} [representationValue=REPRESENTATION_VALUES.LONG] - The representation value for the month.\n * @returns {Array} An array with all the months names.\n */\nexport const getMonthNamesList = (\n  locale,\n  representationValue = REPRESENTATION_VALUES.LONG\n) => {\n  const options = { month: representationValue, timeZone: \"UTC\" };\n\n  return [...new Array(12)].map((n, index) => {\n    const auxDate = makeUTCDate(1970, index, 1);\n    return uppercaseFirstLetter(\n      Intl.DateTimeFormat(locale, options).format(auxDate)\n    );\n  });\n};\n\n/**\n * Returns a list with the names of all the weekdays localized in the received locale and representation value.\n *\n * @param {string} locale - The locale to be applied.\n * @param {DateTimeFormatOptions} [dateTimeFormatValue = DATETIMEFORMAT_OPTIONS.LONG] - The representation value for the weekday.\n * @returns {Array} An array with all the weekday names.\n */\nexport const getWeekdayNamesList = (\n  locale: string,\n  dateTimeFormatValue = DATETIMEFORMAT_OPTIONS.LONG\n) => {\n  const options = { weekday: dateTimeFormatValue, timeZone: \"UTC\" };\n  const weekdayNames: string[] = [];\n\n  for (let day = 4; day <= 10; day += 1) {\n    const auxDate = makeUTCDate(1970, 0, day);\n    weekdayNames.push(Intl.DateTimeFormat(locale, options).format(auxDate));\n  }\n  return weekdayNames;\n};\n\n/**\n * Returns the name of the month for the supplied month localized in the received locale and representation value.\n *\n * @param {Date} date - The date from which the month name is extracted.\n * @param {string} locale - The locale to be applied to the Intl format.\n * @param {string} [representationValue=REPRESENTATION_VALUES.LONG] - The locale to be applied to the Intl format.\n * @returns {string} The name of the month.\n */\nexport const getMonthName = (\n  date,\n  locale,\n  representationValue = REPRESENTATION_VALUES.LONG\n) =>\n  new Intl.DateTimeFormat(locale, { month: representationValue }).format(date);\n\n/**\n * Formats the received date according to Design System specifications.\n * Currently: day month, year => `14 Aug, 2019`.\n *\n * @param {Date} date - UTC date to be formatted.\n * @param {string} locale - The locale to be applied to the Intl format.\n * @returns {string} The formatted date as a string.\n */\nexport const getFormattedDate = (\n  date,\n  locale,\n  rep = REPRESENTATION_VALUES.SHORT\n) =>\n  `${date.getDate()} ${getMonthName(date, locale, rep)} ${date.getFullYear()}`;\n/**\n * Creates an array of 42 days. The complete current month and enough days from the previous and next months to fill\n * the 42 positions.\n *\n * @param {number} month - The number of the month (1 to 12).\n * @param {number} year - The number of the year.\n * @returns {Array} The array of dates.\n */\nexport const createDatesArray = (month, year) => {\n  // Initializes the variables needed to calculate the dates for the received month and year\n  const monthDays = getMonthDays(month, year);\n  const daysFromPrevMonth = getMonthFirstWeekday(month, year);\n  const daysFromNextMonth =\n    CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);\n  const prevMonthYear = getPreviousMonth(month, year);\n  const nextMonthYear = getNextMonth(month, year);\n  const prevMonthDays = getMonthDays(prevMonthYear.month, prevMonthYear.year);\n\n  // Creates the arrays for the dates for previous, current and next months\n  const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {\n    const day = index + 1 + (prevMonthDays - daysFromPrevMonth);\n    return new Date(prevMonthYear.year, prevMonthYear.month - 1, day);\n  });\n  const currentMonthDates = [...new Array(monthDays)].map((n, index) => {\n    const day = index + 1;\n    return new Date(year, month - 1, day);\n  });\n  const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {\n    const day = index + 1;\n    return new Date(nextMonthYear.year, nextMonthYear.month - 1, day);\n  });\n\n  return [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];\n};\n\n/**\n * Checks if the received locale is valid according to Intl.\n *\n * @param {string} locale - The locale to be checked\n * @returns {boolean} - True if the locale is valid, false otherwise.\n */\nexport const isValidLocale = (locale) => {\n  try {\n    if (Intl.DateTimeFormat.supportedLocalesOf(locale).length > 0) {\n      return true;\n    }\n    // eslint-disable-next-line no-console\n    console.warn(`${locale} is not supported. Falling back to a known locale.`);\n    return false;\n  } catch (error) {\n    if (\n      error != null &&\n      typeof error === \"object\" &&\n      \"name\" in error &&\n      error?.name === \"RangeError\"\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(`Invalid locale: ${locale}`);\n      return false;\n    }\n    if (error != null && typeof error === \"object\" && \"message\" in error) {\n      // eslint-disable-next-line no-console\n      console.error(error?.message);\n      return false;\n    }\n\n    return false;\n  }\n};\n\nexport const isRange = (date): date is DateRangeProp =>\n  date != null && typeof date === \"object\" && \"startDate\" in date;\n\n/**\n * Checks if the date falls within a specified date range.\n *\n * @param {Date} date - The date to be evaluated.\n * @param {object} providedValueRange - Provided selection range.\n * @returns {boolean} - True if the date falls within the range, false otherwise.\n */\nexport const dateInProvidedValueRange = (date, providedValueRange) => {\n  const { startDate, endDate } = providedValueRange;\n\n  if (!isRange(providedValueRange) || isNil(endDate)) return false;\n  const localEndDate = endDate;\n\n  const modStartDate = dayjs(startDate).format(\"YYYY-MM-DD\");\n  const modEndDate = dayjs(localEndDate).format(\"YYYY-MM-DD\");\n\n  const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n  return convertedDate >= modStartDate && convertedDate <= modEndDate;\n};\n\nexport const checkIfDateIsDisabled = (\n  date?: string | number | Date | dayjs.Dayjs,\n  minimumDate?: string | number | Date | dayjs.Dayjs,\n  maximumDate?: string | number | Date | dayjs.Dayjs\n) => {\n  if (!minimumDate && !maximumDate) return false;\n  const modStartDate = minimumDate\n    ? dayjs(minimumDate).format(\"YYYY-MM-DD\")\n    : undefined;\n  const modEndDate = maximumDate\n    ? dayjs(maximumDate).format(\"YYYY-MM-DD\")\n    : undefined;\n\n  const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n  return (\n    (modStartDate !== undefined && convertedDate < modStartDate) ||\n    (modEndDate !== undefined && convertedDate > modEndDate)\n  );\n};\n\nexport const formatToLocale = (date, locale) => {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"numeric\",\n    month: \"short\",\n    year: \"numeric\",\n  }).format(date);\n};\n"],"names":["CALENDAR_WEEKS","zeroPad","value","length","padStart","getMonthDays","month","year","Date","getDate","getMonthFirstWeekday","getDay","makeUTCDate","monthIndex","day","hour","UTC","isDate","date","Object","prototype","toString","call","Number","isNaN","valueOf","isDateRangeProp","isSameMonth","date1","date2","getMonth","getFullYear","isSameDay","getDateISO","join","getPreviousMonth","prevMonth","prevMonthYear","getNextMonth","nextMonth","nextMonthYear","uppercaseFirstLetter","monthName","toUpperCase","substring","getMonthNamesList","locale","representationValue","REPRESENTATION_VALUES","LONG","options","timeZone","Array","map","n","index","auxDate","Intl","DateTimeFormat","format","getWeekdayNamesList","dateTimeFormatValue","DATETIMEFORMAT_OPTIONS","weekday","weekdayNames","push","getMonthName","getFormattedDate","rep","SHORT","createDatesArray","monthDays","daysFromPrevMonth","daysFromNextMonth","prevMonthDays","prevMonthDates","currentMonthDates","nextMonthDates","isRange","dateInProvidedValueRange","providedValueRange","startDate","endDate","isNil","localEndDate","modStartDate","dayjs","modEndDate","convertedDate","checkIfDateIsDisabled","minimumDate","maximumDate","undefined","formatToLocale"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
-import { css } from "@emotion/css";
+import { ClassNames } from "@emotion/react";
 import { theme } from "@hitachivantara/uikit-styles";
 import clsx from "clsx";
 import { styles } from "./Card.styles.js";
 import cardClasses from "./cardClasses.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvBox } from "../Box/Box.js";
 const HvCard = ({
   classes,
@@ -16,24 +16,28 @@ const HvCard = ({
   bgcolor,
   ...others
 }) => {
-  return /* @__PURE__ */ jsxs(HvBox, {
-    "aria-selected": selectable ? selected : void 0,
-    className: clsx(styles.root, bgcolor && /* @__PURE__ */ css({
-      backgroundColor: theme.colors[bgcolor]
-    }, process.env.NODE_ENV === "production" ? "" : ";label:HvCard;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRFUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYXJkL0NhcmQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IGNsc3ggZnJvbSBcImNsc3hcIjtcbmltcG9ydCB7IEh2Qm94IH0gZnJvbSBcImNvbXBvbmVudHNcIjtcbmltcG9ydCB7IEh2QmFzZVByb3BzIH0gZnJvbSBcIi4uLy4uL3R5cGVzXCI7XG5pbXBvcnQgeyBIdkF0bW9zcGhlcmVDb2xvcktleXMsIEh2U2VtYW50aWNDb2xvcktleXMgfSBmcm9tIFwiLi4vLi4vdHlwZXMvdG9rZW5zXCI7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tIFwiLi9DYXJkLnN0eWxlc1wiO1xuaW1wb3J0IGNhcmRDbGFzc2VzLCB7IEh2Q2FyZENsYXNzZXMgfSBmcm9tIFwiLi9jYXJkQ2xhc3Nlc1wiO1xuXG5leHBvcnQgdHlwZSBIdkNhcmRQcm9wcyA9IEh2QmFzZVByb3BzICYge1xuICAvKiogVGhlIHJlbmRlcmFibGUgY29udGVudCBpbnNpZGUgdGhlIGljb24gc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICBpY29uPzogUmVhY3QuUmVhY3ROb2RlO1xuICAvKiogV2hldGhlciB0aGUgY2FyZCBpcyBzZWxlY3RhYmxlLiAqL1xuICBzZWxlY3RhYmxlPzogYm9vbGVhbjtcbiAgLyoqIFdoZXRoZXIgdGhlIGNhcmQgaXMgY3VycmVudGx5IHNlbGVjdGVkLiAqL1xuICBzZWxlY3RlZD86IGJvb2xlYW47XG4gIC8qKiBUaGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgY2FyZC4gKi9cbiAgYmdjb2xvcj86IFwic2VtYTBcIiB8IEh2U2VtYW50aWNDb2xvcktleXMgfCBIdkF0bW9zcGhlcmVDb2xvcktleXM7XG4gIC8qKlxuICAgKiAgVGhlIGJvcmRlciBjb2xvciBhdCB0aGUgdG9wIG9mIHRoZSBjYXJkLiBNdXN0IGJlIG9uZSBvZiBwYWxldHRlIHNlbWFudGljIG9yIGF0bW9zcGhlcmUgY29sb3JzLlxuICAgKiAgVG8gc2V0IGFub3RoZXIgY29sb3IsIHRoZSBib3JkZXJUb3Agc2hvdWxkIGJlIG92ZXJyaWRlLlxuICAgKi9cbiAgc3RhdHVzQ29sb3I/OiBcInNlbWEwXCIgfCBIdlNlbWFudGljQ29sb3JLZXlzIHwgSHZBdG1vc3BoZXJlQ29sb3JLZXlzO1xuICAvKiogQSBKc3MgT2JqZWN0IHVzZWQgdG8gb3ZlcnJpZGUgb3IgZXh0ZW5kIHRoZSBzdHlsZXMgYXBwbGllZCB0byB0aGUgY29tcG9uZW50LiAqL1xuICBjbGFzc2VzPzogSHZDYXJkQ2xhc3Nlcztcbn07XG5cbi8qKlxuICogQSBjYXJkIGlzIGEgY29udGFpbmVyIGZvciBhIGZldyBzaG9ydCBhbmQgcmVsYXRlZCBwaWVjZXMgb2YgY29udGVudC5cbiAqIEl0IHJvdWdobHkgcmVzZW1ibGVzIGEgcGxheWluZyBjYXJkIGluIHNpemUgYW5kIHNoYXBlIGFuZCBpcyBpbnRlbmRlZCBhcyBhXG4gKiBsaW5rZWQgc2hvcnQgcmVwcmVzZW50YXRpb24gb2YgYSBjb25jZXB0dWFsIHVuaXQuIEZvciB0aGF0IHJlYXNvbixcbiAqIHRoaXMgcGF0dGVybiBtdXN0IGJlIHVzZWQgYXMgYW4gZW50cnktcG9pbnQgZm9yIGZ1cnRoZXIgaW5mb3JtYXRpb24uXG4gKi9cbmV4cG9ydCBjb25zdCBIdkNhcmQgPSAoe1xuICBjbGFzc2VzLFxuICBjbGFzc05hbWUsXG4gIGNoaWxkcmVuLFxuICBpY29uLFxuICBzZWxlY3RhYmxlID0gZmFsc2UsXG4gIHNlbGVjdGVkID0gZmFsc2UsXG4gIHN0YXR1c0NvbG9yID0gXCJzZW1hMFwiLFxuICBiZ2NvbG9yLFxuICAuLi5vdGhlcnNcbn06IEh2Q2FyZFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEh2Qm94XG4gICAgICBhcmlhLXNlbGVjdGVkPXtzZWxlY3RhYmxlID8gc2VsZWN0ZWQgOiB1bmRlZmluZWR9XG4gICAgICBjbGFzc05hbWU9e2Nsc3goXG4gICAgICAgIHN0eWxlcy5yb290LFxuICAgICAgICBiZ2NvbG9yICYmXG4gICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzW2JnY29sb3JdLFxuICAgICAgICAgIH0pLFxuICAgICAgICBcIkh2SXNDYXJkR3JpZEVsZW1lbnRcIixcbiAgICAgICAgY2FyZENsYXNzZXMucm9vdCxcbiAgICAgICAgY2xhc3Nlcz8ucm9vdCxcbiAgICAgICAgY2xhc3NOYW1lLFxuICAgICAgICBzZWxlY3RhYmxlICYmXG4gICAgICAgICAgY2xzeChzdHlsZXMuc2VsZWN0YWJsZSwgY2FyZENsYXNzZXMuc2VsZWN0YWJsZSwgY2xhc3Nlcz8uc2VsZWN0YWJsZSksXG4gICAgICAgIHNlbGVjdGVkICYmXG4gICAgICAgICAgY2xzeChzdHlsZXMuc2VsZWN0ZWQsIGNhcmRDbGFzc2VzLnNlbGVjdGVkLCBjbGFzc2VzPy5zZWxlY3RlZClcbiAgICAgICl9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgID5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3NOYW1lPXtjbHN4KFxuICAgICAgICAgIHN0eWxlcy5zZW1hbnRpY0NvbnRhaW5lcixcbiAgICAgICAgICBjYXJkQ2xhc3Nlcy5zZW1hbnRpY0NvbnRhaW5lcixcbiAgICAgICAgICBjbGFzc2VzPy5zZW1hbnRpY0NvbnRhaW5lclxuICAgICAgICApfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPXtjbHN4KFxuICAgICAgICAgICAgc3R5bGVzLnNlbWFudGljQmFyLFxuICAgICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgICAgaGVpZ2h0OiBzZWxlY3RlZCA/IDQgOiAyLFxuICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6XG4gICAgICAgICAgICAgICAgc3RhdHVzQ29sb3IgPT09IFwic2VtYTBcIlxuICAgICAgICAgICAgICAgICAgPyBzZWxlY3RlZFxuICAgICAgICAgICAgICAgICAgICA/IHRoZW1lLmNvbG9ycy5hY2NlMVxuICAgICAgICAgICAgICAgICAgICA6IHRoZW1lLmNvbG9ycy5hdG1vNFxuICAgICAgICAgICAgICAgICAgOiB0aGVtZS5jb2xvcnNbc3RhdHVzQ29sb3JdLFxuICAgICAgICAgICAgfSksXG4gICAgICAgICAgICBjYXJkQ2xhc3Nlcy5zZW1hbnRpY0JhcixcbiAgICAgICAgICAgIGNsYXNzZXM/LnNlbWFudGljQmFyXG4gICAgICAgICAgKX1cbiAgICAgICAgLz5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nsc3goc3R5bGVzLmljb24sIGNhcmRDbGFzc2VzLmljb24sIGNsYXNzZXM/Lmljb24pfT5cbiAgICAgICAgICB7aWNvbn1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0h2Qm94PlxuICApO1xufTtcbiJdfQ== */"), "HvIsCardGridElement", cardClasses.root, classes == null ? void 0 : classes.root, className, selectable && clsx(styles.selectable, cardClasses.selectable, classes == null ? void 0 : classes.selectable), selected && clsx(styles.selected, cardClasses.selected, classes == null ? void 0 : classes.selected)),
-    ...others,
-    children: [/* @__PURE__ */ jsxs("div", {
-      className: clsx(styles.semanticContainer, cardClasses.semanticContainer, classes == null ? void 0 : classes.semanticContainer),
-      children: [/* @__PURE__ */ jsx("div", {
-        className: clsx(styles.semanticBar, /* @__PURE__ */ css({
-          height: selected ? 4 : 2,
-          backgroundColor: statusColor === "sema0" ? selected ? theme.colors.acce1 : theme.colors.atmo4 : theme.colors[statusColor]
-        }, process.env.NODE_ENV === "production" ? "" : ";label:HvCard;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRVkiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYXJkL0NhcmQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IGNsc3ggZnJvbSBcImNsc3hcIjtcbmltcG9ydCB7IEh2Qm94IH0gZnJvbSBcImNvbXBvbmVudHNcIjtcbmltcG9ydCB7IEh2QmFzZVByb3BzIH0gZnJvbSBcIi4uLy4uL3R5cGVzXCI7XG5pbXBvcnQgeyBIdkF0bW9zcGhlcmVDb2xvcktleXMsIEh2U2VtYW50aWNDb2xvcktleXMgfSBmcm9tIFwiLi4vLi4vdHlwZXMvdG9rZW5zXCI7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tIFwiLi9DYXJkLnN0eWxlc1wiO1xuaW1wb3J0IGNhcmRDbGFzc2VzLCB7IEh2Q2FyZENsYXNzZXMgfSBmcm9tIFwiLi9jYXJkQ2xhc3Nlc1wiO1xuXG5leHBvcnQgdHlwZSBIdkNhcmRQcm9wcyA9IEh2QmFzZVByb3BzICYge1xuICAvKiogVGhlIHJlbmRlcmFibGUgY29udGVudCBpbnNpZGUgdGhlIGljb24gc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICBpY29uPzogUmVhY3QuUmVhY3ROb2RlO1xuICAvKiogV2hldGhlciB0aGUgY2FyZCBpcyBzZWxlY3RhYmxlLiAqL1xuICBzZWxlY3RhYmxlPzogYm9vbGVhbjtcbiAgLyoqIFdoZXRoZXIgdGhlIGNhcmQgaXMgY3VycmVudGx5IHNlbGVjdGVkLiAqL1xuICBzZWxlY3RlZD86IGJvb2xlYW47XG4gIC8qKiBUaGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgY2FyZC4gKi9cbiAgYmdjb2xvcj86IFwic2VtYTBcIiB8IEh2U2VtYW50aWNDb2xvcktleXMgfCBIdkF0bW9zcGhlcmVDb2xvcktleXM7XG4gIC8qKlxuICAgKiAgVGhlIGJvcmRlciBjb2xvciBhdCB0aGUgdG9wIG9mIHRoZSBjYXJkLiBNdXN0IGJlIG9uZSBvZiBwYWxldHRlIHNlbWFudGljIG9yIGF0bW9zcGhlcmUgY29sb3JzLlxuICAgKiAgVG8gc2V0IGFub3RoZXIgY29sb3IsIHRoZSBib3JkZXJUb3Agc2hvdWxkIGJlIG92ZXJyaWRlLlxuICAgKi9cbiAgc3RhdHVzQ29sb3I/OiBcInNlbWEwXCIgfCBIdlNlbWFudGljQ29sb3JLZXlzIHwgSHZBdG1vc3BoZXJlQ29sb3JLZXlzO1xuICAvKiogQSBKc3MgT2JqZWN0IHVzZWQgdG8gb3ZlcnJpZGUgb3IgZXh0ZW5kIHRoZSBzdHlsZXMgYXBwbGllZCB0byB0aGUgY29tcG9uZW50LiAqL1xuICBjbGFzc2VzPzogSHZDYXJkQ2xhc3Nlcztcbn07XG5cbi8qKlxuICogQSBjYXJkIGlzIGEgY29udGFpbmVyIGZvciBhIGZldyBzaG9ydCBhbmQgcmVsYXRlZCBwaWVjZXMgb2YgY29udGVudC5cbiAqIEl0IHJvdWdobHkgcmVzZW1ibGVzIGEgcGxheWluZyBjYXJkIGluIHNpemUgYW5kIHNoYXBlIGFuZCBpcyBpbnRlbmRlZCBhcyBhXG4gKiBsaW5rZWQgc2hvcnQgcmVwcmVzZW50YXRpb24gb2YgYSBjb25jZXB0dWFsIHVuaXQuIEZvciB0aGF0IHJlYXNvbixcbiAqIHRoaXMgcGF0dGVybiBtdXN0IGJlIHVzZWQgYXMgYW4gZW50cnktcG9pbnQgZm9yIGZ1cnRoZXIgaW5mb3JtYXRpb24uXG4gKi9cbmV4cG9ydCBjb25zdCBIdkNhcmQgPSAoe1xuICBjbGFzc2VzLFxuICBjbGFzc05hbWUsXG4gIGNoaWxkcmVuLFxuICBpY29uLFxuICBzZWxlY3RhYmxlID0gZmFsc2UsXG4gIHNlbGVjdGVkID0gZmFsc2UsXG4gIHN0YXR1c0NvbG9yID0gXCJzZW1hMFwiLFxuICBiZ2NvbG9yLFxuICAuLi5vdGhlcnNcbn06IEh2Q2FyZFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEh2Qm94XG4gICAgICBhcmlhLXNlbGVjdGVkPXtzZWxlY3RhYmxlID8gc2VsZWN0ZWQgOiB1bmRlZmluZWR9XG4gICAgICBjbGFzc05hbWU9e2Nsc3goXG4gICAgICAgIHN0eWxlcy5yb290LFxuICAgICAgICBiZ2NvbG9yICYmXG4gICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzW2JnY29sb3JdLFxuICAgICAgICAgIH0pLFxuICAgICAgICBcIkh2SXNDYXJkR3JpZEVsZW1lbnRcIixcbiAgICAgICAgY2FyZENsYXNzZXMucm9vdCxcbiAgICAgICAgY2xhc3Nlcz8ucm9vdCxcbiAgICAgICAgY2xhc3NOYW1lLFxuICAgICAgICBzZWxlY3RhYmxlICYmXG4gICAgICAgICAgY2xzeChzdHlsZXMuc2VsZWN0YWJsZSwgY2FyZENsYXNzZXMuc2VsZWN0YWJsZSwgY2xhc3Nlcz8uc2VsZWN0YWJsZSksXG4gICAgICAgIHNlbGVjdGVkICYmXG4gICAgICAgICAgY2xzeChzdHlsZXMuc2VsZWN0ZWQsIGNhcmRDbGFzc2VzLnNlbGVjdGVkLCBjbGFzc2VzPy5zZWxlY3RlZClcbiAgICAgICl9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgID5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3NOYW1lPXtjbHN4KFxuICAgICAgICAgIHN0eWxlcy5zZW1hbnRpY0NvbnRhaW5lcixcbiAgICAgICAgICBjYXJkQ2xhc3Nlcy5zZW1hbnRpY0NvbnRhaW5lcixcbiAgICAgICAgICBjbGFzc2VzPy5zZW1hbnRpY0NvbnRhaW5lclxuICAgICAgICApfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPXtjbHN4KFxuICAgICAgICAgICAgc3R5bGVzLnNlbWFudGljQmFyLFxuICAgICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgICAgaGVpZ2h0OiBzZWxlY3RlZCA/IDQgOiAyLFxuICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6XG4gICAgICAgICAgICAgICAgc3RhdHVzQ29sb3IgPT09IFwic2VtYTBcIlxuICAgICAgICAgICAgICAgICAgPyBzZWxlY3RlZFxuICAgICAgICAgICAgICAgICAgICA/IHRoZW1lLmNvbG9ycy5hY2NlMVxuICAgICAgICAgICAgICAgICAgICA6IHRoZW1lLmNvbG9ycy5hdG1vNFxuICAgICAgICAgICAgICAgICAgOiB0aGVtZS5jb2xvcnNbc3RhdHVzQ29sb3JdLFxuICAgICAgICAgICAgfSksXG4gICAgICAgICAgICBjYXJkQ2xhc3Nlcy5zZW1hbnRpY0JhcixcbiAgICAgICAgICAgIGNsYXNzZXM/LnNlbWFudGljQmFyXG4gICAgICAgICAgKX1cbiAgICAgICAgLz5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nsc3goc3R5bGVzLmljb24sIGNhcmRDbGFzc2VzLmljb24sIGNsYXNzZXM/Lmljb24pfT5cbiAgICAgICAgICB7aWNvbn1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0h2Qm94PlxuICApO1xufTtcbiJdfQ== */"), cardClasses.semanticBar, classes == null ? void 0 : classes.semanticBar)
-      }), /* @__PURE__ */ jsx("div", {
-        className: clsx(styles.icon, cardClasses.icon, classes == null ? void 0 : classes.icon),
-        children: icon
-      })]
-    }), children]
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsxs(HvBox, {
+      "aria-selected": selectable ? selected : void 0,
+      className: clsx(css(styles.root), css({
+        backgroundColor: bgcolor && theme.colors[bgcolor] || theme.card.backgroundColor
+      }), "HvIsCardGridElement", cardClasses.root, classes == null ? void 0 : classes.root, className, selectable && clsx(css(styles.selectable), cardClasses.selectable, classes == null ? void 0 : classes.selectable), selected && clsx(css(styles.selected), cardClasses.selected, classes == null ? void 0 : classes.selected)),
+      ...others,
+      children: [/* @__PURE__ */ jsxs("div", {
+        className: clsx(css(styles.semanticContainer), cardClasses.semanticContainer, classes == null ? void 0 : classes.semanticContainer),
+        children: [/* @__PURE__ */ jsx("div", {
+          className: clsx(css(styles.semanticBar), css({
+            height: selected ? 4 : 2,
+            backgroundColor: statusColor === "sema0" ? selected ? theme.colors.secondary : theme.colors.atmo4 : theme.colors[statusColor]
+          }), cardClasses.semanticBar, classes == null ? void 0 : classes.semanticBar)
+        }), /* @__PURE__ */ jsx("div", {
+          className: clsx(css(styles.icon), cardClasses.icon, classes == null ? void 0 : classes.icon),
+          children: icon
+        })]
+      }), children]
+    })
   });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport clsx from \"clsx\";\nimport { HvBox } from \"components\";\nimport { HvBaseProps } from \"../../types\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"../../types/tokens\";\nimport { styles } from \"./Card.styles\";\nimport cardClasses, { HvCardClasses } from \"./cardClasses\";\n\nexport type HvCardProps = 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?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n};\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = ({\n  classes,\n  className,\n  children,\n  icon,\n  selectable = false,\n  selected = false,\n  statusColor = \"sema0\",\n  bgcolor,\n  ...others\n}: HvCardProps) => {\n  return (\n    <HvBox\n      aria-selected={selectable ? selected : undefined}\n      className={clsx(\n        styles.root,\n        bgcolor &&\n          css({\n            backgroundColor: theme.colors[bgcolor],\n          }),\n        \"HvIsCardGridElement\",\n        cardClasses.root,\n        classes?.root,\n        className,\n        selectable &&\n          clsx(styles.selectable, cardClasses.selectable, classes?.selectable),\n        selected &&\n          clsx(styles.selected, cardClasses.selected, classes?.selected)\n      )}\n      {...others}\n    >\n      <div\n        className={clsx(\n          styles.semanticContainer,\n          cardClasses.semanticContainer,\n          classes?.semanticContainer\n        )}\n      >\n        <div\n          className={clsx(\n            styles.semanticBar,\n            css({\n              height: selected ? 4 : 2,\n              backgroundColor:\n                statusColor === \"sema0\"\n                  ? selected\n                    ? theme.colors.acce1\n                    : theme.colors.atmo4\n                  : theme.colors[statusColor],\n            }),\n            cardClasses.semanticBar,\n            classes?.semanticBar\n          )}\n        />\n        <div className={clsx(styles.icon, cardClasses.icon, classes?.icon)}>\n          {icon}\n        </div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","classes","className","children","icon","selectable","selected","statusColor","bgcolor","others","HvBox","undefined","clsx","styles","root","backgroundColor","theme","colors","process","env","NODE_ENV","cardClasses","_jsxs","semanticContainer","_jsx","semanticBar","height","acce1","atmo4"],"mappings":";;;;;;;AAiCO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,KACGC;AACQ,MAAM;AACjB,8BACGC,OAAK;AAAA,IACJ,iBAAeL,aAAaC,WAAWK;AAAAA,IACvCT,WAAWU,KACTC,OAAOC,MACPN,WACM,oBAAA;AAAA,MACFO,iBAAiBC,MAAMC,OAAOT;AAAAA,IAAAA,GAC/BU,QAAAC,IAAAC,aAAA,eAAA,KAAA,kBAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,66IAAA,GACH,uBACAC,YAAYP,MACZb,mCAASa,MACTZ,WACAG,cACEO,KAAKC,OAAOR,YAAYgB,YAAYhB,YAAYJ,mCAASI,UAAU,GACrEC,YACEM,KAAKC,OAAOP,UAAUe,YAAYf,UAAUL,mCAASK,QAAQ,CAAC;AAAA,IAChE,GACEG;AAAAA,IAAMN,WAEVmB,qBAAA,OAAA;AAAA,MACEpB,WAAWU,KACTC,OAAOU,mBACPF,YAAYE,mBACZtB,mCAASsB,iBAAiB;AAAA,MAC1BpB,WAEFqB,oBAAA,OAAA;AAAA,QACEtB,WAAWU,KACTC,OAAOY,aACH,oBAAA;AAAA,UACFC,QAAQpB,WAAW,IAAI;AAAA,UACvBS,iBACER,gBAAgB,UACZD,WACEU,MAAMC,OAAOU,QACbX,MAAMC,OAAOW,QACfZ,MAAMC,OAAOV;AAAAA,QAAAA,GACpBW,QAAAC,IAAAC,aAAA,eAAA,KAAA,kBAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,66IAAA,GACDC,YAAYI,aACZxB,mCAASwB,WAAW;AAAA,MAAA,CACpB,GAEJD,oBAAA,OAAA;AAAA,QAAKtB,WAAWU,KAAKC,OAAOT,MAAMiB,YAAYjB,MAAMH,mCAASG,IAAI;AAAA,QAAED,UAChEC;AAAAA,MAAAA,CACG,CAAA;AAAA,IAAA,CAAA,GAEPD,QAAQ;AAAA,EAAA,CACH;AAEZ;"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport clsx from \"clsx\";\nimport { HvBox } from \"components\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"../../types/tokens\";\nimport { styles } from \"./Card.styles\";\nimport cardClasses, { HvCardClasses } from \"./cardClasses\";\n\nexport type HvCardProps = HvBaseProps & {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n};\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = ({\n  classes,\n  className,\n  children,\n  icon,\n  selectable = false,\n  selected = false,\n  statusColor = \"sema0\",\n  bgcolor,\n  ...others\n}: HvCardProps) => {\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvBox\n          aria-selected={selectable ? selected : undefined}\n          className={clsx(\n            css(styles.root),\n            css({\n              backgroundColor:\n                (bgcolor && theme.colors[bgcolor]) ||\n                theme.card.backgroundColor,\n            }),\n            \"HvIsCardGridElement\",\n            cardClasses.root,\n            classes?.root,\n            className,\n            selectable &&\n              clsx(\n                css(styles.selectable),\n                cardClasses.selectable,\n                classes?.selectable\n              ),\n            selected &&\n              clsx(\n                css(styles.selected),\n                cardClasses.selected,\n                classes?.selected\n              )\n          )}\n          {...others}\n        >\n          <div\n            className={clsx(\n              css(styles.semanticContainer),\n              cardClasses.semanticContainer,\n              classes?.semanticContainer\n            )}\n          >\n            <div\n              className={clsx(\n                css(styles.semanticBar),\n                css({\n                  height: selected ? 4 : 2,\n                  backgroundColor:\n                    statusColor === \"sema0\"\n                      ? selected\n                        ? theme.colors.secondary\n                        : theme.colors.atmo4\n                      : theme.colors[statusColor],\n                }),\n                cardClasses.semanticBar,\n                classes?.semanticBar\n              )}\n            />\n            <div\n              className={clsx(\n                css(styles.icon),\n                cardClasses.icon,\n                classes?.icon\n              )}\n            >\n              {icon}\n            </div>\n          </div>\n          {children}\n        </HvBox>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCard","classes","className","children","icon","selectable","selected","statusColor","bgcolor","others","ClassNames","css","HvBox","undefined","clsx","styles","root","backgroundColor","theme","colors","card","cardClasses","_jsxs","semanticContainer","_jsx","semanticBar","height","secondary","atmo4"],"mappings":";;;;;;;AAqCO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,6BACGC,YAAU;AAAA,IAAAP,UACRA,CAAC;AAAA,MAAEQ;AAAAA,IAAAA,2BACDC,OAAK;AAAA,MACJ,iBAAeP,aAAaC,WAAWO;AAAAA,MACvCX,WAAWY,KACTH,IAAII,OAAOC,IAAI,GACfL,IAAI;AAAA,QACFM,iBACGT,WAAWU,MAAMC,OAAOX,OAAO,KAChCU,MAAME,KAAKH;AAAAA,MACd,CAAA,GACD,uBACAI,YAAYL,MACZf,mCAASe,MACTd,WACAG,cACES,KACEH,IAAII,OAAOV,UAAU,GACrBgB,YAAYhB,YACZJ,mCAASI,UAAU,GAEvBC,YACEQ,KACEH,IAAII,OAAOT,QAAQ,GACnBe,YAAYf,UACZL,mCAASK,QAAQ,CAClB;AAAA,MACH,GACEG;AAAAA,MAAMN,WAEVmB,qBAAA,OAAA;AAAA,QACEpB,WAAWY,KACTH,IAAII,OAAOQ,iBAAiB,GAC5BF,YAAYE,mBACZtB,mCAASsB,iBAAiB;AAAA,QAC1BpB,WAEFqB,oBAAA,OAAA;AAAA,UACEtB,WAAWY,KACTH,IAAII,OAAOU,WAAW,GACtBd,IAAI;AAAA,YACFe,QAAQpB,WAAW,IAAI;AAAA,YACvBW,iBACEV,gBAAgB,UACZD,WACEY,MAAMC,OAAOQ,YACbT,MAAMC,OAAOS,QACfV,MAAMC,OAAOZ,WAAW;AAAA,UAC/B,CAAA,GACDc,YAAYI,aACZxB,mCAASwB,WAAW;AAAA,QAAA,CACpB,GAEJD,oBAAA,OAAA;AAAA,UACEtB,WAAWY,KACTH,IAAII,OAAOX,IAAI,GACfiB,YAAYjB,MACZH,mCAASG,IAAI;AAAA,UACbD,UAEDC;AAAAA,QAAAA,CACG,CAAA;AAAA,MAAA,CAAA,GAEPD,QAAQ;AAAA,IAAA,CAAA;AAAA,EAAA,CAGF;AAEjB;"}

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

@@ -1,11 +1,7 @@
-import { css } from "@emotion/css";
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
 const styles = {
-  root: /* @__PURE__ */ css({
+  root: {
     overflow: "visible",
     position: "relative",
     outline: theme.card.outline,
@@ -16,39 +12,37 @@ const styles = {
     "&:focus": {
       outline: "none"
     }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:root;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1EiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYXJkL0NhcmQuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwidXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgcm9vdDogY3NzKHtcbiAgICBvdmVyZmxvdzogXCJ2aXNpYmxlXCIsXG4gICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICBvdXRsaW5lOiB0aGVtZS5jYXJkLm91dGxpbmUsXG4gICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5jYXJkLmJvcmRlclJhZGl1cyxcbiAgICBcIiYuZm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgIH0sXG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgIH0sXG4gIH0pLFxuICBzZWxlY3RlZDogY3NzKHtcbiAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgfSksXG4gIHNlbGVjdGFibGU6IGNzcyh7XG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jYXJkLmhvdmVyQ29sb3J9YCxcbiAgICB9LFxuICB9KSxcbiAgc2VtYW50aWNDb250YWluZXI6IGNzcyh7XG4gICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICBcIiYgPiAqXCI6IHtcbiAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICB6SW5kZXg6IDEsXG4gICAgfSxcbiAgfSksXG4gIGljb246IGNzcyh7XG4gICAgdG9wOiBgY2FsYygke3RoZW1lLmNhcmQuaWNvbk1hcmdpbn0gKyAke3RoZW1lLnNwYWNlLnhzfSlgLFxuICAgIHJpZ2h0OiBgY2FsYygke3RoZW1lLmNhcmQuaWNvbk1hcmdpbn0gKyAke3RoZW1lLnNwYWNlLnhzfSlgLFxuICB9KSxcbiAgc2VtYW50aWNCYXI6IGNzcyh7XG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIHRvcDogLTEsXG4gICAgcmlnaHQ6IDAsXG4gIH0pLFxufTtcbiJdfQ== */"),
-  selected: /* @__PURE__ */ css({
-    outline: `1px solid ${theme.colors.acce1}`,
+  },
+  selected: {
+    outline: `1px solid ${theme.colors.secondary}`,
     "&:hover": {
-      outline: `1px solid ${theme.colors.acce1}`
+      outline: `1px solid ${theme.colors.secondary}`
     },
     "&:focus": {
-      outline: `1px solid ${theme.colors.acce1}`
+      outline: `1px solid ${theme.colors.secondary}`
     }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:selected;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJZIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIHJvb3Q6IGNzcyh7XG4gICAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuY2FyZC5ib3JkZXJSYWRpdXMsXG4gICAgXCImLmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICB9KSxcbiAgc2VsZWN0ZWQ6IGNzcyh7XG4gICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gIH0pLFxuICBzZWxlY3RhYmxlOiBjc3Moe1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY2FyZC5ob3ZlckNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gIHNlbWFudGljQ29udGFpbmVyOiBjc3Moe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgXCImID4gKlwiOiB7XG4gICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgekluZGV4OiAxLFxuICAgIH0sXG4gIH0pLFxuICBpY29uOiBjc3Moe1xuICAgIHRvcDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgICByaWdodDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgfSksXG4gIHNlbWFudGljQmFyOiBjc3Moe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICB0b3A6IC0xLFxuICAgIHJpZ2h0OiAwLFxuICB9KSxcbn07XG4iXX0= */"),
-  selectable: /* @__PURE__ */ css({
+  },
+  selectable: {
     "&:hover": {
       outline: `1px solid ${theme.card.hoverColor}`
     }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:selectable;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJjIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIHJvb3Q6IGNzcyh7XG4gICAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuY2FyZC5ib3JkZXJSYWRpdXMsXG4gICAgXCImLmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICB9KSxcbiAgc2VsZWN0ZWQ6IGNzcyh7XG4gICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gIH0pLFxuICBzZWxlY3RhYmxlOiBjc3Moe1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY2FyZC5ob3ZlckNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gIHNlbWFudGljQ29udGFpbmVyOiBjc3Moe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgXCImID4gKlwiOiB7XG4gICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgekluZGV4OiAxLFxuICAgIH0sXG4gIH0pLFxuICBpY29uOiBjc3Moe1xuICAgIHRvcDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgICByaWdodDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgfSksXG4gIHNlbWFudGljQmFyOiBjc3Moe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICB0b3A6IC0xLFxuICAgIHJpZ2h0OiAwLFxuICB9KSxcbn07XG4iXX0= */"),
-  semanticContainer: /* @__PURE__ */ css(process.env.NODE_ENV === "production" ? {
-    name: "emolmc",
-    styles: "position:relative;& > *{position:absolute;z-index:1;}"
-  } : {
-    name: "1kcigpt-semanticContainer",
-    styles: "position:relative;& > *{position:absolute;z-index:1;};label:semanticContainer;",
-    map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0JxQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJ1dGlsc1wiO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICByb290OiBjc3Moe1xuICAgIG92ZXJmbG93OiBcInZpc2libGVcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIG91dGxpbmU6IHRoZW1lLmNhcmQub3V0bGluZSxcbiAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmNhcmQuYm9yZGVyUmFkaXVzLFxuICAgIFwiJi5mb2N1cy12aXNpYmxlXCI6IHtcbiAgICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgfSxcbiAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgb3V0bGluZTogXCJub25lXCIsXG4gICAgfSxcbiAgfSksXG4gIHNlbGVjdGVkOiBjc3Moe1xuICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICB9KSxcbiAgc2VsZWN0YWJsZTogY3NzKHtcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNhcmQuaG92ZXJDb2xvcn1gLFxuICAgIH0sXG4gIH0pLFxuICBzZW1hbnRpY0NvbnRhaW5lcjogY3NzKHtcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIFwiJiA+ICpcIjoge1xuICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgIHpJbmRleDogMSxcbiAgICB9LFxuICB9KSxcbiAgaWNvbjogY3NzKHtcbiAgICB0b3A6IGBjYWxjKCR7dGhlbWUuY2FyZC5pY29uTWFyZ2lufSArICR7dGhlbWUuc3BhY2UueHN9KWAsXG4gICAgcmlnaHQ6IGBjYWxjKCR7dGhlbWUuY2FyZC5pY29uTWFyZ2lufSArICR7dGhlbWUuc3BhY2UueHN9KWAsXG4gIH0pLFxuICBzZW1hbnRpY0JhcjogY3NzKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgdG9wOiAtMSxcbiAgICByaWdodDogMCxcbiAgfSksXG59O1xuIl19 */",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }),
-  icon: /* @__PURE__ */ css({
+  },
+  semanticContainer: {
+    position: "relative",
+    "& > *": {
+      position: "absolute",
+      zIndex: 1
+    }
+  },
+  icon: {
     top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,
     right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`
-  }, process.env.NODE_ENV === "production" ? "" : ";label:icon;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0NRIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIHJvb3Q6IGNzcyh7XG4gICAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuY2FyZC5ib3JkZXJSYWRpdXMsXG4gICAgXCImLmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICB9KSxcbiAgc2VsZWN0ZWQ6IGNzcyh7XG4gICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gIH0pLFxuICBzZWxlY3RhYmxlOiBjc3Moe1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY2FyZC5ob3ZlckNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gIHNlbWFudGljQ29udGFpbmVyOiBjc3Moe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgXCImID4gKlwiOiB7XG4gICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgekluZGV4OiAxLFxuICAgIH0sXG4gIH0pLFxuICBpY29uOiBjc3Moe1xuICAgIHRvcDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgICByaWdodDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgfSksXG4gIHNlbWFudGljQmFyOiBjc3Moe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICB0b3A6IC0xLFxuICAgIHJpZ2h0OiAwLFxuICB9KSxcbn07XG4iXX0= */"),
-  semanticBar: /* @__PURE__ */ css({
+  },
+  semanticBar: {
     width: "100%",
     top: -1,
     right: 0
-  }, process.env.NODE_ENV === "production" ? "" : ";label:semanticBar;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMENlIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIHJvb3Q6IGNzcyh7XG4gICAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuY2FyZC5ib3JkZXJSYWRpdXMsXG4gICAgXCImLmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICB9KSxcbiAgc2VsZWN0ZWQ6IGNzcyh7XG4gICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gIH0pLFxuICBzZWxlY3RhYmxlOiBjc3Moe1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY2FyZC5ob3ZlckNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gIHNlbWFudGljQ29udGFpbmVyOiBjc3Moe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgXCImID4gKlwiOiB7XG4gICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgekluZGV4OiAxLFxuICAgIH0sXG4gIH0pLFxuICBpY29uOiBjc3Moe1xuICAgIHRvcDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgICByaWdodDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgfSksXG4gIHNlbWFudGljQmFyOiBjc3Moe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICB0b3A6IC0xLFxuICAgIHJpZ2h0OiAwLFxuICB9KSxcbn07XG4iXX0= */")
+  }
 };
 export {
   styles

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"utils\";\n\nexport const styles = {\n  root: css({\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: css({\n    outline: `1px solid ${theme.colors.acce1}`,\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.acce1}`,\n    },\n    \"&:focus\": {\n      outline: `1px solid ${theme.colors.acce1}`,\n    },\n  }),\n  selectable: css({\n    \"&:hover\": {\n      outline: `1px solid ${theme.card.hoverColor}`,\n    },\n  }),\n  semanticContainer: css({\n    position: \"relative\",\n    \"& > *\": {\n      position: \"absolute\",\n      zIndex: 1,\n    },\n  }),\n  icon: css({\n    top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n    right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n  }),\n  semanticBar: css({\n    width: \"100%\",\n    top: -1,\n    right: 0,\n  }),\n};\n"],"names":["styles","root","overflow","position","outline","theme","card","borderRadius","outlineStyles","process","env","NODE_ENV","selected","colors","acce1","selectable","hoverColor","semanticContainer","css","name","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","icon","top","iconMargin","space","xs","right","semanticBar","width"],"mappings":";;;;;;AAIO,MAAMA,SAAS;AAAA,EACpBC,MAAU,oBAAA;AAAA,IACRC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAASC,MAAMC,KAAKF;AAAAA,IACpBG,cAAcF,MAAMC,KAAKC;AAAAA,IACzB,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTJ,SAAS;AAAA,IACX;AAAA,EACDK,GAAAA,QAAAC,IAAAC,aAAAF,eAAAA,KAAAA,gBAAAA,QAAAC,IAAAC,aAAC,eAAA,KAAA,q8DAAA;AAAA,EACFC,UAAc,oBAAA;AAAA,IACZR,SAAU,aAAYC,MAAMQ,OAAOC;AAAAA,IACnC,WAAW;AAAA,MACTV,SAAU,aAAYC,MAAMQ,OAAOC;AAAAA,IACrC;AAAA,IACA,WAAW;AAAA,MACTV,SAAU,aAAYC,MAAMQ,OAAOC;AAAAA,IACrC;AAAA,EACDL,GAAAA,QAAAC,IAAAC,aAAAF,eAAAA,KAAAA,oBAAAA,QAAAC,IAAAC,aAAC,eAAA,KAAA,q8DAAA;AAAA,EACFI,YAAgB,oBAAA;AAAA,IACd,WAAW;AAAA,MACTX,SAAU,aAAYC,MAAMC,KAAKU;AAAAA,IACnC;AAAA,EACDP,GAAAA,QAAAC,IAAAC,aAAAF,eAAAA,KAAAA,sBAAAA,QAAAC,IAAAC,aAAC,eAAA,KAAA,q8DAAA;AAAA,EACFM,mBAAmBC,oBAAGT,QAAAC,IAAAC,aAAA,eAAA;AAAA,IAAAQ,MAAA;AAAA,IAAAnB,QAAA;AAAA,EAAA,IAAA;AAAA,IAAAmB,MAAA;AAAA,IAAAnB,QAAA;AAAA,IAAAoB,KAAA;AAAA,IAAAC,UAAAC;AAAAA,EAAAA,CAMpB;AAAA,EACFC,MAAU,oBAAA;AAAA,IACRC,KAAM,QAAOnB,MAAMC,KAAKmB,gBAAgBpB,MAAMqB,MAAMC;AAAAA,IACpDC,OAAQ,QAAOvB,MAAMC,KAAKmB,gBAAgBpB,MAAMqB,MAAMC;AAAAA,EACvDlB,GAAAA,QAAAC,IAAAC,aAAAF,eAAAA,KAAAA,gBAAAA,QAAAC,IAAAC,aAAC,eAAA,KAAA,q8DAAA;AAAA,EACFkB,aAAiB,oBAAA;AAAA,IACfC,OAAO;AAAA,IACPN,KAAK;AAAA,IACLI,OAAO;AAAA,EACRnB,GAAAA,QAAAC,IAAAC,aAAA,eAAA,KAAA,uBAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,q8DAAA;AACH;"}
+{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"utils/focusUtils\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\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":["styles","root","overflow","position","outline","theme","card","borderRadius","outlineStyles","selected","colors","secondary","selectable","hoverColor","semanticContainer","zIndex","icon","top","iconMargin","space","xs","right","semanticBar","width"],"mappings":";;AAIO,MAAMA,SAA8C;AAAA,EACzDC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAASC,MAAMC,KAAKF;AAAAA,IACpBG,cAAcF,MAAMC,KAAKC;AAAAA,IACzB,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTJ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAK,UAAU;AAAA,IACRL,SAAU,aAAYC,MAAMK,OAAOC;AAAAA,IACnC,WAAW;AAAA,MACTP,SAAU,aAAYC,MAAMK,OAAOC;AAAAA,IACrC;AAAA,IACA,WAAW;AAAA,MACTP,SAAU,aAAYC,MAAMK,OAAOC;AAAAA,IACrC;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACV,WAAW;AAAA,MACTR,SAAU,aAAYC,MAAMC,KAAKO;AAAAA,IACnC;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBX,UAAU;AAAA,IACV,SAAS;AAAA,MACPA,UAAU;AAAA,MACVY,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJC,KAAM,QAAOZ,MAAMC,KAAKY,gBAAgBb,MAAMc,MAAMC;AAAAA,IACpDC,OAAQ,QAAOhB,MAAMC,KAAKY,gBAAgBb,MAAMc,MAAMC;AAAAA,EACxD;AAAA,EACAE,aAAa;AAAA,IACXC,OAAO;AAAA,IACPN,KAAK;AAAA,IACLI,OAAO;AAAA,EACT;AACF;"}

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

@@ -2,8 +2,9 @@ import clsx from "clsx";
 import { styles } from "./Content.styles.js";
 import MuiCardContent from "@mui/material/CardContent";
 import cardContentClasses from "./contentClasses.js";
+import { ClassNames } from "@emotion/react";
 import { jsx } from "@emotion/react/jsx-runtime";
-const HvContent = ({
+const HvCardContent = ({
   id,
   classes,
   className,
@@ -11,15 +12,19 @@ const HvContent = ({
   onClick,
   ...others
 }) => {
-  return /* @__PURE__ */ jsx(MuiCardContent, {
-    id,
-    className: clsx(styles.content, classes == null ? void 0 : classes.content, cardContentClasses.content, className),
-    onClick,
-    ...others,
-    children
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsx(MuiCardContent, {
+      id,
+      className: clsx(css(styles.content), classes == null ? void 0 : classes.content, cardContentClasses.content, className),
+      onClick,
+      ...others,
+      children
+    })
   });
 };
 export {
-  HvContent
+  HvCardContent
 };
 //# sourceMappingURL=Content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../src/components/Card/Content/Content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types\";\nimport { styles } from \"./Content.styles\";\nimport MuiCardContent, {\n  CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\nimport cardContentClasses, { HvCardContentClasses } from \"./contentClasses\";\n\nexport type HvContentProps = Omit<MuiCardContentProps, \"classes\"> &\n  HvBaseProps & {\n    /** Id to be applied to the root node. */\n    id?: string;\n    /** The function that will be executed when this section is clicked. */\n    onClick?: (event: React.SyntheticEvent) => void;\n    /** A Jss Object used to override or extend the styles applied to the component. */\n    classes?: HvCardContentClasses;\n  };\n\nexport const HvContent = ({\n  id,\n  classes,\n  className,\n  children,\n  onClick,\n  ...others\n}: HvContentProps) => {\n  return (\n    <MuiCardContent\n      id={id}\n      className={clsx(\n        styles.content,\n        classes?.content,\n        cardContentClasses.content,\n        className\n      )}\n      onClick={onClick}\n      {...others}\n    >\n      {children}\n    </MuiCardContent>\n  );\n};\n"],"names":["HvContent","id","classes","className","children","onClick","others","MuiCardContent","clsx","styles","content","cardContentClasses"],"mappings":";;;;;AAkBO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,KACGC;AACW,MAAM;AACpB,6BACGC,gBAAc;AAAA,IACbN;AAAAA,IACAE,WAAWK,KACTC,OAAOC,SACPR,mCAASQ,SACTC,mBAAmBD,SACnBP,SAAS;AAAA,IAEXE;AAAAA,IAAiB,GACbC;AAAAA,IAAMF;AAAAA,EAAAA,CAGK;AAErB;"}
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Card/Content/Content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { styles } from \"./Content.styles\";\nimport MuiCardContent, {\n  CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\nimport cardContentClasses, { HvCardContentClasses } from \"./contentClasses\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport type HvCardContentProps = Omit<MuiCardContentProps, \"classes\"> &\n  HvBaseProps & {\n    /** Id to be applied to the root node. */\n    id?: string;\n    /** The function that will be executed when this section is clicked. */\n    onClick?: (event: React.SyntheticEvent) => void;\n    /** A Jss Object used to override or extend the styles applied to the component. */\n    classes?: HvCardContentClasses;\n  };\n\nexport const HvCardContent = ({\n  id,\n  classes,\n  className,\n  children,\n  onClick,\n  ...others\n}: HvCardContentProps) => {\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <MuiCardContent\n          id={id}\n          className={clsx(\n            css(styles.content),\n            classes?.content,\n            cardContentClasses.content,\n            className\n          )}\n          onClick={onClick}\n          {...others}\n        >\n          {children}\n        </MuiCardContent>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCardContent","id","classes","className","children","onClick","others","ClassNames","css","MuiCardContent","clsx","styles","content","cardContentClasses"],"mappings":";;;;;;AAmBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACe,MAAM;AACxB,6BACGC,YAAU;AAAA,IAAAH,UACRA,CAAC;AAAA,MAAEI;AAAAA,IAAAA,0BACDC,gBAAc;AAAA,MACbR;AAAAA,MACAE,WAAWO,KACTF,IAAIG,OAAOC,OAAO,GAClBV,mCAASU,SACTC,mBAAmBD,SACnBT,SAAS;AAAA,MAEXE;AAAAA,MAAiB,GACbC;AAAAA,MAAMF;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGF;AAEjB;"}

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

@@ -1,12 +1,11 @@
-import { css } from "@emotion/css";
 import { theme } from "@hitachivantara/uikit-styles";
 const styles = {
-  content: /* @__PURE__ */ css({
+  content: {
     padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,
     "&:last-child": {
       paddingBottom: theme.space.sm
     }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:content;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9Db250ZW50L0NvbnRlbnQuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJVyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhcmQvQ29udGVudC9Db250ZW50LnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIGNvbnRlbnQ6IGNzcyh7XG4gICAgcGFkZGluZzogYDAgJHt0aGVtZS5zcGFjZS5zbX0gMTVweCAke3RoZW1lLnNwYWNlLnNtfWAsXG4gICAgXCImOmxhc3QtY2hpbGRcIjoge1xuICAgICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuc3BhY2Uuc20sXG4gICAgfSxcbiAgfSksXG59O1xuIl19 */")
+  }
 };
 export {
   styles

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

@@ -1 +1 @@
-{"version":3,"file":"Content.styles.js","sources":["../../../../../src/components/Card/Content/Content.styles.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles = {\n  content: css({\n    padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,\n    \"&:last-child\": {\n      paddingBottom: theme.space.sm,\n    },\n  }),\n};\n"],"names":["styles","content","padding","theme","space","sm","paddingBottom","process","env","NODE_ENV"],"mappings":";;AAGO,MAAMA,SAAS;AAAA,EACpBC,SAAa,oBAAA;AAAA,IACXC,SAAU,KAAIC,MAAMC,MAAMC,WAAWF,MAAMC,MAAMC;AAAAA,IACjD,gBAAgB;AAAA,MACdC,eAAeH,MAAMC,MAAMC;AAAAA,IAC7B;AAAA,EACDE,GAAAA,QAAAC,IAAAC,aAAA,eAAA,KAAA,mBAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,q1BAAA;AACH;"}
+{"version":3,"file":"Content.styles.js","sources":["../../../../../src/components/Card/Content/Content.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n  content: {\n    padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,\n    \"&:last-child\": {\n      paddingBottom: theme.space.sm,\n    },\n  },\n};\n"],"names":["styles","content","padding","theme","space","sm","paddingBottom"],"mappings":";AAGO,MAAMA,SAA8C;AAAA,EACzDC,SAAS;AAAA,IACPC,SAAU,KAAIC,MAAMC,MAAMC,WAAWF,MAAMC,MAAMC;AAAAA,IACjD,gBAAgB;AAAA,MACdC,eAAeH,MAAMC,MAAMC;AAAAA,IAC7B;AAAA,EACF;AACF;"}

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

@@ -2,11 +2,10 @@ import clsx from "clsx";
 import MuiCardHeader from "@mui/material/CardHeader";
 import cardHeaderClasses from "./headerClasses.js";
 import { styles } from "./Header.styles.js";
-import { css } from "@emotion/css";
-import { useContext } from "react";
+import { ClassNames } from "@emotion/react";
 import { jsx } from "@emotion/react/jsx-runtime";
-import { HvThemeContext } from "../../../providers/ThemeProvider.js";
-const HvHeader = ({
+import { useTheme } from "../../../hooks/useTheme.js";
+const HvCardHeader = ({
   classes,
   className,
   title,
@@ -17,30 +16,34 @@ const HvHeader = ({
 }) => {
   const {
     activeTheme
-  } = useContext(HvThemeContext);
-  return /* @__PURE__ */ jsx(MuiCardHeader, {
-    title,
-    subheader,
-    action: icon,
-    onClick,
-    className: clsx(styles.root, classes == null ? void 0 : classes.root, cardHeaderClasses.root, className),
-    classes: {
-      title: icon ? clsx(styles.titleShort, cardHeaderClasses.titleShort, classes == null ? void 0 : classes.titleShort, /* @__PURE__ */ css({
-        ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-      }, process.env.NODE_ENV === "production" ? "" : ";label:title;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9IZWFkZXIvSGVhZGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzRGMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYXJkL0hlYWRlci9IZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNsc3ggZnJvbSBcImNsc3hcIjtcbmltcG9ydCBNdWlDYXJkSGVhZGVyLCB7XG4gIENhcmRIZWFkZXJQcm9wcyBhcyBNdWlDYXJkSGVhZGVyUHJvcHMsXG59IGZyb20gXCJAbXVpL21hdGVyaWFsL0NhcmRIZWFkZXJcIjtcbmltcG9ydCB7IEh2QmFzZVByb3BzIH0gZnJvbSBcIi4uLy4uLy4uL3R5cGVzXCI7XG5pbXBvcnQgY2FyZEhlYWRlckNsYXNzZXMsIHsgSHZDYXJkSGVhZGVyQ2xhc3NlcyB9IGZyb20gXCIuL2hlYWRlckNsYXNzZXNcIjtcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gXCIuL0hlYWRlci5zdHlsZXNcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7IEh2VGhlbWVDb250ZXh0IH0gZnJvbSBcInByb3ZpZGVyc1wiO1xuaW1wb3J0IHsgdXNlQ29udGV4dCB9IGZyb20gXCJyZWFjdFwiO1xuXG5leHBvcnQgdHlwZSBIdkhlYWRlclByb3BzID0gT21pdDxNdWlDYXJkSGVhZGVyUHJvcHMsIFwiY2xhc3Nlc1wiPiAmXG4gIEh2QmFzZVByb3BzPEhUTUxEaXZFbGVtZW50LCB7IHRpdGxlIH0+ICYge1xuICAgIC8qKiBUaGUgcmVuZGVyYWJsZSBjb250ZW50IGluc2lkZSB0aGUgdGl0bGUgc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICAgIHRpdGxlOiBSZWFjdC5SZWFjdE5vZGU7XG4gICAgLyoqIFRoZSByZW5kZXJhYmxlIGNvbnRlbnQgaW5zaWRlIHRoZSBzdWJoZWFkZXIgc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICAgIHN1YmhlYWRlcj86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgICAvKiogVGhlIHJlbmRlcmFibGUgY29udGVudCBpbnNpZGUgdGhlIGljb24gc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICAgIGljb24/OiBSZWFjdC5SZWFjdE5vZGU7XG4gICAgLyoqIFRoZSBmdW5jdGlvbiB0aGF0IHdpbGwgYmUgZXhlY3V0ZWQgd2hlbiB0aGlzIHNlY3Rpb24gaXMgY2xpY2tlZC4gKi9cbiAgICBvbkNsaWNrPzogUmVhY3QuTW91c2VFdmVudEhhbmRsZXI8SFRNTERpdkVsZW1lbnQ+IHwgdW5kZWZpbmVkO1xuICAgIC8qKiBBIEpzcyBPYmplY3QgdXNlZCB0byBvdmVycmlkZSBvciBleHRlbmQgdGhlIHN0eWxlcyBhcHBsaWVkIHRvIHRoZSBjb21wb25lbnQuICovXG4gICAgY2xhc3Nlcz86IEh2Q2FyZEhlYWRlckNsYXNzZXM7XG4gIH07XG5cbmV4cG9ydCBjb25zdCBIdkhlYWRlciA9ICh7XG4gIGNsYXNzZXMsXG4gIGNsYXNzTmFtZSxcbiAgdGl0bGUsXG4gIHN1YmhlYWRlcixcbiAgaWNvbixcbiAgb25DbGljayxcbiAgLi4ub3RoZXJzXG59OiBIdkhlYWRlclByb3BzKSA9PiB7XG4gIGNvbnN0IHsgYWN0aXZlVGhlbWUgfSA9IHVzZUNvbnRleHQoSHZUaGVtZUNvbnRleHQpO1xuXG4gIHJldHVybiAoXG4gICAgPE11aUNhcmRIZWFkZXJcbiAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICAgIHN1YmhlYWRlcj17c3ViaGVhZGVyfVxuICAgICAgYWN0aW9uPXtpY29ufVxuICAgICAgb25DbGljaz17b25DbGlja31cbiAgICAgIGNsYXNzTmFtZT17Y2xzeChcbiAgICAgICAgc3R5bGVzLnJvb3QsXG4gICAgICAgIGNsYXNzZXM/LnJvb3QsXG4gICAgICAgIGNhcmRIZWFkZXJDbGFzc2VzLnJvb3QsXG4gICAgICAgIGNsYXNzTmFtZVxuICAgICAgKX1cbiAgICAgIGNsYXNzZXM9e3tcbiAgICAgICAgdGl0bGU6IGljb25cbiAgICAgICAgICA/IGNsc3goXG4gICAgICAgICAgICAgIHN0eWxlcy50aXRsZVNob3J0LFxuICAgICAgICAgICAgICBjYXJkSGVhZGVyQ2xhc3Nlcy50aXRsZVNob3J0LFxuICAgICAgICAgICAgICBjbGFzc2VzPy50aXRsZVNob3J0LFxuICAgICAgICAgICAgICBjc3Moe1xuICAgICAgICAgICAgICAgIC4uLmFjdGl2ZVRoZW1lPy50eXBvZ3JhcGh5W2FjdGl2ZVRoZW1lPy5jYXJkLnRpdGxlVmFyaWFudF0sXG4gICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICApXG4gICAgICAgICAgOiBjbHN4KFxuICAgICAgICAgICAgICBzdHlsZXMudGl0bGUsXG4gICAgICAgICAgICAgIGNhcmRIZWFkZXJDbGFzc2VzLnRpdGxlLFxuICAgICAgICAgICAgICBjbGFzc2VzPy50aXRsZSxcbiAgICAgICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgICAgICAuLi5hY3RpdmVUaGVtZT8udHlwb2dyYXBoeVthY3RpdmVUaGVtZT8uY2FyZC50aXRsZVZhcmlhbnRdLFxuICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgKSxcbiAgICAgICAgc3ViaGVhZGVyOiBjbHN4KFxuICAgICAgICAgIHN0eWxlcy5zdWJoZWFkZXIsXG4gICAgICAgICAgY2FyZEhlYWRlckNsYXNzZXMuc3ViaGVhZGVyLFxuICAgICAgICAgIGNsYXNzZXM/LnN1YmhlYWRlcixcbiAgICAgICAgICBjc3Moe1xuICAgICAgICAgICAgLi4uYWN0aXZlVGhlbWU/LnR5cG9ncmFwaHlbYWN0aXZlVGhlbWU/LmNhcmQuc3ViaGVhZGVyVmFyaWFudF0sXG4gICAgICAgICAgICBjb2xvcjogYWN0aXZlVGhlbWU/LmNhcmQuc3ViaGVhZGVyQ29sb3IsXG4gICAgICAgICAgfSlcbiAgICAgICAgKSxcbiAgICAgICAgYWN0aW9uOiBjbHN4KHN0eWxlcy5hY3Rpb24sIGNhcmRIZWFkZXJDbGFzc2VzLmFjdGlvbiwgY2xhc3Nlcz8uYWN0aW9uKSxcbiAgICAgICAgY29udGVudDogY2xzeChjYXJkSGVhZGVyQ2xhc3Nlcy5jb250ZW50LCBjbGFzc2VzPy5jb250ZW50KSxcbiAgICAgIH19XG4gICAgICB7Li4ub3RoZXJzfVxuICAgIC8+XG4gICk7XG59O1xuIl19 */")) : clsx(styles.title, cardHeaderClasses.title, classes == null ? void 0 : classes.title, /* @__PURE__ */ css({
-        ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-      }, process.env.NODE_ENV === "production" ? "" : ";label:title;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9IZWFkZXIvSGVhZGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RGMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYXJkL0hlYWRlci9IZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNsc3ggZnJvbSBcImNsc3hcIjtcbmltcG9ydCBNdWlDYXJkSGVhZGVyLCB7XG4gIENhcmRIZWFkZXJQcm9wcyBhcyBNdWlDYXJkSGVhZGVyUHJvcHMsXG59IGZyb20gXCJAbXVpL21hdGVyaWFsL0NhcmRIZWFkZXJcIjtcbmltcG9ydCB7IEh2QmFzZVByb3BzIH0gZnJvbSBcIi4uLy4uLy4uL3R5cGVzXCI7XG5pbXBvcnQgY2FyZEhlYWRlckNsYXNzZXMsIHsgSHZDYXJkSGVhZGVyQ2xhc3NlcyB9IGZyb20gXCIuL2hlYWRlckNsYXNzZXNcIjtcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gXCIuL0hlYWRlci5zdHlsZXNcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7IEh2VGhlbWVDb250ZXh0IH0gZnJvbSBcInByb3ZpZGVyc1wiO1xuaW1wb3J0IHsgdXNlQ29udGV4dCB9IGZyb20gXCJyZWFjdFwiO1xuXG5leHBvcnQgdHlwZSBIdkhlYWRlclByb3BzID0gT21pdDxNdWlDYXJkSGVhZGVyUHJvcHMsIFwiY2xhc3Nlc1wiPiAmXG4gIEh2QmFzZVByb3BzPEhUTUxEaXZFbGVtZW50LCB7IHRpdGxlIH0+ICYge1xuICAgIC8qKiBUaGUgcmVuZGVyYWJsZSBjb250ZW50IGluc2lkZSB0aGUgdGl0bGUgc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICAgIHRpdGxlOiBSZWFjdC5SZWFjdE5vZGU7XG4gICAgLyoqIFRoZSByZW5kZXJhYmxlIGNvbnRlbnQgaW5zaWRlIHRoZSBzdWJoZWFkZXIgc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICAgIHN1YmhlYWRlcj86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgICAvKiogVGhlIHJlbmRlcmFibGUgY29udGVudCBpbnNpZGUgdGhlIGljb24gc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICAgIGljb24/OiBSZWFjdC5SZWFjdE5vZGU7XG4gICAgLyoqIFRoZSBmdW5jdGlvbiB0aGF0IHdpbGwgYmUgZXhlY3V0ZWQgd2hlbiB0aGlzIHNlY3Rpb24gaXMgY2xpY2tlZC4gKi9cbiAgICBvbkNsaWNrPzogUmVhY3QuTW91c2VFdmVudEhhbmRsZXI8SFRNTERpdkVsZW1lbnQ+IHwgdW5kZWZpbmVkO1xuICAgIC8qKiBBIEpzcyBPYmplY3QgdXNlZCB0byBvdmVycmlkZSBvciBleHRlbmQgdGhlIHN0eWxlcyBhcHBsaWVkIHRvIHRoZSBjb21wb25lbnQuICovXG4gICAgY2xhc3Nlcz86IEh2Q2FyZEhlYWRlckNsYXNzZXM7XG4gIH07XG5cbmV4cG9ydCBjb25zdCBIdkhlYWRlciA9ICh7XG4gIGNsYXNzZXMsXG4gIGNsYXNzTmFtZSxcbiAgdGl0bGUsXG4gIHN1YmhlYWRlcixcbiAgaWNvbixcbiAgb25DbGljayxcbiAgLi4ub3RoZXJzXG59OiBIdkhlYWRlclByb3BzKSA9PiB7XG4gIGNvbnN0IHsgYWN0aXZlVGhlbWUgfSA9IHVzZUNvbnRleHQoSHZUaGVtZUNvbnRleHQpO1xuXG4gIHJldHVybiAoXG4gICAgPE11aUNhcmRIZWFkZXJcbiAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICAgIHN1YmhlYWRlcj17c3ViaGVhZGVyfVxuICAgICAgYWN0aW9uPXtpY29ufVxuICAgICAgb25DbGljaz17b25DbGlja31cbiAgICAgIGNsYXNzTmFtZT17Y2xzeChcbiAgICAgICAgc3R5bGVzLnJvb3QsXG4gICAgICAgIGNsYXNzZXM/LnJvb3QsXG4gICAgICAgIGNhcmRIZWFkZXJDbGFzc2VzLnJvb3QsXG4gICAgICAgIGNsYXNzTmFtZVxuICAgICAgKX1cbiAgICAgIGNsYXNzZXM9e3tcbiAgICAgICAgdGl0bGU6IGljb25cbiAgICAgICAgICA/IGNsc3goXG4gICAgICAgICAgICAgIHN0eWxlcy50aXRsZVNob3J0LFxuICAgICAgICAgICAgICBjYXJkSGVhZGVyQ2xhc3Nlcy50aXRsZVNob3J0LFxuICAgICAgICAgICAgICBjbGFzc2VzPy50aXRsZVNob3J0LFxuICAgICAgICAgICAgICBjc3Moe1xuICAgICAgICAgICAgICAgIC4uLmFjdGl2ZVRoZW1lPy50eXBvZ3JhcGh5W2FjdGl2ZVRoZW1lPy5jYXJkLnRpdGxlVmFyaWFudF0sXG4gICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICApXG4gICAgICAgICAgOiBjbHN4KFxuICAgICAgICAgICAgICBzdHlsZXMudGl0bGUsXG4gICAgICAgICAgICAgIGNhcmRIZWFkZXJDbGFzc2VzLnRpdGxlLFxuICAgICAgICAgICAgICBjbGFzc2VzPy50aXRsZSxcbiAgICAgICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgICAgICAuLi5hY3RpdmVUaGVtZT8udHlwb2dyYXBoeVthY3RpdmVUaGVtZT8uY2FyZC50aXRsZVZhcmlhbnRdLFxuICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgKSxcbiAgICAgICAgc3ViaGVhZGVyOiBjbHN4KFxuICAgICAgICAgIHN0eWxlcy5zdWJoZWFkZXIsXG4gICAgICAgICAgY2FyZEhlYWRlckNsYXNzZXMuc3ViaGVhZGVyLFxuICAgICAgICAgIGNsYXNzZXM/LnN1YmhlYWRlcixcbiAgICAgICAgICBjc3Moe1xuICAgICAgICAgICAgLi4uYWN0aXZlVGhlbWU/LnR5cG9ncmFwaHlbYWN0aXZlVGhlbWU/LmNhcmQuc3ViaGVhZGVyVmFyaWFudF0sXG4gICAgICAgICAgICBjb2xvcjogYWN0aXZlVGhlbWU/LmNhcmQuc3ViaGVhZGVyQ29sb3IsXG4gICAgICAgICAgfSlcbiAgICAgICAgKSxcbiAgICAgICAgYWN0aW9uOiBjbHN4KHN0eWxlcy5hY3Rpb24sIGNhcmRIZWFkZXJDbGFzc2VzLmFjdGlvbiwgY2xhc3Nlcz8uYWN0aW9uKSxcbiAgICAgICAgY29udGVudDogY2xzeChjYXJkSGVhZGVyQ2xhc3Nlcy5jb250ZW50LCBjbGFzc2VzPy5jb250ZW50KSxcbiAgICAgIH19XG4gICAgICB7Li4ub3RoZXJzfVxuICAgIC8+XG4gICk7XG59O1xuIl19 */")),
-      subheader: clsx(styles.subheader, cardHeaderClasses.subheader, classes == null ? void 0 : classes.subheader, /* @__PURE__ */ css({
-        ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.subheaderVariant],
-        color: activeTheme == null ? void 0 : activeTheme.card.subheaderColor
-      }, process.env.NODE_ENV === "production" ? "" : ";label:subheader;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9IZWFkZXIvSGVhZGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzRVUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYXJkL0hlYWRlci9IZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNsc3ggZnJvbSBcImNsc3hcIjtcbmltcG9ydCBNdWlDYXJkSGVhZGVyLCB7XG4gIENhcmRIZWFkZXJQcm9wcyBhcyBNdWlDYXJkSGVhZGVyUHJvcHMsXG59IGZyb20gXCJAbXVpL21hdGVyaWFsL0NhcmRIZWFkZXJcIjtcbmltcG9ydCB7IEh2QmFzZVByb3BzIH0gZnJvbSBcIi4uLy4uLy4uL3R5cGVzXCI7XG5pbXBvcnQgY2FyZEhlYWRlckNsYXNzZXMsIHsgSHZDYXJkSGVhZGVyQ2xhc3NlcyB9IGZyb20gXCIuL2hlYWRlckNsYXNzZXNcIjtcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gXCIuL0hlYWRlci5zdHlsZXNcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7IEh2VGhlbWVDb250ZXh0IH0gZnJvbSBcInByb3ZpZGVyc1wiO1xuaW1wb3J0IHsgdXNlQ29udGV4dCB9IGZyb20gXCJyZWFjdFwiO1xuXG5leHBvcnQgdHlwZSBIdkhlYWRlclByb3BzID0gT21pdDxNdWlDYXJkSGVhZGVyUHJvcHMsIFwiY2xhc3Nlc1wiPiAmXG4gIEh2QmFzZVByb3BzPEhUTUxEaXZFbGVtZW50LCB7IHRpdGxlIH0+ICYge1xuICAgIC8qKiBUaGUgcmVuZGVyYWJsZSBjb250ZW50IGluc2lkZSB0aGUgdGl0bGUgc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICAgIHRpdGxlOiBSZWFjdC5SZWFjdE5vZGU7XG4gICAgLyoqIFRoZSByZW5kZXJhYmxlIGNvbnRlbnQgaW5zaWRlIHRoZSBzdWJoZWFkZXIgc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICAgIHN1YmhlYWRlcj86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgICAvKiogVGhlIHJlbmRlcmFibGUgY29udGVudCBpbnNpZGUgdGhlIGljb24gc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICAgIGljb24/OiBSZWFjdC5SZWFjdE5vZGU7XG4gICAgLyoqIFRoZSBmdW5jdGlvbiB0aGF0IHdpbGwgYmUgZXhlY3V0ZWQgd2hlbiB0aGlzIHNlY3Rpb24gaXMgY2xpY2tlZC4gKi9cbiAgICBvbkNsaWNrPzogUmVhY3QuTW91c2VFdmVudEhhbmRsZXI8SFRNTERpdkVsZW1lbnQ+IHwgdW5kZWZpbmVkO1xuICAgIC8qKiBBIEpzcyBPYmplY3QgdXNlZCB0byBvdmVycmlkZSBvciBleHRlbmQgdGhlIHN0eWxlcyBhcHBsaWVkIHRvIHRoZSBjb21wb25lbnQuICovXG4gICAgY2xhc3Nlcz86IEh2Q2FyZEhlYWRlckNsYXNzZXM7XG4gIH07XG5cbmV4cG9ydCBjb25zdCBIdkhlYWRlciA9ICh7XG4gIGNsYXNzZXMsXG4gIGNsYXNzTmFtZSxcbiAgdGl0bGUsXG4gIHN1YmhlYWRlcixcbiAgaWNvbixcbiAgb25DbGljayxcbiAgLi4ub3RoZXJzXG59OiBIdkhlYWRlclByb3BzKSA9PiB7XG4gIGNvbnN0IHsgYWN0aXZlVGhlbWUgfSA9IHVzZUNvbnRleHQoSHZUaGVtZUNvbnRleHQpO1xuXG4gIHJldHVybiAoXG4gICAgPE11aUNhcmRIZWFkZXJcbiAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICAgIHN1YmhlYWRlcj17c3ViaGVhZGVyfVxuICAgICAgYWN0aW9uPXtpY29ufVxuICAgICAgb25DbGljaz17b25DbGlja31cbiAgICAgIGNsYXNzTmFtZT17Y2xzeChcbiAgICAgICAgc3R5bGVzLnJvb3QsXG4gICAgICAgIGNsYXNzZXM/LnJvb3QsXG4gICAgICAgIGNhcmRIZWFkZXJDbGFzc2VzLnJvb3QsXG4gICAgICAgIGNsYXNzTmFtZVxuICAgICAgKX1cbiAgICAgIGNsYXNzZXM9e3tcbiAgICAgICAgdGl0bGU6IGljb25cbiAgICAgICAgICA/IGNsc3goXG4gICAgICAgICAgICAgIHN0eWxlcy50aXRsZVNob3J0LFxuICAgICAgICAgICAgICBjYXJkSGVhZGVyQ2xhc3Nlcy50aXRsZVNob3J0LFxuICAgICAgICAgICAgICBjbGFzc2VzPy50aXRsZVNob3J0LFxuICAgICAgICAgICAgICBjc3Moe1xuICAgICAgICAgICAgICAgIC4uLmFjdGl2ZVRoZW1lPy50eXBvZ3JhcGh5W2FjdGl2ZVRoZW1lPy5jYXJkLnRpdGxlVmFyaWFudF0sXG4gICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICApXG4gICAgICAgICAgOiBjbHN4KFxuICAgICAgICAgICAgICBzdHlsZXMudGl0bGUsXG4gICAgICAgICAgICAgIGNhcmRIZWFkZXJDbGFzc2VzLnRpdGxlLFxuICAgICAgICAgICAgICBjbGFzc2VzPy50aXRsZSxcbiAgICAgICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgICAgICAuLi5hY3RpdmVUaGVtZT8udHlwb2dyYXBoeVthY3RpdmVUaGVtZT8uY2FyZC50aXRsZVZhcmlhbnRdLFxuICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgKSxcbiAgICAgICAgc3ViaGVhZGVyOiBjbHN4KFxuICAgICAgICAgIHN0eWxlcy5zdWJoZWFkZXIsXG4gICAgICAgICAgY2FyZEhlYWRlckNsYXNzZXMuc3ViaGVhZGVyLFxuICAgICAgICAgIGNsYXNzZXM/LnN1YmhlYWRlcixcbiAgICAgICAgICBjc3Moe1xuICAgICAgICAgICAgLi4uYWN0aXZlVGhlbWU/LnR5cG9ncmFwaHlbYWN0aXZlVGhlbWU/LmNhcmQuc3ViaGVhZGVyVmFyaWFudF0sXG4gICAgICAgICAgICBjb2xvcjogYWN0aXZlVGhlbWU/LmNhcmQuc3ViaGVhZGVyQ29sb3IsXG4gICAgICAgICAgfSlcbiAgICAgICAgKSxcbiAgICAgICAgYWN0aW9uOiBjbHN4KHN0eWxlcy5hY3Rpb24sIGNhcmRIZWFkZXJDbGFzc2VzLmFjdGlvbiwgY2xhc3Nlcz8uYWN0aW9uKSxcbiAgICAgICAgY29udGVudDogY2xzeChjYXJkSGVhZGVyQ2xhc3Nlcy5jb250ZW50LCBjbGFzc2VzPy5jb250ZW50KSxcbiAgICAgIH19XG4gICAgICB7Li4ub3RoZXJzfVxuICAgIC8+XG4gICk7XG59O1xuIl19 */")),
-      action: clsx(styles.action, cardHeaderClasses.action, classes == null ? void 0 : classes.action),
-      content: clsx(cardHeaderClasses.content, classes == null ? void 0 : classes.content)
-    },
-    ...others
+  } = useTheme();
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsx(MuiCardHeader, {
+      title,
+      subheader,
+      action: icon,
+      onClick,
+      className: clsx(css(styles.root), classes == null ? void 0 : classes.root, cardHeaderClasses.root, className),
+      classes: {
+        title: icon ? clsx(css(styles.titleShort), cardHeaderClasses.titleShort, classes == null ? void 0 : classes.titleShort, css({
+          ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
+        })) : clsx(css(styles.title), cardHeaderClasses.title, classes == null ? void 0 : classes.title, css({
+          ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
+        })),
+        subheader: clsx(css(styles.subheader), cardHeaderClasses.subheader, classes == null ? void 0 : classes.subheader, css({
+          ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.subheaderVariant],
+          color: activeTheme == null ? void 0 : activeTheme.card.subheaderColor
+        })),
+        action: clsx(css(styles.action), cardHeaderClasses.action, classes == null ? void 0 : classes.action),
+        content: clsx(cardHeaderClasses.content, classes == null ? void 0 : classes.content)
+      },
+      ...others
+    })
   });
 };
 export {
-  HvHeader
+  HvCardHeader
 };
 //# sourceMappingURL=Header.js.map