@enact/limestone 1.9.3 → 1.10.1

package/Card/Card.module.css

@@ -103,18 +103,19 @@ Motion Mixins
   border-style: solid;
 }
 .card .selectionContainer .selectionIcon {
-  width: 1.875rem;
-  height: 1.875rem;
+  --icon-size: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
   border-radius: 50%;
   margin: 0;
-  line-height: 1.875rem;
+  line-height: 1.25rem;
   z-index: 3;
 }
 .card:not(.isCheckIcon) .selectionContainer .selectionIcon {
-  --icon-size: 2.5rem;
-  width: 3rem;
-  height: 3rem;
-  line-height: 3rem;
+  --icon-size: 3rem;
+  width: 3.75rem;
+  height: 3.75rem;
+  line-height: 3.75rem;
 }
 .card .primaryBadge,
 .card .secondaryBadge {
@@ -342,6 +343,29 @@ Motion Mixins
   transform: scale(1.1);
   transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
+.card:global(.largeText) .caption {
+  font-size: var(--primitive-font-size-72);
+  line-height: 2.08333rem;
+}
+.card:global(.largeText) .label {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
+.card:global(.largeText).captionOverlay.splitCaption .label {
+  font-size: var(--primitive-font-size-72);
+}
+.card:global(.largeText) .selectionContainer .selectionIcon {
+  --icon-size: 3.6rem;
+}
+.card:global(.largeText):is(.isCheckIcon) .selectionContainer .selectionIcon {
+  --icon-size: 1.20833rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.45833rem;
+}
+.card:global(.largeText).vertical:not(.captionOverlay):not(.captionOverlayOnFocus):is(.hasLabel) .image {
+  height: calc(var(--card-image-height) - 36px);
+}
 .card:global(.neutral) .selectionContainer {
   border-color: transparent;
 }

package/Card/tests/Card-specs.js

@@ -2,8 +2,9 @@
 
 require("@testing-library/jest-dom");
 var _react = require("@testing-library/react");
-var _Card = require("../Card");
+var _Card = _interopRequireWildcard(require("../Card"));
 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); }
 var src = {
   'hd': 'https://placehold.co/200x200/000000/ffffff/png',
   'fhd': 'https://placehold.co/300x300/000000/ffffff/png',
@@ -46,7 +47,8 @@ describe('Card', function () {
     var imageIconSrc = 'imageIconSrc';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
       imageIconSrc: imageIconSrc,
-      orientation: "vertical"
+      orientation: "vertical",
+      src: src
     }));
     var expected = imageIconSrc;
     var actual = _react.screen.getAllByRole('img')[2].children.item(0);
@@ -56,7 +58,8 @@ describe('Card', function () {
     var imageIconSrc = 'imageIconSrc';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
       imageIconSrc: imageIconSrc,
-      orientation: "horizontal"
+      orientation: "horizontal",
+      src: src
     }));
     var expected = 2;
     var actual = _react.screen.getAllByRole('img').length;
@@ -67,7 +70,8 @@ describe('Card', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
       "data-testid": "card",
       fitImage: true,
-      imageIconSrc: imageIconSrc
+      imageIconSrc: imageIconSrc,
+      src: src
     }));
     var expected = 'fitImage';
     var actual = _react.screen.getByTestId('card');
@@ -75,7 +79,8 @@ describe('Card', function () {
   });
   test('should have "Select" voice intent', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
-      "data-testid": "card"
+      "data-testid": "card",
+      src: src
     }));
     var card = _react.screen.getByTestId('card');
     expect(card).toHaveAttribute('data-webos-voice-intent', 'Select');
@@ -92,4 +97,33 @@ describe('Card', function () {
     var actual = _react.screen.getByText('children');
     expect(actual).not.toHaveAttribute(expected);
   });
+  test('should be pressed when selected', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card["default"], {
+      "data-testid": "card",
+      src: src
+    }));
+    var card = _react.screen.getByTestId('card');
+
+    // Select by key
+    _react.fireEvent.keyDown(card, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(card).toHaveClass('pressed');
+    _react.fireEvent.keyUp(card, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(card).not.toHaveClass('pressed');
+
+    // Select by pointer
+    _react.fireEvent.mouseDown(card);
+    expect(card).toHaveClass('pressed');
+    _react.fireEvent.mouseUp(card);
+    expect(card).not.toHaveClass('pressed');
+  });
 });

package/Checkbox/Checkbox.module.css

@@ -91,6 +91,10 @@ Motion Mixins
   border-radius: var(--semantic-radius-full);
   position: relative;
   text-align: center;
