@hitachivantara/uikit-react-core 5.0.0-next.2 → 5.0.0-next.20

package/dist/cjs/components/Calendar/calendarClasses.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const classes = require("../../utils/classes.cjs");
+const classKeys = ["root", "rangeCalendarContainer", "singleCalendar", "focusSelection", "calendarMonthlyCell", "calendarMonthlyCellSelected"];
+const calendarClasses = classes.getClasses(classKeys, "HvCalendar");
+const calendarClasses$1 = calendarClasses;
+exports.default = calendarClasses$1;
+//# sourceMappingURL=calendarClasses.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendarClasses.cjs","sources":["../../../../src/components/Calendar/calendarClasses.tsx"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvCalendarClasses = {\n  root?: string;\n  rangeCalendarContainer?: string;\n  singleCalendar?: string;\n  focusSelection?: string;\n  calendarMonthlyCell?: string;\n  calendarMonthlyCellSelected?: string;\n};\n\nconst classKeys: string[] = [\n  \"root\",\n  \"rangeCalendarContainer\",\n  \"singleCalendar\",\n  \"focusSelection\",\n  \"calendarMonthlyCell\",\n  \"calendarMonthlyCellSelected\",\n];\n\nconst calendarClasses = getClasses<HvCalendarClasses>(classKeys, \"HvCalendar\");\n\nexport default calendarClasses;\n"],"names":["classKeys","calendarClasses","getClasses"],"mappings":";;;AAWA,MAAMA,YAAsB,CAC1B,QACA,0BACA,kBACA,kBACA,uBACA,6BAA6B;AAG/B,MAAMC,kBAAkBC,QAA8BF,WAAAA,WAAW,YAAY;AAE7E,MAAA,oBAAeC;;"}

package/dist/cjs/components/Calendar/enums.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const VIEW_MODE = {
+  CALENDAR: "calendar",
+  MONTHLY: "monthly",
+  YEARLY: "yearly"
+};
+const REPRESENTATION_VALUES = {
+  LONG: "long",
+  SHORT: "short",
+  NARROW: "narrow",
+  NUMERIC: "numeric",
+  TWO_DIGIT: "2-digit"
+};
+const DATETIMEFORMAT_OPTIONS = {
+  LONG: "long",
+  SHORT: "short",
+  NARROW: "narrow"
+};
+const NAV_OPTIONS = {
+  PREVIOUS_MONTH: "previous_month",
+  PREVIOUS_YEAR: "previous_year",
+  NEXT_MONTH: "next_month",
+  NEXT_YEAR: "next_year",
+  MONTH: "month",
+  MONTH_YEAR: "month_year"
+};
+exports.DATETIMEFORMAT_OPTIONS = DATETIMEFORMAT_OPTIONS;
+exports.NAV_OPTIONS = NAV_OPTIONS;
+exports.REPRESENTATION_VALUES = REPRESENTATION_VALUES;
+exports.VIEW_MODE = VIEW_MODE;
+//# sourceMappingURL=enums.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"enums.cjs","sources":["../../../../src/components/Calendar/enums.ts"],"sourcesContent":["import { VisibilitySelectorActions } from \"./Calendar\";\n\n/**\n * View modes for the calendar component.\n */\nexport const VIEW_MODE = {\n  CALENDAR: \"calendar\",\n  MONTHLY: \"monthly\",\n  YEARLY: \"yearly\",\n};\n\n/**\n * Option values that can be used with Intl to represent a part or multiple parts of a date.\n */\nexport const REPRESENTATION_VALUES: {\n  LONG: RepresentationValuesType;\n  SHORT: RepresentationValuesType;\n  NARROW: RepresentationValuesType;\n  NUMERIC: RepresentationValuesType;\n  TWO_DIGIT: RepresentationValuesType;\n} = {\n  LONG: \"long\",\n  SHORT: \"short\",\n  NARROW: \"narrow\",\n  NUMERIC: \"numeric\",\n  TWO_DIGIT: \"2-digit\",\n};\n\nexport type RepresentationValuesType =\n  | \"long\"\n  | \"short\"\n  | \"narrow\"\n  | \"numeric\"\n  | \"2-digit\";\n\nexport type DateTimeFormatOptions = \"long\" | \"short\" | \"narrow\";\n\nexport const DATETIMEFORMAT_OPTIONS: {\n  LONG: DateTimeFormatOptions;\n  SHORT: DateTimeFormatOptions;\n  NARROW: DateTimeFormatOptions;\n} = {\n  LONG: \"long\",\n  SHORT: \"short\",\n  NARROW: \"narrow\",\n};\n/**\n * Navigation options for the calendar component.\n */\nexport const NAV_OPTIONS: {\n  PREVIOUS_MONTH: VisibilitySelectorActions;\n  PREVIOUS_YEAR: VisibilitySelectorActions;\n  NEXT_MONTH: VisibilitySelectorActions;\n  NEXT_YEAR: VisibilitySelectorActions;\n  MONTH: VisibilitySelectorActions;\n  MONTH_YEAR: VisibilitySelectorActions;\n} = {\n  PREVIOUS_MONTH: \"previous_month\",\n  PREVIOUS_YEAR: \"previous_year\",\n  NEXT_MONTH: \"next_month\",\n  NEXT_YEAR: \"next_year\",\n  MONTH: \"month\",\n  MONTH_YEAR: \"month_year\",\n};\n"],"names":["VIEW_MODE","CALENDAR","MONTHLY","YEARLY","REPRESENTATION_VALUES","LONG","SHORT","NARROW","NUMERIC","TWO_DIGIT","DATETIMEFORMAT_OPTIONS","NAV_OPTIONS","PREVIOUS_MONTH","PREVIOUS_YEAR","NEXT_MONTH","NEXT_YEAR","MONTH","MONTH_YEAR"],"mappings":";;AAKO,MAAMA,YAAY;AAAA,EACvBC,UAAU;AAAA,EACVC,SAAS;AAAA,EACTC,QAAQ;AACV;AAKO,MAAMC,wBAMT;AAAA,EACFC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,WAAW;AACb;AAWO,MAAMC,yBAIT;AAAA,EACFL,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,QAAQ;AACV;AAIO,MAAMI,cAOT;AAAA,EACFC,gBAAgB;AAAA,EAChBC,eAAe;AAAA,EACfC,YAAY;AAAA,EACZC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,YAAY;AACd;;;;;"}

