@hitachivantara/uikit-react-core 5.41.1 → 5.42.1

package/dist/esm/Calendar/utils.mjs

@@ -0,0 +1,115 @@
+import dayjs from "dayjs";
+import capitalize from "lodash/capitalize";
+const CALENDAR_WEEKS = 6;
+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 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 getMonthNamesList = (locale, representationValue = "long") => {
+  const options = { month: representationValue, timeZone: "UTC" };
+  return [...new Array(12)].map((n, index) => {
+    const auxDate = makeUTCDate(1970, index, 1);
+    return capitalize(Intl.DateTimeFormat(locale, options).format(auxDate));
+  });
+};
+const getWeekdayNamesList = (locale) => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    weekday: "narrow",
+    timeZone: "UTC"
+  });
+  return [...new Array(7)].map((n, index) => {
+    return formatter.format(makeUTCDate(1970, 0, 4 + index));
+  });
+};
+const getMonthName = (date, locale, representationValue = "long") => new Intl.DateTimeFormat(locale, { month: representationValue }).format(date);
+const getFormattedDate = (date, locale, rep = "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) || endDate == null)
+    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,
+  getFormattedDate,
+  getMonthDays,
+  getMonthFirstWeekday,
+  getMonthName,
+  getMonthNamesList,
+  getNextMonth,
+  getPreviousMonth,
+  getWeekdayNamesList,
+  isDate,
+  isDateRangeProp,
+  isRange,
+  isSameDay,
+  isSameMonth,
+  makeUTCDate
+};
+//# sourceMappingURL=utils.mjs.map

package/dist/esm/Calendar/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","sources":["../../../src/Calendar/utils.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\n\nimport capitalize from \"lodash/capitalize\";\n\nimport { DateRangeProp } from \"./types\";\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 *\n * @param value - Value to be padded.\n * @param length - Length of the value after the padding is added.\n * @returns The value as a string with the received amount of padding.\n *\n * @example zeroPad(5, 2) => \"05\"\n */\nexport const zeroPad = (value: number, length: number) =>\n  `${value}`.padStart(length, \"0\");\n\n/**\n * Returns the number of days in the month given a month and year.\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The number of days in a month for the received year.\n */\nexport const getMonthDays = (month: number, year: number) =>\n  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 month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The zero indexed week day where 0 is Sunday (0 to 6).\n */\nexport const getMonthFirstWeekday = (month: number, year: number) =>\n  new Date(year, month - 1, 1).getDay();\n\n/**\n * Creates a `Date` instance in UTC timezone.\n *\n * @param year - The year of the date.\n * @param monthIndex - The zero indexed month of the year (0 to 11).\n * @param day - The day of the month.\n * @param [hour=1] - The hour of the day.\n * @returns A `Date` instance in UTC timezone.\n */\nexport const makeUTCDate = (\n  year: number,\n  monthIndex: number,\n  day: number,\n  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 - The date to be validated.\n * @returns A flag stating if the date is valid or not.\n */\nexport const isDate = (date: any): 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/**\n * Checks if two dates are in the same month and year.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same month and year or not.\n */\nexport const isSameMonth = (date1: any, date2: any) => {\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 date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same day or not.\n */\nexport const isSameDay = (date1: any, date2: any) => {\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 - The date to be formatted.\n * @returns The formatted date in ISO format.\n */\nexport const getDateISO = (date?: 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 month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getPreviousMonth = (month: number, year: number) => {\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 month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getNextMonth = (month: number, year: number) => {\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\n/**\n * Returns a list with the names of all the months localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The representation value for the month.\n * @returns An array with all the months names.\n */\nexport const getMonthNamesList = (\n  locale: string | undefined,\n  representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"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 capitalize(Intl.DateTimeFormat(locale, options).format(auxDate));\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 locale - The locale to be applied.\n * @returns An array with all the weekday names.\n */\nexport const getWeekdayNamesList = (locale: string) => {\n  const formatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"narrow\",\n    timeZone: \"UTC\",\n  });\n\n  return [...new Array(7)].map((n, index) => {\n    return formatter.format(makeUTCDate(1970, 0, 4 + index));\n  });\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 - The date from which the month name is extracted.\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The locale to be applied to the Intl format.\n * @returns The name of the month.\n */\nexport const getMonthName = (\n  date: Date,\n  locale: string,\n  representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"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 - UTC date to be formatted.\n * @param locale - The locale to be applied to the Intl format.\n * @returns The formatted date as a string.\n */\nexport const getFormattedDate = (\n  // TODO: fix this\n  date: any,\n  locale: any,\n  rep: Intl.DateTimeFormatOptions[\"month\"] = \"short\"\n) =>\n  `${date.getDate()} ${getMonthName(date, locale, rep)} ${date.getFullYear()}`;\n\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 month - The number of the month (1 to 12).\n * @param year - The number of the year.\n * @returns The array of dates.\n */\nexport const createDatesArray = (month: number, year: number) => {\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\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 - The date to be evaluated.\n * @param providedValueRange - Provided selection range.\n * @returns - True if the date falls within the range, false otherwise.\n */\nexport const dateInProvidedValueRange = (\n  date: any,\n  providedValueRange: any\n) => {\n  const { startDate, endDate } = providedValueRange;\n\n  if (!isRange(providedValueRange) || endDate == null) 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":[],"mappings":"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"}

package/dist/esm/Card/Card.mjs

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./Card.styles.mjs";
+import { staticClasses } from "./Card.styles.mjs";
+import { HvBox } from "../Box/Box.mjs";
+const HvCard = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    icon,
+    selectable = false,
+    selected = false,
+    statusColor = "sema0",
+    bgcolor,
+    ...others
+  } = useDefaultProps("HvCard", props);
+  const { classes, css, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxs(
+    HvBox,
+    {
+      className: cx(
+        "HvIsCardGridElement",
+        classes.root,
+        css({
+          backgroundColor: bgcolor && theme.colors[bgcolor]
+        }),
+        {
+          [classes.selectable]: selectable,
+          [classes.selected]: selected
+        },
+        className
+      ),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: classes.semanticContainer, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cx(
+                css({
+                  height: selected ? 4 : 2,
+                  backgroundColor: statusColor === "sema0" ? selected ? theme.colors.secondary : theme.colors.atmo4 : theme.colors[statusColor]
+                }),
+                classes.semanticBar
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: classes.icon, children: icon })
+        ] }),
+        children
+      ]
+    }
+  );
+};
+export {
+  HvCard,
+  staticClasses as cardClasses
+};
+//# sourceMappingURL=Card.mjs.map

