@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/theme/index.d.ts

@@ -3,3 +3,4 @@ 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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAE3B,eAAO,MAAM,gBAAgB,OAAO,CAAC"}

package/dist/theme/index.js

@@ -1,5 +1,20 @@
-export * from './screens';
-export * from './palette';
-export * from './typography';
-export * from './provider';
-export const FLOATING_Z_INDEX = 9999;
+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
+};

package/dist/theme/palette.d.ts

@@ -36,10 +36,11 @@ 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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAElC,eAAO,MAAM,WAAW,QAAS,UAAU,8BAG1C,CAAC;AAIF,KAAK,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3D,KAAK,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAExC,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,WAAW,EAAE,aAAa,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,SAAS,EAAE,UAAU,CAAC;IACtB,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;AAExC,eAAO,MAAM,WAAW,EAAE,OAoHzB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,YAAY,EA+IvC,CAAC;AAEF,eAAO,MAAM,UAAU,sCAAwB,OAAO,yCAiBrD,CAAC;AAEF,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAiB,KAAK;QACpB,OAAO,EAAE,OAAO,CAAC;KAClB;CACF"}

package/dist/theme/palette.js

@@ -1,285 +1,287 @@
-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;
+import Color from "color";
+import { get } from "lodash-es";
+const getColorVar = (key, fullVar = true) => {
+  const cssVarKey = `--${prefix}-${key.replaceAll(".", "-")}`;
+  return fullVar ? `var(${cssVarKey})` : cssVarKey;
 };
-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 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'),
+  }
 };
-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 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 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;
+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);
     }
+    return Color(String(get(palette, cssVarName) ?? text));
+  } catch (error) {
+    return null;
+  }
+};
+export {
+  getColorVar,
+  groupedColors,
+  paletteVars,
+  parseColor
 };

package/dist/theme/provider.d.ts

@@ -4,3 +4,4 @@ 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

package/dist/theme/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/theme/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,EAAwD,MAAM,gBAAgB,CAAC;AACrG,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,wBAAyB,kBAAkB,qDAOpE,CAAC"}