@drivy/cobalt 0.13.0

package/components/Calendar/CalendarRangePicker/CalendarRangePicker.js

@@ -0,0 +1,52 @@
+import { __read, __assign } from '../../../_virtual/_tslib.js';
+import React, { useState, useEffect } from 'react';
+import { CalendarRangePickerMonth } from './CalendarRangePickerMonth.js';
+import cx from 'classnames';
+import { Hint } from '../../Form/Hint.js';
+import addMonths from 'date-fns/addMonths';
+
+function CalendarRangePicker(_a) {
+    var rangeLimit = _a.rangeLimit, _b = _a.firstMonthDate, firstMonthDate = _b === void 0 ? new Date() : _b, _c = _a.numberOfMonths, numberOfMonths = _c === void 0 ? 1 : _c, hint = _a.hint, _d = _a.firstAvailableDate, firstAvailableDate = _d === void 0 ? new Date() : _d, lastAvailableDate = _a.lastAvailableDate, isEditingStartDate = _a.isEditingStartDate, isEditingEndDate = _a.isEditingEndDate, startDate = _a.startDate, endDate = _a.endDate, onChangeDate = _a.onChangeDate, onLeaveDate = _a.onLeaveDate, onSelectDate = _a.onSelectDate, locale = _a.locale;
+    firstMonthDate.setHours(0, 0, 0, 0);
+    firstAvailableDate.setHours(0, 0, 0, 0);
+    var _e = __read(useState({
+        startDate: startDate,
+        endDate: endDate,
+    }), 2), rangeDates = _e[0], setRangeDates = _e[1];
+    useEffect(function () {
+        setRangeDates({
+            startDate: startDate,
+            endDate: endDate,
+        });
+    }, [startDate, endDate]);
+    var handleSelectDate = function (date, isDateOutOfRange) {
+        if (isDateOutOfRange && isEditingEndDate)
+            return;
+        onSelectDate && onSelectDate(date, !!isDateOutOfRange);
+    };
+    var handleChangeDate = function (date, isDateOutOfRange, disabled) {
+        var processChange = onChangeDate && (isEditingStartDate || isEditingEndDate)
+            ? onChangeDate(date, isDateOutOfRange, disabled) !== false
+            : true;
+        if (!processChange || disabled)
+            return;
+        if (isEditingStartDate) {
+            setRangeDates(function (prev) { return (__assign(__assign({}, prev), { startDate: date })); });
+        }
+        else if (isEditingEndDate) {
+            setRangeDates(function (prev) { return (__assign(__assign({}, prev), { endDate: date })); });
+        }
+    };
+    var months = [firstMonthDate];
+    for (var i = 0; i < numberOfMonths - 1; i++) {
+        months.push(addMonths(months[months.length - 1], 1));
+    }
+    return (React.createElement("div", { className: "cobalt-CalendarRangePicker" },
+        React.createElement("div", { className: "cobalt-CalendarRangePicker__months-container" }, months.map(function (monthDate) { return (React.createElement(CalendarRangePickerMonth, { key: monthDate.getTime(), date: monthDate, startDate: rangeDates.startDate, endDate: rangeDates.endDate, onSelectDate: handleSelectDate, onChangeDate: handleChangeDate, onLeaveDate: onLeaveDate, isEditingStartDate: isEditingStartDate, isEditingEndDate: isEditingEndDate, rangeLimit: rangeLimit, firstAvailableDate: firstAvailableDate, lastAvailableDate: lastAvailableDate, locale: locale })); })),
+        React.createElement("div", { className: cx("cobalt-CalendarRangePicker__message", {
+                "cobalt-CalendarRangePicker__message--show": !!hint,
+            }) }, hint && React.createElement(Hint, { status: hint.status }, hint.html))));
+}
+
+export { CalendarRangePicker };
+//# sourceMappingURL=CalendarRangePicker.js.map

package/components/Calendar/CalendarRangePicker/CalendarRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarRangePicker.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePicker.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\"\nimport { CalendarRangePickerMonth } from \"./CalendarRangePickerMonth\"\nimport classNames from \"classnames\"\nimport { Hint } from \"../../Form/Hint\"\nimport addMonths from \"date-fns/addMonths\"\nimport { FormElementStatus } from \"../../Form/form\"\n\ntype Props = {\n  numberOfMonths?: number\n  firstMonthDate?: Date\n  rangeLimit?: number\n  firstAvailableDate?: Date\n  lastAvailableDate?: Date\n  isEditingStartDate: boolean\n  isEditingEndDate: boolean\n  startDate: Date | undefined\n  endDate: Date | undefined\n  hint?: {\n    status?: FormElementStatus\n    html: string\n  }\n  onChangeDate?: (\n    date: Date,\n    isOutOfRange: boolean,\n    disabled: boolean\n  ) => boolean\n  onLeaveDate?: (date: Date) => void\n  onSelectDate?: (date: Date, isOutOfRange: boolean) => void\n  locale?: Record<string, unknown>\n}\n\nexport function CalendarRangePicker({\n  rangeLimit,\n  firstMonthDate = new Date(),\n  numberOfMonths = 1,\n  hint,\n  firstAvailableDate = new Date(),\n  lastAvailableDate,\n  isEditingStartDate,\n  isEditingEndDate,\n  startDate,\n  endDate,\n  onChangeDate,\n  onLeaveDate,\n  onSelectDate,\n  locale,\n}: Props) {\n  firstMonthDate.setHours(0, 0, 0, 0)\n  firstAvailableDate.setHours(0, 0, 0, 0)\n\n  const [rangeDates, setRangeDates] = useState({\n    startDate: startDate,\n    endDate: endDate,\n  })\n\n  useEffect(() => {\n    setRangeDates({\n      startDate,\n      endDate,\n    })\n  }, [startDate, endDate])\n\n  const handleSelectDate = (date: Date, isDateOutOfRange?: boolean) => {\n    if (isDateOutOfRange && isEditingEndDate) return\n    onSelectDate && onSelectDate(date, !!isDateOutOfRange)\n  }\n\n  const handleChangeDate = (\n    date: Date,\n    isDateOutOfRange: boolean,\n    disabled: boolean\n  ) => {\n    const processChange =\n      onChangeDate && (isEditingStartDate || isEditingEndDate)\n        ? onChangeDate(date, isDateOutOfRange, disabled) !== false\n        : true\n\n    if (!processChange || disabled) return\n\n    if (isEditingStartDate) {\n      setRangeDates((prev) => ({ ...prev, startDate: date }))\n    } else if (isEditingEndDate) {\n      setRangeDates((prev) => ({ ...prev, endDate: date }))\n    }\n  }\n\n  const months = [firstMonthDate]\n  for (let i = 0; i < numberOfMonths - 1; i++) {\n    months.push(addMonths(months[months.length - 1], 1))\n  }\n\n  return (\n    <div className=\"cobalt-CalendarRangePicker\">\n      <div className=\"cobalt-CalendarRangePicker__months-container\">\n        {months.map((monthDate) => (\n          <CalendarRangePickerMonth\n            key={monthDate.getTime()}\n            date={monthDate}\n            startDate={rangeDates.startDate}\n            endDate={rangeDates.endDate}\n            onSelectDate={handleSelectDate}\n            onChangeDate={handleChangeDate}\n            onLeaveDate={onLeaveDate}\n            isEditingStartDate={isEditingStartDate}\n            isEditingEndDate={isEditingEndDate}\n            rangeLimit={rangeLimit}\n            firstAvailableDate={firstAvailableDate}\n            lastAvailableDate={lastAvailableDate}\n            locale={locale}\n          />\n        ))}\n      </div>\n\n      <div\n        className={classNames(\"cobalt-CalendarRangePicker__message\", {\n          \"cobalt-CalendarRangePicker__message--show\": !!hint,\n        })}\n      >\n        {hint && <Hint status={hint.status}>{hint.html}</Hint>}\n      </div>\n    </div>\n  )\n}\n"],"names":["classNames"],"mappings":"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"}

