@lightningjs/ui-components - npm Package Compare versions

Comparing version 2.20.4 to 2.20.5

index.js

@@ -19,8 +19,111 @@ /**
 
+// Utils
 export { default as utils } from './src/utils';
-export * from './src/components';
-export * from './src/globals';
-export * from './src/mixins';
-export * from './src/shaders';
-export * from './src/textures';
-export * from './src/docs/story-components';
+
+// Components
+export { default as Artwork } from './src/components/Artwork/Artwork';
+export { default as Badge } from './src/components/Badge/Badge';
+export { default as Base } from './src/components/Base/Base';
+export { default as Button } from './src/components/Button/Button';
+export { default as ButtonSmall } from './src/components/Button/ButtonSmall';
+export {
+  default as Card,
+  CardRadio,
+  CardSection,
+  CardTitle
+} from './src/components/Card';
+export {
+  default as CardContent,
+  CardContentHorizontal,
+  CardContentHorizontalLarge,
+  CardContentVertical,
+  CardContentVerticalSmall
+} from './src/components/CardContent';
+export { default as Checkbox } from './src/components/Checkbox/Checkbox';
+export { default as CheckboxSmall } from './src/components/Checkbox/CheckboxSmall';
+export { default as Column } from './src/components/Column/Column';
+export { default as Control } from './src/components/Control/Control';
+export { default as ControlSmall } from './src/components/Control/ControlSmall';
+export { default as ControlRow } from './src/components/ControlRow/ControlRow';
+export { default as FocusManager } from './src/components/FocusManager/FocusManager';
+export { default as Gradient } from './src/components/Gradient/Gradient';
+export { default as GridOverlay } from './src/components/GridOverlay/GridOverlay';
+export { default as Icon } from './src/components/Icon/Icon';
+export { default as InlineContent } from './src/components/InlineContent/InlineContent';
+export { default as Input } from './src/components/Input/Input';
+export { default as Key } from './src/components/Key/Key';
+export {
+  default as Keyboard,
+  KeyboardEmail,
+  KeyboardFullscreen,
+  KeyboardNumbers,
+  KeyboardQwerty,
+  KeyboardInput,
+  KeyboardSearch
+} from './src/components/Keyboard';
+export { default as Knob } from './src/components/Knob/Knob';
+export { default as Label } from './src/components/Label/Label';
+export {
+  default as ListItem,
+  ListItemPicker,
+  ListItemSlider
+} from './src/components/ListItem';
+export { default as Marquee } from './src/components/Marquee/Marquee';
+export { default as MetadataBase } from './src/components/MetadataBase/MetadataBase';
+export { default as MetadataCard } from './src/components/MetadataCard';
+export { default as MetadataCardContent } from './src/components/MetadataCardContent';
+export { default as MetadataTile } from './src/components/MetadataTile/MetadataTile';
+export { default as NavigationManager } from './src/components/NavigationManager';
+export { default as ProgressBar } from './src/components/ProgressBar/ProgressBar';
+export { default as Provider } from './src/components/Provider';
+export { default as Radio } from './src/components/Radio/Radio';
+export { default as RadioSmall } from './src/components/Radio/RadioSmall';
+export { default as Row } from './src/components/Row/Row';
+export { default as ScrollWrapper } from './src/components/ScrollWrapper/ScrollWrapper';
+export { default as Shadow } from './src/components/Shadow/Shadow';
+export { default as Slider } from './src/components/Slider/Slider';
+export { default as SliderLarge } from './src/components/Slider/SliderLarge';
+export { default as Surface } from './src/components/Surface/Surface';
+export { default as TabBar, Tab } from './src/components/TabBar';
+export { default as TextBox } from './src/components/TextBox/TextBox';
+export { default as Tile } from './src/components/Tile/Tile';
+export { default as TitleRow } from './src/components/TitleRow/TitleRow';
+export { default as Toggle } from './src/components/Toggle/Toggle';
+export { default as ToggleSmall } from './src/components/Toggle/ToggleSmall';
+export { default as Tooltip } from './src/components/Tooltip/Tooltip';
+
+// Globals
+export { default as context } from './src/globals/context';
+export { updateManager } from './src/globals/global-update-manager/GlobalUpdateManager';
+export { default as pool } from './src/globals/pool';
+
+// Mixins
+export {
+  default as withAnnouncer,
+  generateAbbrevConfig,
+  defaultAbbrevConfig
+} from './src/mixins/withAnnouncer';
+export { default as Speech } from './src/mixins/withAnnouncer/Speech';
+export { default as withClassCache } from './src/mixins/withClassCache';
+export { default as withHandleKey } from './src/mixins/withHandleKey';
+export { default as withLayout } from './src/mixins/withLayout';
+export { default as withMarqueeSync } from './src/mixins/withMarqueeSync';
+export { default as withSelections } from './src/mixins/withSelections';
+export { default as withThemeStyles } from './src/mixins/withThemeStyles';
+export { default as withTags } from './src/mixins/withTags';
+export { default as withUpdates } from './src/mixins/withUpdates';
+export { default as withEditItems } from './src/mixins/withEditItems';
+export { default as withExtensions } from './src/mixins/withExtensions';
+
+// Shaders
+export { default as FadeShader } from './src/shaders/FadeShader';
+
+// Textures
+export { default as LinearGradient } from './src/textures/LinearGradient';
+export { default as Circle } from './src/textures/Circle';
+export { default as Arrow } from './src/textures/Arrow';
+export { default as Bubble } from './src/textures/Bubble';
+export { default as Line } from './src/textures/Line';
+
+// Storybook
+export { default as SignalButton } from './src/docs/story-components/SignalButton';

package.json

 {
   "name": "@lightningjs/ui-components",
-  "version": "2.20.4",
+  "version": "2.20.5",
   "description": "A shared library of helpful LightningJS components utilizing theme files to easily customize for any LightningJS application.",
@@ -30,8 +30,10 @@ "repository": {
   "peerDependencies": {
-    "@lightningjs/core": "2.11.0"
+    "@lightningjs/core": ">=2.0.0 <=2.11.0"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
     "@lightningjs/ui-components-test-utils": "^1.5.0",
     "@mdx-js/react": "^1.6.22",
+    "@rollup/plugin-babel": "^6.0.4",
     "babel-jest": "^29.0.3",
@@ -38,0 +40,0 @@ "babel-loader": "^8.2.5",

src/components/Artwork/Artwork.js

@@ -23,4 +23,4 @@ /**
 import Gradient from '../Gradient';
-import * as styles from './Artwork.styles.js';
-import { context } from '../../globals';
+import * as styles from './Artwork.styles';
+import context from '../../globals/context/index';
 import CustomImageTexture from '../../textures/CustomImageTexture';
@@ -27,0 +27,0 @@

src/components/Artwork/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Artwork.js';
+export { default as default } from './Artwork';

src/components/Badge/Badge.js

@@ -22,3 +22,3 @@ /**
 import { getHexColor } from '../../utils';
-import * as styles from './Badge.styles.js';
+import * as styles from './Badge.styles';
 import lng from '@lightningjs/core';
@@ -25,0 +25,0 @@

src/components/Badge/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Badge.js';
+export { default as default } from './Badge';

src/components/Base/Base.js

@@ -20,11 +20,9 @@ /**
 import lng from '@lightningjs/core';
-import { context } from '../../globals';
-import {
-  withUpdates,
-  withTags,
-  withHandleKey,
-  withLayout,
-  withThemeStyles,
-  withExtensions
-} from '../../mixins';
+import context from '../../globals/context/index';
+import withUpdates from '../../mixins/withUpdates';
+import withTags from '../../mixins/withTags';
+import withHandleKey from '../../mixins/withHandleKey';
+import withLayout from '../../mixins/withLayout';
+import withThemeStyles from '../../mixins/withThemeStyles';
+import withExtensions from '../../mixins/withExtensions';
 import { isComponentOnScreen } from '../../utils';
@@ -31,0 +29,0 @@

src/components/Base/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Base.js';
+export { default as default } from './Base';

src/components/Button/Button.js

@@ -19,3 +19,3 @@ /**
 
-import * as styles from './Button.styles.js';
+import * as styles from './Button.styles';
 import Row from '../Row';
@@ -22,0 +22,0 @@ import Surface from '../Surface';

src/components/Button/ButtonSmall.js

@@ -20,3 +20,3 @@ /**
 import Button from './Button';
-import * as styles from './ButtonSmall.styles.js';
+import * as styles from './ButtonSmall.styles';
 
@@ -23,0 +23,0 @@ export default class ButtonSmall extends Button {

src/components/Button/index.js

@@ -19,3 +19,3 @@ /**
 
-export { default as default } from './Button.js';
-export { default as ButtonSmall } from './ButtonSmall.js';
+export { default as default } from './Button';
+export { default as ButtonSmall } from './ButtonSmall';

src/components/Card/Card.js

@@ -19,3 +19,3 @@ /**
 
-import * as styles from './Card.styles.js';
+import * as styles from './Card.styles';
 import TextBox from '../TextBox';
@@ -22,0 +22,0 @@ import Surface from '../Surface';

src/components/Card/Card.stories.js

@@ -21,3 +21,3 @@ /**
 import { createModeControl } from '../../docs/utils';
-import { default as CardComponent } from './Card.js';
+import { default as CardComponent } from './Card';
 
@@ -24,0 +24,0 @@ export default {

src/components/Card/CardRadio.js

@@ -21,3 +21,3 @@ /**
 import TextBox from '../TextBox';
-import * as styles from './CardRadio.styles.js';
+import * as styles from './CardRadio.styles';
 import Radio from '../Radio';
@@ -24,0 +24,0 @@

src/components/Card/CardRadio.stories.js

@@ -20,4 +20,4 @@ /**
 import lng from '@lightningjs/core';
-import { default as CardRadioComponent } from './CardRadio.js';
-import { Radio as RadioStory } from '../Radio/Radio.stories.js';
+import { default as CardRadioComponent } from './CardRadio';
+import { Radio as RadioStory } from '../Radio/Radio.stories';
 import { createModeControl, generateSubStory } from '../../docs/utils';
@@ -24,0 +24,0 @@

src/components/Card/CardSection.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import { default as CardSectionComponent } from './CardSection.js';
+import { default as CardSectionComponent } from './CardSection';
 import sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';
@@ -23,0 +23,0 @@ import { createModeControl } from '../../docs/utils';

src/components/Card/CardTitle.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import { default as CardTitleComponent } from './CardTitle.js';
+import { default as CardTitleComponent } from './CardTitle';
 import { createModeControl } from '../../docs/utils';
@@ -23,0 +23,0 @@

src/components/CardContent/CardContent.js

@@ -67,3 +67,2 @@ /**
     this._updateTile();
-    this._updateRadius();
     this._updateMetadata();
@@ -80,2 +79,16 @@ super._update();
     let h = this.style.expandedHeight;
+    const radius =
+      Array.isArray(this.style.radius) && this.style.radius.length === 4
+        ? this.style.radius
+        : Array(4).fill(this.style.radius);
+
+    let tileRadius = radius;
+
+    if (!this._collapse) {
+      tileRadius =
+        this._orientation === 'horizontal'
+          ? [radius[0], 0, 0, radius[3]]
+          : [radius[0], radius[1], 0, 0];
+    }
+
     if (this._orientation !== 'horizontal') {
@@ -98,2 +111,6 @@ w = this.style.expandedWidth;
       ...tile,
+      style: {
+        ...(tile?.style || {}),
+        radius: tileRadius
+      },
       persistentMetadata: true,
@@ -113,2 +130,7 @@ alpha: this._shouldShowTile ? 1 : 0
     };
+
+    if (this.style.marqueeOnFocus) {
+      metadataPatch.marquee = this._isFocusedMode;
+    }
+
     if (!this._Metadata) {
@@ -135,19 +157,2 @@ metadataPatch.type = MetadataCardContent;
 
-  _updateRadius() {
-    const radius =
-      Array.isArray(this.style.radius) && this.style.radius.length === 4
-        ? this.style.radius
-        : Array(4).fill(this.style.radius);
-    let tileRadius = radius;
-
-    if (!this._collapse) {
-      tileRadius =
-        this._orientation === 'horizontal'
-          ? [radius[0], 0, 0, radius[3]]
-          : [radius[0], radius[1], 0, 0];
-    }
-
-    this._Tile.patch({ style: { radius: tileRadius } });
-  }
-
   _getSrc() {
@@ -154,0 +159,0 @@ return (

src/components/CardContent/CardContentHorizontal.js

@@ -19,3 +19,3 @@ /**
 
-import * as styles from './CardContent.styles.js';
+import * as styles from './CardContent.styles';
 import CardContent from './CardContent';
@@ -22,0 +22,0 @@

src/components/CardContent/CardContentVertical.styles.js

@@ -28,3 +28,4 @@ /**
     theme.spacer.xxs,
-  metadata: { descriptionTextStyle: { maxLines: 3 } }
+  metadata: { descriptionTextStyle: { maxLines: 3 } },
+  marqueeOnFocus: true
 });

src/components/CardContent/CardContentVerticalSmall.js

@@ -34,3 +34,2 @@ /**
       ...metadata,
-      marquee: this._isFocusedMode,
       details: undefined,
@@ -37,0 +36,0 @@ provider: undefined

src/components/Checkbox/Checkbox.js

@@ -22,3 +22,3 @@ /**
 import Base from '../Base';
-import * as styles from './Checkbox.styles.js';
+import * as styles from './Checkbox.styles';
 
@@ -25,0 +25,0 @@ export default class Checkbox extends Base {

src/components/Checkbox/CheckboxSmall.js

@@ -20,3 +20,3 @@ /**
 import Checkbox from './Checkbox';
-import * as styles from './CheckboxSmall.styles.js';
+import * as styles from './CheckboxSmall.styles';
 
@@ -23,0 +23,0 @@ export default class CheckboxSmall extends Checkbox {

src/components/Checkbox/CheckboxSmall.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import { default as CheckboxSmallComponent } from './CheckboxSmall.js';
+import { default as CheckboxSmallComponent } from './CheckboxSmall';
 import { createModeControl } from '../../docs/utils';
@@ -23,0 +23,0 @@

src/components/Checkbox/CheckboxSmall.test.js

@@ -20,3 +20,3 @@ /**
 import { makeCreateComponent } from '@lightningjs/ui-components-test-utils';
-import CheckboxSmall from './CheckboxSmall.js';
+import CheckboxSmall from './CheckboxSmall';
 
@@ -23,0 +23,0 @@ const createCheckboxSmall = makeCreateComponent(CheckboxSmall);

src/components/Checkbox/index.js

@@ -19,3 +19,3 @@ /**
 
-export { default as default } from './Checkbox.js';
-export { default as CheckBoxSmall } from './Checkbox.js';
+export { default as default } from './Checkbox';
+export { default as CheckBoxSmall } from './Checkbox';

src/components/Column/Column.js

@@ -21,3 +21,3 @@ /**
 import { getY } from '../../utils';
-import * as styles from './Column.styles.js';
+import * as styles from './Column.styles';
 
@@ -24,0 +24,0 @@ export default class Column extends NavigationManager {

src/components/Column/Column.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import { flatten, getWidthByUpCount } from '../../utils';
@@ -23,0 +23,0 @@ import Row from '../Row';

src/components/Column/Column.test.js

@@ -22,3 +22,3 @@ /**
 import lng from '@lightningjs/core';
-import { withThemeStyles } from '../../mixins';
+import withThemeStyles from '../../mixins/withThemeStyles';
 import {
@@ -25,0 +25,0 @@ completeAnimation,

src/components/Column/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Column.js';
+export { default as default } from './Column';

src/components/Control/Control.js

@@ -21,3 +21,3 @@ /**
 import Icon from '../Icon';
-import * as styles from './Control.styles.js';
+import * as styles from './Control.styles';
 
@@ -24,0 +24,0 @@ export default class Control extends ButtonSmall {

src/components/Control/Control.test.js

@@ -19,3 +19,3 @@ /**
 
-import Control from './Control.js';
+import Control from './Control';
 import Icon from '../Icon';
@@ -22,0 +22,0 @@ import {

src/components/Control/ControlSmall.js

@@ -20,3 +20,3 @@ /**
 import Control from './Control';
-import * as styles from './ControlSmall.styles.js';
+import * as styles from './ControlSmall.styles';
 
@@ -23,0 +23,0 @@ export default class ControlSmall extends Control {

src/components/Control/ControlSmall.styles.js

@@ -19,3 +19,3 @@ /**
 
-import { base as ControlStyle } from './Control.styles.js';
+import { base as ControlStyle } from './Control.styles';
 
@@ -22,0 +22,0 @@ export const base = theme => {

src/components/Control/ControlSmall.test.js

@@ -22,3 +22,3 @@ /**
 
-import { base } from './ControlSmall.styles.js';
+import { base } from './ControlSmall.styles';
 import baseTheme from '@lightningjs/ui-components-theme-base';
@@ -25,0 +25,0 @@

src/components/Control/index.js

@@ -19,3 +19,3 @@ /**
 
-export { default as default } from './Control.js';
-export { default as ControlSmall } from './ControlSmall.js';
+export { default as default } from './Control';
+export { default as ControlSmall } from './ControlSmall';

src/components/FocusManager/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './FocusManager.js';
+export { default as default } from './FocusManager';

src/components/Gradient/Gradient.js

@@ -21,3 +21,3 @@ /**
 import Base from '../Base';
-import * as styles from './Gradient.styles.js';
+import * as styles from './Gradient.styles';
 
@@ -24,0 +24,0 @@ export default class Gradient extends Base {

src/components/Gradient/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Gradient.js';
+export { default as default } from './Gradient';

src/components/GridOverlay/GridOverlay.js

@@ -20,3 +20,3 @@ /**
 import Base from '../Base';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import Column from '../Column';
@@ -23,0 +23,0 @@ import Row from '../Row';

src/components/GridOverlay/GridOverlay.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import { default as GridOverlayComponent } from '.';
@@ -23,0 +23,0 @@

src/components/GridOverlay/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './GridOverlay.js';
+export { default as default } from './GridOverlay';

src/components/Icon/Icon.js

@@ -21,4 +21,4 @@ /**
 import Base from '../Base';
-import * as styles from './Icon.styles.js';
-import { context } from '../../globals';
+import * as styles from './Icon.styles';
+import context from '../../globals/context/index';
 import { getValidColor } from '../../utils';
@@ -25,0 +25,0 @@ import CustomImageTexture from '../../textures/CustomImageTexture';

src/components/Icon/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Icon.js';
+export { default as default } from './Icon';

src/components/InlineContent/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './InlineContent.js';
+export { default as default } from './InlineContent';

src/components/InlineContent/InlineContent.js

@@ -23,3 +23,3 @@ /**
 import Base from '../Base';
-import * as styles from './InlineContent.styles.js';
+import * as styles from './InlineContent.styles';
 
@@ -26,0 +26,0 @@ const isText = item => typeof item === 'string' || !!item.text;

src/components/InlineContent/InlineContent.test.js

@@ -28,3 +28,3 @@ /**
 import baseTheme from '@lightningjs/ui-components-theme-base';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import { jest } from '@jest/globals';
@@ -31,0 +31,0 @@ const lightningIcon = pathToDataURI(

src/components/Input/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Input.js';
+export { default as default } from './Input';

src/components/Input/Input.js

@@ -19,3 +19,3 @@ /**
 
-import * as styles from './Input.styles.js';
+import * as styles from './Input.styles';
 import Button from '../Button';
@@ -22,0 +22,0 @@ import TextBox from '../TextBox';

src/components/Key/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Key.js';
+export { default as default } from './Key';

src/components/Key/Key.js

@@ -20,3 +20,3 @@ /**
 import Button from '../Button';
-import * as styles from './Key.styles.js';
+import * as styles from './Key.styles';
 import Icon from '../Icon';
@@ -23,0 +23,0 @@

src/components/Keyboard/Keyboard.js

@@ -19,3 +19,3 @@ /**
 
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import Base from '../Base';
@@ -25,3 +25,3 @@ import Key from '../Key';
 import Column from '../Column';
-import * as styles from './Keyboard.styles.js';
+import * as styles from './Keyboard.styles';
 
@@ -156,22 +156,20 @@ const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1);
       if (typeof keyProps === 'object') {
-        // keyId is used to account for localization
-        const iconName = keyProps.keyId || keyProps.title;
-        const keyIcon =
-          this.style.keyProps?.[keyboard]?.[iconName] ||
-          this.style.keyProps?.[iconName];
+        // keyId is used to account for style overrides on individual keys,
+        // icon updates, and localization
+        const keyName = keyProps.keyId || keyProps.title;
+        const keyOverrides =
+          this.style.keyProps?.[keyboard]?.[keyName] ||
+          this.style.keyProps?.[keyName] ||
+          {};
+        const keyPatch = { ...key, ...keyProps, ...keyOverrides };
 
-        if (keyIcon && keyIcon.icon) {
-          return {
-            ...key,
-            ...keyProps,
-            ...this.style.keyProps?.[iconName],
-            style: {
-              iconStyle: {
-                ...keyIcon.iconStyle
-              }
-            },
-            size: keyIcon.size || keyProps.size
+        if (keyOverrides?.icon) {
+          keyPatch.style = {
+            ...keyOverrides.style,
+            iconStyle: {
+              ...keyOverrides.iconStyle
+            }
           };
         }
-        return { ...key, ...keyProps };
+        return keyPatch;
       }
@@ -178,0 +176,0 @@ return { ...key, title: keyProps };

src/components/Keyboard/Keyboard.stories.js

@@ -21,3 +21,3 @@ /**
 import { createModeControl } from '../../docs/utils';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import utils from '../../utils';
@@ -24,0 +24,0 @@ import { default as KeyboardComponent } from './Keyboard';

src/components/Keyboard/Keyboard.test.js

@@ -21,8 +21,8 @@ /**
 import Keyboard from '.';
-import KeyboardInput from './KeyboardInput.js';
-import KeyboardQwerty from './KeyboardQwerty.js';
-import KeyboardNumbers from './KeyboardNumbers.js';
-import KeyboardFullscreen from './KeyboardFullscreen.js';
-import KeyboardEmail from './KeyboardEmail.js';
-import KeyboardSearch from './KeyboardSearch.js';
+import KeyboardInput from './KeyboardInput';
+import KeyboardQwerty from './KeyboardQwerty';
+import KeyboardNumbers from './KeyboardNumbers';
+import KeyboardFullscreen from './KeyboardFullscreen';
+import KeyboardEmail from './KeyboardEmail';
+import KeyboardSearch from './KeyboardSearch';
 const createKeyboard = makeCreateComponent(Keyboard);
@@ -29,0 +29,0 @@ const createKeyboardSearch = makeCreateComponent(KeyboardSearch);

src/components/Keyboard/KeyboardEmail.js

@@ -20,3 +20,3 @@ /**
 import Keyboard from './Keyboard';
-import * as styles from './Keyboard.styles.js';
+import * as styles from './Keyboard.styles';
 
@@ -23,0 +23,0 @@ export default class KeyboardEmail extends Keyboard {

src/components/Keyboard/KeyboardEmail.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import utils from '../../utils';
@@ -23,0 +23,0 @@ import { default as KeyboardEmailComponent } from './KeyboardEmail';

src/components/Keyboard/KeyboardFullscreen.js

@@ -20,3 +20,3 @@ /**
 import Keyboard from './Keyboard';
-import * as styles from './Keyboard.styles.js';
+import * as styles from './Keyboard.styles';
 
@@ -23,0 +23,0 @@ export default class KeyboardFullScreen extends Keyboard {

src/components/Keyboard/KeyboardFullscreen.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import utils from '../../utils';
@@ -23,0 +23,0 @@ import { default as KeyboardFullscreenComponent } from './KeyboardFullscreen';

src/components/Keyboard/KeyboardInput.js

@@ -23,3 +23,3 @@ /**
 import Column from '../Column';
-import * as styles from './Keyboard.styles.js';
+import * as styles from './Keyboard.styles';
 
@@ -26,0 +26,0 @@ export default class KeyboardInput extends Base {

src/components/Keyboard/KeyboardInput.stories.js

@@ -21,3 +21,3 @@ /**
 import { createModeControl, generateSubStory } from '../../docs/utils';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import utils from '../../utils';
@@ -24,0 +24,0 @@ import Icon from '../Icon';

src/components/Keyboard/KeyboardNumbers.js

@@ -20,3 +20,3 @@ /**
 import Keyboard from './Keyboard';
-import * as styles from './Keyboard.styles.js';
+import * as styles from './Keyboard.styles';
 
@@ -23,0 +23,0 @@ export default class KeyboardNumbers extends Keyboard {

src/components/Keyboard/KeyboardNumbers.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import utils from '../../utils';
@@ -23,0 +23,0 @@ import { default as KeyboardNumbersComponent } from './KeyboardNumbers';

src/components/Keyboard/KeyboardQwerty.js

@@ -20,3 +20,3 @@ /**
 import Keyboard from './Keyboard';
-import * as styles from './Keyboard.styles.js';
+import * as styles from './Keyboard.styles';
 
@@ -23,0 +23,0 @@ export default class KeyboardQwerty extends Keyboard {

src/components/Keyboard/KeyboardQwerty.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import utils from '../../utils';
@@ -23,0 +23,0 @@ import { default as KeyboardQwertyComponent } from './KeyboardQwerty';

src/components/Keyboard/KeyboardSearch.js

@@ -20,3 +20,3 @@ /**
 import Keyboard from './Keyboard';
-import * as styles from './Keyboard.styles.js';
+import * as styles from './Keyboard.styles';
 
@@ -44,5 +44,19 @@ export default class KeyboardSearch extends Keyboard {
         ['S', 'T', 'U', 'V', 'W', 'X'],
-        ['Y', 'Z', '1', '2', '3', '4'],
-        ['5', '6', '7', '8', '9', '0'],
         [
+          'Y',
+          'Z',
+          { title: '1', keyId: 'number' },
+          { title: '2', keyId: 'number' },
+          { title: '3', keyId: 'number' },
+          { title: '4', keyId: 'number' }
+        ],
+        [
+          { title: '5', keyId: 'number' },
+          { title: '6', keyId: 'number' },
+          { title: '7', keyId: 'number' },
+          { title: '8', keyId: 'number' },
+          { title: '9', keyId: 'number' },
+          { title: '0', keyId: 'number' }
+        ],
+        [
           {
@@ -49,0 +63,0 @@ title: 'Space',

src/components/Keyboard/KeyboardSearch.stories.js

@@ -20,4 +20,2 @@ /**
 import lng from '@lightningjs/core';
-import { context } from '../../globals';
-import utils from '../../utils';
 import { default as KeyboardSearchComponent } from './KeyboardSearch';
@@ -35,6 +33,4 @@ import { Keyboard } from './Keyboard.stories';
         Keyboard: {
-          type: KeyboardSearchComponent,
-          defaultFormat: 'uppercase'
-        },
-        w: utils.getWidthByUpCount(context.theme, 3)
+          type: KeyboardSearchComponent
+        }
       };
@@ -41,0 +37,0 @@ }

src/components/Knob/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Knob.js';
+export { default as default } from './Knob';

src/components/Knob/Knob.js

@@ -20,3 +20,3 @@ /**
 import Base from '../Base';
-import * as styles from './Knob.styles.js';
+import * as styles from './Knob.styles';
 import lng from '@lightningjs/core';
@@ -23,0 +23,0 @@

src/components/Label/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Label.js';
+export { default as default } from './Label';

src/components/Label/Label.js

@@ -21,3 +21,3 @@ /**
 import Base from '../Base';
-import * as styles from './Label.styles.js';
+import * as styles from './Label.styles';
 
@@ -24,0 +24,0 @@ export default class Label extends Base {

src/components/ListItem/ListItem.js

@@ -19,3 +19,3 @@ /**
 
-import * as styles from './ListItem.styles.js';
+import * as styles from './ListItem.styles';
 import Button from '../Button';
@@ -22,0 +22,0 @@ import TextBox from '../TextBox';

src/components/ListItem/ListItemPicker.js

@@ -20,3 +20,3 @@ /**
 import ListItem from './ListItem';
-import * as styles from './ListItemPicker.styles.js';
+import * as styles from './ListItemPicker.styles';
 import Marquee from '../Marquee';
@@ -23,0 +23,0 @@ import Icon from '../Icon';

src/components/ListItem/ListItemPicker.test.js

@@ -19,3 +19,3 @@ /**
 
-import ListItemPicker from './ListItemPicker.js';
+import ListItemPicker from './ListItemPicker';
 import { makeCreateComponent } from '@lightningjs/ui-components-test-utils';
@@ -22,0 +22,0 @@

src/components/ListItem/ListItemSlider.js

@@ -21,3 +21,3 @@ /**
 import ListItem from './ListItem';
-import * as styles from './ListItemSlider.styles.js';
+import * as styles from './ListItemSlider.styles';
 import TextBox from '../TextBox';
@@ -24,0 +24,0 @@

src/components/ListItem/NestedSlider.js

@@ -19,3 +19,3 @@ /**
 
-import * as styles from './NestedSlider.styles.js';
+import * as styles from './NestedSlider.styles';
 import Slider from '../Slider';
@@ -22,0 +22,0 @@

src/components/Marquee/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Marquee.js';
+export { default as default } from './Marquee';

src/components/Marquee/Marquee.js

@@ -19,4 +19,4 @@ /**
 
-import * as styles from './Marquee.styles.js';
-import { FadeShader } from '../../shaders';
+import * as styles from './Marquee.styles';
+import FadeShader from '../../shaders/FadeShader';
 import utils from '../../utils';
@@ -23,0 +23,0 @@ import Base from '../Base';

src/components/Marquee/Marquee.stories.js

@@ -22,3 +22,3 @@ /**
 import InlineContent from '../InlineContent';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 
@@ -25,0 +25,0 @@ export default {

src/components/MetadataBase/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './MetadataBase.js';
+export { default as default } from './MetadataBase';

src/components/MetadataBase/MetadataBase.js

@@ -22,4 +22,4 @@ /**
 import TextBox from '../TextBox';
-import { FadeShader } from '../../shaders';
-import { withMarqueeSync } from '../../mixins';
+import FadeShader from '../../shaders/FadeShader';
+import withMarqueeSync from '../../mixins/withMarqueeSync';
 import * as styles from './MetadataBase.styles';
@@ -26,0 +26,0 @@

src/components/MetadataBase/MetadataBase.test.js

@@ -20,3 +20,3 @@ /**
 import { makeCreateComponent } from '@lightningjs/ui-components-test-utils';
-import MetadataBase from './MetadataBase.js';
+import MetadataBase from './MetadataBase';
 import { jest } from '@jest/globals';
@@ -23,0 +23,0 @@

src/components/MetadataCardContent/MetadataCardContent.js

@@ -22,4 +22,4 @@ /**
 import Provider from '../Provider';
-import { FadeShader } from '../../shaders';
-import * as styles from './MetadataCardContent.styles.js';
+import FadeShader from '../../shaders/FadeShader';
+import * as styles from './MetadataCardContent.styles';
 
@@ -26,0 +26,0 @@ export default class MetadataCardContent extends MetadataBase {

src/components/MetadataTile/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './MetadataTile.js';
+export { default as default } from './MetadataTile';

src/components/MetadataTile/MetadataTile.js

@@ -20,3 +20,3 @@ /**
 import MetadataBase from '../MetadataBase';
-import * as styles from './MetadataTile.styles.js';
+import * as styles from './MetadataTile.styles';
 
@@ -23,0 +23,0 @@ export default class MetadataTile extends MetadataBase {

src/components/NavigationManager/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './NavigationManager.js';
+export { default as default } from './NavigationManager';

src/components/ProgressBar/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './ProgressBar.js';
+export { default as default } from './ProgressBar';

src/components/ProgressBar/ProgressBar.js

@@ -21,3 +21,3 @@ /**
 import Base from '../Base';
-import * as styles from './ProgressBar.styles.js';
+import * as styles from './ProgressBar.styles';
 
@@ -24,0 +24,0 @@ export default class ProgressBar extends Base {

src/components/ProgressBar/ProgressBar.test.js

@@ -19,3 +19,3 @@ /**
 
-import { base, tone } from './ProgressBar.styles.js';
+import { base, tone } from './ProgressBar.styles';
 import { jest } from '@jest/globals';
@@ -22,0 +22,0 @@ import { makeCreateComponent } from '@lightningjs/ui-components-test-utils';

src/components/Provider/Provider.js

@@ -24,3 +24,3 @@ /**
 import TextBox from '../TextBox';
-import * as styles from './Provider.styles.js';
+import * as styles from './Provider.styles';
 
@@ -27,0 +27,0 @@ export default class Provider extends Base {

src/components/Radio/index.js

@@ -19,3 +19,3 @@ /**
 
-export { default as default } from './Radio.js';
-export { default as RadioSmall } from './RadioSmall.js';
+export { default as default } from './Radio';
+export { default as RadioSmall } from './RadioSmall';

src/components/Radio/Radio.js

@@ -21,3 +21,3 @@ /**
 import lng from '@lightningjs/core';
-import * as styles from './Radio.styles.js';
+import * as styles from './Radio.styles';
 
@@ -24,0 +24,0 @@ export default class Radio extends Base {

src/components/Radio/RadioSmall.js

@@ -19,4 +19,4 @@ /**
 
-import Radio from './Radio.js';
-import * as styles from './RadioSmall.styles.js';
+import Radio from './Radio';
+import * as styles from './RadioSmall.styles';
 
@@ -23,0 +23,0 @@ export default class RadioSmall extends Radio {

src/components/Radio/RadioSmall.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import Radio from './RadioSmall.js';
+import Radio from './RadioSmall';
 import { createModeControl } from '../../docs/utils';
@@ -23,0 +23,0 @@

src/components/Radio/RadioSmall.test.js

@@ -20,3 +20,3 @@ /**
 import { makeCreateComponent } from '@lightningjs/ui-components-test-utils';
-import RadioSmall from './RadioSmall.js';
+import RadioSmall from './RadioSmall';
 
@@ -23,0 +23,0 @@ const createRadio = makeCreateComponent(RadioSmall);

src/components/Row/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Row.js';
+export { default as default } from './Row';

src/components/Row/Row.js

@@ -20,3 +20,3 @@ /**
 import NavigationManager from '../NavigationManager';
-import * as styles from './Row.styles.js';
+import * as styles from './Row.styles';
 import { getX } from '../../utils';
@@ -23,0 +23,0 @@

src/components/Row/Row.stories.js

@@ -23,3 +23,3 @@ /**
 import Column from '../Column';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import { createModeControl } from '../../docs/utils';
@@ -26,0 +26,0 @@ import { SignalButton } from '../../docs/story-components';

src/components/ScrollWrapper/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './ScrollWrapper.js';
+export { default as default } from './ScrollWrapper';

src/components/ScrollWrapper/ScrollSlider.js

@@ -20,3 +20,3 @@ /**
 import Slider from '../Slider';
-import * as styles from './ScrollSlider.styles.js';
+import * as styles from './ScrollSlider.styles';
 
@@ -23,0 +23,0 @@ export default class ScrollSlider extends Slider {

src/components/ScrollWrapper/ScrollSlider.styles.js

@@ -19,3 +19,3 @@ /**
 
-import { base as scrollWrapperBase } from './ScrollWrapper.styles.js';
+import { base as scrollWrapperBase } from './ScrollWrapper.styles';
 
@@ -22,0 +22,0 @@ export const base = theme => {

src/components/ScrollWrapper/ScrollSlider.test.js

@@ -23,3 +23,3 @@ /**
 } from '@lightningjs/ui-components-test-utils';
-import ScrollSlider from './ScrollSlider.js';
+import ScrollSlider from './ScrollSlider';
 
@@ -26,0 +26,0 @@ const createScrollSlider = makeCreateComponent(ScrollSlider);

src/components/ScrollWrapper/ScrollWrapper.js

@@ -21,3 +21,3 @@ /**
 import Base from '../Base';
-import * as styles from './ScrollWrapper.styles.js';
+import * as styles from './ScrollWrapper.styles';
 import TextBox from '../TextBox';
@@ -24,0 +24,0 @@ import ScrollSlider from './ScrollSlider';

src/components/ScrollWrapper/ScrollWrapper.stories.js

@@ -23,3 +23,3 @@ /**
 import { createModeControl } from '../../docs/utils';
-import TextBox from '../TextBox/TextBox.js';
+import TextBox from '../TextBox/TextBox';
 
@@ -26,0 +26,0 @@ const terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.

src/components/Shadow/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Shadow.js';
+export { default as default } from './Shadow';

src/components/Shadow/Shadow.js

@@ -21,3 +21,3 @@ /**
 import Base from '../Base';
-import * as styles from './Shadow.styles.js';
+import * as styles from './Shadow.styles';
 
@@ -24,0 +24,0 @@ export default class Shadow extends Base {

src/components/Slider/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Slider.js';
+export { default as default } from './Slider';

src/components/Slider/Slider.js

@@ -20,3 +20,3 @@ /**
 import Base from '../Base';
-import * as styles from './Slider.styles.js';
+import * as styles from './Slider.styles';
 import ProgressBar from '../ProgressBar';
@@ -23,0 +23,0 @@ import Icon from '../Icon';

src/components/Slider/SliderLarge.js

@@ -20,3 +20,3 @@ /**
 import Slider from './Slider';
-import * as styles from './SliderLarge.styles.js';
+import * as styles from './SliderLarge.styles';
 
@@ -23,0 +23,0 @@ export default class SliderLarge extends Slider {

src/components/Slider/SliderLarge.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import Slider from './SliderLarge.js';
+import Slider from './SliderLarge';
 import { createModeControl } from '../../docs/utils';
@@ -23,0 +23,0 @@ import TextBox from '../TextBox';

src/components/Slider/SliderLarge.test.js

@@ -23,3 +23,3 @@ /**
 } from '@lightningjs/ui-components-test-utils';
-import SliderLarge from './SliderLarge.js';
+import SliderLarge from './SliderLarge';
 import { jest } from '@jest/globals';
@@ -26,0 +26,0 @@

src/components/Surface/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Surface.js';
+export { default as default } from './Surface';

src/components/Surface/Surface.js

@@ -20,3 +20,3 @@ /**
 import Base from '../Base';
-import * as styles from './Surface.styles.js';
+import * as styles from './Surface.styles';
 import lng from '@lightningjs/core';
@@ -23,0 +23,0 @@

src/components/TabBar/Tab.js

@@ -22,3 +22,3 @@ /**
 import TextBox from '../TextBox';
-import * as styles from './Tab.styles.js';
+import * as styles from './Tab.styles';
 
@@ -25,0 +25,0 @@ export default class Tab extends Surface {

src/components/TabBar/Tab.test.js

@@ -20,3 +20,3 @@ /**
 import { makeCreateComponent } from '@lightningjs/ui-components-test-utils';
-import Tab from './Tab.js';
+import Tab from './Tab';
 
@@ -23,0 +23,0 @@ const iconPath = '../../assets/images/ic_lightning_white_32.png';

src/components/TabBar/TabBar.js

@@ -21,4 +21,4 @@ /**
 import Row from '../Row';
-import ContentSwitcher from './ContentSwitcher.js';
-import * as styles from './TabBar.styles.js';
+import ContentSwitcher from './ContentSwitcher';
+import * as styles from './TabBar.styles';
 
@@ -25,0 +25,0 @@ export default class TabBar extends Base {

src/components/TabBar/TabBar.stories.js

@@ -23,3 +23,3 @@ /**
 import Button from '../Button';
-import ButtonSmall from '../Button/ButtonSmall.js';
+import ButtonSmall from '../Button/ButtonSmall';
 import Icon from '../Icon';
@@ -31,4 +31,4 @@ import viewAllIcon from '../../assets/images/view_all.png';
 import Column from '../Column';
-import { context } from '../../globals';
-import Tab from './Tab.js';
+import context from '../../globals/context/index';
+import Tab from './Tab';
 import TabBarComponent from '.';
@@ -35,0 +35,0 @@

src/components/TextBox/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './TextBox.js';
+export { default as default } from './TextBox';

src/components/TextBox/TextBox.js

@@ -24,3 +24,3 @@ /**
 import Marquee from '../Marquee';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import utils from '../../utils';
@@ -27,0 +27,0 @@

src/components/TextBox/TextBox.test.js

@@ -22,3 +22,3 @@ /**
 import TextBox from '.';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 
@@ -25,0 +25,0 @@ import { getValidColor } from '../../utils';

src/components/Tile/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Tile.js';
+export { default as default } from './Tile';

src/components/Tile/Tile.stories.js

@@ -22,9 +22,9 @@ /**
 import { createModeControl, generateSubStory } from '../../docs/utils';
-import { Artwork as ArtworkStory } from '../Artwork/Artwork.stories.js';
-import { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories.js';
+import { Artwork as ArtworkStory } from '../Artwork/Artwork.stories';
+import { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories';
 import { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';
-import { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories.js';
-import { Label as LabelStory } from '../Label/Label.stories.js';
+import { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories';
+import { Label as LabelStory } from '../Label/Label.stories';
 import { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';
-import { Text as BadgeStory } from '../Badge/Badge.stories.js';
+import { Text as BadgeStory } from '../Badge/Badge.stories';
 import xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';
@@ -31,0 +31,0 @@

src/components/TitleRow/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './TitleRow.js';
+export { default as default } from './TitleRow';

src/components/TitleRow/TitleRow.js

@@ -22,3 +22,3 @@ /**
 
-import * as styles from './TitleRow.styles.js';
+import * as styles from './TitleRow.styles';
 
@@ -25,0 +25,0 @@ export default class TitleRow extends Row {

src/components/TitleRow/TitleRow.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import { Row as RowBasic } from '../Row/Row.stories.js';
+import { Row as RowBasic } from '../Row/Row.stories';
 import Tile from '../Tile';
@@ -23,0 +23,0 @@ import { default as TitleRowComponent } from '.';

src/components/Toggle/index.js

@@ -19,3 +19,3 @@ /**
 
-export { default as default } from './Toggle.js';
-export { default as ToggleSmall } from './ToggleSmall.js';
+export { default as default } from './Toggle';
+export { default as ToggleSmall } from './ToggleSmall';

src/components/Toggle/Toggle.js

@@ -21,3 +21,3 @@ /**
 import Base from '../Base';
-import * as styles from './Toggle.styles.js';
+import * as styles from './Toggle.styles';
 
@@ -24,0 +24,0 @@ export default class Toggle extends Base {

src/components/Toggle/Toggle.test.js

@@ -21,3 +21,3 @@ /**
 import Toggle from '.';
-import { withThemeStyles } from '../../mixins';
+import withThemeStyles from '../../mixins/withThemeStyles';
 import { jest } from '@jest/globals';
@@ -24,0 +24,0 @@

src/components/Toggle/ToggleSmall.js

@@ -19,4 +19,4 @@ /**
 
-import Toggle from './Toggle.js';
-import * as styles from './ToggleSmall.styles.js';
+import Toggle from './Toggle';
+import * as styles from './ToggleSmall.styles';
 
@@ -23,0 +23,0 @@ export default class ToggleSmall extends Toggle {

src/components/Tooltip/index.js

@@ -19,2 +19,2 @@ /**
 
-export { default as default } from './Tooltip.js';
+export { default as default } from './Tooltip';

src/components/Tooltip/Tooltip.js

@@ -19,6 +19,6 @@ /**
 
-import { Bubble } from '../../textures';
+import Bubble from '../../textures/Bubble';
 import TextBox from '../TextBox';
 import Base from '../Base';
-import * as styles from './Tooltip.styles.js';
+import * as styles from './Tooltip.styles';
 
@@ -25,0 +25,0 @@ export default class Tooltip extends Base {

src/docs/ThemingFoundations.stories.js

@@ -21,3 +21,7 @@ /**
 import context from '../globals/context';
-import { Base, Column, TextBox, Tile, Button } from '../components';
+import Base from '../components/Base/Base';
+import Column from '../components/Column/Column';
+import TextBox from '../components/TextBox/TextBox';
+import Tile from '../components/Tile/Tile';
+import Button from '../components/Button/Button';
 import tileImage from '../assets/images/tile-image.png';
@@ -24,0 +28,0 @@

src/globals/context/fonts.js

@@ -19,3 +19,3 @@ /**
 
-import logger from './logger.js';
+import logger from './logger';
 
@@ -22,0 +22,0 @@ let customFontFaces = [];

src/globals/context/index.js

@@ -20,6 +20,6 @@ /**
 import { capitalizeFirstLetter } from '../../utils';
-import logger from './logger.js';
-import metrics from './metrics.js';
-import events from './events.js';
-import themeManager from './theme-manager.js';
+import logger from './logger';
+import metrics from './metrics';
+import events from './events';
+import themeManager from './theme-manager';
 
@@ -26,0 +26,0 @@ /**

src/globals/context/metrics.js

@@ -19,3 +19,3 @@ /**
 
-import logger from './logger.js';
+import logger from './logger';
 class Metrics {
@@ -22,0 +22,0 @@ constructor() {

src/globals/context/theme-manager.js

@@ -24,8 +24,8 @@ /**
   getValidColor
-} from '../../utils/index.js';
+} from '../../utils/index';
 import baseTheme from '@lightningjs/ui-components-theme-base';
-import logger from './logger.js';
-import events from './events.js';
-import { fontLoader, cleanupFonts } from './fonts.js';
-import { THEME_KEY_REPLACER } from './constants.js';
+import logger from './logger';
+import events from './events';
+import { fontLoader, cleanupFonts } from './fonts';
+import { THEME_KEY_REPLACER } from './constants';
 
@@ -32,0 +32,0 @@ const merge = {

src/globals/global-update-manager/GlobalUpdateManager.test.js

@@ -20,3 +20,3 @@ /**
 import context from '../context';
-import { updateManager } from './GlobalUpdateManager.js';
+import { updateManager } from './GlobalUpdateManager';
 import { nextTick } from '@lightningjs/ui-components-test-utils';
@@ -23,0 +23,0 @@ import { jest } from '@jest/globals';

src/mixins/withAnnouncer/index.js

@@ -19,7 +19,7 @@ /**
 
-import Speech from './Speech.js';
-import { translateAbbrev } from './abbreviations.js';
+import Speech from './Speech';
+import { translateAbbrev } from './abbreviations';
 import { debounce } from '../../utils';
 
-export { generateAbbrevConfig, defaultAbbrevConfig } from './abbreviations.js';
+export { generateAbbrevConfig, defaultAbbrevConfig } from './abbreviations';
 
@@ -26,0 +26,0 @@ const fiveMinutes = 300 * 1000;

src/mixins/withAnnouncer/Speech.test.js

@@ -21,3 +21,3 @@ /**
 
-import Speech from './Speech.js';
+import Speech from './Speech';
 import { jest } from '@jest/globals';
@@ -24,0 +24,0 @@

src/mixins/withAnnouncer/withAnnouncer.stories.js

@@ -21,3 +21,5 @@ /**
 import withAnnouncer, { defaultAbbrevConfig } from '.';
-import { Column, Row, Button } from '../../components';
+import Column from '../../components/Column/Column';
+import Row from '../../components/Row/Row';
+import Button from '../../components/Button/Button';
 
@@ -24,0 +26,0 @@ export default {

src/mixins/withEditItems/withEditItems.stories.js

@@ -20,3 +20,5 @@ /**
 import lng from '@lightningjs/core';
-import { Button, TextBox, Row } from '../../components';
+import Button from '../../components/Button/Button';
+import TextBox from '../../components/TextBox/TextBox';
+import Row from '../../components/Row/Row';
 import { default as withEditItemsMixin } from '.';
@@ -27,3 +29,3 @@
  */