package/dist/esm/Card/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.mjs","sources":["../../../src/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBox } from \"../Box\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"../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":[],"mappings":";;;;;;AA2Ca,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAGjD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR,IAAI;AAAA,UACF,iBAAiB,WAAW,MAAM,OAAO,OAAO;AAAA,QAAA,CACjD;AAAA,QACD;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,mBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT,IAAI;AAAA,kBACF,QAAQ,WAAW,IAAI;AAAA,kBACvB,iBACE,gBAAgB,UACZ,WACE,MAAM,OAAO,YACb,MAAM,OAAO,QACf,MAAM,OAAO,WAAW;AAAA,gBAAA,CAC/B;AAAA,gBACD,QAAQ;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,QAAA,GACtC;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Card/Card.styles.mjs

@@ -0,0 +1,52 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.mjs";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvCard", {
+  root: {
+    overflow: "visible",
+    position: "relative",
+    outline: `1px solid ${theme.colors.atmo4}`,
+    borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,
+    "&:focus-visible": {
+      ...outlineStyles
+    },
+    "&:focus": {
+      outline: "none"
+    }
+  },
+  selected: {
+    outline: `1px solid ${theme.colors.secondary}`,
+    "&:hover": {
+      outline: `1px solid ${theme.colors.secondary}`
+    },
+    "&:focus": {
+      outline: `1px solid ${theme.colors.secondary}`
+    }
+  },
+  selectable: {
+    "&:hover": {
+      outline: `1px solid ${theme.colors.primary}`
+    }
+  },
+  semanticContainer: {
+    position: "relative",
+    "& > *": {
+      position: "absolute",
+      zIndex: 1
+    }
+  },
+  icon: {
+    top: theme.space.xs,
+    right: theme.space.xs
+  },
+  semanticBar: {
+    width: "100%",
+    top: -1,
+    right: 0
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Card.styles.mjs.map

package/dist/esm/Card/Card.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.styles.mjs","sources":["../../../src/Card/Card.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../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":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS,aAAa,MAAM,OAAO,KAAK;AAAA,IACxC,cAAc,WAAW,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,IAC/D,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS,aAAa,MAAM,OAAO,SAAS;AAAA,IAC5C,WAAW;AAAA,MACT,SAAS,aAAa,MAAM,OAAO,SAAS;AAAA,IAC9C;AAAA,IACA,WAAW;AAAA,MACT,SAAS,aAAa,MAAM,OAAO,SAAS;AAAA,IAC9C;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA,MACT,SAAS,aAAa,MAAM,OAAO,OAAO;AAAA,IAC5C;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,KAAK,MAAM,MAAM;AAAA,IACjB,OAAO,MAAM,MAAM;AAAA,EACrB;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AACF,CAAC;"}

package/dist/esm/Card/Content/Content.mjs

@@ -0,0 +1,29 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import MuiCardContent from "@mui/material/CardContent";
+import { useClasses } from "./Content.styles.mjs";
+import { staticClasses } from "./Content.styles.mjs";
+const HvCardContent = ({
+  id,
+  classes: classesProp,
+  className,
+  children,
+  onClick,
+  ...others
+}) => {
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    MuiCardContent,
+    {
+      id,
+      className: cx(classes.content, className),
+      onClick,
+      ...others,
+      children
+    }
+  );
+};
+export {
+  HvCardContent,
+  staticClasses as cardContentClasses
+};
+//# sourceMappingURL=Content.mjs.map

