@enact/limestone 1.3.0 → 1.10.0

package/DatePicker/DatePicker.d.ts

@@ -126,11 +126,10 @@ export class DatePickerBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, DatePickerBaseProps>
 > {}
 
-export interface DatePickerProps
-  extends Omit<
-    Merge<DatePickerBaseProps, ui_Changeable_ChangeableProps>,
-    "day" | "maxDays" | "maxMonths" | "month" | "order" | "year"
-  > {
+export interface DatePickerProps extends Omit<
+  Merge<DatePickerBaseProps, ui_Changeable_ChangeableProps>,
+  "day" | "maxDays" | "maxMonths" | "month" | "order" | "year"
+> {
   /**
    * The initial value used when  `value`  is not set.
    */

package/DayPicker/DayPicker.d.ts

@@ -7,8 +7,10 @@ import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Chan
 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"> {}
+export interface DayPickerBaseProps extends Omit<
+  ui_Group_GroupProps,
+  "children"
+> {}
 /**
  * A day of the week selection component.
  * 
@@ -20,11 +22,10 @@ export class DayPickerBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, DayPickerBaseProps>
 > {}
 
-export interface DayPickerProps
-  extends Omit<
-    Merge<DayPickerBaseProps, ui_Changeable_ChangeableProps>,
-    "onChange" | "value" | "defaultValue"
-  > {
+export interface DayPickerProps extends Omit<
+  Merge<DayPickerBaseProps, ui_Changeable_ChangeableProps>,
+  "onChange" | "value" | "defaultValue"
+> {
   /**
    * Disables all days in this picker.
    */

package/DayPicker/DaySelectorDecorator.js

@@ -207,13 +207,18 @@ var daySelectorDecoratorDefaultProps = {
  * @private
  */
 var DaySelectorDecorator = exports.DaySelectorDecorator = (0, _hoc["default"])(function (config, Wrapped) {
-  var DaySelector = function DaySelector(props) {
-    var daySelectorDecoratorProps = (0, _util.setDefaultProps)(props, daySelectorDecoratorDefaultProps);
+  var _DaySelector = function DaySelector(props) {
+    var daySelectorDecoratorProps = (0, _react.useMemo)(function () {
+      return (0, _util.setDefaultProps)(props, daySelectorDecoratorDefaultProps);
+    }, [props]);
+    (0, _util.checkPropTypes)(_DaySelector, daySelectorDecoratorProps);
     var dayNameLength = daySelectorDecoratorProps.dayNameLength,
       locale = daySelectorDecoratorProps.locale,
       selected = daySelectorDecoratorProps.selected,
       rest = _objectWithoutProperties(daySelectorDecoratorProps, _excluded);
-    var state = getLocaleState(dayNameLength, locale);
+    var state = (0, _react.useMemo)(function () {
+      return getLocaleState(dayNameLength, locale);
+    }, [dayNameLength, locale]);
     var localSelected = localizeSelected(selected, state);
     var abbreviatedDayNames = orderDays(state.abbreviatedDayNames, state);
     var fullDayNames = orderDays(state.fullDayNames, state);
@@ -243,8 +248,8 @@ var DaySelectorDecorator = exports.DaySelectorDecorator = (0, _hoc["default"])(f
       })
     }));
   };
-  DaySelector.displayName = 'DaySelectorDecorator';
-  DaySelector.propTypes = /** @lends limestone/DayPicker.DaySelectorDecorator.prototype */{
+  _DaySelector.displayName = 'DaySelectorDecorator';
+  _DaySelector.propTypes = /** @lends limestone/DayPicker.DaySelectorDecorator.prototype */{
     /**
      * The "aria-label" for the selector.
      *
@@ -295,7 +300,7 @@ var DaySelectorDecorator = exports.DaySelectorDecorator = (0, _hoc["default"])(f
      */
     selected: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].number)])
   };
-  DaySelector.defaultPropValues = daySelectorDecoratorDefaultProps;
-  return DaySelector;
+  _DaySelector.defaultPropValues = daySelectorDecoratorDefaultProps;
+  return _DaySelector;
 });
 var _default = exports["default"] = DaySelectorDecorator;

package/Dropdown/Dropdown.d.ts

