@enact/limestone 1.3.0 → 1.9.4

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/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 {
@@ -73,7 +73,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

@@ -26,7 +26,7 @@ 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."); }
@@ -175,15 +175,20 @@ var DropdownListBase = exports.DropdownListBase = (0, _kind["default"])({
     // itemSize: ({skinVariants}) => ri.scale(skinVariants && skinVariants.largeText ? 156 : 156)
     itemSize: function itemSize() {
       return 156;
+    },
+    maxItems: function maxItems(_ref6) {
+      var children = _ref6.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(_ref7) {
+    var dataSize = _ref7.dataSize,
+      id = _ref7.id,
+      itemSize = _ref7.itemSize,
+      maxItems = _ref7.maxItems,
+      scrollTo = _ref7.scrollTo,
+      width = _ref7.width,
+      rest = _objectWithoutProperties(_ref7, _excluded3);
     delete rest.children;
     delete rest.onSelect;
     delete rest.selected;
@@ -194,9 +199,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,7 +210,7 @@ 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
         }
       }))]

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;

package/FlexiblePopupPanels/FlexiblePopupPanels.module.css

@@ -1,5 +1,5 @@
 .flexiblePopupPanels.popup {
-  padding: 1.25rem 0;
+  padding: var(--primitive-spacing-60) 0;
   margin: 0;
   max-height: 100vh;
   min-width: 23.75rem;
@@ -12,8 +12,8 @@
   position: relative;
 }
 .flexiblePopupPanels .viewport .panel {
-  padding: 0 1.25rem 1.40625rem;
-  height: calc(100vh - 2.5rem );
+  padding: 0 var(--primitive-spacing-60) calc(var(--primitive-spacing-36) + (var(--primitive-spacing-18) * 1.75));
+  height: calc(100vh - (var(--primitive-spacing-60) * 2 + 0rem * 2));
 }
 .flexiblePopupPanels .viewport.noNavButton .bodyLayout {
   padding-left: 0;
@@ -77,8 +77,8 @@
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) .flexiblePopupPanels:global(.neutral) .header,
 :global(.noAnimation) .flexiblePopupPanels:global(.neutral) .content {
@@ -101,10 +101,10 @@
 :global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast) .content {
   border-radius: var(--semantic-radius-overlay);
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  outline-color: #7c848b;
+  outline-color: var(--semantic-color-stroke-main);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast) .header,
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast) .content {
@@ -129,8 +129,8 @@
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) .flexiblePopupPanels:global(.light) .header,
 :global(.noAnimation) .flexiblePopupPanels:global(.light) .content {
@@ -158,8 +158,8 @@
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) .flexiblePopupPanels:global(.game) .header,
 :global(.noAnimation) .flexiblePopupPanels:global(.game) .content {
@@ -186,8 +186,8 @@
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) :global(.green) .flexiblePopupPanels:global(.game) .header,
 :global(.noAnimation) :global(.green) .flexiblePopupPanels:global(.game) .content {
@@ -214,8 +214,8 @@
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) :global(.orange) .flexiblePopupPanels:global(.game) .header,
 :global(.noAnimation) :global(.orange) .flexiblePopupPanels:global(.game) .content {
@@ -237,7 +237,7 @@
 .panel .bodyLayout {
   max-height: -webkit-fill-available;
   pointer-events: auto;
-  padding: 0 2.25rem;
+  padding: 0 var(--primitive-spacing-108);
 }
 .panel > *:first-child {
   pointer-events: auto;
@@ -250,12 +250,12 @@
 .panel.auto .header,
 .panel.small .header,
 .panel.large .header {
-  margin-left: 3.5rem;
-  margin-right: 3.5rem;
+  margin-left: calc(var(--primitive-spacing-60) + var(--primitive-spacing-108));
+  margin-right: calc(var(--primitive-spacing-60) + var(--primitive-spacing-108));
 }
 .panel .content {
-  margin: 0 1.25rem;
-  padding: 1.25rem 0.5rem;
+  margin: 0 var(--primitive-spacing-60);
+  padding: var(--primitive-spacing-60);
   box-sizing: border-box;
 }
 .panel.auto {
@@ -274,14 +274,14 @@
   width: 12.5rem;
 }
 .panel.small + .panel.large {
-  left: -17.5rem;
+  left: calc(calc( var(--primitive-spacing-60) + var(--primitive-spacing-60) + 12.5rem + var(--primitive-spacing-60) + var(--primitive-spacing-60) ) * -1);
 }
 .panel.large .content,
 .panel.large .header {
   width: 27.5rem;
 }
 .panel.large + .panel.small {
-  left: -32.5rem;
+  left: calc(calc( var(--primitive-spacing-60) + var(--primitive-spacing-60) + 27.5rem + var(--primitive-spacing-60) + var(--primitive-spacing-60) ));
 }
 :global(.enact-locale-right-to-left) .panel > .body {
   direction: ltr;

package/FormCheckboxItem/FormCheckboxItem.d.ts

@@ -65,14 +65,15 @@ export class FormCheckboxItemBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, FormCheckboxItemBaseProps>
 > {}
 
-export interface FormCheckboxItemDecoratorProps
-  extends ui_Toggleable_ToggleableProps {}
+export interface FormCheckboxItemDecoratorProps extends ui_Toggleable_ToggleableProps {}
 export function FormCheckboxItemDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & FormCheckboxItemDecoratorProps>;
 
-export interface FormCheckboxItemProps
-  extends Merge<FormCheckboxItemBaseProps, FormCheckboxItemDecoratorProps> {}
+export interface FormCheckboxItemProps extends Merge<
+  FormCheckboxItemBaseProps,
+  FormCheckboxItemDecoratorProps
+> {}
 /**
  * A Limestone-styled form item with a checkbox component.
  * 

package/Heading/Heading.d.ts

@@ -60,17 +60,18 @@ export class HeadingBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, HeadingBaseProps>
 > {}
 
-export interface HeadingDecoratorProps
-  extends Merge<
-    limestone_Marquee_MarqueeDecoratorProps,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface HeadingDecoratorProps extends Merge<
+  limestone_Marquee_MarqueeDecoratorProps,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function HeadingDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & HeadingDecoratorProps>;
 
-export interface HeadingProps
-  extends Merge<HeadingBaseProps, HeadingDecoratorProps> {
+export interface HeadingProps extends Merge<
+  HeadingBaseProps,
+  HeadingDecoratorProps
+> {
   /**
    * Marquee animation trigger.
    *

package/Heading/Heading.module.css

@@ -96,23 +96,23 @@
 .heading.large {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-semibold);
-  font-size: 1.5rem;
+  font-size: var(--primitive-font-size-72);
 }
 .heading.medium {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-semibold);
-  font-size: 1.375rem;
+  font-size: var(--primitive-font-size-66);
 }
 .heading.small {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-semibold);
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
 }
 .heading.tiny {
   margin: var(--primitive-spacing-36) var(--primitive-spacing-24);
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-semibold);
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
 }
 .heading.titleSpacing {
   margin-bottom: 0;
@@ -129,7 +129,7 @@
   min-height: 0.85417rem;
 }
 .heading.smallSpacing {
-  margin-bottom: calc(var(--primitive-spacing-36) - 1px );
+  margin-bottom: calc(var(--primitive-spacing-36) - 1px);
   min-height: 0.35417rem;
 }
 .heading.noneSpacing {

package/Icon/Icon.d.ts

@@ -353,14 +353,24 @@ dislikeline
 like
 likeline
 soundbarline
-jumpforward
-jumpbackward
+jumpforward2
+jumpbackward2
+link2
+btspeakermute
+system
+remotecontrolsetting
+warning
+filepdf
+filedoc
+filexls
+subtitleru
+mypageru
+};
 ```
  */
 export declare const iconList: object;
 
-export interface IconDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface IconDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function IconDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & IconDecoratorProps>;

package/Icon/Icon.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "icons", {
     return _IconList["default"];
   }
 });
+var _deprecate = _interopRequireDefault(require("@enact/core/internal/deprecate"));
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _I18nDecorator = require("@enact/i18n/I18nDecorator");
 var _Icon = require("@enact/ui/Icon");
@@ -40,6 +41,11 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * @exports IconDecorator
  * @exports icons
  */
+var warnedJumpBackward = false;
+var warnedJumpBackward2 = false;
+var warnedJumpForward = false;
+var warnedJumpForward2 = false;
+
 /**
  * Renders a limestone-styled icon without any behavior.
  *
@@ -57,6 +63,7 @@ var IconBase = exports.IconBase = (0, _kind["default"])({
      *
      * @see {@link ui/Icon.IconBase.children}
      * @type {String|Object}
+     * @deprecated `jumpbackward`, `jumpforward`, `jumpbackward2`, and `jumpforward2` icons will be renamed to `previous`, `next`, `jumpbackward`, and `jumpforward` in 2.0.0.
      * @public
      */
     children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
@@ -152,6 +159,34 @@ var IconBase = exports.IconBase = (0, _kind["default"])({
       rest = _objectWithoutProperties(_ref4, _excluded);
     delete rest.locale;
     delete rest.rtl;
+    if (!warnedJumpBackward && rest.children === 'jumpbackward') {
+      (0, _deprecate["default"])({
+        name: 'Icon `jumpbackward`',
+        message: 'Wiil be renamed to `previous` in 2.0.0'
+      });
+      warnedJumpBackward = true;
+    }
+    if (!warnedJumpBackward2 && rest.children === 'jumpbackward2') {
+      (0, _deprecate["default"])({
+        name: 'Icon `jumpbackward2`',
+        message: 'Wiil be renamed to `jumpbackward` in 2.0.0'
+      });
+      warnedJumpBackward2 = true;
+    }
+    if (!warnedJumpForward && rest.children === 'jumpforward') {
+      (0, _deprecate["default"])({
+        name: 'Icon `jumpforward`',
+        message: 'Wiil be renamed to `next` in 2.0.0'
+      });
+      warnedJumpForward = true;
+    }
+    if (!warnedJumpForward2 && rest.children === 'jumpforward2') {
+      (0, _deprecate["default"])({
+        name: 'Icon `jumpforward2`',
+        message: 'Wiil be renamed to `jumpforward` in 2.0.0'
+      });
+      warnedJumpForward2 = true;
+    }
     return _Icon.IconBase.inline(_objectSpread(_objectSpread({}, rest), {}, {
       size: typeof size === 'string' ? size : void 0,
       css: css,
@@ -465,8 +500,19 @@ var IconBase = exports.IconBase = (0, _kind["default"])({
  * like
  * likeline
  * soundbarline
- * jumpforward
- * jumpbackward
+ * jumpforward2
+ * jumpbackward2
+ * link2
+ * btspeakermute
+ * system
+ * remotecontrolsetting
+ * warning
+ * filepdf
+ * filedoc
+ * filexls
+ * subtitleru
+ * mypageru
+};
  * ```
  *
  * @name iconList

package/Icon/Icon.module.css

@@ -3,7 +3,7 @@
   text-align: center;
   position: relative;
   font-family: "Limestone Icons";
-  margin: 0.5rem;
+  margin: var(--primitive-spacing-24);
   overflow: hidden;
   width: var(--icon-size, 1.5rem );
   height: var(--icon-size, 1.5rem );