package/dist/esm/Card/Content/Content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.mjs","sources":["../../../../src/Card/Content/Content.tsx"],"sourcesContent":["import MuiCardContent, {\n  CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Content.styles\";\n\nexport { staticClasses as cardContentClasses };\n\nexport type HvCardContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardContentProps\n  extends Omit<MuiCardContentProps, \"classes\"> {\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: classesProp,\n  className,\n  children,\n  onClick,\n  ...others\n}: HvCardContentProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  return (\n    <MuiCardContent\n      id={id}\n      className={cx(classes.content, className)}\n      onClick={onClick}\n      {...others}\n    >\n      {children}\n    </MuiCardContent>\n  );\n};\n"],"names":[],"mappings":";;;;AAoBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,SAAS,SAAS;AAAA,MACxC;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Card/Content/Content.styles.mjs

@@ -0,0 +1,15 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvCardContent", {
+  content: {
+    padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,
+    "&:last-child": {
+      paddingBottom: theme.space.sm
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Content.styles.mjs.map

package/dist/esm/Card/Content/Content.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.styles.mjs","sources":["../../../../src/Card/Content/Content.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardContent\", {\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":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,SAAS;AAAA,IACP,SAAS,KAAK,MAAM,MAAM,EAAE,SAAS,MAAM,MAAM,EAAE;AAAA,IACnD,gBAAgB;AAAA,MACd,eAAe,MAAM,MAAM;AAAA,IAC7B;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Card/Header/Header.mjs

@@ -0,0 +1,43 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import MuiCardHeader from "@mui/material/CardHeader";
+import { useDefaultProps } from "../../hooks/useDefaultProps.mjs";
+import { useClasses } from "./Header.styles.mjs";
+import { staticClasses } from "./Header.styles.mjs";
+const HvCardHeader = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    title,
+    subheader,
+    icon,
+    onClick,
+    ...others
+  } = useDefaultProps("HvCardHeader", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    MuiCardHeader,
+    {
+      title,
+      subheader,
+      action: icon,
+      onClick,
+      className: cx(classes.root, className),
+      classes: {
+        title: cx({
+          // TODO: review conditional in v6
+          [classes.titleShort]: icon,
+          [classes.title]: !icon
+        }),
+        subheader: classes.subheader,
+        action: classes.action,
+        content: classes.content
+      },
+      ...others
+    }
+  );
+};
+export {
+  HvCardHeader,
+  staticClasses as cardHeaderClasses
+};
+//# sourceMappingURL=Header.mjs.map

package/dist/esm/Card/Header/Header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.mjs","sources":["../../../../src/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n  CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps extends Omit<MuiCardHeaderProps, \"classes\"> {\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          // TODO: review conditional in v6\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":[],"mappings":";;;;;AA2Ba,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AACzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS;AAAA,QACP,OAAO,GAAG;AAAA;AAAA,UAER,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,KAAK,GAAG,CAAC;AAAA,QAAA,CACnB;AAAA,QACD,WAAW,QAAQ;AAAA,QACnB,QAAQ,QAAQ;AAAA,QAChB,SAAS,QAAQ;AAAA,MACnB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/Card/Header/Header.styles.mjs