@@ -10,14 +10,13 @@ import { ContextualPopupDecoratorProps as limestone_ContextualPopupDecorator_Con
 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 DropdownBaseProps
-  extends Omit<
-    Merge<
-      limestone_Button_ButtonProps,
-      limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps
-    >,
-    "popupComponent"
-  > {
+export interface DropdownBaseProps extends Omit<
+  Merge<
+    limestone_Button_ButtonProps,
+    limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps
+  >,
+  "popupComponent"
+> {
   /**
    * The "aria-label" for the Dropdown.
    */
@@ -96,11 +95,10 @@ export class DropdownBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, DropdownBaseProps>
 > {}
 
-export interface DropdownDecoratorProps
-  extends Merge<
-    Merge<ui_Changeable_ChangeableProps, ui_Toggleable_ToggleableProps>,
-    spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps
-  > {
+export interface DropdownDecoratorProps extends Merge<
+  Merge<ui_Changeable_ChangeableProps, ui_Toggleable_ToggleableProps>,
+  spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps
+> {
   /**
    * Displays the items.
    */

package/Dropdown/Dropdown.module.css

@@ -4,44 +4,44 @@
   min-width: 6.25rem;
 }
 .dropdown.tinyWidth .title {
-  width: 9rem;
+  width: NaNrem - var(--primitive-spacing-24) * 2);
 }
 .dropdown.tinyWidth .button {
   width: 10rem;
 }
 .dropdown.smallWidth .title {
-  width: 10.25rem;
+  width: NaNrem - var(--primitive-spacing-24) * 2);
 }
 .dropdown.smallWidth .button {
   width: 11.25rem;
 }
 .dropdown.mediumWidth .title {
-  width: 13.375rem;
+  width: NaNrem - var(--primitive-spacing-24) * 2);
 }
 .dropdown.mediumWidth .button {
   width: 14.375rem;
 }
 .dropdown.largeWidth .title {
-  width: 16.5rem;
+  width: NaNrem - var(--primitive-spacing-24) * 2);
 }
 .dropdown.largeWidth .button {
   width: 17.5rem;
 }
 .dropdown.x-largeWidth .title {
-  width: 20.875rem;
+  width: NaNrem - var(--primitive-spacing-24) * 2);
 }
 .dropdown.x-largeWidth .button {
   width: 21.875rem;
 }
 .dropdown.hugeWidth .title {
-  width: 27.75rem;
+  width: NaNrem - var(--primitive-spacing-24) * 2);
 }
 .dropdown.hugeWidth .button {
   width: 28.75rem;
 }
 .dropdown .title {
-  min-width: 5.25rem;
-  padding: 0.75rem 0.5rem;
+  min-width: NaNrem - var(--primitive-spacing-24) * 2);
+  padding: var(--primitive-spacing-36) var(--primitive-spacing-24);
   margin: 0;
 }
 .dropdown .button {
@@ -50,6 +50,10 @@
   padding: 0 var(--primitive-spacing-48);
   margin: 0;
 }
+.dropdown .button.small {
+  min-width: unset;
+  max-width: unset;
+}
 :global(.spotlight-input-key) .dropdown .button:not([disabled]):global(.spottable):focus.pressed .bg,
 :global(.spotlight-input-mouse) .dropdown .button:not([disabled]):global(.spottable):focus.pressed .bg,
 :global(.spotlight-input-key) .dropdown .button:not([disabled]):global(.spottable):focus:active .bg,