package/dist/cjs/components/Calendar/model.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const utils = require("./utils.cjs");
+class CalendarModel {
+  constructor(month, year) {
+    this.dates = [];
+    this.updateModel = (month2, year2) => {
+      let validMonth = month2;
+      let validYear = year2;
+      if (!Number.isInteger(validMonth)) {
+        validMonth = (/* @__PURE__ */ new Date()).getMonth() + 1;
+      }
+      if (!Number.isInteger(validYear)) {
+        validYear = (/* @__PURE__ */ new Date()).getFullYear();
+      }
+      this.month = validMonth;
+      this.year = validYear;
+      this.dates = utils.createDatesArray(validMonth, validYear);
+    };
+    this.updateModel(month, year);
+  }
+}
+const generateModelFromDate = (seedValue) => {
+  let calendarModel;
+  if (typeof seedValue === "string") {
+    const today = /* @__PURE__ */ new Date();
+    calendarModel = new CalendarModel(today.getMonth() + 1, today.getFullYear());
+  } else if (utils.isRange(seedValue)) {
+    calendarModel = new CalendarModel(seedValue.startDate.getMonth() + 1, seedValue.startDate.getFullYear());
+  } else {
+    calendarModel = new CalendarModel(seedValue.getMonth() + 1, seedValue.getFullYear());
+  }
+  return calendarModel;
+};
+const generateCalendarModel = (seedValue, visibleMonth, visibleYear) => {
+  let calendarModel;
+  if (visibleMonth && visibleYear) {
+    calendarModel = new CalendarModel(visibleMonth, visibleYear);
+  } else if (visibleMonth && !visibleYear) {
+    calendarModel = new CalendarModel(visibleMonth, seedValue.getFullYear());
+  } else if (!visibleMonth && visibleYear) {
+    calendarModel = new CalendarModel(1, visibleYear);
+  } else {
+    calendarModel = generateModelFromDate(seedValue);
+  }
+  return calendarModel;
+};
+exports.default = CalendarModel;
+exports.generateCalendarModel = generateCalendarModel;
+//# sourceMappingURL=model.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"model.cjs","sources":["../../../../src/components/Calendar/model.tsx"],"sourcesContent":["import { createDatesArray, isRange } from \"./utils\";\n\n/**\n * Calendar builder for a specific month and year.\n * Returns an array of date objects.\n */\nexport default class CalendarModel {\n  month: any;\n\n  year: any;\n\n  dates: Date[] = [];\n\n  constructor(month?: number, year?: number) {\n    this.updateModel(month, year);\n  }\n\n  /**\n   * Updates the model with the received month and year\n   *\n   * @param {number} month - Number of the month (1 to 12).\n   * @param {number} year - Number of the year.\n   * @memberOf CalendarModel\n   */\n  updateModel = (month, year) => {\n    let validMonth = month;\n    let validYear = year;\n    if (!Number.isInteger(validMonth)) {\n      validMonth = new Date().getMonth() + 1;\n    }\n    if (!Number.isInteger(validYear)) {\n      validYear = new Date().getFullYear();\n    }\n\n    this.month = validMonth;\n    this.year = validYear;\n    this.dates = createDatesArray(validMonth, validYear);\n  };\n}\n\nconst generateModelFromDate = (seedValue) => {\n  let calendarModel;\n\n  if (typeof seedValue === \"string\") {\n    const today = new Date();\n    calendarModel = new CalendarModel(\n      today.getMonth() + 1,\n      today.getFullYear()\n    );\n  } else if (isRange(seedValue)) {\n    calendarModel = new CalendarModel(\n      seedValue.startDate.getMonth() + 1,\n      seedValue.startDate.getFullYear()\n    );\n  } else {\n    calendarModel = new CalendarModel(\n      seedValue.getMonth() + 1,\n      seedValue.getFullYear()\n    );\n  }\n\n  return calendarModel;\n};\n\nexport const generateCalendarModel = (seedValue, visibleMonth, visibleYear) => {\n  let calendarModel;\n\n  if (visibleMonth && visibleYear) {\n    calendarModel = new CalendarModel(visibleMonth, visibleYear);\n  } else if (visibleMonth && !visibleYear) {\n    calendarModel = new CalendarModel(visibleMonth, seedValue.getFullYear());\n  } else if (!visibleMonth && visibleYear) {\n    calendarModel = new CalendarModel(1, visibleYear);\n  } else {\n    calendarModel = generateModelFromDate(seedValue);\n  }\n\n  return calendarModel;\n};\n"],"names":["CalendarModel","constructor","month","year","dates","updateModel","validMonth","validYear","Number","isInteger","Date","getMonth","getFullYear","createDatesArray","generateModelFromDate","seedValue","calendarModel","today","isRange","startDate","generateCalendarModel","visibleMonth","visibleYear"],"mappings":";;;AAMA,MAAqBA,cAAc;AAAA,EAOjCC,YAAYC,OAAgBC,MAAe;AAF3CC,SAAAA,QAAgB;AAaFC,SAAAA,cAAAA,CAACH,QAAOC,UAAS;AAC7B,UAAIG,aAAaJ;AACjB,UAAIK,YAAYJ;AAChB,UAAI,CAACK,OAAOC,UAAUH,UAAU,GAAG;AACjCA,sBAAiBI,oBAAAA,KAAOC,GAAAA,SAAAA,IAAa;AAAA,MACvC;AACA,UAAI,CAACH,OAAOC,UAAUF,SAAS,GAAG;AACpB,qBAAA,oBAAIG,KAAM,GAACE,YAAa;AAAA,MACtC;AAEA,WAAKV,QAAQI;AACb,WAAKH,OAAOI;AACPH,WAAAA,QAAQS,MAAAA,iBAAiBP,YAAYC,SAAS;AAAA,IAAA;AAtB9CF,SAAAA,YAAYH,OAAOC,IAAI;AAAA,EAC9B;AAuBF;AAEA,MAAMW,wBAAyBC,CAAc,cAAA;AACvCC,MAAAA;AAEA,MAAA,OAAOD,cAAc,UAAU;AAC3BE,UAAAA,4BAAYP;AACF,oBAAA,IAAIV,cAClBiB,MAAMN,aAAa,GACnBM,MAAML,aAAa;AAAA,EAAA,WAEZM,MAAAA,QAAQH,SAAS,GAAG;AACb,oBAAA,IAAIf,cAClBe,UAAUI,UAAUR,aAAa,GACjCI,UAAUI,UAAUP,YAAa,CAAA;AAAA,EAAA,OAE9B;AACW,oBAAA,IAAIZ,cAClBe,UAAUJ,aAAa,GACvBI,UAAUH,aAAa;AAAA,EAE3B;AAEOI,SAAAA;AACT;AAEO,MAAMI,wBAAwBA,CAACL,WAAWM,cAAcC,gBAAgB;AACzEN,MAAAA;AAEJ,MAAIK,gBAAgBC,aAAa;AACf,oBAAA,IAAItB,cAAcqB,cAAcC,WAAW;AAAA,EAAA,WAClDD,gBAAgB,CAACC,aAAa;AACvCN,oBAAgB,IAAIhB,cAAcqB,cAAcN,UAAUH,YAAa,CAAA;AAAA,EAAA,WAC9D,CAACS,gBAAgBC,aAAa;AACvB,oBAAA,IAAItB,cAAc,GAAGsB,WAAW;AAAA,EAAA,OAC3C;AACLN,oBAAgBF,sBAAsBC,SAAS;AAAA,EACjD;AAEOC,SAAAA;AACT;;;"}

