@enact/limestone 1.3.0

package/IconItem/IconItem.module.css

@@ -0,0 +1,414 @@
+.iconItem {
+  position: relative;
+  transition: transform 200ms ease-in-out;
+  will-change: transform;
+  height: 5.33333rem;
+  width: 6.95833rem;
+}
+.iconItem .content {
+  box-sizing: border-box;
+  background-size: contain;
+  border-radius: var(--semantic-radius-container);
+  justify-content: center;
+}
+.iconItem.bordered .content {
+  border-width: 0.08333rem;
+  border-style: solid;
+}
+.iconItem.hasLabel .image {
+  height: calc( 5.33333rem - 1.125rem - 24px);
+}
+.iconItem.hasTitle {
+  height: calc( 5.33333rem + 1.25rem + 24px);
+}
+.iconItem .image {
+  display: block;
+  height: 4.79167rem;
+  width: 4.79167rem;
+}
+.iconItem .icon {
+  margin: 0;
+  height: 2.5rem;
+  width: 2.5rem;
+  line-height: 2.5rem;
+}
+.iconItem .labelContainer {
+  width: 100%;
+}
+.iconItem .label {
+  font-size: var(--primitive-font-size-42);
+  font-weight: var(--primitive-font-weight-semibold);
+  line-height: 1.125rem;
+  padding: 0 var(--primitive-spacing-12);
+}
+.iconItem .title {
+  font-size: var(--primitive-font-size-48);
+  font-weight: var(--primitive-font-weight-semibold);
+  line-height: 1.25rem;
+  margin: var(--primitive-spacing-24) 0 0 0;
+}
+.iconItem.labelOnFocus .label,
+.iconItem.labelOnFocus .labelContainer {
+  display: none;
+}
+.iconItem.titleOnFocus .title {
+  visibility: hidden;
+}
+:global(.spotlight-input-key) .iconItem:global(.spottable):focus,
+:global(.spotlight-input-mouse) .iconItem:global(.spottable):focus {
+  transform: scale(1.1);
+}
+:global(.spotlight-input-key) .iconItem:global(.spottable):focus.labelOnFocus .label,
+:global(.spotlight-input-mouse) .iconItem:global(.spottable):focus.labelOnFocus .label,
+:global(.spotlight-input-key) .iconItem:global(.spottable):focus.labelOnFocus .labelContainer,
+:global(.spotlight-input-mouse) .iconItem:global(.spottable):focus.labelOnFocus .labelContainer {
+  display: block;
+}
+:global(.spotlight-input-key) .iconItem:global(.spottable):focus.titleOnFocus .title,
+:global(.spotlight-input-mouse) .iconItem:global(.spottable):focus.titleOnFocus .title {
+  visibility: visible;
+}
+:global(.spotlight-input-touch) .iconItem:global(.spottable):active {
+  transform: scale(1.1);
+}
+:global(.spotlight-input-touch) .iconItem:global(.spottable):active.labelOnFocus .label,
+:global(.spotlight-input-touch) .iconItem:global(.spottable):active.labelOnFocus .labelContainer {
+  display: block;
+}
+:global(.spotlight-input-touch) .iconItem:global(.spottable):active.titleOnFocus .title {
+  visibility: visible;
+}
+:global(.noAnimation) .iconItem {
+  transition: none;
+}
+.iconItem:global(.neutral).bordered .content {
+  border-color: var(--semantic-color-stroke-white);
+}
+.iconItem:global(.neutral) .content {
+  background-color: var(--semantic-color-surface-default-placeholder);
+}
+.iconItem:global(.neutral) .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+.iconItem:global(.neutral) .label {
+  color: var(--semantic-color-on-surface-white);
+}
+.iconItem:global(.neutral).darkLabel .label {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+.iconItem:global(.neutral) .title {
+  color: var(--semantic-color-on-background-main);
+}
+.iconItem:global(.neutral)[disabled] {
+  opacity: 0.3;
+}
+:global(.spotlight-input-key) .iconItem:global(.neutral):global(.spottable):focus:global(.focusRing),
+:global(.spotlight-input-mouse) .iconItem:global(.neutral):global(.spottable):focus:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-key) .iconItem:global(.neutral):global(.spottable):focus:global(.focusRing) .content,
+:global(.spotlight-input-mouse) .iconItem:global(.neutral):global(.spottable):focus:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-touch) .iconItem:global(.neutral):global(.spottable):active:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-touch) .iconItem:global(.neutral):global(.spottable):active:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-key) .iconItem:global(.neutral):global(.spottable):focus .content,
+:global(.spotlight-input-mouse) .iconItem:global(.neutral):global(.spottable):focus .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-key) .iconItem:global(.neutral):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) .iconItem:global(.neutral):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.spotlight-input-touch) .iconItem:global(.neutral):global(.spottable):active .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-touch) .iconItem:global(.neutral):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast).bordered .content {
+  border-color: var(--semantic-color-stroke-white);
+}
+:global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast) .content {
+  background-color: var(--semantic-color-surface-default-placeholder);
+}
+:global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast) .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast) .label {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast).darkLabel .label {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast) .title {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast)[disabled] {
+  opacity: 0.3;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):focus:global(.focusRing),
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):focus:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):focus:global(.focusRing) .content,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):focus:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):active:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):active:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):focus .content,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):focus .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):active .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .iconItem:global(.neutral):global(.highContrast):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+.iconItem:global(.light).bordered .content {
+  border-color: var(--semantic-color-stroke-white);
+}
+.iconItem:global(.light) .content {
+  background-color: var(--semantic-color-surface-default-placeholder);
+}
+.iconItem:global(.light) .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+.iconItem:global(.light) .label {
+  color: var(--semantic-color-on-surface-white);
+}
+.iconItem:global(.light).darkLabel .label {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+.iconItem:global(.light) .title {
+  color: var(--semantic-color-on-background-main);
+}
+.iconItem:global(.light)[disabled] {
+  opacity: 0.3;
+}
+:global(.spotlight-input-key) .iconItem:global(.light):global(.spottable):focus:global(.focusRing),
+:global(.spotlight-input-mouse) .iconItem:global(.light):global(.spottable):focus:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-key) .iconItem:global(.light):global(.spottable):focus:global(.focusRing) .content,
+:global(.spotlight-input-mouse) .iconItem:global(.light):global(.spottable):focus:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-touch) .iconItem:global(.light):global(.spottable):active:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-touch) .iconItem:global(.light):global(.spottable):active:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-key) .iconItem:global(.light):global(.spottable):focus .content,
+:global(.spotlight-input-mouse) .iconItem:global(.light):global(.spottable):focus .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-key) .iconItem:global(.light):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) .iconItem:global(.light):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.spotlight-input-touch) .iconItem:global(.light):global(.spottable):active .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-touch) .iconItem:global(.light):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+.iconItem:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.iconItem:global(.game).bordered .content {
+  border-color: var(--semantic-color-stroke-white);
+}
+.iconItem:global(.game) .content {
+  background-color: var(--semantic-color-surface-default-placeholder);
+}
+.iconItem:global(.game) .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+.iconItem:global(.game) .label {
+  color: var(--semantic-color-on-surface-white);
+}
+.iconItem:global(.game).darkLabel .label {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+.iconItem:global(.game) .title {
+  color: var(--semantic-color-on-background-main);
+}
+.iconItem:global(.game)[disabled] {
+  opacity: 0.3;
+}
+:global(.spotlight-input-key) .iconItem:global(.game):global(.spottable):focus:global(.focusRing),
+:global(.spotlight-input-mouse) .iconItem:global(.game):global(.spottable):focus:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-key) .iconItem:global(.game):global(.spottable):focus:global(.focusRing) .content,
+:global(.spotlight-input-mouse) .iconItem:global(.game):global(.spottable):focus:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-touch) .iconItem:global(.game):global(.spottable):active:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-touch) .iconItem:global(.game):global(.spottable):active:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-key) .iconItem:global(.game):global(.spottable):focus .content,
+:global(.spotlight-input-mouse) .iconItem:global(.game):global(.spottable):focus .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-key) .iconItem:global(.game):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) .iconItem:global(.game):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.spotlight-input-touch) .iconItem:global(.game):global(.spottable):active .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-touch) .iconItem:global(.game):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.green) .iconItem:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .iconItem:global(.game).bordered .content {
+  border-color: var(--semantic-color-stroke-white);
+}
+:global(.green) .iconItem:global(.game) .content {
+  background-color: var(--semantic-color-surface-default-placeholder);
+}
+:global(.green) .iconItem:global(.game) .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.green) .iconItem:global(.game) .label {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.green) .iconItem:global(.game).darkLabel .label {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.green) .iconItem:global(.game) .title {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.green) .iconItem:global(.game)[disabled] {
+  opacity: 0.3;
+}
+:global(.spotlight-input-key) :global(.green) .iconItem:global(.game):global(.spottable):focus:global(.focusRing),
+:global(.spotlight-input-mouse) :global(.green) .iconItem:global(.game):global(.spottable):focus:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.green) .iconItem:global(.game):global(.spottable):focus:global(.focusRing) .content,
+:global(.spotlight-input-mouse) :global(.green) .iconItem:global(.game):global(.spottable):focus:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-touch) :global(.green) .iconItem:global(.game):global(.spottable):active:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.green) .iconItem:global(.game):global(.spottable):active:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-key) :global(.green) .iconItem:global(.game):global(.spottable):focus .content,
+:global(.spotlight-input-mouse) :global(.green) .iconItem:global(.game):global(.spottable):focus .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-key) :global(.green) .iconItem:global(.game):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.green) .iconItem:global(.game):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.spotlight-input-touch) :global(.green) .iconItem:global(.game):global(.spottable):active .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-touch) :global(.green) .iconItem:global(.game):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.orange) .iconItem:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .iconItem:global(.game).bordered .content {
+  border-color: var(--semantic-color-stroke-white);
+}
+:global(.orange) .iconItem:global(.game) .content {
+  background-color: var(--semantic-color-surface-default-placeholder);
+}
+:global(.orange) .iconItem:global(.game) .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.orange) .iconItem:global(.game) .label {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.orange) .iconItem:global(.game).darkLabel .label {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.orange) .iconItem:global(.game) .title {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.orange) .iconItem:global(.game)[disabled] {
+  opacity: 0.3;
+}
+:global(.spotlight-input-key) :global(.orange) .iconItem:global(.game):global(.spottable):focus:global(.focusRing),
+:global(.spotlight-input-mouse) :global(.orange) .iconItem:global(.game):global(.spottable):focus:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.orange) .iconItem:global(.game):global(.spottable):focus:global(.focusRing) .content,
+:global(.spotlight-input-mouse) :global(.orange) .iconItem:global(.game):global(.spottable):focus:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-touch) :global(.orange) .iconItem:global(.game):global(.spottable):active:global(.focusRing) {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.orange) .iconItem:global(.game):global(.spottable):active:global(.focusRing) .content {
+  transform: none;
+  outline: 0.25rem solid #e6e6e6;
+  outline-offset: 0.1875rem;
+}
+:global(.spotlight-input-key) :global(.orange) .iconItem:global(.game):global(.spottable):focus .content,
+:global(.spotlight-input-mouse) :global(.orange) .iconItem:global(.game):global(.spottable):focus .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-key) :global(.orange) .iconItem:global(.game):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.orange) .iconItem:global(.game):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-white);
+}
+:global(.spotlight-input-touch) :global(.orange) .iconItem:global(.game):global(.spottable):active .content {
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.spotlight-input-touch) :global(.orange) .iconItem:global(.game):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-white);
+}

