@enact/limestone 1.3.0

package/DatePicker/tests/DatePicker-specs.js

@@ -0,0 +1,247 @@
+"use strict";
+
+var _ilib = _interopRequireDefault(require("ilib"));
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _DatePicker = _interopRequireWildcard(require("../DatePicker"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; } // Note: Tests pass 'locale' because there's no I18nDecorator to provide a value via context and
+// otherwise, nothing renders in the label.
+describe('DatePicker', function () {
+  test('should emit an onChange event with type when changing the day', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      onChange: handleChange,
+      value: new Date(2000, 6, 15),
+      locale: "en-US"
+    }));
+    var dayPickerUp = _react.screen.getAllByText('▲')[1];
+    yield user.click(dayPickerUp);
+    var expected = 1;
+    var expectedType = {
+      type: 'onChange',
+      value: new Date(2000, 6, 16)
+    };
+    var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
+    expect(handleChange).toHaveBeenCalledTimes(expected);
+    expect(actual).toMatchObject(expectedType);
+  }));
+  test('should emit an onChange event with type when changing the month', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      onChange: handleChange,
+      value: new Date(2000, 6, 15),
+      locale: "en-US"
+    }));
+    var monthPickerUp = _react.screen.getAllByText('▲')[0];
+    yield user.click(monthPickerUp);
+    var expected = 1;
+    var expectedType = {
+      type: 'onChange',
+      value: new Date(2000, 7, 15)
+    };
+    var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
+    expect(handleChange).toHaveBeenCalledTimes(expected);
+    expect(actual).toMatchObject(expectedType);
+  }));
+  test('should emit an onChange event with type when changing the year', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      onChange: handleChange,
+      value: new Date(2000, 6, 15),
+      locale: "en-US"
+    }));
+    var yearPickerUp = _react.screen.getAllByText('▲')[2];
+    yield user.click(yearPickerUp);
+    var expected = 1;
+    var expectedType = {
+      type: 'onChange',
+      value: new Date(2001, 6, 15)
+    };
+    var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
+    expect(handleChange).toHaveBeenCalledTimes(expected);
+    expect(actual).toMatchObject(expectedType);
+  }));
+  test('should fire onComplete event with type when enter key pressed from the last picker', function () {
+    var handleComplete = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      onComplete: handleComplete,
+      value: new Date(2000, 6, 15),
+      locale: "en-US"
+    }));
+    var year = _react.screen.getByLabelText('2000 year change a value with up down button');
+    (0, _react.act)(function () {
+      return year.focus();
+    });
+    _react.fireEvent.keyDown(year, {
+      which: 13,
+      keyCode: 13,
+      code: 13
+    });
+    var expected = {
+      type: 'onComplete',
+      value: new Date(2000, 6, 15)
+    };
+    var actual = handleComplete.mock.calls.length && handleComplete.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should fire onSpotlightLeft event with type when spotlight is leaving via left key', function () {
+    var handleSpotlight = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      onSpotlightLeft: handleSpotlight,
+      value: new Date(2000, 6, 15),
+      locale: "en-US"
+    }));
+    var month = _react.screen.getByLabelText('7 month change a value with up down button');
+    (0, _react.act)(function () {
+      return month.focus();
+    });
+    _react.fireEvent.keyDown(month, {
+      which: 37,
+      keyCode: 37,
+      code: 37
+    });
+    var expected = {
+      type: 'onSpotlightLeft'
+    };
+    var actual = handleSpotlight.mock.calls.length && handleSpotlight.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should fire onSpotlightRight event with type when spotlight is leaving via right key', function () {
+    var handleSpotlight = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      onSpotlightRight: handleSpotlight,
+      value: new Date(2000, 6, 15),
+      locale: "en-US"
+    }));
+    var year = _react.screen.getByLabelText('2000 year change a value with up down button');
+    (0, _react.act)(function () {
+      return year.focus();
+    });
+    _react.fireEvent.keyDown(year, {
+      which: 39,
+      keyCode: 39,
+      code: 39
+    });
+    var expected = {
+      type: 'onSpotlightRight'
+    };
+    var actual = handleSpotlight.mock.calls.length && handleSpotlight.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should accept a JavaScript Date for its value prop', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      value: new Date(2000, 0, 1),
+      locale: "en-US"
+    }));
+    var year = _react.screen.getByText('2000');
+    expect(year).toBeInTheDocument();
+  });
+  test('should set \'dayAriaLabel\' to day picker', function () {
+    var label = 'custom day aria-label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      dayAriaLabel: label,
+      value: new Date(2000, 0, 1)
+    }));
+    var dayPicker = _react.screen.getByLabelText(label);
+    var expected = 'day';
+    expect(dayPicker).toBeInTheDocument();
+    expect(dayPicker).toHaveClass(expected);
+  });
+  test('should set \'monthAriaLabel\' to month picker', function () {
+    var label = 'custom month aria-label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      monthAriaLabel: label,
+      value: new Date(2000, 0, 1)
+    }));
+    var monthPicker = _react.screen.getByLabelText(label);
+    var expected = 'month';
+    expect(monthPicker).toBeInTheDocument();
+    expect(monthPicker).toHaveClass(expected);
+  });
+  test('should set \'yearAriaLabel\' to year picker', function () {
+    var label = 'custom year aria-label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      value: new Date(2000, 0, 1),
+      yearAriaLabel: label
+    }));
+    var yearPicker = _react.screen.getByLabelText(label);
+    var expected = 'year';
+    expect(yearPicker).toBeInTheDocument();
+    expect(yearPicker).toHaveClass(expected);
+  });
+  test('should set \'data-webos-voice-disabled\' to day picker when voice control is disabled', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      value: new Date(2000, 0, 1),
+      "data-webos-voice-disabled": true
+    }));
+    var dayPicker = _react.screen.getByLabelText('1 day change a value with up down button');
+    var expected = 'data-webos-voice-disabled';
+    expect(dayPicker).toHaveAttribute(expected);
+  });
+  test('should set \'data-webos-voice-disabled\' to month picker when voice control is disabled', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      value: new Date(2000, 0, 1),
+      "data-webos-voice-disabled": true
+    }));
+    var monthPicker = _react.screen.getByLabelText('1 month change a value with up down button');
+    var expected = 'data-webos-voice-disabled';
+    expect(monthPicker).toHaveAttribute(expected);
+  });
+  test('should set \'data-webos-voice-disabled\' to year picker when voice control is disabled', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      value: new Date(2000, 0, 1),
+      "data-webos-voice-disabled": true
+    }));
+    var yearPicker = _react.screen.getByLabelText('1900 year change a value with up down button');
+    // The year is 1900 because it does not change based on props, this needs to be fixed in datePicker
+
+    var expected = 'data-webos-voice-disabled';
+    expect(yearPicker).toHaveAttribute(expected);
+  });
+  test('should format a date the same as the label', function () {
+    var date = new Date(2000, 0, 1);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      value: date,
+      locale: "en-US"
+    }));
+    var header = _react.screen.getByText((0, _DatePicker.dateToLocaleString)(date)).parentElement.parentElement;
+    var expected = 'heading';
+    expect(header).toHaveClass(expected);
+  });
+  test('should format a date the same as the label in another locale', function () {
+    _ilib["default"].setLocale('ar-SA');
+    var date = new Date(2000, 0, 1);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      value: date,
+      locale: "ar-SA"
+    }));
+    var header = _react.screen.getByText((0, _DatePicker.dateToLocaleString)(date)).parentElement.parentElement;
+    var expected = 'heading';
+    expect(header).toHaveClass(expected);
+  });
+  test('should not display Heading', function () {
+    var date = new Date(2000, 0, 1);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker["default"], {
+      value: date,
+      locale: "en-US",
+      noLabel: true
+    }));
+    var header = _react.screen.queryByText((0, _DatePicker.dateToLocaleString)(date));
+    expect(header).toBeNull();
+  });
+  describe('#dateToLocaleString', function () {
+    test('method should return \'null\' for an \'undefined\' date', function () {
+      var actual = (0, _DatePicker.dateToLocaleString)(undefined); // eslint-disable-line no-undefined
+
+      expect(actual).toBeNull();
+    });
+  });
+});