package/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import cx from 'classnames';
+import { format } from 'date-fns';
+
+function CalendarRangePickerDay(_a) {
+    var date = _a.date, isToday = _a.isToday, isFirstDayOfMonth = _a.isFirstDayOfMonth, isLastDayOfMonth = _a.isLastDayOfMonth, isStartDay = _a.isStartDay, isEndDay = _a.isEndDay, isRange = _a.isRange, selected = _a.selected, subdued = _a.subdued, disabled = _a.disabled, invalid = _a.invalid, onSelect = _a.onSelect, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
+    var handleSelectDate = function () {
+        !disabled && onSelect(date);
+    };
+    return (React.createElement("div", { className: cx("cobalt-CalendarRangePicker__day", {
+            "cobalt-CalendarRangePicker__day--today": isToday,
+            "cobalt-CalendarRangePicker__day--firstOfMonth": isFirstDayOfMonth,
+            "cobalt-CalendarRangePicker__day--lastOfMonth": isLastDayOfMonth,
+            "cobalt-CalendarRangePicker__day--startDay": isStartDay,
+            "cobalt-CalendarRangePicker__day--endDay": isEndDay,
+            "cobalt-CalendarRangePicker__day--range": isRange,
+            "cobalt-CalendarRangePicker__day--selected": selected,
+            "cobalt-CalendarRangePicker__day--subdued": subdued,
+            "cobalt-CalendarRangePicker__day--invalid": invalid,
+            "cobalt-CalendarRangePicker__day--disabled": disabled,
+        }), onMouseEnter: function () {
+            onMouseEnter(date, !!disabled);
+        }, onMouseLeave: function () {
+            onMouseLeave && onMouseLeave(date);
+        }, onTouchStart: handleSelectDate, onClick: handleSelectDate, "data-day": format(date, "yyyy-MM-dd") },
+        React.createElement("div", { className: "cobalt-CalendarRangePicker__day-inner" }, date.getDate())));
+}
+function areEqual(prevProps, nextProps) {
+    return (prevProps.isEditingStartDate === nextProps.isEditingStartDate &&
+        prevProps.isEditingEndDate === nextProps.isEditingEndDate &&
+        prevProps.selected === nextProps.selected &&
+        prevProps.subdued === nextProps.subdued &&
+        prevProps.isStartDay === nextProps.isStartDay &&
+        prevProps.isEndDay === nextProps.isEndDay &&
+        prevProps.invalid === nextProps.invalid &&
+        prevProps.isRange === nextProps.isRange);
+}
+var MemoizedComponent = React.memo(CalendarRangePickerDay, areEqual);
+MemoizedComponent.displayName = "CalendarRangePickerDay";
+
+export { MemoizedComponent as CalendarRangePickerDay };
+//# sourceMappingURL=CalendarRangePickerDay.js.map

package/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarRangePickerDay.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { format } from \"date-fns\"\n\ntype Props = {\n  date: Date\n  isEditingStartDate: boolean\n  isEditingEndDate: boolean\n  isToday?: boolean\n  isFirstDayOfMonth?: boolean\n  isLastDayOfMonth?: boolean\n  isStartDay?: boolean\n  isEndDay?: boolean\n  selected?: boolean\n  isRange?: boolean\n  invalid?: boolean\n  disabled?: boolean\n  subdued?: boolean\n  onSelect: (date: Date) => void\n  onMouseEnter: (date: Date, disabled: boolean) => void\n  onMouseLeave?: (date: Date) => void\n}\n\nfunction CalendarRangePickerDay({\n  date,\n  isToday,\n  isFirstDayOfMonth,\n  isLastDayOfMonth,\n  isStartDay,\n  isEndDay,\n  isRange,\n  selected,\n  subdued,\n  disabled,\n  invalid,\n  onSelect,\n  onMouseEnter,\n  onMouseLeave,\n}: Props) {\n  const handleSelectDate = () => {\n    !disabled && onSelect(date)\n  }\n\n  return (\n    <div\n      className={classNames(\"cobalt-CalendarRangePicker__day\", {\n        \"cobalt-CalendarRangePicker__day--today\": isToday,\n        \"cobalt-CalendarRangePicker__day--firstOfMonth\": isFirstDayOfMonth,\n        \"cobalt-CalendarRangePicker__day--lastOfMonth\": isLastDayOfMonth,\n        \"cobalt-CalendarRangePicker__day--startDay\": isStartDay,\n        \"cobalt-CalendarRangePicker__day--endDay\": isEndDay,\n        \"cobalt-CalendarRangePicker__day--range\": isRange,\n        \"cobalt-CalendarRangePicker__day--selected\": selected,\n        \"cobalt-CalendarRangePicker__day--subdued\": subdued,\n        \"cobalt-CalendarRangePicker__day--invalid\": invalid,\n        \"cobalt-CalendarRangePicker__day--disabled\": disabled,\n      })}\n      onMouseEnter={() => {\n        onMouseEnter(date, !!disabled)\n      }}\n      onMouseLeave={() => {\n        onMouseLeave && onMouseLeave(date)\n      }}\n      onTouchStart={handleSelectDate}\n      onClick={handleSelectDate}\n      data-day={format(date, \"yyyy-MM-dd\")}\n    >\n      <div className=\"cobalt-CalendarRangePicker__day-inner\">\n        {date.getDate()}\n      </div>\n    </div>\n  )\n}\n\nfunction areEqual(prevProps: Props, nextProps: Props) {\n  return (\n    prevProps.isEditingStartDate === nextProps.isEditingStartDate &&\n    prevProps.isEditingEndDate === nextProps.isEditingEndDate &&\n    prevProps.selected === nextProps.selected &&\n    prevProps.subdued === nextProps.subdued &&\n    prevProps.isStartDay === nextProps.isStartDay &&\n    prevProps.isEndDay === nextProps.isEndDay &&\n    prevProps.invalid === nextProps.invalid &&\n    prevProps.isRange === nextProps.isRange\n  )\n}\n\nconst MemoizedComponent = React.memo(CalendarRangePickerDay, areEqual)\nMemoizedComponent.displayName = \"CalendarRangePickerDay\"\n\nexport { MemoizedComponent as CalendarRangePickerDay }\n"],"names":["classNames"],"mappings":";;;;AAuBA,SAAS,sBAAsB,CAAC,EAexB;QAdN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,YAAY,kBAAA;IAEZ,IAAM,gBAAgB,GAAG;QACvB,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;KAC5B,CAAA;IAED,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,iCAAiC,EAAE;YACvD,wCAAwC,EAAE,OAAO;YACjD,+CAA+C,EAAE,iBAAiB;YAClE,8CAA8C,EAAE,gBAAgB;YAChE,2CAA2C,EAAE,UAAU;YACvD,yCAAyC,EAAE,QAAQ;YACnD,wCAAwC,EAAE,OAAO;YACjD,2CAA2C,EAAE,QAAQ;YACrD,0CAA0C,EAAE,OAAO;YACnD,0CAA0C,EAAE,OAAO;YACnD,2CAA2C,EAAE,QAAQ;SACtD,CAAC,EACF,YAAY,EAAE;YACZ,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;SAC/B,EACD,YAAY,EAAE;YACZ,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,CAAA;SACnC,EACD,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,gBAAgB,cACf,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC;QAEpC,6BAAK,SAAS,EAAC,uCAAuC,IACnD,IAAI,CAAC,OAAO,EAAE,CACX,CACF,EACP;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,SAAgB,EAAE,SAAgB;IAClD,QACE,SAAS,CAAC,kBAAkB,KAAK,SAAS,CAAC,kBAAkB;QAC7D,SAAS,CAAC,gBAAgB,KAAK,SAAS,CAAC,gBAAgB;QACzD,SAAS,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ;QACzC,SAAS,CAAC,OAAO,KAAK,SAAS,CAAC,OAAO;QACvC,SAAS,CAAC,UAAU,KAAK,SAAS,CAAC,UAAU;QAC7C,SAAS,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ;QACzC,SAAS,CAAC,OAAO,KAAK,SAAS,CAAC,OAAO;QACvC,SAAS,CAAC,OAAO,KAAK,SAAS,CAAC,OAAO,EACxC;AACH,CAAC;IAEK,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,sBAAsB,EAAE,QAAQ,EAAC;AACtE,iBAAiB,CAAC,WAAW,GAAG,wBAAwB;;;;"}

package/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.js