@@ -0,0 +1,30 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvCardHeader", {
+  root: {
+    position: "relative",
+    padding: theme.spacing("12px", "xs", "sm", "sm")
+  },
+  titleShort: {
+    ...theme.typography.label,
+    fontFamily: theme.fontFamily.body
+  },
+  title: {
+    ...theme.typography.label,
+    fontFamily: theme.fontFamily.body
+  },
+  subheader: {
+    ...theme.typography.caption1,
+    fontFamily: theme.fontFamily.body
+  },
+  content: {},
+  action: {
+    margin: 0,
+    paddingLeft: theme.space.xs
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Header.styles.mjs.map

package/dist/esm/Card/Header/Header.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.styles.mjs","sources":["../../../../src/Card/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardHeader\", {\n  root: {\n    position: \"relative\",\n    padding: theme.spacing(\"12px\", \"xs\", \"sm\", \"sm\"),\n  },\n  titleShort: {\n    ...theme.typography.label,\n    fontFamily: theme.fontFamily.body,\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    margin: 0,\n    paddingLeft: theme.space.xs,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,QAAQ,QAAQ,MAAM,MAAM,IAAI;AAAA,EACjD;AAAA,EACA,YAAY;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,IACpB,YAAY,MAAM,WAAW;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,IACL,GAAG,MAAM,WAAW;AAAA,IACpB,YAAY,MAAM,WAAW;AAAA,EAC/B;AAAA,EACA,WAAW;AAAA,IACT,GAAG,MAAM,WAAW;AAAA,IACpB,YAAY,MAAM,WAAW;AAAA,EAC/B;AAAA,EACA,SAAS,CAAC;AAAA,EACV,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,aAAa,MAAM,MAAM;AAAA,EAC3B;AACF,CAAC;"}

package/dist/esm/Card/Media/Media.mjs

@@ -0,0 +1,36 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import MuiCardMedia from "@mui/material/CardMedia";
+import { useClasses } from "./Media.styles.mjs";
+import { staticClasses } from "./Media.styles.mjs";
+const HvCardMedia = ({
+  id,
+  classes: classesProp,
+  className,
+  children,
+  title,
+  onClick,
+  ...others
+}) => {
+  const { classes } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    MuiCardMedia,
+    {
+      id,
+      classes: {
+        root: classes.root,
+        media: classes.media
+      },
+      className,
+      role: "img",
+      title,
+      onClick,
+      ...others,
+      children
+    }
+  );
+};
+export {
+  HvCardMedia,
+  staticClasses as cardMediaClasses
+};
+//# sourceMappingURL=Media.mjs.map

package/dist/esm/Card/Media/Media.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.mjs","sources":["../../../../src/Card/Media/Media.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\nimport MuiCardMedia, {\n  CardMediaProps as MuiCardMediaProps,\n} from \"@mui/material/CardMedia\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Media.styles\";\n\nexport { staticClasses as cardMediaClasses };\n\nexport type HvCardMediaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardMediaProps\n  extends Omit<MuiCardMediaProps, \"classes\">,\n    ImgHTMLAttributes<HTMLDivElement>,\n    HvBaseProps<HTMLDivElement, \"onClick\" | \"title\"> {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** The title of the media. */\n  title?: string;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** The component used for the root node. Either a string to use a HTML element or a component. */\n  component?: React.ElementType;\n  /** The image to display. */\n  image?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardMediaClasses;\n}\n\nexport const HvCardMedia = ({\n  id,\n  classes: classesProp,\n  className,\n  children,\n  title,\n  onClick,\n  ...others\n}: HvCardMediaProps) => {\n  const { classes } = useClasses(classesProp);\n  return (\n    <MuiCardMedia\n      id={id}\n      classes={{\n        root: classes.root,\n        media: classes.media,\n      }}\n      className={className}\n      role=\"img\"\n      title={title}\n      onClick={onClick}\n      {...others}\n    >\n      {children}\n    </MuiCardMedia>\n  );\n};\n"],"names":[],"mappings":";;;;AAgCO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAExC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Card/Media/Media.styles.mjs

@@ -0,0 +1,10 @@
+import { createClasses } from "../../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvCardMedia", {
+  root: { width: "100%" },
+  media: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Media.styles.mjs.map

package/dist/esm/Card/Media/Media.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.styles.mjs","sources":["../../../../src/Card/Media/Media.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardMedia\", {\n  root: { width: \"100%\" },\n  media: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,EAAE,OAAO,OAAO;AAAA,EACtB,OAAO,CAAC;AACV,CAAC;"}