package/DayPicker/DayPicker.d.ts

@@ -0,0 +1,92 @@
+// Type definitions for limestone/DayPicker
+
+import { GroupProps as ui_Group_GroupProps } from "@enact/ui/Group";
+import * as React from "react";
+import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface DayPickerBaseProps
+  extends Omit<ui_Group_GroupProps, "children"> {}
+/**
+ * A day of the week selection component.
+ * 
+ * This component is most often not used directly but may be composed within another component as it
+is within   .
+ */
+
+export class DayPickerBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, DayPickerBaseProps>
+> {}
+
+export interface DayPickerProps
+  extends Omit<
+    Merge<DayPickerBaseProps, ui_Changeable_ChangeableProps>,
+    "onChange" | "value" | "defaultValue"
+  > {
+  /**
+   * Disables all days in this picker.
+   */
+  disabled?: boolean;
+  /**
+   * Disables DayPicker and the control becomes non-interactive.
+   */
+  disabled?: boolean;
+  /**
+ * Called when a day is selected or unselected.
+ * 
+ * The event payload will be an object with the following members:
+ * *  `selected`  - An array of numbers representing the selected days, 0 indexed where Sunday
+is represented by 0
+ */
+  onSelect?: Function;
+  /**
+ * An array of numbers (0 indexed where Sunday is 0) representing the selected days of the
+week.
+ */
+  selected?: number | number[];
+  /**
+   * The initial value used when  `selected`  is not set.
+   */
+  selected?: number | number[];
+  /**
+ * The "aria-label" for the component.
+ * 
+ * By default, "aria-label" is set to the full names of the selected days or
+the custom text when the weekend, week days, or all days is selected.
+ */
+  "aria-label"?: string;
+}
+/**
+ * A day of the week selection component, ready to use in Limestone applications.
+ * 
+ * By default,  `DayPicker`  maintains the state of its  `selected`  property. Supply the
+ `selected`  property to control its initial value. If you wish to directly control updates
+to the component, supply a value to  `selected`  at creation time and update it in response to
+ `onChange`  events.
+ * 
+ * Usage:
+ * ```
+<DayPicker
+  selected={[2, 3]}
+  onSelect={handleSelect}
+/>
+```
+ */
+
+export class DayPicker extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, DayPickerProps>
+> {}
+
+/**
+ * Determines whether it should return "Every Day", "Every Weekend", "Every Weekday" or list of
+days for a given selected day type.
+ */
+export function getSelectedDayString(
+  selected: any,
+  noneText?: string,
+  dayNameLength?: string,
+): string;
+
+export default DayPicker;