@@ -0,0 +1,96 @@
+import React, { useMemo } from 'react';
+import { CalendarRangePickerDay as MemoizedComponent } from './CalendarRangePickerDay.js';
+import cx from 'classnames';
+import { startOfMonth, endOfMonth, eachDayOfInterval, startOfWeek, endOfWeek, differenceInCalendarDays, format, isSameDay, getDay } from 'date-fns';
+
+function daysByWeeks(monthDate) {
+    var firstDayOfMonth = startOfMonth(monthDate);
+    var firstDayOfMonthOffset = getDay(firstDayOfMonth) - 1;
+    var lastDayOfMonth = endOfMonth(monthDate);
+    var days = eachDayOfInterval({
+        start: firstDayOfMonth,
+        end: lastDayOfMonth,
+    });
+    return days.reduce(function (acc, day, index) {
+        if (index === 0 || (index + firstDayOfMonthOffset) % 7 === 0) {
+            acc.push([]);
+        }
+        acc[acc.length - 1].push(day);
+        return acc;
+    }, []);
+}
+function isDisabled(day, firstAvailableDate, lastAvailableDate) {
+    return (day.getTime() < firstAvailableDate.getTime() ||
+        (lastAvailableDate != null && day.getTime() > lastAvailableDate.getTime()));
+}
+function isInvalid(day, startDate, rangeLimit, isOutOfRange, isEditingEndDate) {
+    return (rangeLimit != null &&
+        isOutOfRange &&
+        isEditingEndDate &&
+        startDate != null &&
+        differenceInCalendarDays(day, startDate) >= rangeLimit);
+}
+function isRange(startDate, endDate, isOutOfRangeStartDate) {
+    return !!(startDate && endDate) && !isOutOfRangeStartDate;
+}
+function isSelected(day, startDate, endDate, isStartDay, isEndDay, isOutOfRangeStartDate) {
+    return (isStartDay ||
+        isEndDay ||
+        (!isOutOfRangeStartDate &&
+            endDate &&
+            day.getTime() <= endDate.getTime() &&
+            startDate &&
+            day.getTime() > startDate.getTime()));
+}
+function CalendarRangePickerMonth(_a) {
+    var date = _a.date, onSelectDate = _a.onSelectDate, onChangeDate = _a.onChangeDate, onLeaveDate = _a.onLeaveDate, startDate = _a.startDate, endDate = _a.endDate, _b = _a.isEditingStartDate, isEditingStartDate = _b === void 0 ? false : _b, _c = _a.isEditingEndDate, isEditingEndDate = _c === void 0 ? false : _c, rangeLimit = _a.rangeLimit, firstAvailableDate = _a.firstAvailableDate, lastAvailableDate = _a.lastAvailableDate, locale = _a.locale;
+    var firstDayOfMonth = useMemo(function () { return startOfMonth(date); }, []);
+    var lastDayOfMonth = useMemo(function () { return endOfMonth(date); }, []);
+    var byWeeks = useMemo(function () { return daysByWeeks(date); }, []);
+    var today = new Date().setHours(0, 0, 0, 0);
+    var weekdays = useMemo(function () {
+        return eachDayOfInterval({
+            start: startOfWeek(today, { weekStartsOn: 1 }),
+            end: endOfWeek(today, { weekStartsOn: 1 }),
+        });
+    }, []);
+    var isOutOfRange = rangeLimit != null &&
+        startDate != null &&
+        endDate != null &&
+        differenceInCalendarDays(endDate, startDate) >= rangeLimit;
+    var isOutOfRangeStartDate = !!isEditingStartDate && isOutOfRange;
+    var onMouseEnter = function (day, disabled) {
+        var isDayOutOfRange = false;
+        if (rangeLimit != null) {
+            if (isEditingStartDate) {
+                isDayOutOfRange =
+                    endDate != null &&
+                        differenceInCalendarDays(endDate, day) >= rangeLimit;
+            }
+            else if (isEditingEndDate) {
+                isDayOutOfRange =
+                    startDate != null &&
+                        differenceInCalendarDays(day, startDate) >= rangeLimit;
+            }
+        }
+        onChangeDate(day, isDayOutOfRange, disabled);
+    };
+    var onSelect = function (day) {
+        onSelectDate(day, isOutOfRange);
+    };
+    return (React.createElement("div", { className: cx("cobalt-CalendarRangePicker__month", {
+            "cobalt-CalendarRangePicker__month--invalid": isOutOfRange && !isEditingStartDate,
+        }), "data-month": format(date, "yyyy-MM") },
+        React.createElement("div", { className: "cobalt-CalendarRangePicker__month-header cobalt-text-titleSmall" }, format(date, "MMMM yyyy", { locale: locale })),
+        React.createElement("div", { className: "cobalt-CalendarRangePicker__month__weeks-container" },
+            React.createElement("div", { className: "cobalt-CalendarRangePicker__month__week-header" }, weekdays.map(function (weekday) { return (React.createElement("div", { key: weekday.getTime(), className: "cobalt-CalendarRangePicker__month__day-header" }, format(weekday, "dd", { locale: locale }))); })),
+            byWeeks.map(function (week, index) { return (React.createElement("div", { key: index, className: "cobalt-CalendarRangePicker__month__week" }, week.map(function (day) {
+                var isStartDay = startDate != null && isSameDay(day, startDate);
+                var isEndDay = endDate != null && isSameDay(day, endDate);
+                return (React.createElement(MemoizedComponent, { key: day.getTime(), isEditingStartDate: !!isEditingStartDate, isEditingEndDate: !!isEditingEndDate, date: day, onMouseEnter: onMouseEnter, onMouseLeave: onLeaveDate, onSelect: onSelect, isToday: isSameDay(day, today), isStartDay: isStartDay, isEndDay: isEndDay, isFirstDayOfMonth: isSameDay(day, firstDayOfMonth), isLastDayOfMonth: isSameDay(day, lastDayOfMonth), isRange: isRange(startDate, endDate, isOutOfRangeStartDate), invalid: isInvalid(day, startDate, rangeLimit, isOutOfRange, isEditingEndDate), subdued: (isStartDay && isEditingEndDate) ||
+                        (isEndDay && isEditingStartDate), disabled: isDisabled(day, firstAvailableDate, lastAvailableDate), selected: isSelected(day, startDate, endDate, isStartDay, isEndDay, isOutOfRangeStartDate) }));
+            }))); }))));
+}
+
+export { CalendarRangePickerMonth };
+//# sourceMappingURL=CalendarRangePickerMonth.js.map