+  --icon-size: 1.25rem;
+}
+.checkbox .icon:global(.largeText) {
+  --icon-size: 1.5rem;
 }
 .checkbox.selected.checkmark .icon::after {
   content: '';

package/CheckboxItem/CheckboxItem.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.CheckboxItemGroup = exports.CheckboxItemDecorator = exports.CheckboxItemBase = exports.CheckboxItem = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
 var _Group = _interopRequireDefault(require("@enact/ui/Group"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
@@ -225,14 +226,11 @@ var CheckboxItem = exports.CheckboxItem = (0, _Pure["default"])(CheckboxItemDeco
  * @public
  */
 var _CheckboxItemGroup = exports.CheckboxItemGroup = function CheckboxItemGroup(props) {
+  (0, _util.checkPropTypes)(_CheckboxItemGroup, props);
   var children = props.children,
     groupId = props.groupId,
     itemProps = props.itemProps,
     rest = _objectWithoutProperties(props, _excluded2);
-  _CheckboxItemGroup.propTypes = {
-    groupId: _propTypes["default"].string,
-    itemProps: _propTypes["default"].object
-  };
   if (typeof children[0] === 'string') {
     // The case of multiple checkbox items are represented by string array instead of `CheckboxItem` components using `ui/Group`
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -272,4 +270,8 @@ var _CheckboxItemGroup = exports.CheckboxItemGroup = function CheckboxItemGroup(
     });
   }
 };
+_CheckboxItemGroup.propTypes = {
+  groupId: _propTypes["default"].string,
+  itemProps: _propTypes["default"].object
+};
 var _default = exports["default"] = CheckboxItem;

package/Chips/Chip.js

@@ -61,6 +61,7 @@ var ChipDefaultProps = {
  * 		position: 'right'
  * 	}}
  * 	icon="check"
+ * 	id="chip"
  * >
  *  Label
  * </Chip>
@@ -71,12 +72,13 @@ var ChipDefaultProps = {
  * @ui
  * @public
  */
-var ChipBase = exports.ChipBase = function ChipBase(props) {
+var _ChipBase = exports.ChipBase = function ChipBase(props) {
   var _use = (0, _react.use)(_Chips.ChipsContext),
     handleChipDelete = _use.handleChipDelete,
     getNextTargetFromDeleteButton = _use.getNextTargetFromDeleteButton,
     registerChild = _use.registerChild;
   var chipProps = (0, _util.setDefaultProps)(props, ChipDefaultProps);
+  (0, _util.checkPropTypes)(_ChipBase, chipProps);
   var checked = chipProps.checked,
     children = chipProps.children,
     className = chipProps.className,
@@ -92,11 +94,15 @@ var ChipBase = exports.ChipBase = function ChipBase(props) {
   var ariaLabel = children + ' ' + (0, _$L["default"])('Chip') + ' ' + (0, _$L["default"])('button');
   var buttonClassName = (0, _classnames["default"])(_ChipModule["default"].deleteButtonContainer, _ChipModule["default"][(deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.position) || 'right']);
   var chipClassName = (0, _classnames["default"])(className, deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.position);
+  var chipRef = (0, _react.useRef)(null);
   var containerRef = (0, _react.useRef)(null);
-  var clientRef = (0, _react.useRef)(null);
   var deleteButtonRef = (0, _react.useRef)(null);
-  var chipRef = clientRef || ref;
   var isHovering = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (!chipRef.current) {
+      chipRef.current = ref.current;
+    }
+  }, [ref]);
   (0, _react.useEffect)(function () {
     if (chipRef.current && registerChild) {
       registerChild(chipRef, id);
@@ -228,8 +234,7 @@ var ChipBase = exports.ChipBase = function ChipBase(props) {
     })]
   }));
 };
-ChipBase.displayName = 'Chip';
-ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
+_ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
   /**
    * A label displayed in the chip content.
    *
@@ -291,6 +296,7 @@ ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
    */
   isImage: _propTypes["default"].bool
 };
+_ChipBase.displayName = 'Chip';
 
 /**
  * Limestone-specific Chip behaviors to apply to {@link limestone/Chips.Chip|Chip}.
@@ -301,5 +307,5 @@ ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
  * @public
  */
 var ChipDecorator = exports.ChipDecorator = (0, _compose["default"])(_Skinnable["default"]);
-var Chip = exports.Chip = ChipDecorator(ChipBase);
+var Chip = exports.Chip = ChipDecorator(_ChipBase);
 var _default = exports["default"] = Chip;