package/dist/cjs/components/Calendar/utils.cjs

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dayjs = require("dayjs");
+const isNil = require("lodash/isNil");
+const enums = require("./enums.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
+const isNil__default = /* @__PURE__ */ _interopDefault(isNil);
+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 = enums.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 = enums.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 = enums.REPRESENTATION_VALUES.LONG) => new Intl.DateTimeFormat(locale, {
+  month: representationValue
+}).format(date);
+const getFormattedDate = (date, locale, rep = enums.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__default.default(endDate))
+    return false;
+  const localEndDate = endDate;
+  const modStartDate = dayjs__default.default(startDate).format("YYYY-MM-DD");
+  const modEndDate = dayjs__default.default(localEndDate).format("YYYY-MM-DD");
+  const convertedDate = dayjs__default.default(date).format("YYYY-MM-DD");
+  return convertedDate >= modStartDate && convertedDate <= modEndDate;
+};
+const checkIfDateIsDisabled = (date, minimumDate, maximumDate) => {
+  if (!minimumDate && !maximumDate)
+    return false;
+  const modStartDate = minimumDate ? dayjs__default.default(minimumDate).format("YYYY-MM-DD") : void 0;
+  const modEndDate = maximumDate ? dayjs__default.default(maximumDate).format("YYYY-MM-DD") : void 0;
+  const convertedDate = dayjs__default.default(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);
+};
+exports.CALENDAR_WEEKS = CALENDAR_WEEKS;
+exports.checkIfDateIsDisabled = checkIfDateIsDisabled;
+exports.createDatesArray = createDatesArray;
+exports.dateInProvidedValueRange = dateInProvidedValueRange;
+exports.formatToLocale = formatToLocale;
+exports.getDateISO = getDateISO;
+exports.getFormattedDate = getFormattedDate;
+exports.getMonthDays = getMonthDays;
+exports.getMonthFirstWeekday = getMonthFirstWeekday;
+exports.getMonthName = getMonthName;
+exports.getMonthNamesList = getMonthNamesList;
+exports.getNextMonth = getNextMonth;
+exports.getPreviousMonth = getPreviousMonth;
+exports.getWeekdayNamesList = getWeekdayNamesList;
+exports.isDate = isDate;
+exports.isDateRangeProp = isDateRangeProp;
+exports.isRange = isRange;
+exports.isSameDay = isSameDay;
+exports.isSameMonth = isSameMonth;
+exports.makeUTCDate = makeUTCDate;
+exports.zeroPad = zeroPad;
+//# sourceMappingURL=utils.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","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/cjs/components/Card/Card.cjs