package/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarRangePickerMonth.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport { CalendarRangePickerDay } from \"./CalendarRangePickerDay\"\nimport classNames from \"classnames\"\nimport {\n  eachDayOfInterval,\n  startOfMonth,\n  endOfMonth,\n  format,\n  isSameDay,\n  getDay,\n  differenceInCalendarDays,\n  startOfWeek,\n  endOfWeek,\n} from \"date-fns\"\n\ntype Props = {\n  date: Date\n  startDate?: Date\n  endDate?: Date\n  onSelectDate: (date: Date, isOutOfRange?: boolean) => void\n  onChangeDate: (date: Date, isOutOfRange: boolean, disabled: boolean) => void\n  onLeaveDate?: (date: Date) => void\n  isEditingStartDate?: boolean\n  isEditingEndDate?: boolean\n  rangeLimit?: number\n  firstAvailableDate: Date\n  lastAvailableDate?: Date\n  locale: any\n}\n\nfunction daysByWeeks(monthDate: Date): Date[][] {\n  const firstDayOfMonth = startOfMonth(monthDate)\n  const firstDayOfMonthOffset = getDay(firstDayOfMonth) - 1\n  const lastDayOfMonth = endOfMonth(monthDate)\n  const days = eachDayOfInterval({\n    start: firstDayOfMonth,\n    end: lastDayOfMonth,\n  })\n\n  return days.reduce((acc: Date[][], day, index) => {\n    if (index === 0 || (index + firstDayOfMonthOffset) % 7 === 0) {\n      acc.push([])\n    }\n    acc[acc.length - 1].push(day)\n    return acc\n  }, [])\n}\n\nfunction isDisabled(\n  day: Date,\n  firstAvailableDate: Date,\n  lastAvailableDate: Date | undefined\n) {\n  return (\n    day.getTime() < firstAvailableDate.getTime() ||\n    (lastAvailableDate != null && day.getTime() > lastAvailableDate.getTime())\n  )\n}\n\nfunction isInvalid(\n  day: Date,\n  startDate: Date | undefined,\n  rangeLimit: number | undefined,\n  isOutOfRange: boolean,\n  isEditingEndDate: boolean | undefined\n) {\n  return (\n    rangeLimit != null &&\n    isOutOfRange &&\n    isEditingEndDate &&\n    startDate != null &&\n    differenceInCalendarDays(day, startDate) >= rangeLimit\n  )\n}\n\nfunction isRange(\n  startDate: Date | undefined,\n  endDate: Date | undefined,\n  isOutOfRangeStartDate: boolean\n) {\n  return !!(startDate && endDate) && !isOutOfRangeStartDate\n}\n\nfunction isSelected(\n  day: Date,\n  startDate: Date | undefined,\n  endDate: Date | undefined,\n  isStartDay: boolean,\n  isEndDay: boolean,\n  isOutOfRangeStartDate: boolean\n) {\n  return (\n    isStartDay ||\n    isEndDay ||\n    (!isOutOfRangeStartDate &&\n      endDate &&\n      day.getTime() <= endDate.getTime() &&\n      startDate &&\n      day.getTime() > startDate.getTime())\n  )\n}\n\nexport function CalendarRangePickerMonth({\n  date,\n  onSelectDate,\n  onChangeDate,\n  onLeaveDate,\n  startDate,\n  endDate,\n  isEditingStartDate = false,\n  isEditingEndDate = false,\n  rangeLimit,\n  firstAvailableDate,\n  lastAvailableDate,\n  locale,\n}: Props) {\n  const firstDayOfMonth = useMemo(() => startOfMonth(date), [])\n  const lastDayOfMonth = useMemo(() => endOfMonth(date), [])\n  const byWeeks = useMemo(() => daysByWeeks(date), [])\n\n  const today = new Date().setHours(0, 0, 0, 0)\n\n  const weekdays: Date[] = useMemo(\n    () =>\n      eachDayOfInterval({\n        start: startOfWeek(today, { weekStartsOn: 1 }),\n        end: endOfWeek(today, { weekStartsOn: 1 }),\n      }),\n    []\n  )\n\n  const isOutOfRange =\n    rangeLimit != null &&\n    startDate != null &&\n    endDate != null &&\n    differenceInCalendarDays(endDate, startDate) >= rangeLimit\n\n  const isOutOfRangeStartDate = !!isEditingStartDate && isOutOfRange\n\n  const onMouseEnter = (day: Date, disabled: boolean) => {\n    let isDayOutOfRange = false\n    if (rangeLimit != null) {\n      if (isEditingStartDate) {\n        isDayOutOfRange =\n          endDate != null &&\n          differenceInCalendarDays(endDate, day) >= rangeLimit\n      } else if (isEditingEndDate) {\n        isDayOutOfRange =\n          startDate != null &&\n          differenceInCalendarDays(day, startDate) >= rangeLimit\n      }\n    }\n\n    onChangeDate(day, isDayOutOfRange, disabled)\n  }\n\n  const onSelect = (day: Date) => {\n    onSelectDate(day, isOutOfRange)\n  }\n\n  return (\n    <div\n      className={classNames(\"cobalt-CalendarRangePicker__month\", {\n        \"cobalt-CalendarRangePicker__month--invalid\":\n          isOutOfRange && !isEditingStartDate,\n      })}\n      data-month={format(date, \"yyyy-MM\")}\n    >\n      <div className=\"cobalt-CalendarRangePicker__month-header cobalt-text-titleSmall\">\n        {format(date, \"MMMM yyyy\", { locale })}\n      </div>\n      <div className=\"cobalt-CalendarRangePicker__month__weeks-container\">\n        <div className=\"cobalt-CalendarRangePicker__month__week-header\">\n          {weekdays.map((weekday) => (\n            <div\n              key={weekday.getTime()}\n              className=\"cobalt-CalendarRangePicker__month__day-header\"\n            >\n              {format(weekday, \"dd\", { locale })}\n            </div>\n          ))}\n        </div>\n        {byWeeks.map((week, index) => (\n          <div key={index} className=\"cobalt-CalendarRangePicker__month__week\">\n            {week.map((day) => {\n              const isStartDay = startDate != null && isSameDay(day, startDate)\n              const isEndDay = endDate != null && isSameDay(day, endDate)\n              return (\n                <CalendarRangePickerDay\n                  key={day.getTime()}\n                  isEditingStartDate={!!isEditingStartDate}\n                  isEditingEndDate={!!isEditingEndDate}\n                  date={day}\n                  onMouseEnter={onMouseEnter}\n                  onMouseLeave={onLeaveDate}\n                  onSelect={onSelect}\n                  isToday={isSameDay(day, today)}\n                  isStartDay={isStartDay}\n                  isEndDay={isEndDay}\n                  isFirstDayOfMonth={isSameDay(day, firstDayOfMonth)}\n                  isLastDayOfMonth={isSameDay(day, lastDayOfMonth)}\n                  isRange={isRange(startDate, endDate, isOutOfRangeStartDate)}\n                  invalid={isInvalid(\n                    day,\n                    startDate,\n                    rangeLimit,\n                    isOutOfRange,\n                    isEditingEndDate\n                  )}\n                  subdued={\n                    (isStartDay && isEditingEndDate) ||\n                    (isEndDay && isEditingStartDate)\n                  }\n                  disabled={isDisabled(\n                    day,\n                    firstAvailableDate,\n                    lastAvailableDate\n                  )}\n                  selected={isSelected(\n                    day,\n                    startDate,\n                    endDate,\n                    isStartDay,\n                    isEndDay,\n                    isOutOfRangeStartDate\n                  )}\n                />\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"names":["classNames","CalendarRangePickerDay"],"mappings":"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"}

package/components/Calendar/CalendarView/CalendarViewMonth.js

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import { getDaysInMonth, differenceInCalendarWeeks, endOfMonth, getISODay, setDate, isPast, isToday, format } from 'date-fns';
+import cx from 'classnames';
+
+var CalendarViewMonth = function (_a) {
+    var monthName = _a.monthName, monthStart = _a.monthStart, _b = _a.statusByDate, statusByDate = _b === void 0 ? {} : _b;
+    var getMonthByWeek = function () {
+        var daysInMonth = getDaysInMonth(monthStart);
+        var weeksInMonth = differenceInCalendarWeeks(endOfMonth(monthStart), monthStart, {
+            weekStartsOn: 1,
+        }) + 1;
+        var weekDay = getISODay(monthStart);
+        var month = [];
+        var cursor = 0;
+        var date = 0;
+        for (var week = 0; week < weeksInMonth; week++) {
+            month[week] = [];
+            for (var day = 0; day < 7; day++) {
+                month[week][day] = { date: null };
+                if (cursor >= weekDay - 1 && date < daysInMonth) {
+                    month[week][day].date = ++date;
+                    var currentDate = setDate(monthStart, date);
+                    month[week][day].status =
+                        isPast(currentDate) && !isToday(currentDate)
+                            ? "past"
+                            : statusByDate[format(currentDate, "yyyy-MM-dd")];
+                }
+                cursor++;
+            }
+        }
+        return month;
+    };
+    var monthByWeek = useMemo(function () { return getMonthByWeek(); }, []);
+    return (React.createElement("div", { className: "cobalt-CalendarView__month" },
+        React.createElement("div", { className: "cobalt-CalendarView__monthName" }, monthName),
+        monthByWeek.map(function (week, weekIndex) { return (React.createElement("div", { key: weekIndex, className: "cobalt-CalendarView__week" }, week.map(function (day, dayIndex) {
+            var _a;
+            return (React.createElement("div", { key: weekIndex + 1 * dayIndex + 1, className: cx("cobalt-CalendarView__day", (_a = {},
+                    _a["cobalt-CalendarView__day--" + day.status] = day.status,
+                    _a)) }, day.date));
+        }))); })));
+};
+CalendarViewMonth.displayName = "CalendarViewMonth";
+
+export { CalendarViewMonth as default };
+//# sourceMappingURL=CalendarViewMonth.js.map