package/Chips/Chip.module.css

@@ -25,6 +25,9 @@
   left: 50%;
   transform: translateX(-50%);
 }
+:global(.largeText) .chip .button.small {
+  min-width: 2.25rem;
+}
 .chip .focused {
   display: block;
 }

package/Chips/Chips.js

@@ -33,6 +33,9 @@ var ChipsContext = exports.ChipsContext = /*#__PURE__*/(0, _react.createContext)
 var ChipsDefaultProps = {
   orientation: 'vertical'
 };
+var generateAriaId = function generateAriaId() {
+  return Math.random().toString(36).substring(2, 10);
+};
 
 /**
  * A container that surrounds the chips.
@@ -42,7 +45,7 @@ var ChipsDefaultProps = {
  * <Chips>
  * 	{chips.map(({id, icon, children}) => {
  * 		return (
- * 			<Chip key={id} icon={icon} onClick={onClick}>
+ * 			<Chip key={id} id={id} icon={icon} onClick={onClick}>
  * 				{children}
  * 			</Chip>
  * 		);
@@ -55,8 +58,9 @@ var ChipsDefaultProps = {
  * @ui
  * @public
  */
-var ChipsBase = exports.ChipsBase = function ChipsBase(props) {
+var _ChipsBase = exports.ChipsBase = function ChipsBase(props) {
   var chipsProps = (0, _util.setDefaultProps)(props, ChipsDefaultProps);
+  (0, _util.checkPropTypes)(_ChipsBase, chipsProps);
   var children = chipsProps.children,
     className = chipsProps.className,
     orientation = chipsProps.orientation,
@@ -67,7 +71,9 @@ var ChipsBase = exports.ChipsBase = function ChipsBase(props) {
   var ariaLabel = new _IString["default"]((0, _$L["default"])('{total} items in total')).format({
     total: children === null || children === void 0 ? void 0 : children.length
   });
-  var ariaId = Math.random().toString(36).substring(2, 10);
+  var ariaId = (0, _react.useMemo)(function () {
+    return generateAriaId();
+  }, []);
   var getPreviousChip = (0, _react.useCallback)(function (id) {
     var currentIndex = childRefs.current.findIndex(function (child) {
       return child.id === id;
@@ -176,8 +182,7 @@ var ChipsBase = exports.ChipsBase = function ChipsBase(props) {
     }))
   });
 };
-ChipsBase.displayName = 'Chips';
-ChipsBase.propTypes = /** @lends limestone/Chips.Chips.prototype */{
+_ChipsBase.propTypes = /** @lends limestone/Chips.Chips.prototype */{
   /**
    * {@link limestone/Chips.Chip|Chip} to be rendered
    *
@@ -194,6 +199,7 @@ ChipsBase.propTypes = /** @lends limestone/Chips.Chips.prototype */{
    */
   orientation: _propTypes["default"].oneOf(['horizontal', 'vertical'])
 };
+_ChipsBase.displayName = 'Chips';
 
 /**
  * Applies Limestone specific behaviors to {@link limestone/Chips.Chips|Chips} components.
@@ -225,5 +231,5 @@ var ChipsDecorator = exports.ChipsDecorator = (0, _compose["default"])((0, _Spot
  * @ui
  * @public
  */
-var Chips = exports.Chips = ChipsDecorator(ChipsBase);
+var Chips = exports.Chips = ChipsDecorator(_ChipsBase);
 var _default = exports["default"] = Chips;

package/Chips/tests/Chip-specs.js

@@ -9,7 +9,9 @@ describe('Chip', function () {
     var icon = 'star';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
-      icon: icon
+      icon: icon,
+      id: "minimal-chip",
+      children: "Chip"
     }));
     var expected = 983080; // decimal converted charCode of Unicode 'star' character
     var actual = _react.screen.getByTestId('chip').textContent.codePointAt();
@@ -19,8 +21,10 @@ describe('Chip', function () {
     var svg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCI+PGRlZnM+PHN0eWxlPi5hLC5ie2ZpbGw6I2ZmZjt9LmJ7b3BhY2l0eTowLjg7fTwvc3R5bGU+PC9kZWZzPjxwb2x5Z29uIGNsYXNzPSJhIiBwb2ludHM9IjM0OS45IDUyNy44IDE5OS45IDQyOS44IDE5OS45IDM3NC40IDM1MC4xIDQ3Mi43IDM0OS45IDM0OC41IDE5OS45IDI2MS4xIDE5OS45IDIwOS4zIDM1MCAyOTMuNiAzNTAgMjkzLjYgMzUwLjIgMjkzLjcgMzQ5LjkgMTY5LjMgMTAyLjcgNDguNSAxMDIuNyA0NzIuNiAzNTAuMSA2NTEuNiAzNDkuOSA1MjcuOCIvPjxwb2x5Z29uIGNsYXNzPSJiIiBwb2ludHM9IjM1MC4xIDY1MS42IDU5Ny4zIDQ3Mi44IDU5Ny4zIDM2Ni4zIDM0OS45IDUyNy44IDM1MC4xIDY1MS42Ii8+PHBvbHlnb24gY2xhc3M9ImIiIHBvaW50cz0iMzUwLjEgNDcyLjcgNTIzLjUgMzU5LjMgNTIzLjUgMjQ3LjQgMzQ5LjkgMzQ4LjUgMzUwLjEgNDcyLjciLz48cG9seWdvbiBjbGFzcz0iYiIgcG9pbnRzPSIzNTAgMjkzLjYgMzUwIDI5My42IDM1MC4yIDI5My43IDU5Ny4zIDE1NC44IDU5Ny4zIDQ4LjQgMzQ5LjkgMTY5LjMgMzUwIDI5My42Ii8+PC9zdmc+';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       icon: svg,
-      isImage: true
+      isImage: true,
+      children: "Chip"
     }));
     var actual = _react.screen.queryAllByRole('img')[0].firstChild;
     expect(actual).toHaveAttribute('src', svg);
@@ -28,6 +32,7 @@ describe('Chip', function () {
   test('should support `children` prop', function () {
     var children = 'label';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      id: "chip",
       children: children
     }));
     var expected = children;
@@ -38,9 +43,11 @@ describe('Chip', function () {
     var position = 'top';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: {
         position: position
-      }
+      },
+      children: "Chip"
     }));
     var chip = _react.screen.getByTestId('chip');
     var deleteButton = chip.querySelector('.deleteButtonContainer');
@@ -51,9 +58,11 @@ describe('Chip', function () {
     var position = 'bottom';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: {
         position: position
-      }
+      },
+      children: "Chip"
     }));
     var chip = _react.screen.getByTestId('chip');
     var deleteButton = chip.querySelector('.deleteButtonContainer');