-import * as RowProps from '../../components/Row/Row.stories.js';
+import * as RowProps from '../../components/Row/Row.stories';
 export default {
@@ -30,0 +32,0 @@ title: 'Utilities/withEditItems',

src/mixins/withEditItems/withEditItems.test.js

@@ -21,3 +21,4 @@ /**
 import withEditItems from '.';
-import { Button, Row } from '../../components';
+import Button from '../../components/Button';
+import Row from '../../components/Row';
 import { jest } from '@jest/globals';
@@ -24,0 +25,0 @@

src/mixins/withExtensions/index.js

@@ -19,3 +19,3 @@ /**
 
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 
@@ -22,0 +22,0 @@ const SUFFIX = '__original';

src/mixins/withExtensions/withExtensions.test.js

@@ -22,3 +22,3 @@ /**
 import withExtensions from '.';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import { jest } from '@jest/globals';
@@ -25,0 +25,0 @@

src/mixins/withHandleKey/index.js

@@ -19,3 +19,3 @@ /**
 
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 
@@ -22,0 +22,0 @@ export default function withHandleKey(Base) {

src/mixins/withHandleKey/withHandleKey.stories.js

@@ -20,4 +20,5 @@ /**
 import lng from '@lightningjs/core';
-import { Tile, Row } from '../../components';
-import { context } from '../../globals';
+import Tile from '../../components/Tile/Tile';
+import Row from '../../components/Row/Row';
+import context from '../../globals/context/index';
 import withHandleKeyMixin from '.';
@@ -24,0 +25,0 @@

src/mixins/withHandleKey/withHandleKey.test.js

@@ -26,3 +26,3 @@ /**
 } from '@lightningjs/ui-components-test-utils';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import withHandleKey from '.';
@@ -29,0 +29,0 @@

src/mixins/withLayout/index.js

@@ -19,3 +19,3 @@ /**
 
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 import { stringifyCompare, getDimensions } from '../../utils';
@@ -22,0 +22,0 @@

src/mixins/withLayout/withLayout.stories.js

@@ -20,3 +20,3 @@ /**
 import lng from '@lightningjs/core';
-import { Tile } from '../../components';
+import Tile from '../../components/Tile';
 
@@ -23,0 +23,0 @@ export default {

src/mixins/withSelections/withSelections.stories.js

@@ -20,3 +20,4 @@ /**
 import lng from '@lightningjs/core';
-import { Button, Row } from '../../components';
+import Button from '../../components/Button/Button';
+import Row from '../../components/Row/Row';
 import withSelectionsMixin from '.';
@@ -23,0 +24,0 @@

src/mixins/withThemeStyles/cache.js

@@ -1,2 +0,2 @@
-import { context } from '../../globals/index.js';
+import context from '../../globals/context/index';
 
@@ -3,0 +3,0 @@ const themeStyleCache = new Map();

src/mixins/withThemeStyles/index.js

@@ -20,4 +20,4 @@ /**
 import StyleManager from './StyleManager';
-import { updateManager } from '../../globals';
-import { context } from '../../globals';
+import { updateManager } from '../../globals/global-update-manager/GlobalUpdateManager';
+import context from '../../globals/context';
 import { getComponentConfig, getSubTheme } from './utils';
@@ -24,0 +24,0 @@ import { capitalizeFirstLetter } from '../../utils';

src/mixins/withThemeStyles/StyleManager.js

@@ -25,6 +25,6 @@ /**
   getHash
-} from './utils.js';
-import { context } from '../../globals/index.js';
-import { clone } from '../../utils/index.js';
-import cache from './cache.js';
+} from './utils';
+import context from '../../globals/context/index';
+import { clone } from '../../utils/index';
+import cache from './cache';
 import lng from '@lightningjs/core';
@@ -31,0 +31,0 @@

src/mixins/withThemeStyles/utils.js

@@ -559,3 +559,3 @@ /**
   const processedStyle = JSON.stringify(styleObj, (_, value) => {
-    if (-1 < ['tone', 'mode'].indexOf(_)) return undefined; // Remove any tone/mode or mode/tone properties as they have already been processed
+    if (-1 < ['tone', 'mode'].indexOf(_)) return value; // Remove any tone/mode or mode/tone properties as they have already been processed
     if ('string' === typeof value && value.startsWith('theme.')) {
@@ -562,0 +562,0 @@ // Support theme strings example: theme.radius.md

src/mixins/withThemeStyles/utils.test.js

@@ -883,11 +883,36 @@ import {
     expect(source).toStrictEqual({
-      unfocused_neutral: { color: 'primary' },
-      unfocused_inverse: { color: 'primary' },
-      unfocused_brand: { color: 'primary' },
-      focused_neutral: { color: 'primary' },
-      focused_inverse: { color: 'primary' },
-      focused_brand: { color: 'primary' },
-      disabled_neutral: { color: 'primary' },
-      disabled_inverse: { color: 'primary' },
-      disabled_brand: { color: 'primary' }
+      unfocused_neutral: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      unfocused_inverse: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      unfocused_brand: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      focused_neutral: {
+        mode: { unfocused: { color: 'primary' } }
+      },
+      focused_inverse: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      focused_brand: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      disabled_neutral: {
+        mode: { unfocused: { color: 'primary' } }
+      },
+      disabled_inverse: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      disabled_brand: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      }
     });
@@ -912,11 +937,36 @@ });
     expect(source).toStrictEqual({
-      unfocused_neutral: { color: 'primary' },
-      unfocused_inverse: { color: 'primary' },
-      unfocused_brand: { color: 'primary' },
-      focused_neutral: { color: 'primary' },
-      focused_inverse: { color: 'primary' },
-      focused_brand: { color: 'primary' },
-      disabled_neutral: { color: 'primary' },
-      disabled_inverse: { color: 'primary' },
-      disabled_brand: { color: 'primary' }
+      unfocused_neutral: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      unfocused_inverse: {
+        tone: { neutral: { color: 'primary' } }
+      },
+      unfocused_brand: {
+        tone: { neutral: { color: 'primary' } }
+      },
+      focused_neutral: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      focused_inverse: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      focused_brand: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      disabled_neutral: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      disabled_inverse: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      disabled_brand: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      }
     });
@@ -923,0 +973,0 @@ });

src/mixins/withThemeStyles/withThemeStyles.stories.js

@@ -20,4 +20,4 @@ /**
 import lng from '@lightningjs/core';
-import withThemeStylesMixin from './index.js';
-import { context } from '../../globals';
+import withThemeStylesMixin from './index';
+import context from '../../globals/context/index';
 
@@ -24,0 +24,0 @@ export default {

src/mixins/withUpdates/index.js

@@ -19,3 +19,4 @@ /**
 
-import { context, updateManager } from '../../globals';
+import context from '../../globals/context';
+import { updateManager } from '../../globals/global-update-manager/GlobalUpdateManager';
 import { clone } from '../../utils';
@@ -22,0 +23,0 @@

src/mixins/withUpdates/withUpdates.test.js

@@ -26,3 +26,3 @@ /**
 import withUpdates from '.';
-import { context } from '../../globals';
+import context from '../../globals/context/index';
 const updateMock = jest.fn();
@@ -29,0 +29,0 @@

src/textures/textures.test.js

@@ -21,3 +21,4 @@ /**
 import { makeCreateComponent } from '@lightningjs/ui-components-test-utils';
-import { Arrow, Circle } from '.';
+import Arrow from './Arrow';
+import Circle from './Circle';
 
@@ -24,0 +25,0 @@ const createTexture = makeCreateComponent(lng.Component);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12543509

increased by1.98%

Lines of code

85887

increased by46.5%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

15

increased by15.38%

No dependency changes