package/components/Calendar/CalendarView/CalendarViewMonth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarViewMonth.js","sources":["../../../../src/components/Calendar/CalendarView/CalendarViewMonth.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport {\n  setDate,\n  getISODay,\n  getDaysInMonth,\n  endOfMonth,\n  differenceInCalendarWeeks,\n  isPast,\n  isToday,\n  format,\n} from \"date-fns\"\nimport cx from \"classnames\"\nimport {\n  CalendarViewMonthType,\n  MonthType,\n  CalendarViewDateType,\n  DateType,\n} from \"./types\"\n\ntype Props = MonthType\n\nconst CalendarViewMonth = ({\n  monthName,\n  monthStart,\n  statusByDate = {},\n}: Props) => {\n  const getMonthByWeek = (): CalendarViewMonthType => {\n    const daysInMonth = getDaysInMonth(monthStart)\n    const weeksInMonth =\n      differenceInCalendarWeeks(endOfMonth(monthStart), monthStart, {\n        weekStartsOn: 1,\n      }) + 1\n    const weekDay = getISODay(monthStart)\n    const month: CalendarViewDateType[][] = []\n    let cursor = 0\n    let date = 0\n\n    for (let week = 0; week < weeksInMonth; week++) {\n      month[week] = []\n      for (let day = 0; day < 7; day++) {\n        month[week][day] = { date: null }\n\n        if (cursor >= weekDay - 1 && date < daysInMonth) {\n          month[week][day].date = ++date as DateType\n\n          const currentDate = setDate(monthStart, date)\n\n          month[week][day].status =\n            isPast(currentDate) && !isToday(currentDate)\n              ? \"past\"\n              : statusByDate[format(currentDate, \"yyyy-MM-dd\")]\n        }\n        cursor++\n      }\n    }\n    return month\n  }\n\n  const monthByWeek = useMemo(() => getMonthByWeek(), [])\n\n  return (\n    <div className=\"cobalt-CalendarView__month\">\n      <div className=\"cobalt-CalendarView__monthName\">{monthName}</div>\n      {monthByWeek.map((week, weekIndex) => (\n        <div key={weekIndex} className=\"cobalt-CalendarView__week\">\n          {week.map((day, dayIndex) => (\n            <div\n              key={weekIndex + 1 * dayIndex + 1}\n              className={cx(\"cobalt-CalendarView__day\", {\n                [`cobalt-CalendarView__day--${day.status}`]: day.status,\n              })}\n            >\n              {day.date}\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nCalendarViewMonth.displayName = \"CalendarViewMonth\"\n\nexport default CalendarViewMonth\n"],"names":[],"mappings":";;;;IAqBM,iBAAiB,GAAG,UAAC,EAInB;QAHN,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA;IAEjB,IAAM,cAAc,GAAG;QACrB,IAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;QAC9C,IAAM,YAAY,GAChB,yBAAyB,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE;YAC5D,YAAY,EAAE,CAAC;SAChB,CAAC,GAAG,CAAC,CAAA;QACR,IAAM,OAAO,GAAG,SAAS,CAAC,UAAU,CAAC,CAAA;QACrC,IAAM,KAAK,GAA6B,EAAE,CAAA;QAC1C,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,IAAI,IAAI,GAAG,CAAC,CAAA;QAEZ,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,IAAI,EAAE,EAAE;YAC9C,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAA;YAChB,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE;gBAChC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;gBAEjC,IAAI,MAAM,IAAI,OAAO,GAAG,CAAC,IAAI,IAAI,GAAG,WAAW,EAAE;oBAC/C,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,EAAE,IAAgB,CAAA;oBAE1C,IAAM,WAAW,GAAG,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;oBAE7C,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM;wBACrB,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;8BACxC,MAAM;8BACN,YAAY,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAA;iBACtD;gBACD,MAAM,EAAE,CAAA;aACT;SACF;QACD,OAAO,KAAK,CAAA;KACb,CAAA;IAED,IAAM,WAAW,GAAG,OAAO,CAAC,cAAM,OAAA,cAAc,EAAE,GAAA,EAAE,EAAE,CAAC,CAAA;IAEvD,QACE,6BAAK,SAAS,EAAC,4BAA4B;QACzC,6BAAK,SAAS,EAAC,gCAAgC,IAAE,SAAS,CAAO;QAChE,WAAW,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,SAAS,IAAK,QACpC,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,2BAA2B,IACvD,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,QAAQ;;YAAK,QAC3B,6BACE,GAAG,EAAE,SAAS,GAAG,CAAC,GAAG,QAAQ,GAAG,CAAC,EACjC,SAAS,EAAE,EAAE,CAAC,0BAA0B;oBACtC,GAAC,+BAA6B,GAAG,CAAC,MAAQ,IAAG,GAAG,CAAC,MAAM;wBACvD,IAED,GAAG,CAAC,IAAI,CACL;SACP,CAAC,CACE,IACP,CAAC,CACE,EACP;AACH,EAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/components/Calendar/CalendarView/index.js

@@ -0,0 +1,12 @@
+import { __assign } from '../../../_virtual/_tslib.js';
+import React from 'react';
+import CalendarViewMonth from './CalendarViewMonth.js';
+
+var CalendarView = function (_a) {
+    var months = _a.months;
+    return (React.createElement("div", { className: "cobalt-CalendarView" }, months.map(function (month) { return (React.createElement(CalendarViewMonth, __assign({ key: month.monthStart }, month))); })));
+};
+CalendarView.displayName = "CalendarView";
+
+export { CalendarView };
+//# sourceMappingURL=index.js.map

package/components/Calendar/CalendarView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Calendar/CalendarView/index.tsx"],"sourcesContent":["import React from \"react\"\nimport Month from \"./CalendarViewMonth\"\nimport { MonthType } from \"./types\"\n\ntype Props = {\n  months: MonthType[]\n}\n\nconst CalendarView = ({ months }: Props) => (\n  <div className=\"cobalt-CalendarView\">\n    {months.map((month) => (\n      <Month key={month.monthStart} {...month} />\n    ))}\n  </div>\n)\n\nCalendarView.displayName = \"CalendarView\"\n\nexport { CalendarView }\n"],"names":["Month"],"mappings":";;;;IAQM,YAAY,GAAG,UAAC,EAAiB;QAAf,MAAM,YAAA;IAAc,QAC1C,6BAAK,SAAS,EAAC,qBAAqB,IACjC,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,QACrB,oBAACA,iBAAK,aAAC,GAAG,EAAE,KAAK,CAAC,UAAU,IAAM,KAAK,EAAI,IAC5C,CAAC,CACE;AALoC,EAM3C;AAED,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/components/Callout/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import cx from 'classnames';
+
+var Callout = function (_a) {
+    var title = _a.title, children = _a.children, _b = _a.status, status = _b === void 0 ? "info" : _b, close = _a.close;
+    return (React.createElement("div", { className: cx("cobalt-Callout cobalt-bottom_margin_tight", {
+            "cobalt-Callout--info": status === "info",
+            "cobalt-Callout--error": status === "error",
+            "cobalt-Callout--success": status === "success",
+        }) },
+        title && React.createElement("div", { className: "cobalt-Callout__Title" }, title),
+        React.createElement("p", null, children),
+        close && (React.createElement("button", { className: "cobalt-Callout__Close", onClick: close, type: "button" },
+            React.createElement("span", { "aria-hidden": "true" }, "\u00D7")))));
+};
+
+export { Callout, Callout as default };
+//# sourceMappingURL=index.js.map

package/components/Callout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface CalloutProps {\n  children: React.ReactNode\n  title?: string\n  status: \"info\" | \"error\" | \"success\"\n  close?: () => void\n}\n\nexport const Callout = ({\n  title,\n  children,\n  status = \"info\",\n  close,\n}: CalloutProps) => (\n  <div\n    className={cx(\"cobalt-Callout cobalt-bottom_margin_tight\", {\n      \"cobalt-Callout--info\": status === \"info\",\n      \"cobalt-Callout--error\": status === \"error\",\n      \"cobalt-Callout--success\": status === \"success\",\n    })}\n  >\n    {title && <div className=\"cobalt-Callout__Title\">{title}</div>}\n    <p>{children}</p>\n    {close && (\n      <button className=\"cobalt-Callout__Close\" onClick={close} type=\"button\">\n        <span aria-hidden=\"true\">×</span>\n      </button>\n    )}\n  </div>\n)\n\nexport default Callout\n"],"names":[],"mappings":";;;IAUa,OAAO,GAAG,UAAC,EAKT;QAJb,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,cAAe,EAAf,MAAM,mBAAG,MAAM,KAAA,EACf,KAAK,WAAA;IACa,QAClB,6BACE,SAAS,EAAE,EAAE,CAAC,2CAA2C,EAAE;YACzD,sBAAsB,EAAE,MAAM,KAAK,MAAM;YACzC,uBAAuB,EAAE,MAAM,KAAK,OAAO;YAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;SAChD,CAAC;QAED,KAAK,IAAI,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO;QAC9D,+BAAI,QAAQ,CAAK;QAChB,KAAK,KACJ,gCAAQ,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ;YACrE,6CAAkB,MAAM,aAAS,CAC1B,CACV,CACG;AAfY;;;;"}

package/components/Card/index.js