@@ -64,9 +73,11 @@ describe('Chip', function () {
     var position = 'right';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: {
         position: position
-      }
+      },
+      children: "Chip"
     }));
     var chip = _react.screen.getByTestId('chip');
     var deleteButton = chip.querySelector('.deleteButtonContainer');
@@ -76,6 +87,7 @@ describe('Chip', function () {
   test('should render without delete button when deleteButton is false', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: false,
       children: "Test Chip"
     }));
@@ -86,6 +98,7 @@ describe('Chip', function () {
   test('should render without delete button when deleteButton is undefined', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       children: "Test Chip"
     }));
     var chip = _react.screen.getByTestId('chip');
@@ -95,6 +108,7 @@ describe('Chip', function () {
   test('should handle disabled state', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       disabled: true,
       children: "Disabled Chip"
     }));
@@ -104,6 +118,7 @@ describe('Chip', function () {
   test('should handle disabled state with delete button', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       disabled: true,
       deleteButton: {
         position: 'right'
@@ -118,6 +133,7 @@ describe('Chip', function () {
   test('should use default delete button icon when not specified', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: {
         position: 'right'
       },
@@ -130,6 +146,7 @@ describe('Chip', function () {
   test('should use custom delete button icon when specified', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: {
         position: 'right',
         icon: 'trash'
@@ -152,6 +169,7 @@ describe('Chip', function () {
   test('should handle onClick events', function () {
     var mockOnClick = jest.fn();
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      id: "chip",
       onClick: mockOnClick,
       children: "Clickable Chip"
     }));
@@ -164,6 +182,7 @@ describe('Chip', function () {
     var children = 'Star Chip';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       icon: icon,
       children: children
     }));
@@ -178,6 +197,7 @@ describe('Chip', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       className: customClass,
       "data-testid": "chip",
+      id: "chip",
       children: "Test Chip"
     }));
     var chipButton = _react.screen.getByRole('checkbox');

package/Chips/tests/Chips-specs.js

@@ -15,6 +15,7 @@ describe('Chips', function () {
   var defaultProps = {
     orientation: 'vertical',
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      id: "chip1",
       deleteButton: {
         icon: 'closex',
         position: 'right',
@@ -22,6 +23,7 @@ describe('Chips', function () {
       },
       children: "Chip 1"
     }, "chip1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      id: "chip2",
       deleteButton: {
         icon: 'closex',
         position: 'right',
@@ -296,8 +298,16 @@ describe('Chips', function () {
           position: 'right',
           onDelete: mockDeleteWithParams
         },
-        children: "Test Chip"
-      }, "chip1")]
+        children: "Chip 1"
+      }, "chip1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip2",
+        deleteButton: {
+          icon: 'closex',
+          position: 'right',
+          onDelete: mockDeleteWithParams
+        },
+        children: "Chip 2"
+      }, "chip2")]
     };
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, propsWithParams)));
     var deleteButtons = getAllDeleteButtons();

package/ColorPicker/ColorPicker.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.ColorPickerDecorator = exports.ColorPickerBase = exports.ColorPicker = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
 var _Layout = require("@enact/ui/Layout");
 var _Toggleable = _interopRequireDefault(require("@enact/ui/Toggleable"));
@@ -63,11 +64,12 @@ var SpottableButton = (0, _Spottable["default"])(_Button.ButtonBase);
  * @ui
  * @private
  */
-var PopupContent = function PopupContent(_ref) {
-  var color = _ref.color,
-    colorHandler = _ref.colorHandler,
-    css = _ref.css,
-    presetColors = _ref.presetColors;
+var _PopupContent = function PopupContent(props) {
+  (0, _util.checkPropTypes)(_PopupContent, props);
+  var color = props.color,
+    colorHandler = props.colorHandler,
+    css = props.css,
+    presetColors = props.presetColors;
   var _useState = (0, _react.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
     hue = _useState2[0],
@@ -173,7 +175,7 @@ var PopupContent = function PopupContent(_ref) {
     })]
   });
 };
-PopupContent.propTypes = {
+_PopupContent.propTypes = {
   /**
    * Indicates the color.
    *
@@ -295,13 +297,13 @@ var ColorPickerBase = exports.ColorPickerBase = (0, _kind["default"])({
     text: _propTypes["default"].string
   },
   handlers: {
-    handleClosePopup: function handleClosePopup(ev, _ref2) {
-      var onTogglePopup = _ref2.onTogglePopup;
+    handleClosePopup: function handleClosePopup(ev, _ref) {
+      var onTogglePopup = _ref.onTogglePopup;
       onTogglePopup();
     },
-    handleOpenPopup: function handleOpenPopup(ev, _ref3) {
-      var disabled = _ref3.disabled,
-        onTogglePopup = _ref3.onTogglePopup;
+    handleOpenPopup: function handleOpenPopup(ev, _ref2) {
+      var disabled = _ref2.disabled,
+        onTogglePopup = _ref2.onTogglePopup;
       if (!disabled) {
         onTogglePopup();
       }
@@ -311,19 +313,19 @@ var ColorPickerBase = exports.ColorPickerBase = (0, _kind["default"])({
     css: _ColorPickerModule["default"],
     publicClassNames: true
   },
-  render: function render(_ref4) {
-    var color = _ref4.color,
-      colorHandler = _ref4.colorHandler,
-      css = _ref4.css,
-      _ref4$disabled = _ref4.disabled,
-      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-      handleClosePopup = _ref4.handleClosePopup,
-      handleOpenPopup = _ref4.handleOpenPopup,
-      _ref4$popupOpen = _ref4.popupOpen,
-      popupOpen = _ref4$popupOpen === void 0 ? false : _ref4$popupOpen,
-      presetColors = _ref4.presetColors,
-      text = _ref4.text,
-      rest = _objectWithoutProperties(_ref4, _excluded);
+  render: function render(_ref3) {
+    var color = _ref3.color,
+      colorHandler = _ref3.colorHandler,
+      css = _ref3.css,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      handleClosePopup = _ref3.handleClosePopup,
+      handleOpenPopup = _ref3.handleOpenPopup,
+      _ref3$popupOpen = _ref3.popupOpen,
+      popupOpen = _ref3$popupOpen === void 0 ? false : _ref3$popupOpen,
+      presetColors = _ref3.presetColors,
+      text = _ref3.text,
+      rest = _objectWithoutProperties(_ref3, _excluded);
     delete rest.onTogglePopup;
     var CloseIcon = (0, _react.useCallback)(function (props) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], _objectSpread(_objectSpread({}, props), {}, {
@@ -377,7 +379,7 @@ var ColorPickerBase = exports.ColorPickerBase = (0, _kind["default"])({
               size: "small"
             })
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopupContent, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupContent, {
           color: color,
           colorHandler: colorHandler,
           css: css,