package/DayPicker/DayPicker.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DayPickerBase = exports.DayPicker = void 0;
+Object.defineProperty(exports, "getSelectedDayString", {
+  enumerable: true,
+  get: function get() {
+    return _DaySelectorDecorator.getSelectedDayString;
+  }
+});
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _Changeable = _interopRequireDefault(require("@enact/ui/Changeable"));
+var _Group = _interopRequireDefault(require("@enact/ui/Group"));
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _CheckboxItem = _interopRequireDefault(require("../CheckboxItem"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _DaySelectorDecorator = require("./DaySelectorDecorator");
+var _DayPickerModule = _interopRequireDefault(require("./DayPicker.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["disabled"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
+ * Limestone styled day picker components.
+ *
+ * @example
+ * <DayPicker
+ *   selected={[2, 3]}
+ *   onSelect={console.log}
+ * />
+ *
+ * @module limestone/DayPicker
+ * @exports DayPicker
+ * @exports DayPickerBase
+ * @exports getSelectedDayString
+ */
+var CheckboxItemComponent = function CheckboxItemComponent(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxItem["default"], _objectSpread({
+    css: _DayPickerModule["default"]
+  }, props));
+};
+
+/**
+ * A day of the week selection component.
+ *
+ * This component is most often not used directly but may be composed within another component as it
+ * is within {@link limestone/DayPicker.DayPicker|DayPicker}.
+ *
+ * @class DayPickerBase
+ * @memberof limestone/DayPicker
+ * @extends ui/Group.Group
+ * @omit children
+ * @ui
+ * @public
+ */
+var DayPickerBase = exports.DayPickerBase = (0, _kind["default"])({
+  name: 'DayPicker',
+  propTypes: /** @lends limestone/DayPicker.DayPicker.prototype */{
+    /**
+     * Disables all days in this picker.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * Called when a day is selected or unselected.
+     *
+     * The event payload will be an object with the following members:
+     * * `selected` - An array of numbers representing the selected days, 0 indexed where Sunday
+     *   is represented by 0
+     *
+     * @type {Function}
+     * @public
+     */
+    onSelect: _propTypes["default"].func,
+    /**
+     * An array of numbers (0 indexed where Sunday is 0) representing the selected days of the
+     * week.
+     *
+     * @type {Number|Number[]}
+     * @public
+     */
+    selected: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].number)])
+  },
+  styles: {
+    css: _DayPickerModule["default"],
+    className: 'dayPicker'
+  },
+  computed: {
+    children: function children(_ref) {
+      var _children = _ref.children;
+      return _children.map(function (child) {
+        return child['aria-label'];
+      });
+    }
+  },
+  render: function render(_ref2) {
+    var disabled = _ref2.disabled,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Group["default"], _objectSpread(_objectSpread({}, rest), {}, {
+      childComponent: CheckboxItemComponent,
+      component: "div",
+      itemProps: {
+        disabled: disabled
+      },
+      role: null,
+      select: "multiple",
+      selectedProp: "selected"
+    }));
+  }
+});
+var DayPickerDecorator = (0, _compose["default"])(_Pure["default"], (0, _Changeable["default"])({
+  change: 'onSelect',
+  prop: 'selected'
+}), (0, _I18nDecorator.I18nContextDecorator)({
+  localeProp: 'locale'
+}), _DaySelectorDecorator.DaySelectorDecorator, _Skinnable["default"]);
+
+/**
+ * A day of the week selection component, ready to use in Limestone applications.
+ *
+ * By default, `DayPicker` maintains the state of its `selected` property. Supply the
+ * `selected` property to control its initial value. If you wish to directly control updates
+ * to the component, supply a value to `selected` at creation time and update it in response to
+ * `onChange` events.
+ *
+ * Usage:
+ * ```
+ * <DayPicker
+ *   selected={[2, 3]}
+ *   onSelect={handleSelect}
+ * />
+ * ```
+ *
+ * @class DayPicker
+ * @memberof limestone/DayPicker
+ * @extends limestone/DayPicker.DayPickerBase
+ * @mixes ui/Changeable.Changeable
+ * @omit onChange
+ * @omit value
+ * @omit defaultValue
+ * @ui
+ * @public
+ */
+var DayPicker = exports.DayPicker = DayPickerDecorator(DayPickerBase);
+
+/**
+ * The "aria-label" for the component.
+ *
+ * By default, "aria-label" is set to the full names of the selected days or
+ * the custom text when the weekend, week days, or all days is selected.
+ *
+ * @name aria-label
+ * @type {String}
+ * @memberof limestone/DayPicker.DayPicker.prototype
+ * @public
+ */
+
+/**
+ * The initial value used when `selected` is not set.
+ *
+ * @name selected
+ * @type {Number|Number[]}
+ * @memberof limestone/DayPicker.DayPicker.prototype
+ * @public
+ */
+
+/**
+ * Disables DayPicker and the control becomes non-interactive.
+ *
+ * @name disabled
+ * @type {Boolean}
+ * @default false
+ * @memberof limestone/DayPicker.DayPicker.prototype
+ * @public
+ */
+var _default = exports["default"] = DayPicker;

package/DayPicker/DayPicker.module.css

@@ -0,0 +1,35 @@
+.dayPicker .checkboxItem {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.dayPicker .checkboxItem:global(.neutral).selected .bg {
+  background-color: inherit;
+}
+:global(.enact-a11y-high-contrast) .dayPicker .checkboxItem:global(.neutral):global(.highContrast).selected .bg {
+  background-color: inherit;
+}
+.dayPicker .checkboxItem:global(.light).selected .bg {
+  background-color: inherit;
+}
+.dayPicker .checkboxItem:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.dayPicker .checkboxItem:global(.game).selected .bg {
+  background-color: inherit;
+}
+:global(.green) .dayPicker .checkboxItem:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .dayPicker .checkboxItem:global(.game).selected .bg {
+  background-color: inherit;
+}
+:global(.orange) .dayPicker .checkboxItem:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .dayPicker .checkboxItem:global(.game).selected .bg {
+  background-color: inherit;
+}