@janbox/storefront-ui 1.0.13 → 1.0.14

package/dist/lib/video/video.jsx

@@ -0,0 +1,21 @@
+import { createElement } from 'react';
+import ReactPlayer from 'react-player';
+import { getVideoProps } from './helpers';
+import { mediaQuery } from '../../theme';
+export const Video = ({ ref, containerProps, PlayerComponent, ..._props }) => {
+    const { xs, sm, md, lg, ...rest } = getVideoProps(_props);
+    const css = [
+        createStyle(xs),
+        {
+            [mediaQuery('sm')]: createStyle(sm),
+            [mediaQuery('md')]: createStyle(md),
+            [mediaQuery('lg')]: createStyle(lg),
+        },
+    ];
+    return (<div css={css} {...containerProps}>
+      {PlayerComponent ? createElement(PlayerComponent, rest) : <ReactPlayer width="" height="" ref={ref} {...rest}/>}
+    </div>);
+};
+const createStyle = ({ css } = {}) => {
+    return [css];
+};

package/dist/theme/index.d.ts

@@ -3,4 +3,3 @@ export * from './palette';
 export * from './typography';
 export * from './provider';
 export declare const FLOATING_Z_INDEX = 9999;
-//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.js

@@ -1,20 +1,5 @@
-import { breakpoint, getSmallerScreens, mediaQuery, screens } from "./screens.js";
-import { getColorVar, groupedColors, paletteVars, parseColor } from "./palette.js";
-import { getSmallerTypographyVariants, getTypographyVar, typographyVars } from "./typography.js";
-import { ThemeProvider } from "./provider.js";
-const FLOATING_Z_INDEX = 9999;
-export {
-  FLOATING_Z_INDEX,
-  ThemeProvider,
-  breakpoint,
-  getColorVar,
-  getSmallerScreens,
-  getSmallerTypographyVariants,
-  getTypographyVar,
-  groupedColors,
-  mediaQuery,
-  paletteVars,
-  parseColor,
-  screens,
-  typographyVars
-};
+export * from './screens';
+export * from './palette';
+export * from './typography';
+export * from './provider';
+export const FLOATING_Z_INDEX = 9999;

package/dist/theme/palette.d.ts

@@ -36,11 +36,10 @@ export type GroupedColor = {
     colors: PaletteKey[];
 };
 export declare const groupedColors: GroupedColor[];
-export declare const parseColor: (text: string | undefined, palette: Palette) => import('color').ColorInstance | null;
+export declare const parseColor: (text: string | undefined, palette: Palette) => import("color").ColorInstance | null;
 declare module '@emotion/react' {
     interface Theme {
         palette: Palette;
     }
 }
 export {};
-//# sourceMappingURL=palette.d.ts.map

package/dist/theme/palette.js