@@ -0,0 +1,39 @@
+import { __extends, __rest } from '../../_virtual/_tslib.js';
+import React, { PureComponent } from 'react';
+import cx from 'classnames';
+
+var Card = function (_a) {
+    var children = _a.children, className = _a.className, flattened = _a.flattened;
+    return (React.createElement("div", { className: cx("cobalt-Card", className, {
+            "cobalt-Card--flattened": flattened,
+        }) }, children));
+};
+var getClasses = function (_a) {
+    var tabBar = _a.tabBar, tight = _a.tight, subdued = _a.subdued, divided = _a.divided;
+    return cx("cobalt-Card__Section", {
+        "cobalt-Card__Section--tabBar": tabBar === true,
+        "cobalt-Card__Section--tight": tight === true,
+        "cobalt-Card__Section--subdued": subdued === true,
+        "cobalt-Card__Section--divided": divided === true,
+        "cobalt-Card__Section--dividedSoft": divided === "soft",
+    });
+};
+var CardSectionLink = function (_a) {
+    var href = _a.href, target = _a.target, rel = _a.rel, baseProps = __rest(_a, ["href", "target", "rel"]);
+    return (React.createElement("a", { className: getClasses(baseProps), href: href, target: target, rel: target && !rel ? "noopener noreferrer" : rel }, baseProps.children));
+};
+CardSectionLink.displayName = "CardSection.Link";
+var CardSection = /** @class */ (function (_super) {
+    __extends(CardSection, _super);
+    function CardSection() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CardSection.prototype.render = function () {
+        return React.createElement("div", { className: getClasses(this.props) }, this.props.children);
+    };
+    CardSection.Link = CardSectionLink;
+    return CardSection;
+}(PureComponent));
+
+export { Card, CardSection, Card as default };
+//# sourceMappingURL=index.js.map

package/components/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React, { PureComponent, PropsWithChildren } from \"react\"\nimport cx from \"classnames\"\n\nexport type CardProps = PropsWithChildren<{\n  className?: string\n  flattened?: boolean\n}>\n\nexport const Card = ({ children, className, flattened }: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--flattened\": flattened,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport type CardSectionProps = {\n  children: React.ReactNode\n  tabBar?: boolean\n  tight?: boolean\n  subdued?: boolean\n  /**\n   * true or \"soft\"\n   * @default false\n   */\n  divided?: boolean | string\n}\n\nexport type CardSectionLinkProps = CardSectionProps & {\n  href: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"href\"]\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"]\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"]\n}\n\nconst getClasses = ({ tabBar, tight, subdued, divided }: CardSectionProps) => {\n  return cx(\"cobalt-Card__Section\", {\n    \"cobalt-Card__Section--tabBar\": tabBar === true,\n    \"cobalt-Card__Section--tight\": tight === true,\n    \"cobalt-Card__Section--subdued\": subdued === true,\n    \"cobalt-Card__Section--divided\": divided === true,\n    \"cobalt-Card__Section--dividedSoft\": divided === \"soft\",\n  })\n}\n\nconst CardSectionLink = ({\n  href,\n  target,\n  rel,\n  ...baseProps\n}: CardSectionLinkProps) => {\n  return (\n    <a\n      className={getClasses(baseProps)}\n      href={href}\n      target={target}\n      rel={target && !rel ? \"noopener noreferrer\" : rel}\n    >\n      {baseProps.children}\n    </a>\n  )\n}\nCardSectionLink.displayName = \"CardSection.Link\"\n\nexport class CardSection extends PureComponent<CardSectionProps, never> {\n  static Link = CardSectionLink\n  render() {\n    return <div className={getClasses(this.props)}>{this.props.children}</div>\n  }\n}\n\nexport default Card\n"],"names":[],"mappings":";;;;IAQa,IAAI,GAAG,UAAC,EAA6C;QAA3C,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA;IAAkB,QACrE,6BACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,wBAAwB,EAAE,SAAS;SACpC,CAAC,IAED,QAAQ,CACL;AAP+D,EAQtE;AAoBD,IAAM,UAAU,GAAG,UAAC,EAAqD;QAAnD,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA;IACnD,OAAO,EAAE,CAAC,sBAAsB,EAAE;QAChC,8BAA8B,EAAE,MAAM,KAAK,IAAI;QAC/C,6BAA6B,EAAE,KAAK,KAAK,IAAI;QAC7C,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,mCAAmC,EAAE,OAAO,KAAK,MAAM;KACxD,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,IAAM,eAAe,GAAG,UAAC,EAKF;IAJrB,IAAA,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,GAAG,SAAA,EACA,SAAS,cAJW,yBAKxB,CADa;IAEZ,QACE,2BACE,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,IAEhD,SAAS,CAAC,QAAQ,CACjB,EACL;AACH,CAAC,CAAA;AACD,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAA;;IAEf,+BAAsC;IAAvE;;KAKC;IAHC,4BAAM,GAAN;QACE,OAAO,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC3E;IAHM,gBAAI,GAAG,eAAe,CAAA;IAI/B,kBAAC;CAAA,CALgC,aAAa;;;;"}

package/components/CdwChoice/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+var CdwChoice = function (_a) {
+    var id = _a.id, badge = _a.badge, price = _a.price, priceLabel = _a.priceLabel, children = _a.children;
+    return (React.createElement("div", { className: "cobalt-CdwChoice" },
+        React.createElement("input", { id: id, name: "cdwChoice", className: "cobalt-CdwChoice__Input", type: "radio" }),
+        React.createElement("label", { htmlFor: id },
+            React.createElement("div", { className: "cobalt-CdwChoice__Control" }),
+            React.createElement("div", { className: "cobalt-CdwChoice__Body" },
+                React.createElement("div", { className: "cobalt-CdwChoice__Title" },
+                    children,
+                    badge && React.createElement("div", { className: "cobalt-CdwChoice__Badge" }, badge))),
+            React.createElement("div", { className: "cobalt-CdwChoice__PriceDetails" },
+                React.createElement("span", { className: "cobalt-CdwChoice__Price" }, price),
+                priceLabel))));
+};
+
+export { CdwChoice };
+//# sourceMappingURL=index.js.map

package/components/CdwChoice/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/CdwChoice/index.tsx"],"sourcesContent":["import React from \"react\"\n\nexport interface CdwChoiceProps {\n  children: React.ReactNode\n  id: string\n  badge?: string\n  price: string\n  priceLabel: string\n}\n\nexport const CdwChoice = ({\n  id,\n  badge,\n  price,\n  priceLabel,\n  children,\n}: CdwChoiceProps) => (\n  <div className=\"cobalt-CdwChoice\">\n    <input\n      id={id}\n      name=\"cdwChoice\"\n      className=\"cobalt-CdwChoice__Input\"\n      type=\"radio\"\n    />\n    <label htmlFor={id}>\n      <div className=\"cobalt-CdwChoice__Control\" />\n      <div className=\"cobalt-CdwChoice__Body\">\n        <div className=\"cobalt-CdwChoice__Title\">\n          {children}\n          {badge && <div className=\"cobalt-CdwChoice__Badge\">{badge}</div>}\n        </div>\n      </div>\n      <div className=\"cobalt-CdwChoice__PriceDetails\">\n        <span className=\"cobalt-CdwChoice__Price\">{price}</span>\n        {priceLabel}\n      </div>\n    </label>\n  </div>\n)\n"],"names":[],"mappings":";;IAUa,SAAS,GAAG,UAAC,EAMT;QALf,EAAE,QAAA,EACF,KAAK,WAAA,EACL,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,QAAQ,cAAA;IACY,QACpB,6BAAK,SAAS,EAAC,kBAAkB;QAC/B,+BACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,WAAW,EAChB,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,OAAO,GACZ;QACF,+BAAO,OAAO,EAAE,EAAE;YAChB,6BAAK,SAAS,EAAC,2BAA2B,GAAG;YAC7C,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,6BAAK,SAAS,EAAC,yBAAyB;oBACrC,QAAQ;oBACR,KAAK,IAAI,6BAAK,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAO,CAC5D,CACF;YACN,6BAAK,SAAS,EAAC,gCAAgC;gBAC7C,8BAAM,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAQ;gBACvD,UAAU,CACP,CACA,CACJ;AArBc;;;;"}

package/components/Cell/index.js

@@ -0,0 +1,18 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import React from 'react';
+import cx from 'classnames';
+
+function Cell(_a) {
+    var children = _a.children, divided = _a.divided, softDivided = _a.softDivided, className = _a.className;
+    return (React.createElement("div", { className: cx("cobalt-cell", className, {
+            "cobalt-cell--divided": divided,
+            "cobalt-cell--softDivided": softDivided,
+        }) }, children));
+}
+function Cells(_a) {
+    var content = _a.content, cellProps = __rest(_a, ["content"]);
+    return (React.createElement(React.Fragment, null, content.map(function (c, i) { return (React.createElement(Cell, __assign({ key: i }, cellProps), c)); })));
+}
+
+export { Cells, Cell as default };
+//# sourceMappingURL=index.js.map