@@ -1,9 +1,12 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const emotion = require("../../utils/emotion.cjs");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const clsx = require("clsx");
 const Card_styles = require("./Card.styles.cjs");
 const cardClasses = require("./cardClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Box = require("../Box/Box.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const clsx__default = /* @__PURE__ */ _interopDefault(clsx);
 const HvCard = ({
@@ -14,21 +17,24 @@ const HvCard = ({
   selectable = false,
   selected = false,
   statusColor = "sema0",
-  bgcolor = "atmo1",
+  bgcolor,
   ...others
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card_styles.StyledRoot, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box.HvBox, {
     "aria-selected": selectable ? selected : void 0,
-    className: clsx__default.default("HvIsCardGridElement", cardClasses.default.root, classes == null ? void 0 : classes.root, className, selectable && clsx__default.default(cardClasses.default.selectable, classes == null ? void 0 : classes.selectable), selected && clsx__default.default(cardClasses.default.selected, classes == null ? void 0 : classes.selected)),
-    $selectable: selectable,
-    $selected: selected,
-    $bgcolor: bgcolor,
+    className: clsx__default.default(Card_styles.styles.root, emotion.css({
+      backgroundColor: bgcolor && uikitStyles.theme.colors[bgcolor] || uikitStyles.theme.card.backgroundColor
+    }), "HvIsCardGridElement", cardClasses.default.root, classes == null ? void 0 : classes.root, className, selectable && clsx__default.default(Card_styles.styles.selectable, cardClasses.default.selectable, classes == null ? void 0 : classes.selectable), selected && clsx__default.default(Card_styles.styles.selected, cardClasses.default.selected, classes == null ? void 0 : classes.selected)),
     ...others,
-    children: [/* @__PURE__ */ jsxRuntime.jsxs(Card_styles.StyledContainer, {
-      children: [/* @__PURE__ */ jsxRuntime.jsx(Card_styles.StyledBar, {
-        className: clsx__default.default(cardClasses.default.semanticBar, classes == null ? void 0 : classes.semanticBar),
-        barColor: statusColor
-      }), /* @__PURE__ */ jsxRuntime.jsx(Card_styles.StyledIcon, {
+    children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: clsx__default.default(Card_styles.styles.semanticContainer, cardClasses.default.semanticContainer, classes == null ? void 0 : classes.semanticContainer),
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: clsx__default.default(Card_styles.styles.semanticBar, emotion.css({
+          height: selected ? 4 : 2,
+          backgroundColor: statusColor === "sema0" ? selected ? uikitStyles.theme.colors.acce1 : uikitStyles.theme.colors.atmo4 : uikitStyles.theme.colors[statusColor]
+        }), cardClasses.default.semanticBar, classes == null ? void 0 : classes.semanticBar)
+      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: clsx__default.default(Card_styles.styles.icon, cardClasses.default.icon, classes == null ? void 0 : classes.icon),
         children: icon
       })]
     }), children]

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

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../types\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"../../types/tokens\";\nimport {\n  StyledRoot,\n  StyledContainer,\n  StyledBar,\n  StyledIcon,\n} 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 empty state 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 = \"atmo1\",\n  ...others\n}: HvCardProps) => {\n  return (\n    <StyledRoot\n      aria-selected={selectable ? selected : undefined}\n      className={clsx(\n        \"HvIsCardGridElement\",\n        cardClasses.root,\n        classes?.root,\n        className,\n        selectable && clsx(cardClasses.selectable, classes?.selectable),\n        selected && clsx(cardClasses.selected, classes?.selected)\n      )}\n      $selectable={selectable}\n      $selected={selected}\n      $bgcolor={bgcolor}\n      {...others}\n    >\n      <StyledContainer>\n        <StyledBar\n          className={clsx(cardClasses.semanticBar, classes?.semanticBar)}\n          barColor={statusColor}\n        />\n        <StyledIcon>{icon}</StyledIcon>\n      </StyledContainer>\n      {children}\n    </StyledRoot>\n  );\n};\n"],"names":["HvCard","classes","className","children","icon","selectable","selected","statusColor","bgcolor","others","StyledRoot","undefined","clsx","cardClasses","root","$selectable","$selected","$bgcolor","_jsxs","StyledContainer","_jsx","StyledBar","semanticBar","barColor","StyledIcon"],"mappings":";;;;;;;;AAmCO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC,UAAU;AAAA,KACPC;AACQ,MAAM;AACjB,yCACGC,YAAAA,YAAU;AAAA,IACT,iBAAeL,aAAaC,WAAWK;AAAAA,IACvCT,WAAWU,cAAAA,QACT,uBACAC,oBAAYC,MACZb,mCAASa,MACTZ,WACAG,cAAcO,cAAAA,QAAKC,oBAAYR,YAAYJ,mCAASI,UAAU,GAC9DC,YAAYM,sBAAKC,YAAAA,QAAYP,UAAUL,mCAASK,QAAQ,CAAC;AAAA,IAE3DS,aAAaV;AAAAA,IACbW,WAAWV;AAAAA,IACXW,UAAUT;AAAAA,IAAQ,GACdC;AAAAA,IAAMN,UAAA,CAEVe,2BAAAA,KAACC,6BAAe;AAAA,MAAAhB,UAAA,CACdiB,2BAAAA,IAACC,uBAAS;AAAA,QACRnB,WAAWU,cAAAA,QAAKC,YAAAA,QAAYS,aAAarB,mCAASqB,WAAW;AAAA,QAC7DC,UAAUhB;AAAAA,MAAAA,CACV,GACFa,2BAAAA,IAACI,wBAAU;AAAA,QAAArB,UAAEC;AAAAA,MAAAA,CAAkB,CAAA;AAAA,IAAA,CAAA,GAEhCD,QAAQ;AAAA,EAAA,CACE;AAEjB;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { css } from \"utils/emotion\";\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?:\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    <HvBox\n      aria-selected={selectable ? selected : undefined}\n      className={clsx(\n        styles.root,\n        css({\n          backgroundColor:\n            (bgcolor && theme.colors[bgcolor]) || theme.card.backgroundColor,\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","css","backgroundColor","theme","colors","card","cardClasses","_jsxs","semanticContainer","_jsx","semanticBar","height","acce1","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,yCACGC,IAAAA,OAAK;AAAA,IACJ,iBAAeL,aAAaC,WAAWK;AAAAA,IACvCT,WAAWU,cAAAA,QACTC,mBAAOC,MACPC,QAAAA,IAAI;AAAA,MACFC,iBACGR,WAAWS,kBAAMC,OAAOV,OAAO,KAAMS,YAAAA,MAAME,KAAKH;AAAAA,IACpD,CAAA,GACD,uBACAI,oBAAYN,MACZb,mCAASa,MACTZ,WACAG,cACEO,sBAAKC,YAAAA,OAAOR,YAAYe,YAAAA,QAAYf,YAAYJ,mCAASI,UAAU,GACrEC,YACEM,cAAAA,QAAKC,YAAAA,OAAOP,UAAUc,oBAAYd,UAAUL,mCAASK,QAAQ,CAAC;AAAA,IAChE,GACEG;AAAAA,IAAMN,WAEVkB,2BAAAA,KAAA,OAAA;AAAA,MACEnB,WAAWU,cACTC,QAAAA,mBAAOS,mBACPF,YAAAA,QAAYE,mBACZrB,mCAASqB,iBAAiB;AAAA,MAC1BnB,WAEFoB,2BAAAA,IAAA,OAAA;AAAA,QACErB,WAAWU,cAAAA,QACTC,mBAAOW,aACPT,QAAAA,IAAI;AAAA,UACFU,QAAQnB,WAAW,IAAI;AAAA,UACvBU,iBACET,gBAAgB,UACZD,WACEW,YAAMC,MAAAA,OAAOQ,QACbT,YAAAA,MAAMC,OAAOS,QACfV,YAAAA,MAAMC,OAAOX,WAAW;AAAA,QAC/B,CAAA,GACDa,YAAYI,QAAAA,aACZvB,mCAASuB,WAAW;AAAA,MAAA,CACpB,GAEJD,2BAAAA,IAAA,OAAA;AAAA,QAAKrB,WAAWU,cAAKC,QAAAA,mBAAOT,MAAMgB,YAAAA,QAAYhB,MAAMH,mCAASG,IAAI;AAAA,QAAED,UAChEC;AAAAA,MAAAA,CACG,CAAA;AAAA,IAAA,CAAA,GAEPD,QAAQ;AAAA,EAAA,CACH;AAEZ;;"}

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

@@ -1,115 +1,51 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const _styled = require("@emotion/styled/base");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const emotion = require("../../utils/emotion.cjs");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const cardClasses = require("./cardClasses.cjs");
-const Box = require("../Box/Box.cjs");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-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 getColor = (c) => uikitStyles.theme.colors[c];
-const StyledRoot = /* @__PURE__ */ _styled__default.default(Box.HvBox, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e5h2ket3"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e5h2ket3",
-  label: "StyledRoot"
-}, transientOptions.transientOptions))(({
-  $selectable,
-  $selected,
-  $bgcolor
-}) => ({
-  overflow: "visible",
-  position: "relative",
-  backgroundColor: getColor($bgcolor),
-  outline: uikitStyles.theme.card.outline,
-  borderRadius: uikitStyles.theme.card.borderRadius,
-  "&.focus-visible": {
-    ...focusUtils.outlineStyles
-  },
-  "&:focus": {
-    outline: "none"
-  },
-  ...$selectable && {
-    "&:hover": {
-      outline: `1px solid ${uikitStyles.theme.card.hoverColor}`
+const styles = {
+  root: emotion.css({
+    overflow: "visible",
+    position: "relative",
+    outline: uikitStyles.theme.card.outline,
+    borderRadius: uikitStyles.theme.card.borderRadius,
+    "&.focus-visible": {
+      ...focusUtils.outlineStyles
+    },
+    "&:focus": {
+      outline: "none"
     }
-  },
-  ...$selected && {
+  }),
+  selected: emotion.css({
     outline: `1px solid ${uikitStyles.theme.colors.acce1}`,
     "&:hover": {
       outline: `1px solid ${uikitStyles.theme.colors.acce1}`
     },
     "&:focus": {
       outline: `1px solid ${uikitStyles.theme.colors.acce1}`
-    },
-    [`& .${cardClasses.default.semanticBar}`]: {
-      height: 4
-    },
-    "& .sema0": {
-      backgroundColor: uikitStyles.theme.colors.acce1
     }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUzBCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEh2Qm94IH0gZnJvbSBcImNvbXBvbmVudHNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwidXRpbHNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwidXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IGNhcmRDbGFzc2VzIGZyb20gXCIuL2NhcmRDbGFzc2VzXCI7XG5cbmNvbnN0IGdldENvbG9yID0gKGM6IHN0cmluZyk6IHN0cmluZyA9PiB0aGVtZS5jb2xvcnNbY107XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFxuICBIdkJveCxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkc2VsZWN0YWJsZSwgJHNlbGVjdGVkLCAkYmdjb2xvciB9KSA9PiAoe1xuICBvdmVyZmxvdzogXCJ2aXNpYmxlXCIsXG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gIGJhY2tncm91bmRDb2xvcjogZ2V0Q29sb3IoJGJnY29sb3IpLFxuICBvdXRsaW5lOiB0aGVtZS5jYXJkLm91dGxpbmUsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuY2FyZC5ib3JkZXJSYWRpdXMsXG4gIFwiJi5mb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuICBcIiY6Zm9jdXNcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuICAuLi4oJHNlbGVjdGFibGUgJiYge1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY2FyZC5ob3ZlckNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gIC4uLigkc2VsZWN0ZWQgJiYge1xuICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICAgIFtgJiAuJHtjYXJkQ2xhc3Nlcy5zZW1hbnRpY0Jhcn1gXToge1xuICAgICAgaGVpZ2h0OiA0LFxuICAgIH0sXG4gICAgXCImIC5zZW1hMFwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hY2NlMSxcbiAgICB9LFxuICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gIFwiJiA+ICpcIjoge1xuICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgekluZGV4OiAxLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCYXIgPSBzdHlsZWQoXCJkaXZcIikoXG4gICh7IGJhckNvbG9yIH06IHsgYmFyQ29sb3I6IHN0cmluZyB9KSA9PiAoe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBoZWlnaHQ6IDIsXG4gICAgdG9wOiAtMSxcbiAgICByaWdodDogMCxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9yc1tiYXJDb2xvcl0sXG4gICAgLi4uKGJhckNvbG9yID09PSBcInNlbWEwXCIgJiYge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzQsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSWNvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHRvcDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgcmlnaHQ6IGBjYWxjKCR7dGhlbWUuY2FyZC5pY29uTWFyZ2lufSArICR7dGhlbWUuc3BhY2UueHN9KWAsXG59KTtcbiJdfQ== */");
-const StyledContainer = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e5h2ket2"
-} : {
-  target: "e5h2ket2",
-  label: "StyledContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "emolmc",
-  styles: "position:relative;& > *{position:absolute;z-index:1;}"
-} : {
-  name: "emolmc",
-  styles: "position:relative;& > *{position:absolute;z-index:1;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEMrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdkJveCB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcInV0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCBjYXJkQ2xhc3NlcyBmcm9tIFwiLi9jYXJkQ2xhc3Nlc1wiO1xuXG5jb25zdCBnZXRDb2xvciA9IChjOiBzdHJpbmcpOiBzdHJpbmcgPT4gdGhlbWUuY29sb3JzW2NdO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgSHZCb3gsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNlbGVjdGFibGUsICRzZWxlY3RlZCwgJGJnY29sb3IgfSkgPT4gKHtcbiAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCRiZ2NvbG9yKSxcbiAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLmNhcmQuYm9yZGVyUmFkaXVzLFxuICBcIiYuZm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgLi4uKCRzZWxlY3RhYmxlICYmIHtcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNhcmQuaG92ZXJDb2xvcn1gLFxuICAgIH0sXG4gIH0pLFxuICAuLi4oJHNlbGVjdGVkICYmIHtcbiAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBbYCYgLiR7Y2FyZENsYXNzZXMuc2VtYW50aWNCYXJ9YF06IHtcbiAgICAgIGhlaWdodDogNCxcbiAgICB9LFxuICAgIFwiJiAuc2VtYTBcIjoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYWNjZTEsXG4gICAgfSxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBcIiYgPiAqXCI6IHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHpJbmRleDogMSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFyID0gc3R5bGVkKFwiZGl2XCIpKFxuICAoeyBiYXJDb2xvciB9OiB7IGJhckNvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgaGVpZ2h0OiAyLFxuICAgIHRvcDogLTEsXG4gICAgcmlnaHQ6IDAsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnNbYmFyQ29sb3JdLFxuICAgIC4uLihiYXJDb2xvciA9PT0gXCJzZW1hMFwiICYmIHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW80LFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoXCJkaXZcIikoe1xuICB0b3A6IGBjYWxjKCR7dGhlbWUuY2FyZC5pY29uTWFyZ2lufSArICR7dGhlbWUuc3BhY2UueHN9KWAsXG4gIHJpZ2h0OiBgY2FsYygke3RoZW1lLmNhcmQuaWNvbk1hcmdpbn0gKyAke3RoZW1lLnNwYWNlLnhzfSlgLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledBar = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e5h2ket1"
-} : {
-  target: "e5h2ket1",
-  label: "StyledBar"
-})(({
-  barColor
-}) => ({
-  width: "100%",
-  height: 2,
-  top: -1,
-  right: 0,
-  backgroundColor: uikitStyles.theme.colors[barColor],
-  ...barColor === "sema0" && {
-    backgroundColor: uikitStyles.theme.colors.atmo4
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0R5QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdkJveCB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcInV0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCBjYXJkQ2xhc3NlcyBmcm9tIFwiLi9jYXJkQ2xhc3Nlc1wiO1xuXG5jb25zdCBnZXRDb2xvciA9IChjOiBzdHJpbmcpOiBzdHJpbmcgPT4gdGhlbWUuY29sb3JzW2NdO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgSHZCb3gsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNlbGVjdGFibGUsICRzZWxlY3RlZCwgJGJnY29sb3IgfSkgPT4gKHtcbiAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCRiZ2NvbG9yKSxcbiAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLmNhcmQuYm9yZGVyUmFkaXVzLFxuICBcIiYuZm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgLi4uKCRzZWxlY3RhYmxlICYmIHtcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNhcmQuaG92ZXJDb2xvcn1gLFxuICAgIH0sXG4gIH0pLFxuICAuLi4oJHNlbGVjdGVkICYmIHtcbiAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBbYCYgLiR7Y2FyZENsYXNzZXMuc2VtYW50aWNCYXJ9YF06IHtcbiAgICAgIGhlaWdodDogNCxcbiAgICB9LFxuICAgIFwiJiAuc2VtYTBcIjoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYWNjZTEsXG4gICAgfSxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBcIiYgPiAqXCI6IHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHpJbmRleDogMSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFyID0gc3R5bGVkKFwiZGl2XCIpKFxuICAoeyBiYXJDb2xvciB9OiB7IGJhckNvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgaGVpZ2h0OiAyLFxuICAgIHRvcDogLTEsXG4gICAgcmlnaHQ6IDAsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnNbYmFyQ29sb3JdLFxuICAgIC4uLihiYXJDb2xvciA9PT0gXCJzZW1hMFwiICYmIHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW80LFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoXCJkaXZcIikoe1xuICB0b3A6IGBjYWxjKCR7dGhlbWUuY2FyZC5pY29uTWFyZ2lufSArICR7dGhlbWUuc3BhY2UueHN9KWAsXG4gIHJpZ2h0OiBgY2FsYygke3RoZW1lLmNhcmQuaWNvbk1hcmdpbn0gKyAke3RoZW1lLnNwYWNlLnhzfSlgLFxufSk7XG4iXX0= */");
-const StyledIcon = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e5h2ket0"
-} : {
-  target: "e5h2ket0",
-  label: "StyledIcon"
-})({
-  top: `calc(${uikitStyles.theme.card.iconMargin} + ${uikitStyles.theme.space.xs})`,
-  right: `calc(${uikitStyles.theme.card.iconMargin} + ${uikitStyles.theme.space.xs})`
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUUwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdkJveCB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcInV0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCBjYXJkQ2xhc3NlcyBmcm9tIFwiLi9jYXJkQ2xhc3Nlc1wiO1xuXG5jb25zdCBnZXRDb2xvciA9IChjOiBzdHJpbmcpOiBzdHJpbmcgPT4gdGhlbWUuY29sb3JzW2NdO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgSHZCb3gsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNlbGVjdGFibGUsICRzZWxlY3RlZCwgJGJnY29sb3IgfSkgPT4gKHtcbiAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCRiZ2NvbG9yKSxcbiAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLmNhcmQuYm9yZGVyUmFkaXVzLFxuICBcIiYuZm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgLi4uKCRzZWxlY3RhYmxlICYmIHtcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNhcmQuaG92ZXJDb2xvcn1gLFxuICAgIH0sXG4gIH0pLFxuICAuLi4oJHNlbGVjdGVkICYmIHtcbiAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBbYCYgLiR7Y2FyZENsYXNzZXMuc2VtYW50aWNCYXJ9YF06IHtcbiAgICAgIGhlaWdodDogNCxcbiAgICB9LFxuICAgIFwiJiAuc2VtYTBcIjoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYWNjZTEsXG4gICAgfSxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBcIiYgPiAqXCI6IHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHpJbmRleDogMSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFyID0gc3R5bGVkKFwiZGl2XCIpKFxuICAoeyBiYXJDb2xvciB9OiB7IGJhckNvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgaGVpZ2h0OiAyLFxuICAgIHRvcDogLTEsXG4gICAgcmlnaHQ6IDAsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnNbYmFyQ29sb3JdLFxuICAgIC4uLihiYXJDb2xvciA9PT0gXCJzZW1hMFwiICYmIHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW80LFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoXCJkaXZcIikoe1xuICB0b3A6IGBjYWxjKCR7dGhlbWUuY2FyZC5pY29uTWFyZ2lufSArICR7dGhlbWUuc3BhY2UueHN9KWAsXG4gIHJpZ2h0OiBgY2FsYygke3RoZW1lLmNhcmQuaWNvbk1hcmdpbn0gKyAke3RoZW1lLnNwYWNlLnhzfSlgLFxufSk7XG4iXX0= */");
-exports.StyledBar = StyledBar;
-exports.StyledContainer = StyledContainer;
-exports.StyledIcon = StyledIcon;
-exports.StyledRoot = StyledRoot;
+  }),
+  selectable: emotion.css({
+    "&:hover": {
+      outline: `1px solid ${uikitStyles.theme.card.hoverColor}`
+    }
+  }),
+  semanticContainer: emotion.css({
+    position: "relative",
+    "& > *": {
+      position: "absolute",
+      zIndex: 1
+    }
+  }),
+  icon: emotion.css({
+    top: `calc(${uikitStyles.theme.card.iconMargin} + ${uikitStyles.theme.space.xs})`,
+    right: `calc(${uikitStyles.theme.card.iconMargin} + ${uikitStyles.theme.space.xs})`
+  }),
+  semanticBar: emotion.css({
+    width: "100%",
+    top: -1,
+    right: 0
+  })
+};
+exports.styles = styles;
 //# sourceMappingURL=Card.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.cjs","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBox } from \"components\";\nimport { outlineStyles } from \"utils\";\nimport { transientOptions } from \"utils/transientOptions\";\nimport cardClasses from \"./cardClasses\";\n\nconst getColor = (c: string): string => theme.colors[c];\n\nexport const StyledRoot = styled(\n  HvBox,\n  transientOptions\n)(({ $selectable, $selected, $bgcolor }) => ({\n  overflow: \"visible\",\n  position: \"relative\",\n  backgroundColor: getColor($bgcolor),\n  outline: theme.card.outline,\n  borderRadius: theme.card.borderRadius,\n  \"&.focus-visible\": {\n    ...outlineStyles,\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  ...($selectable && {\n    \"&:hover\": {\n      outline: `1px solid ${theme.card.hoverColor}`,\n    },\n  }),\n  ...($selected && {\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    [`& .${cardClasses.semanticBar}`]: {\n      height: 4,\n    },\n    \"& .sema0\": {\n      backgroundColor: theme.colors.acce1,\n    },\n  }),\n}));\n\nexport const StyledContainer = styled(\"div\")({\n  position: \"relative\",\n  \"& > *\": {\n    position: \"absolute\",\n    zIndex: 1,\n  },\n});\n\nexport const StyledBar = styled(\"div\")(\n  ({ barColor }: { barColor: string }) => ({\n    width: \"100%\",\n    height: 2,\n    top: -1,\n    right: 0,\n    backgroundColor: theme.colors[barColor],\n    ...(barColor === \"sema0\" && {\n      backgroundColor: theme.colors.atmo4,\n    }),\n  })\n);\n\nexport const StyledIcon = styled(\"div\")({\n  top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n  right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n});\n"],"names":["getColor","c","theme","colors","StyledRoot","HvBox","process","env","NODE_ENV","_extends","target","transientOptions","label","$selectable","$selected","$bgcolor","overflow","position","backgroundColor","outline","card","borderRadius","outlineStyles","hoverColor","acce1","cardClasses","semanticBar","height","StyledContainer","_styled","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledBar","barColor","width","top","right","atmo4","StyledIcon","iconMargin","space","xs"],"mappings":"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"}
+{"version":3,"file":"Card.styles.cjs","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { css } from \"utils/emotion\";\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","css","overflow","position","outline","theme","card","borderRadius","outlineStyles","selected","colors","acce1","selectable","hoverColor","semanticContainer","zIndex","icon","top","iconMargin","space","xs","right","semanticBar","width"],"mappings":";;;;;AAIO,MAAMA,SAAS;AAAA,EACpBC,MAAMC,QAAAA,IAAI;AAAA,IACRC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAASC,YAAAA,MAAMC,KAAKF;AAAAA,IACpBG,cAAcF,YAAAA,MAAMC,KAAKC;AAAAA,IACzB,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTJ,SAAS;AAAA,IACX;AAAA,EAAA,CACD;AAAA,EACDK,UAAUR,QAAAA,IAAI;AAAA,IACZG,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACnC,WAAW;AAAA,MACTP,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACrC;AAAA,IACA,WAAW;AAAA,MACTP,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACrC;AAAA,EAAA,CACD;AAAA,EACDC,YAAYX,QAAAA,IAAI;AAAA,IACd,WAAW;AAAA,MACTG,SAAU,aAAYC,YAAAA,MAAMC,KAAKO;AAAAA,IACnC;AAAA,EAAA,CACD;AAAA,EACDC,mBAAmBb,QAAAA,IAAI;AAAA,IACrBE,UAAU;AAAA,IACV,SAAS;AAAA,MACPA,UAAU;AAAA,MACVY,QAAQ;AAAA,IACV;AAAA,EAAA,CACD;AAAA,EACDC,MAAMf,QAAAA,IAAI;AAAA,IACRgB,KAAM,QAAOZ,YAAAA,MAAMC,KAAKY,gBAAgBb,kBAAMc,MAAMC;AAAAA,IACpDC,OAAQ,QAAOhB,YAAAA,MAAMC,KAAKY,gBAAgBb,kBAAMc,MAAMC;AAAAA,EAAAA,CACvD;AAAA,EACDE,aAAarB,QAAAA,IAAI;AAAA,IACfsB,OAAO;AAAA,IACPN,KAAK;AAAA,IACLI,OAAO;AAAA,EAAA,CACR;AACH;;"}