package/IconItem/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "IconItem.js"
+}

package/IconItem/tests/IconItem-specs.js

@@ -0,0 +1,106 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _IconItem = require("../IconItem");
+var _jsxRuntime = require("react/jsx-runtime");
+describe('IconItem', function () {
+  test('should support `background` prop', function () {
+    var background = '#ffffff';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem.IconItemBase, {
+      background: background,
+      "data-testid": "iconitem",
+      icon: "star"
+    }));
+    var expected = 'rgb(255, 255, 255)';
+    var actual = _react.screen.getByTestId('iconitem').children[0].style;
+    expect(actual).toHaveProperty('background', expected);
+  });
+  test('should support `bordered` prop', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem.IconItemBase, {
+      bordered: true,
+      "data-testid": "iconitem"
+    }));
+    var expected = 'bordered';
+    var actual = _react.screen.getByTestId('iconitem');
+    expect(actual).toHaveClass(expected);
+  });
+  test('should support `children` prop', function () {
+    var Children = function Children() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "Test"
+      });
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem.IconItemBase, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Children, {})
+    }));
+    var expected = 'Test';
+    var actual = _react.screen.getByText(expected);
+    expect(actual).toHaveTextContent(expected);
+  });
+  test('should support `icon` prop', function () {
+    var icon = 'star';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem.IconItemBase, {
+      "data-testid": "iconitem",
+      icon: icon
+    }));
+    var expected = 983080; // decimal converted charCode of Unicode 'star' character
+    var actual = _react.screen.getByTestId('iconitem').textContent.codePointAt();
+    expect(actual).toBe(expected);
+  });
+  test('should support `image` prop', function () {
+    var imageSrc = 'imageSrc';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem.IconItemBase, {
+      image: {
+        src: imageSrc,
+        size: {
+          width: '100px',
+          height: '100px'
+        }
+      }
+    }));
+    var expected = imageSrc;
+    var actual = _react.screen.getAllByRole('img')[0].children.item(0);
+    expect(actual).toHaveAttribute('src', expected);
+  });
+  test('should support `label` prop', function () {
+    var label = 'label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem.IconItemBase, {
+      label: label
+    }));
+    var expected = label;
+    var actual = _react.screen.getByText(label);
+    expect(actual).toHaveTextContent(expected);
+  });
+  test('should support `labelOn` prop', function () {
+    var label = 'label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem.IconItemBase, {
+      "data-testid": "iconitem",
+      label: label,
+      labelOn: "focus"
+    }));
+    var expected = 'labelOnFocus';
+    var actual = _react.screen.getByTestId('iconitem');
+    expect(actual).toHaveClass(expected);
+  });
+  test('should support `title` prop', function () {
+    var title = 'title';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem.IconItemBase, {
+      title: title
+    }));
+    var expected = title;
+    var actual = _react.screen.getByText(title);
+    expect(actual).toHaveTextContent(expected);
+  });
+  test('should support `titleOn` prop', function () {
+    var title = 'title';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem.IconItemBase, {
+      "data-testid": "iconitem",
+      title: title,
+      titleOn: "focus"
+    }));
+    var expected = 'titleOnFocus';
+    var actual = _react.screen.getByTestId('iconitem');
+    expect(actual).toHaveClass(expected);
+  });
+});