@@ -73,7 +77,7 @@
   min-width: 6.25rem;
 }
 .dropdownList.verticalScrollbar .scrollbarTrack {
-  height: calc(100% - 12px);
+  height: calc(100% - var(--primitive-spacing-12));
 }
 .dropdownList.tiny {
   width: 9.875rem;

package/Dropdown/DropdownList.js

@@ -9,6 +9,7 @@ var _handle = require("@enact/core/handle");
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _WithRef = require("@enact/core/internal/WithRef");
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _IdProvider = _interopRequireDefault(require("@enact/ui/internal/IdProvider"));
 var _resolution = _interopRequireDefault(require("@enact/ui/resolution"));
@@ -17,16 +18,16 @@ var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _react = require("react");
 var _$L = _interopRequireDefault(require("../internal/$L"));
+var _util2 = require("../internal/util");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Item = _interopRequireDefault(require("../Item"));
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _VirtualList = _interopRequireDefault(require("../VirtualList"));
 var _DropdownModule = _interopRequireDefault(require("./Dropdown.module.css"));
-var _util = require("../internal/util");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["index"],
   _excluded2 = ["key"],
-  _excluded3 = ["dataSize", "id", "itemSize", "scrollTo", "width"];
+  _excluded3 = ["dataSize", "id", "itemSize", "maxItems", "scrollTo", "width"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -34,13 +35,21 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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); }
-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; }
+var ReadyState = {
+  // Initial state. Scrolling and focusing pending
+  INIT: 0,
+  // Scroll requested
+  SCROLLED: 1,
+  // Focus completed or not required
+  DONE: 2
+};
 var isSelectedValid = exports.isSelectedValid = function isSelectedValid(_ref) {
   var children = _ref.children,
     selected = _ref.selected;
@@ -65,6 +74,31 @@ var indexFromKey = function indexFromKey(children, key) {
   }
   return index;
 };