@@ -1,287 +1,285 @@
-import Color from "color";
-import { get } from "lodash-es";
-const getColorVar = (key, fullVar = true) => {
-  const cssVarKey = `--${prefix}-${key.replaceAll(".", "-")}`;
-  return fullVar ? `var(${cssVarKey})` : cssVarKey;
+import Color from 'color';
+import { get } from 'lodash-es';
+export const getColorVar = (key, fullVar = true) => {
+    const cssVarKey = `--${prefix}-${key.replaceAll('.', '-')}`;
+    return fullVar ? `var(${cssVarKey})` : cssVarKey;
 };
-const prefix = "color";
-const paletteVars = {
-  inherit: "inherit",
-  current: "currentColor",
-  transparent: "transparent",
-  black: "#000000",
-  white: "#FFFFFF",
-  background: {
-    subtle: getColorVar("background.subtle"),
-    default: getColorVar("background.default"),
-    emphasis: getColorVar("background.emphasis")
-  },
-  border: {
-    default: getColorVar("border.default")
-  },
-  surface: {
-    default: getColorVar("surface.default")
-  },
-  primary: {
-    100: getColorVar("primary.100"),
-    200: getColorVar("primary.200"),
-    300: getColorVar("primary.300"),
-    400: getColorVar("primary.400"),
-    500: getColorVar("primary.500"),
-    600: getColorVar("primary.600"),
-    700: getColorVar("primary.700"),
-    800: getColorVar("primary.800")
-    // 900: getColorVar('primary.900'),
-  },
-  secondary: {
-    100: getColorVar("secondary.100"),
-    200: getColorVar("secondary.200"),
-    300: getColorVar("secondary.300"),
-    400: getColorVar("secondary.400"),
-    500: getColorVar("secondary.500"),
-    600: getColorVar("secondary.600"),
-    700: getColorVar("secondary.700"),
-    800: getColorVar("secondary.800")
-    // 900: getColorVar('secondary.900'),
-  },
-  red: {
-    100: getColorVar("red.100"),
-    200: getColorVar("red.200"),
-    300: getColorVar("red.300"),
-    400: getColorVar("red.400"),
-    500: getColorVar("red.500"),
-    600: getColorVar("red.600"),
-    700: getColorVar("red.700"),
-    800: getColorVar("red.800")
-    // 900: getColorVar('red.900'),
-  },
-  orange: {
-    100: getColorVar("orange.100"),
-    200: getColorVar("orange.200"),
-    300: getColorVar("orange.300"),
-    400: getColorVar("orange.400"),
-    500: getColorVar("orange.500"),
-    600: getColorVar("orange.600"),
-    700: getColorVar("orange.700"),
-    800: getColorVar("orange.800")
-    // 900: getColorVar('orange.900'),
-  },
-  yellow: {
-    100: getColorVar("yellow.100"),
-    200: getColorVar("yellow.200"),
-    300: getColorVar("yellow.300"),
-    400: getColorVar("yellow.400"),
-    500: getColorVar("yellow.500"),
-    600: getColorVar("yellow.600"),
-    700: getColorVar("yellow.700"),
-    800: getColorVar("yellow.800")
-    // 900: getColorVar('yellow.900'),
-  },
-  green: {
-    100: getColorVar("green.100"),
-    200: getColorVar("green.200"),
-    300: getColorVar("green.300"),
-    400: getColorVar("green.400"),
-    500: getColorVar("green.500"),
-    600: getColorVar("green.600"),
-    700: getColorVar("green.700"),
-    800: getColorVar("green.800")
-    // 900: getColorVar('green.900'),
-  },
-  blue: {
-    100: getColorVar("blue.100"),
-    200: getColorVar("blue.200"),
-    300: getColorVar("blue.300"),
-    400: getColorVar("blue.400"),
-    500: getColorVar("blue.500"),
-    600: getColorVar("blue.600"),
-    700: getColorVar("blue.700"),
-    800: getColorVar("blue.800")
-    // 900: getColorVar('blue.900'),
-  },
-  violet: {
-    100: getColorVar("violet.100"),
-    200: getColorVar("violet.200"),
-    300: getColorVar("violet.300"),
-    400: getColorVar("violet.400"),
-    500: getColorVar("violet.500"),
-    600: getColorVar("violet.600"),
-    700: getColorVar("violet.700"),
-    800: getColorVar("violet.800")
-    // 900: getColorVar('violet.900'),
-  },
-  neutral: {
-    100: getColorVar("neutral.100"),
-    200: getColorVar("neutral.200"),
-    300: getColorVar("neutral.300"),
-    400: getColorVar("neutral.400"),
-    500: getColorVar("neutral.500"),
-    600: getColorVar("neutral.600"),
-    700: getColorVar("neutral.700"),
-    800: getColorVar("neutral.800")
-    // 900: getColorVar('neutral.900'),
-  }
+const prefix = 'color';
+export const paletteVars = {
+    inherit: 'inherit',
+    current: 'currentColor',
+    transparent: 'transparent',
+    black: '#000000',
+    white: '#FFFFFF',
+    background: {
+        subtle: getColorVar('background.subtle'),
+        default: getColorVar('background.default'),
+        emphasis: getColorVar('background.emphasis'),
+    },
+    border: {
+        default: getColorVar('border.default'),
+    },
+    surface: {
+        default: getColorVar('surface.default'),
+    },
+    primary: {
+        100: getColorVar('primary.100'),
+        200: getColorVar('primary.200'),
+        300: getColorVar('primary.300'),
+        400: getColorVar('primary.400'),
+        500: getColorVar('primary.500'),
+        600: getColorVar('primary.600'),
+        700: getColorVar('primary.700'),
+        800: getColorVar('primary.800'),
+        // 900: getColorVar('primary.900'),
+    },
+    secondary: {
+        100: getColorVar('secondary.100'),
+        200: getColorVar('secondary.200'),
+        300: getColorVar('secondary.300'),
+        400: getColorVar('secondary.400'),
+        500: getColorVar('secondary.500'),
+        600: getColorVar('secondary.600'),
+        700: getColorVar('secondary.700'),
+        800: getColorVar('secondary.800'),
+        // 900: getColorVar('secondary.900'),
+    },
+    red: {
+        100: getColorVar('red.100'),
+        200: getColorVar('red.200'),
+        300: getColorVar('red.300'),
+        400: getColorVar('red.400'),
+        500: getColorVar('red.500'),
+        600: getColorVar('red.600'),
+        700: getColorVar('red.700'),
+        800: getColorVar('red.800'),
+        // 900: getColorVar('red.900'),
+    },
+    orange: {
+        100: getColorVar('orange.100'),
+        200: getColorVar('orange.200'),
+        300: getColorVar('orange.300'),
+        400: getColorVar('orange.400'),
+        500: getColorVar('orange.500'),
+        600: getColorVar('orange.600'),
+        700: getColorVar('orange.700'),
+        800: getColorVar('orange.800'),
+        // 900: getColorVar('orange.900'),
+    },
+    yellow: {
+        100: getColorVar('yellow.100'),
+        200: getColorVar('yellow.200'),
+        300: getColorVar('yellow.300'),
+        400: getColorVar('yellow.400'),
+        500: getColorVar('yellow.500'),
+        600: getColorVar('yellow.600'),
+        700: getColorVar('yellow.700'),
+        800: getColorVar('yellow.800'),
+        // 900: getColorVar('yellow.900'),
+    },
+    green: {
+        100: getColorVar('green.100'),
+        200: getColorVar('green.200'),
+        300: getColorVar('green.300'),
+        400: getColorVar('green.400'),
+        500: getColorVar('green.500'),
+        600: getColorVar('green.600'),
+        700: getColorVar('green.700'),
+        800: getColorVar('green.800'),
+        // 900: getColorVar('green.900'),
+    },
+    blue: {
+        100: getColorVar('blue.100'),
+        200: getColorVar('blue.200'),
+        300: getColorVar('blue.300'),
+        400: getColorVar('blue.400'),
+        500: getColorVar('blue.500'),
+        600: getColorVar('blue.600'),
+        700: getColorVar('blue.700'),
+        800: getColorVar('blue.800'),
+        // 900: getColorVar('blue.900'),
+    },
+    violet: {
+        100: getColorVar('violet.100'),
+        200: getColorVar('violet.200'),
+        300: getColorVar('violet.300'),
+        400: getColorVar('violet.400'),
+        500: getColorVar('violet.500'),
+        600: getColorVar('violet.600'),
+        700: getColorVar('violet.700'),
+        800: getColorVar('violet.800'),
+        // 900: getColorVar('violet.900'),
+    },
+    neutral: {
+        100: getColorVar('neutral.100'),
+        200: getColorVar('neutral.200'),
+        300: getColorVar('neutral.300'),
+        400: getColorVar('neutral.400'),
+        500: getColorVar('neutral.500'),
+        600: getColorVar('neutral.600'),
+        700: getColorVar('neutral.700'),
+        800: getColorVar('neutral.800'),
+        // 900: getColorVar('neutral.900'),
+    },
 };
-const groupedColors = [
-  {
-    name: "Basic",
-    colors: ["transparent", "black", "white"]
-  },
-  {
-    name: "Background",
-    colors: ["background.subtle", "background.default", "background.emphasis"]
-  },
-  {
-    name: "Border",
-    colors: ["border.default"]
-  },
-  {
-    name: "Surface",
-    colors: ["surface.default"]
-  },
-  {
-    name: "Primary",
-    colors: [
-      "primary.100",
-      "primary.200",
-      "primary.300",
-      "primary.400",
-      "primary.500",
-      "primary.600",
-      "primary.700",
-      "primary.800"
-      // 'primary.900',
-    ]
-  },
-  {
-    name: "Secondary",
-    colors: [
-      "secondary.100",
-      "secondary.200",
-      "secondary.300",
-      "secondary.400",
-      "secondary.500",
-      "secondary.600",
-      "secondary.700",
-      "secondary.800"
-      // 'secondary.900',
-    ]
-  },
-  {
-    name: "Red",
-    colors: [
-      "red.100",
-      "red.200",
-      "red.300",
-      "red.400",
-      "red.500",
-      "red.600",
-      "red.700",
-      "red.800"
-      // 'red.900'
-    ]
-  },
-  {
-    name: "Orange",
-    colors: [
-      "orange.100",
-      "orange.200",
-      "orange.300",
-      "orange.400",
-      "orange.500",
-      "orange.600",
-      "orange.700",
-      "orange.800"
-      // 'orange.900',
-    ]
-  },
-  {
-    name: "Yellow",
-    colors: [
-      "yellow.100",
-      "yellow.200",
-      "yellow.300",
-      "yellow.400",
-      "yellow.500",
-      "yellow.600",
-      "yellow.700",
-      "yellow.800"
-      // 'yellow.900',
-    ]
-  },
-  {
-    name: "Green",
-    colors: [
-      "green.100",
-      "green.200",
-      "green.300",
-      "green.400",
-      "green.500",
-      "green.600",
-      "green.700",
-      "green.800"
-      // 'green.900',
-    ]
-  },
-  {
-    name: "Blue",
-    colors: [
-      "blue.100",
-      "blue.200",
-      "blue.300",
-      "blue.400",
-      "blue.500",
-      "blue.600",
-      "blue.700",
-      "blue.800"
-      // 'blue.900',
-    ]
-  },
-  {
-    name: "Violet",
-    colors: [
-      "violet.100",
-      "violet.200",
-      "violet.300",
-      "violet.400",
-      "violet.500",
-      "violet.600",
-      "violet.700",
-      "violet.800"
-      // 'violet.900',
-    ]
-  },
-  {
-    name: "Neutral",
-    colors: [
-      "neutral.100",
-      "neutral.200",
-      "neutral.300",
-      "neutral.400",
-      "neutral.500",
-      "neutral.600",
-      "neutral.700",
-      "neutral.800"
-      // 'neutral.900',
-    ]
-  }
+export const groupedColors = [
+    {
+        name: 'Basic',
+        colors: ['transparent', 'black', 'white'],
+    },
+    {
+        name: 'Background',
+        colors: ['background.subtle', 'background.default', 'background.emphasis'],
+    },
+    {
+        name: 'Border',
+        colors: ['border.default'],
+    },
+    {
+        name: 'Surface',
+        colors: ['surface.default'],
+    },
+    {
+        name: 'Primary',
+        colors: [
+            'primary.100',
+            'primary.200',
+            'primary.300',
+            'primary.400',
+            'primary.500',
+            'primary.600',
+            'primary.700',
+            'primary.800',
+            // 'primary.900',
+        ],
+    },
+    {
+        name: 'Secondary',
+        colors: [
+            'secondary.100',
+            'secondary.200',
+            'secondary.300',
+            'secondary.400',
+            'secondary.500',
+            'secondary.600',
+            'secondary.700',
+            'secondary.800',
+            // 'secondary.900',
+        ],
+    },
+    {
+        name: 'Red',
+        colors: [
+            'red.100',
+            'red.200',
+            'red.300',
+            'red.400',
+            'red.500',
+            'red.600',
+            'red.700',
+            'red.800',
+            // 'red.900'
+        ],
+    },
+    {
+        name: 'Orange',
+        colors: [
+            'orange.100',
+            'orange.200',
+            'orange.300',
+            'orange.400',
+            'orange.500',
+            'orange.600',
+            'orange.700',
+            'orange.800',
+            // 'orange.900',
+        ],
+    },
+    {
+        name: 'Yellow',
+        colors: [
+            'yellow.100',
+            'yellow.200',
+            'yellow.300',
+            'yellow.400',
+            'yellow.500',
+            'yellow.600',
+            'yellow.700',
+            'yellow.800',
+            // 'yellow.900',
+        ],
+    },
+    {
+        name: 'Green',
+        colors: [
+            'green.100',
+            'green.200',
+            'green.300',
+            'green.400',
+            'green.500',
+            'green.600',
+            'green.700',
+            'green.800',
+            // 'green.900',
+        ],
+    },
+    {
+        name: 'Blue',
+        colors: [
+            'blue.100',
+            'blue.200',
+            'blue.300',
+            'blue.400',
+            'blue.500',
+            'blue.600',
+            'blue.700',
+            'blue.800',
+            // 'blue.900',
+        ],
+    },
+    {
+        name: 'Violet',
+        colors: [
+            'violet.100',
+            'violet.200',
+            'violet.300',
+            'violet.400',
+            'violet.500',
+            'violet.600',
+            'violet.700',
+            'violet.800',
+            // 'violet.900',
+        ],
+    },
+    {
+        name: 'Neutral',
+        colors: [
+            'neutral.100',
+            'neutral.200',
+            'neutral.300',
+            'neutral.400',
+            'neutral.500',
+            'neutral.600',
+            'neutral.700',
+            'neutral.800',
+            // 'neutral.900',
+        ],
+    },
 ];
-const parseColor = (text = "", palette) => {
-  var _a, _b;
-  const regex = /var\(--([\w-]+)\)/;
-  const cssVarName = (_b = (_a = text.match(regex)) == null ? void 0 : _a.at(1)) == null ? void 0 : _b.replace(new RegExp(`${prefix}-`), "").replaceAll("-", ".");
-  try {
-    if (!cssVarName) {
-      return Color(text);
+export const parseColor = (text = '', palette) => {
+    const regex = /var\(--([\w-]+)\)/;
+    const cssVarName = text
+        .match(regex)
+        ?.at(1)
+        ?.replace(new RegExp(`${prefix}-`), '')
+        .replaceAll('-', '.');
+    try {
+        if (!cssVarName) {
+            return Color(text);
+        }
+        return Color(String(get(palette, cssVarName) ?? text));
+    }
+    catch (error) {
+        return null;
     }
-    return Color(String(get(palette, cssVarName) ?? text));
-  } catch (error) {
-    return null;
-  }
-};
-export {
-  getColorVar,
-  groupedColors,
-  paletteVars,
-  parseColor
 };

package/dist/theme/provider.d.ts

@@ -4,4 +4,3 @@ export type ThemeProviderProps = PropsWithChildren<{
     theme: Theme;
 }>;
 export declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=provider.d.ts.map