package/Image/Image.d.ts

@@ -0,0 +1,60 @@
+// Type definitions for limestone/Image
+
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { ImageProps as ui_Image_ImageProps } from "@enact/ui/Image";
+import * as React from "react";
+
+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 ImageBaseProps extends ui_Image_ImageProps {
+  /**
+ * Called with a reference to the root component.
+ * 
+ * When using   , the  `ref`  prop is forwarded to this component
+as  `componentRef` .
+ */
+  componentRef?: object | Function;
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `image`  - The root component class for Image
+ */
+  css?: object;
+}
+/**
+ * A Limestone-styled image component without any behavior
+ */
+
+export class ImageBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ImageBaseProps>
+> {}
+
+export interface ImageDecoratorProps
+  extends limestone_Skinnable_SkinnableProps {}
+export function ImageDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & ImageDecoratorProps>;
+
+export interface ImageProps
+  extends Merge<ImageBaseProps, ImageDecoratorProps> {}
+/**
+ * A Limestone-styled image component
+ * ```
+<Image
+  src={{
+    'hd': 'https://dummyimage.com/64/e048e0/0011ff',
+    'fhd': 'https://dummyimage.com/128/e048e0/0011ff',
+    'uhd': 'https://dummyimage.com/256/e048e0/0011ff'
+  }}
+>
+```
+ */
+
+export class Image extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ImageProps>
+> {}
+
+export default Image;