package/components/Cell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Cell/index.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\"\nimport cx from \"classnames\"\n\nexport type CellPropsType = PropsWithChildren<{\n  divided?: boolean\n  className?: string\n}>\nexport type CellSoftPropsType = PropsWithChildren<{\n  softDivided?: boolean\n  className?: string\n}>\n\nexport type CellsPropsType = {\n  content: CellPropsType[\"children\"][]\n} & Omit<CellPropsType, \"children\">\nexport type CellsSoftPropsType = {\n  content: CellSoftPropsType[\"children\"][]\n} & Omit<CellSoftPropsType, \"children\">\n\nfunction Cell(props: CellPropsType): JSX.Element\nfunction Cell(props: CellSoftPropsType): JSX.Element\nfunction Cell({\n  children,\n  divided,\n  softDivided,\n  className,\n}: CellPropsType & CellSoftPropsType): JSX.Element {\n  return (\n    <div\n      className={cx(\"cobalt-cell\", className, {\n        \"cobalt-cell--divided\": divided,\n        \"cobalt-cell--softDivided\": softDivided,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function Cells(props: CellsPropsType): JSX.Element\nexport function Cells(props: CellsSoftPropsType): JSX.Element\nexport function Cells({\n  content,\n  ...cellProps\n}: CellsPropsType & CellsSoftPropsType): JSX.Element {\n  return (\n    <>\n      {content.map((c, i) => (\n        <Cell key={i} {...cellProps}>\n          {c}\n        </Cell>\n      ))}\n    </>\n  )\n}\n\nexport default Cell\n"],"names":[],"mappings":";;;;AAqBA,SAAS,IAAI,CAAC,EAKsB;QAJlC,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,SAAS,eAAA;IAET,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,sBAAsB,EAAE,OAAO;YAC/B,0BAA0B,EAAE,WAAW;SACxC,CAAC,IAED,QAAQ,CACL,EACP;AACH,CAAC;SAIe,KAAK,CAAC,EAGgB;IAFpC,IAAA,OAAO,aAAA,EACJ,SAAS,cAFQ,WAGrB,CADa;IAEZ,QACE,0CACG,OAAO,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,QACrB,oBAAC,IAAI,aAAC,GAAG,EAAE,CAAC,IAAM,SAAS,GACxB,CAAC,CACG,IACR,CAAC,CACD,EACJ;AACH;;;;"}

package/components/Chip/index.js

@@ -0,0 +1,27 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import React from 'react';
+import cx from 'classnames';
+
+var ChipWrapper = function (props) {
+    if (props.onClick) {
+        return (React.createElement("button", __assign({}, props, { type: "button", disabled: props.disabled }), props.children));
+    }
+    else {
+        return React.createElement("div", __assign({}, props), props.children);
+    }
+};
+var Chip = function (_a) {
+    var onClick = _a.onClick, text = _a.text, image = _a.image, size = _a.size, disabled = _a.disabled, active = _a.active;
+    return (React.createElement(ChipWrapper, { onClick: onClick, disabled: disabled, className: cx("cobalt-Chip", {
+            "cobalt-Chip--large": size === "large",
+            "cobalt-Chip--disabled": disabled,
+            "cobalt-Chip--interactive": !!onClick,
+            "cobalt-Chip--active": active,
+        }) },
+        React.createElement("div", { className: "cobalt-Chip__Content" },
+            React.createElement("div", { className: "cobalt-Chip__Image", style: { backgroundImage: "url(" + image + ")" } }),
+            React.createElement("div", { className: "cobalt-Chip__Text" }, text))));
+};
+
+export { Chip };
+//# sourceMappingURL=index.js.map

package/components/Chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Chip/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface ChipProps {\n  onClick?(): void\n  text: string\n  image: string\n  size?: \"large\"\n  disabled?: boolean\n  active?: boolean\n}\n\nexport interface ChipWrapperProps {\n  onClick?(): void\n  children: React.ReactElement\n  disabled?: boolean\n  className: string\n}\n\nconst ChipWrapper = (props: ChipWrapperProps) => {\n  if (props.onClick) {\n    return (\n      <button {...props} type=\"button\" disabled={props.disabled}>\n        {props.children}\n      </button>\n    )\n  } else {\n    return <div {...props}>{props.children}</div>\n  }\n}\n\nexport const Chip = ({\n  onClick,\n  text,\n  image,\n  size,\n  disabled,\n  active,\n}: ChipProps) => {\n  return (\n    <ChipWrapper\n      onClick={onClick}\n      disabled={disabled}\n      className={cx(\"cobalt-Chip\", {\n        \"cobalt-Chip--large\": size === \"large\",\n        \"cobalt-Chip--disabled\": disabled,\n        \"cobalt-Chip--interactive\": !!onClick,\n        \"cobalt-Chip--active\": active,\n      })}\n    >\n      <div className=\"cobalt-Chip__Content\">\n        <div\n          className=\"cobalt-Chip__Image\"\n          style={{ backgroundImage: `url(${image})` }}\n        />\n        <div className=\"cobalt-Chip__Text\">{text}</div>\n      </div>\n    </ChipWrapper>\n  )\n}\n"],"names":[],"mappings":";;;;AAmBA,IAAM,WAAW,GAAG,UAAC,KAAuB;IAC1C,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,QACE,2CAAY,KAAK,IAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,KACtD,KAAK,CAAC,QAAQ,CACR,EACV;KACF;SAAM;QACL,OAAO,wCAAS,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC9C;AACH,CAAC,CAAA;IAEY,IAAI,GAAG,UAAC,EAOT;QANV,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,QACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE;YAC3B,oBAAoB,EAAE,IAAI,KAAK,OAAO;YACtC,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,CAAC,CAAC,OAAO;YACrC,qBAAqB,EAAE,MAAM;SAC9B,CAAC;QAEF,6BAAK,SAAS,EAAC,sBAAsB;YACnC,6BACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,eAAe,EAAE,SAAO,KAAK,MAAG,EAAE,GAC3C;YACF,6BAAK,SAAS,EAAC,mBAAmB,IAAE,IAAI,CAAO,CAC3C,CACM,EACf;AACH;;;;"}

package/components/EmptyState/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ButtonGroup } from '../Button/index.js';
+
+var EmptyState = function (_a) {
+    var title = _a.title, children = _a.children, action = _a.action, secondaryAction = _a.secondaryAction, image = _a.image;
+    return (React.createElement("div", { className: "cobalt-EmptyState" },
+        React.createElement("img", { className: "cobalt-EmptyState__Image", role: "presentation", alt: "", src: image, height: 188, width: 188 }),
+        React.createElement("h2", { className: "cobalt-EmptyState__Title" }, title),
+        children && React.createElement("div", { className: "cobalt-EmptyState__Body" }, children),
+        action && (React.createElement(ButtonGroup, { align: "center" },
+            action,
+            secondaryAction))));
+};
+
+export { EmptyState };
+//# sourceMappingURL=index.js.map

package/components/EmptyState/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/EmptyState/index.tsx"],"sourcesContent":["import React from \"react\"\n\nimport { ButtonGroup, Button } from \"../Button\"\n\nexport interface EmptyStateProps {\n  children?: React.ReactNode\n  title: string\n  action?: typeof Button\n  secondaryAction?: typeof Button\n  image: string\n}\n\nexport const EmptyState = ({\n  title,\n  children,\n  action,\n  secondaryAction,\n  image,\n}: EmptyStateProps) => {\n  return (\n    <div className=\"cobalt-EmptyState\">\n      <img\n        className=\"cobalt-EmptyState__Image\"\n        role=\"presentation\"\n        alt=\"\"\n        src={image}\n        height={188}\n        width={188}\n      />\n      <h2 className=\"cobalt-EmptyState__Title\">{title}</h2>\n      {children && <div className=\"cobalt-EmptyState__Body\">{children}</div>}\n      {action && (\n        <ButtonGroup align=\"center\">\n          {action}\n          {secondaryAction}\n        </ButtonGroup>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;IAYa,UAAU,GAAG,UAAC,EAMT;QALhB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,eAAe,qBAAA,EACf,KAAK,WAAA;IAEL,QACE,6BAAK,SAAS,EAAC,mBAAmB;QAChC,6BACE,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,cAAc,EACnB,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,GAAG,EACX,KAAK,EAAE,GAAG,GACV;QACF,4BAAI,SAAS,EAAC,0BAA0B,IAAE,KAAK,CAAM;QACpD,QAAQ,IAAI,6BAAK,SAAS,EAAC,yBAAyB,IAAE,QAAQ,CAAO;QACrE,MAAM,KACL,oBAAC,WAAW,IAAC,KAAK,EAAC,QAAQ;YACxB,MAAM;YACN,eAAe,CACJ,CACf,CACG,EACP;AACH;;;;"}