+var stateReducer = function stateReducer(prevState, _ref3) {
+  var adjustedFocusIndex = _ref3.adjustedFocusIndex,
+    props = _ref3.props,
+    type = _ref3.type;
+  switch (type) {
+    case ReadyState.INIT:
+      return {
+        prevChildren: props.children,
+        prevFocused: adjustedFocusIndex,
+        prevSelected: props.selected,
+        prevSelectedKey: getKey(props),
+        ready: ReadyState.INIT
+      };
+    case ReadyState.SCROLLED:
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        ready: ReadyState.SCROLLED
+      });
+    case ReadyState.DONE:
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        ready: ReadyState.DONE
+      });
+    default:
+      return prevState;
+  }
+};
 var DropdownListBase = exports.DropdownListBase = (0, _kind["default"])({
   name: 'DropdownListBase',
   propTypes: {
@@ -122,9 +156,9 @@ var DropdownListBase = exports.DropdownListBase = (0, _kind["default"])({
     className: 'dropdownList'
   },
   handlers: {
-    itemRenderer: function itemRenderer(_ref3, props) {
-      var index = _ref3.index,
-        rest = _objectWithoutProperties(_ref3, _excluded);
+    itemRenderer: function itemRenderer(_ref4, props) {
+      var index = _ref4.index,
+        rest = _objectWithoutProperties(_ref4, _excluded);
       var children = props.children,
         selected = props.selected;
       var isSelected = index === selected;
@@ -159,31 +193,36 @@ var DropdownListBase = exports.DropdownListBase = (0, _kind["default"])({
     }
   },
   computed: {
-    className: function className(_ref4) {
-      var children = _ref4.children,
-        styler = _ref4.styler,
-        width = _ref4.width;
+    className: function className(_ref5) {
+      var children = _ref5.children,
+        styler = _ref5.styler,
+        width = _ref5.width;
       return styler.append(typeof width === 'string' ? width : null, {
         verticalScrollbar: (children === null || children === void 0 ? void 0 : children.length) > 5
       });
     },
-    dataSize: function dataSize(_ref5) {
-      var children = _ref5.children;
+    dataSize: function dataSize(_ref6) {
+      var children = _ref6.children;
       return children ? children.length : 0;
     },
     // Note: Retaining this in case we need to support different item sizes for large text mode:
     // itemSize: ({skinVariants}) => ri.scale(skinVariants && skinVariants.largeText ? 156 : 156)
     itemSize: function itemSize() {
       return 156;
+    },
+    maxItems: function maxItems(_ref7) {
+      var children = _ref7.children;
+      return (children === null || children === void 0 ? void 0 : children.length) > 5;
     }
   },
-  render: function render(_ref6) {
-    var dataSize = _ref6.dataSize,
-      id = _ref6.id,
-      itemSize = _ref6.itemSize,
-      scrollTo = _ref6.scrollTo,
-      width = _ref6.width,
-      rest = _objectWithoutProperties(_ref6, _excluded3);
+  render: function render(_ref8) {
+    var dataSize = _ref8.dataSize,
+      id = _ref8.id,
+      itemSize = _ref8.itemSize,
+      maxItems = _ref8.maxItems,
+      scrollTo = _ref8.scrollTo,
+      width = _ref8.width,
+      rest = _objectWithoutProperties(_ref8, _excluded3);
     delete rest.children;
     delete rest.onSelect;
     delete rest.selected;
@@ -194,9 +233,9 @@ var DropdownListBase = exports.DropdownListBase = (0, _kind["default"])({
       "aria-labelledby": "".concat(id, "_dropdownlist"),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         id: "".concat(id, "_dropdownlist"),
-        "aria-label": new _IString["default"]((0, _$L["default"])('Dropdown list opened {total} items in total')).format({
+        "aria-label": "".concat((0, _$L["default"])('Dropdown list opened'), " ").concat(new _IString["default"]((0, _$L["default"])('{total} items in total')).format({
           total: dataSize
-        })
+        }))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], _objectSpread(_objectSpread({}, rest), {}, {
         cbScrollTo: scrollTo,
         dataSize: dataSize,
@@ -205,37 +244,30 @@ var DropdownListBase = exports.DropdownListBase = (0, _kind["default"])({
         scrollbarTrackCss: _DropdownModule["default"],
         style: {
           backgroundColor: 'transparent',
-          height: _resolution["default"].scaleToRem(itemSize * dataSize + 36),
+          height: !maxItems ? _resolution["default"].scaleToRem(itemSize * dataSize + 36) : null,
           width: typeof width === 'number' ? _resolution["default"].scaleToRem(width) : null
         }
       }))]
     });
   }
 });
-var ReadyState = {
-  // Initial state. Scrolling and focusing pending
-  INIT: 0,
-  // Scroll requested
-  SCROLLED: 1,
-  // Focus completed or not required
-  DONE: 2
-};
 var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrapped) {
   var WrappedWithRef = (0, _WithRef.WithRef)(Wrapped);
 
   // eslint-disable-next-line no-shadow
-  var DropdownListSpotlightDecorator = function DropdownListSpotlightDecorator(props) {
+  var _DropdownListSpotlightDecorator = function DropdownListSpotlightDecorator(props) {
+    (0, _util.checkPropTypes)(_DropdownListSpotlightDecorator, props);
     var clientSiblingRef = (0, _react.useRef)(null);
-    var _useState = (0, _react.useState)({
+    var _useReducer = (0, _react.useReducer)(stateReducer, {
         prevChildren: props.children,
         prevFocused: null,
         prevSelected: props.selected,
         prevSelectedKey: getKey(props),
         ready: isSelectedValid(props) ? ReadyState.INIT : ReadyState.DONE
       }),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
     var scrollToRef = (0, _react.useRef)(function () {});
     var lastFocusedKey = (0, _react.useRef)(null);
     (0, _react.useEffect)(function () {
@@ -245,10 +277,8 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     var focusSelected = function focusSelected() {
-      setState(function (value) {
-        return _objectSpread(_objectSpread({}, value), {}, {
-          ready: ReadyState.DONE
-        });
+      dispatch({
+        type: ReadyState.DONE
       });
     };
     var resetFocus = (0, _react.useCallback)(function (keysDiffer) {
@@ -259,12 +289,10 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
           adjustedFocusIndex = targetIndex;
         }
       }
-      setState({
-        prevChildren: props.children,
-        prevFocused: adjustedFocusIndex,
-        prevSelected: props.selected,
-        prevSelectedKey: getKey(props),
-        ready: ReadyState.INIT
+      dispatch({
+        adjustedFocusIndex: adjustedFocusIndex,
+        props: props,
+        type: ReadyState.INIT
       });
     }, [props]);
     var scrollIntoView = (0, _react.useCallback)(function () {
@@ -282,10 +310,8 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
         // @lime-item-small-height * 2 (TODO: large text mode not supported!)
         stickTo: 'start' // offset from the top of the dropdown
       });
-      setState(function (value) {
-        return _objectSpread(_objectSpread({}, value), {}, {
-          ready: ReadyState.SCROLLED
-        });
+      dispatch({
+        type: ReadyState.SCROLLED
       });
     }, [props, state.prevFocused]);
     (0, _react.useEffect)(function () {
@@ -296,7 +322,7 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
       } else {
         var key = getKey(props);
         var keysDiffer = key && state.prevSelectedKey && key !== state.prevSelectedKey;
-        if (keysDiffer || (!key || !state.prevSelectedKey) && state.prevSelected !== props.selected || !(0, _util.compareChildren)(state.prevChildren, props.children)) {
+        if (keysDiffer || (!key || !state.prevSelectedKey) && state.prevSelected !== props.selected || !(0, _util2.compareChildren)(state.prevChildren, props.children)) {
           resetFocus(keysDiffer);
         }
       }
@@ -327,8 +353,8 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
       scrollTo: setScrollTo
     }));
   };
-  DropdownListSpotlightDecorator.displayName = 'DropdownListSpotlightDecorator';
-  DropdownListSpotlightDecorator.propTypes = {
+  _DropdownListSpotlightDecorator.displayName = 'DropdownListSpotlightDecorator';
+  _DropdownListSpotlightDecorator.propTypes = {
     /*
            * Passed by DropdownBase to resume Spotlight
            *
@@ -348,7 +374,7 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
            */
     selected: _propTypes2["default"].number
   };
-  return DropdownListSpotlightDecorator;
+  return _DropdownListSpotlightDecorator;
 });
 var DropdownListDecorator = (0, _compose["default"])(DropdownListSpotlightDecorator, (0, _IdProvider["default"])({
   generateProp: null,

package/FixedPopupPanels/FixedPopupPanels.d.ts

@@ -22,8 +22,10 @@ export class FixedPopupPanelsBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, FixedPopupPanelsBaseProps>
 > {}
 
-export interface FixedPopupPanelsProps
-  extends Merge<FixedPopupPanelsBaseProps, FixedPopupPanelsDecoratorProps> {
+export interface FixedPopupPanelsProps extends Merge<
+  FixedPopupPanelsBaseProps,
+  FixedPopupPanelsDecoratorProps
+> {
   /**
    * Size of the popup.
    */

package/FixedPopupPanels/FixedPopupPanels.module.css

@@ -31,12 +31,12 @@
   padding: 0;
 }
 .fixedPopupPanels.popup {
-  margin: 1.25rem 1.25rem 2.75rem;
-  max-height: calc(100vh - 4rem );
+  margin: var(--primitive-spacing-60) var(--primitive-spacing-60) var(--primitive-spacing-132);
+  max-height: calc(100vh - (var(--primitive-spacing-60) + var(--primitive-spacing-132)));
 }
 .fixedPopupPanels.popup.left {
-  margin-left: 1.25rem;
-  margin-right: 1.25rem;
+  margin-left: var(--primitive-spacing-60);
+  margin-right: var(--primitive-spacing-60);
 }
 .fixedPopupPanels:global(.neutral) {
   background-color: transparent;
@@ -46,9 +46,9 @@
   border-radius: var(--semantic-radius-overlay);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
-  outline-width: 0.021rem;
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) .fixedPopupPanels:global(.neutral) .viewport {
   box-shadow: none;
@@ -60,10 +60,10 @@
   background-color: var(--semantic-color-background-overlay-default);
   border-radius: var(--semantic-radius-overlay);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  outline-color: #7c848b;
-  outline-width: 0.021rem;
+  outline-color: var(--semantic-color-stroke-main);
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .fixedPopupPanels:global(.neutral):global(.highContrast) .viewport {
   box-shadow: none;
@@ -76,9 +76,9 @@
   border-radius: var(--semantic-radius-overlay);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
-  outline-width: 0.021rem;
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) .fixedPopupPanels:global(.light) .viewport {
   box-shadow: none;
@@ -94,9 +94,9 @@
   border-radius: var(--semantic-radius-overlay);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
-  outline-width: 0.021rem;
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) .fixedPopupPanels:global(.game) .viewport {
   box-shadow: none;
@@ -111,9 +111,9 @@
   border-radius: var(--semantic-radius-overlay);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
-  outline-width: 0.021rem;
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) :global(.green) .fixedPopupPanels:global(.game) .viewport {
   box-shadow: none;
@@ -128,15 +128,15 @@
   border-radius: var(--semantic-radius-overlay);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
-  outline-width: 0.021rem;
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) :global(.orange) .fixedPopupPanels:global(.game) .viewport {
   box-shadow: none;
 }
 .panel {
-  max-height: calc(100vh - 4rem );
+  max-height: calc(100vh - (var(--primitive-spacing-60) + var(--primitive-spacing-132)));
 }
 .panel > .body {
   display: flex;