package/components/Flag/index.js

@@ -0,0 +1,29 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import React from 'react';
+import cx from 'classnames';
+import { countries } from '../../tokens/index.js';
+import * as index from '../../icons/countries/index.js';
+import eqSet from '../utils/eqSet.js';
+import 'lodash.throttle';
+
+if (!eqSet(new Set(Object.keys(index)), new Set(Object.keys(countries.flags))))
+    throw new Error("Flag sources and tokens are not consistent. Did you add the source and export it");
+var BUNDLED_FLAGS = Object.freeze(Object.keys(countries.flags).reduce(function (bundledFlags, name) {
+    var _a;
+    return (__assign(__assign({}, bundledFlags), (_a = {}, _a[name] = index[name], _a)));
+}, {}));
+var Flag = function (_a) {
+    var country = _a.country, _b = _a.size, size = _b === void 0 ? 24 : _b;
+    var className = cx("cobalt-Flag", {
+        "cobalt-Flag--size16": size === 16,
+        "cobalt-Flag--size20": size === 20,
+        "cobalt-Flag--size32": size === 32,
+    });
+    var countryFlag = BUNDLED_FLAGS[country];
+    if (countryFlag == null)
+        throw new Error("'" + country + "' Flag can not be found. Did you add the source and export it");
+    return (React.createElement("span", { className: className, dangerouslySetInnerHTML: { __html: countryFlag } }));
+};
+
+export { BUNDLED_FLAGS, Flag };
+//# sourceMappingURL=index.js.map

package/components/Flag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Flag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { countries } from \"../../tokens\"\n\nimport * as flags from \"../../icons/countries\"\nimport { eqSet } from \"../utils\"\n\nif (\n  !eqSet<string>(\n    new Set(Object.keys(flags)),\n    new Set(Object.keys(countries.flags))\n  )\n)\n  throw new Error(\n    \"Flag sources and tokens are not consistent. Did you add the source and export it\"\n  )\n\ninterface FlagsMap {\n  [name: string]: string\n}\n\nexport const BUNDLED_FLAGS: FlagsMap = Object.freeze(\n  Object.keys(countries.flags).reduce(\n    (bundledFlags, name) => ({\n      ...bundledFlags,\n      [name]: (flags as FlagsMap)[name],\n    }),\n    {}\n  )\n)\n\nexport interface FlagProps {\n  country: string\n  /**\n   * Available size in px\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 32\n}\n\nexport const Flag = ({ country, size = 24 }: FlagProps) => {\n  const className = cx(\"cobalt-Flag\", {\n    \"cobalt-Flag--size16\": size === 16,\n    \"cobalt-Flag--size20\": size === 20,\n    \"cobalt-Flag--size32\": size === 32,\n  })\n\n  const countryFlag = BUNDLED_FLAGS[country]\n\n  if (countryFlag == null)\n    throw new Error(\n      `'${country}' Flag can not be found. Did you add the source and export it`\n    )\n\n  return (\n    <span\n      className={className}\n      dangerouslySetInnerHTML={{ __html: countryFlag }}\n    />\n  )\n}\n"],"names":["flags"],"mappings":";;;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CACtC;IAED,MAAM,IAAI,KAAK,CACb,kFAAkF,CACnF,CAAA;IAMU,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CACjC,UAAC,YAAY,EAAE,IAAI;;IAAK,8BACnB,YAAY,gBACd,IAAI,IAAIA,KAAkB,CAAC,IAAI,CAAC;AAFX,CAGtB,EACF,EAAE,CACH,EACF;IAWY,IAAI,GAAG,UAAC,EAAiC;QAA/B,OAAO,aAAA,EAAE,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA;IACvC,IAAM,SAAS,GAAG,EAAE,CAAC,aAAa,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;KACnC,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE1C,IAAI,WAAW,IAAI,IAAI;QACrB,MAAM,IAAI,KAAK,CACb,MAAI,OAAO,kEAA+D,CAC3E,CAAA;IAEH,QACE,8BACE,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,GAChD,EACH;AACH;;;;"}

package/components/Flash/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Icon } from '../Icon/index.js';
+
+var ICON_SIZE = 20;
+var STATUS_ICONS_MAP = {
+    info: "infoFilled",
+    success: "checkCircle",
+    error: "contextualWarningCircleFilled",
+};
+var STATUS_ICON_COLOR_MAP = {
+    info: "aller",
+    success: "signal",
+    error: "essence",
+};
+var Flash = function (_a) {
+    var children = _a.children, _b = _a.status, status = _b === void 0 ? "info" : _b;
+    var icon = STATUS_ICONS_MAP[status]
+        ? STATUS_ICONS_MAP[status]
+        : "infoFilled";
+    var iconColor = STATUS_ICON_COLOR_MAP[status]
+        ? STATUS_ICON_COLOR_MAP[status]
+        : "aller";
+    return (React.createElement("div", { className: "cobalt-Flash" },
+        React.createElement("div", { className: "cobalt-Flash__wrapper" },
+            React.createElement("span", { className: "cobalt-Flash__Icon" },
+                React.createElement(Icon, { source: icon, size: ICON_SIZE, color: iconColor })),
+            React.createElement("span", { className: "cobalt-Flash__content" }, children))));
+};
+
+export { Flash };
+//# sourceMappingURL=index.js.map

package/components/Flash/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Flash/index.tsx"],"sourcesContent":["import React from \"react\"\nimport { Icon, IconColors, IconSources } from \"../Icon\"\n\nexport type FlashStatus = \"info\" | \"success\" | \"error\"\n\nexport interface FlashProps {\n  children: React.ReactNode\n  status: FlashStatus\n}\n\nconst ICON_SIZE = 20\n\nconst STATUS_ICONS_MAP: { [k in FlashStatus]: IconSources } = {\n  info: \"infoFilled\",\n  success: \"checkCircle\",\n  error: \"contextualWarningCircleFilled\",\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in FlashStatus]: IconColors } = {\n  info: \"aller\",\n  success: \"signal\",\n  error: \"essence\",\n}\n\nexport const Flash = ({ children, status = \"info\" }: FlashProps) => {\n  const icon = STATUS_ICONS_MAP[status]\n    ? STATUS_ICONS_MAP[status]\n    : \"infoFilled\"\n\n  const iconColor: IconColors = STATUS_ICON_COLOR_MAP[status]\n    ? STATUS_ICON_COLOR_MAP[status]\n    : \"aller\"\n\n  return (\n    <div className=\"cobalt-Flash\">\n      <div className=\"cobalt-Flash__wrapper\">\n        <span className=\"cobalt-Flash__Icon\">\n          <Icon source={icon} size={ICON_SIZE} color={iconColor} />\n        </span>\n        <span className=\"cobalt-Flash__content\">{children}</span>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAUA,IAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,IAAM,gBAAgB,GAAwC;IAC5D,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,+BAA+B;CACvC,CAAA;AAED,IAAM,qBAAqB,GAAuC;IAChE,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,SAAS;CACjB,CAAA;IAEY,KAAK,GAAG,UAAC,EAAyC;QAAvC,QAAQ,cAAA,EAAE,cAAe,EAAf,MAAM,mBAAG,MAAM,KAAA;IAC/C,IAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;UACjC,gBAAgB,CAAC,MAAM,CAAC;UACxB,YAAY,CAAA;IAEhB,IAAM,SAAS,GAAe,qBAAqB,CAAC,MAAM,CAAC;UACvD,qBAAqB,CAAC,MAAM,CAAC;UAC7B,OAAO,CAAA;IAEX,QACE,6BAAK,SAAS,EAAC,cAAc;QAC3B,6BAAK,SAAS,EAAC,uBAAuB;YACpC,8BAAM,SAAS,EAAC,oBAAoB;gBAClC,oBAAC,IAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAI,CACpD;YACP,8BAAM,SAAS,EAAC,uBAAuB,IAAE,QAAQ,CAAQ,CACrD,CACF,EACP;AACH;;;;"}