@edvisor/product-language 0.1.0 → 0.1.1

package/lib/components/typography/index.d.ts

@@ -0,0 +1 @@
+export * from './typography';

package/lib/components/typography/typography.d.ts

@@ -0,0 +1,23 @@
+import { ITextProps } from '@foundations';
+import { PropsWithChildren } from '@helpers';
+declare type Semibold = {
+    semibold?: boolean;
+};
+declare type Regular = {
+    regular?: boolean;
+};
+declare type Medium = {
+    medium?: boolean;
+};
+declare type ITextComponentProps = ITextProps & PropsWithChildren;
+export declare const Display: import("styled-components").StyledComponent<"div", any, {} & (ITextComponentProps & Regular), never>;
+export declare const Heading1: import("styled-components").StyledComponent<"h1", any, {} & (ITextComponentProps & Semibold), never>;
+export declare const Heading2: import("styled-components").StyledComponent<"h2", any, {} & (ITextComponentProps & Semibold), never>;
+export declare const Heading3: import("styled-components").StyledComponent<"h3", any, {} & (ITextComponentProps & Semibold), never>;
+export declare const Heading4: import("styled-components").StyledComponent<"h4", any, {} & (ITextComponentProps & Semibold), never>;
+export declare const BodyLarge: import("styled-components").StyledComponent<"div", any, {} & (ITextComponentProps & Regular & Semibold), never>;
+export declare const Body: import("styled-components").StyledComponent<"div", any, {} & (ITextComponentProps & Regular & Medium), never>;
+export declare const Caption: import("styled-components").StyledComponent<"div", any, {} & (ITextComponentProps & Regular), never>;
+export declare const Label1: import("styled-components").StyledComponent<"div", any, {} & (ITextComponentProps & Regular & Medium), never>;
+export declare const Label2: import("styled-components").StyledComponent<"div", any, {} & (ITextComponentProps & Regular), never>;
+export {};

package/lib/foundations/color-system/base-palette/base-palette.d.ts

@@ -0,0 +1,77 @@
+import { Hex } from '@helpers';
+export declare type ColorPalette = {
+    [key in string]: Hex;
+};
+export declare const WHITE: "#FFFFFF";
+export declare const BLACK: "#000000";
+export declare const GRAY: {
+    readonly 50: "#F9FAFB";
+    readonly 100: "#F3F4F6";
+    readonly 200: "#E5E7EB";
+    readonly 300: "#D1D5DB";
+    readonly 400: "#9CA3AF";
+    readonly 500: "#6B7280";
+    readonly 600: "#46505D";
+    readonly 700: "#374151";
+    readonly 800: "#1F2937";
+    readonly 900: "#111827";
+};
+export declare const BLUE: {
+    readonly 50: "#F0F6FF";
+    readonly 100: "#DBEAFE";
+    readonly 200: "#BFDBFE";
+    readonly 300: "#93C5FD";
+    readonly 400: "#60A5FA";
+    readonly 500: "#3B82F6";
+    readonly 600: "#2563EB";
+    readonly 700: "#1D4ED8";
+    readonly 800: "#1E40AF";
+    readonly 900: "#1E3A8A";
+};
+export declare const GREEN: {
+    readonly 50: "#F1FEF8";
+    readonly 100: "#D1FAE5";
+    readonly 200: "#A7F3D0";
+    readonly 300: "#6EE7B7";
+    readonly 400: "#34D399";
+    readonly 500: "#10B981";
+    readonly 600: "#059669";
+    readonly 700: "#047857";
+    readonly 800: "#065F46";
+    readonly 900: "#064E3B";
+};
+export declare const ORANGE: {
+    readonly 50: "#FFFAF5";
+    readonly 100: "#FFEDD5";
+    readonly 200: "#FED7AA";
+    readonly 300: "#FDBA74";
+    readonly 400: "#FB923C";
+    readonly 500: "#F97316";
+    readonly 600: "#EA580C";
+    readonly 700: "#C2410C";
+    readonly 800: "#9A3412";
+    readonly 900: "#7C2D12";
+};
+export declare const RED: {
+    readonly 50: "#FEF6F6";
+    readonly 100: "#FEE2E2";
+    readonly 200: "#FECACA";
+    readonly 300: "#FCA5A5";
+    readonly 3300: "#FEF6F6";
+    readonly 400: "#F87171";
+    readonly 500: "#EF4444";
+    readonly 600: "#DC2626";
+    readonly 700: "#B91C1C";
+    readonly 800: "#991B1B";
+    readonly 900: "#7F1D1D";
+};
+export declare const SHADES: {
+    readonly White: "#FFFFFF";
+    readonly Black: "#000000";
+};
+export declare const BRAND: {
+    readonly Brand: "#0792D4";
+};
+declare type ValuesOf<T> = T[keyof T];
+export declare type COLOR = ValuesOf<typeof BRAND> | ValuesOf<typeof BLUE> | ValuesOf<typeof SHADES> | ValuesOf<typeof RED> | ValuesOf<typeof ORANGE> | ValuesOf<typeof GREEN> | ValuesOf<typeof GRAY>;
+export {};

package/lib/foundations/color-system/base-palette/index.d.ts

@@ -0,0 +1 @@
+export * from './base-palette';

package/lib/foundations/color-system/color-guidelines/color-guidelines.d.ts

@@ -0,0 +1,131 @@
+export declare const Background: {
+    readonly Default: "#F3F4F6";
+};
+export declare const Surface: {
+    Default: {
+        Default: "#FFFFFF";
+        Subdued: "#F9FAFB";
+        Hover: "#F3F4F6";
+        Pressed: "#E5E7EB";
+        Depressed: "#E5E7EB";
+        Inverse: "#1F2937";
+    };
+    Selected: {
+        Default: "#F0F6FF";
+        Hover: "#DBEAFE";
+        Pressed: "#BFDBFE";
+    };
+    Critical: {
+        Default: "#FECACA";
+        Subdued: "#FEF6F6";
+        Hover: "#FEF6F6";
+        Pressed: "#FEE2E2";
+    };
+    Warning: {
+        Default: "#FED7AA";
+        Subdued: "#FFFAF5";
+    };
+    Success: {
+        Default: "#A7F3D0";
+        Subdued: "#F1FEF8";
+        Depressed: "#10B981";
+    };
+    Highlight: {
+        Default: "#BFDBFE";
+        Subdued: "#F0F6FF";
+    };
+    Neutral: {
+        Default: "#E5E7EB";
+        Subdued: "#F3F4F6";
+        Hover: "#D1D5DB";
+        Pressed: "#9CA3AF";
+    };
+};
+export declare const Borders: {
+    Default: {
+        Default: "#D1D5DB";
+        Subdued: "#E5E7EB";
+        Light: "#FFFFFF";
+        Dark: "#9CA3AF";
+    };
+    Critical: {
+        Default: "#DC2626";
+        Subdued: "#FCA5A5";
+    };
+    Warning: {
+        Subdued: "#FDBA74";
+    };
+    Success: {
+        Subdued: "#6EE7B7";
+    };
+    Highlight: {
+        Default: "#2563EB";
+        Subdued: "#93C5FD";
+    };
+};
+export declare const Focused: {
+    Default: "#60A5FA";
+};
+export declare const Text: {
+    Default: "#1F2937";
+    Subdued: "#6B7280";
+    Light: "#9CA3AF";
+    Critical: "#DC2626";
+    Success: "#059669";
+    OnPrimary: "#FFFFFF";
+    OnCritical: "#FFFFFF";
+};
+export declare const Icons: {
+    Default: "#6B7280";
+    Subdued: "#9CA3AF";
+    Hover: "#1F2937";
+    Pressed: "#46505D";
+    Disabled: "#D1D5DB";
+    Critical: "#DC2626";
+    Warning: "#F97316";
+    Success: "#059669";
+    Highlight: "#2563EB";
+    OnPrimary: "#FFFFFF";
+    OnCritical: "#FFFFFF";
+};
+export declare const Interactive: {
+    Default: {
+        Default: "#2563EB";
+        Hover: "#1E40AF";
+        Pressed: "#1E40AF";
+        Disabled: "#9CA3AF";
+    };
+    Subtle: {
+        Default: "#1F2937";
+        Hover: "#1F2937";
+        Pressed: "#1F2937";
+        Disabled: "#9CA3AF";
+    };
+};
+export declare const Actions: {
+    Primary: {
+        Default: "#2563EB";
+        Hover: "#1D4ED8";
+        Pressed: "#1E40AF";
+        Disabled: `#${string}`;
+    };
+    Secondary: {
+        Default: "#FFFFFF";
+        Hover: `#${string}`;
+        Pressed: `#${string}`;
+        Depressed: "#6B7280";
+        Disabled: `#${string}`;
+    };
+    Critical: {
+        Default: "#DC2626";
+        Hover: "#EF4444";
+        Pressed: "#B91C1C";
+        Disabled: `#${string}`;
+    };
+    SecondaryCritical: {
+        Default: "#FFFFFF";
+        Hover: "#EF4444";
+        Pressed: "#B91C1C";
+        Disabled: `#${string}`;
+    };
+};

package/lib/foundations/color-system/color-guidelines/index.d.ts

@@ -0,0 +1 @@
+export * from './color-guidelines';

package/lib/foundations/color-system/components/color-sample.d.ts

@@ -0,0 +1,17 @@
+import { FC, Hex } from '@helpers';
+interface IColorRectangleProps {
+    name: string;
+    hex: Hex;
+    border?: Hex;
+}
+export declare const ColorRectangle: FC<IColorRectangleProps>;
+interface IColorSquareProps {
+    name: string;
+    colorId: string;
+    hex: Hex;
+    /** if true the color will only show in the border
+     * rather than as a fill color */
+    border?: Hex;
+}
+export declare const ColorSquare: FC<IColorSquareProps>;
+export {};

package/lib/foundations/color-system/components/index.d.ts

@@ -0,0 +1 @@
+export * from './color-sample';

package/lib/foundations/color-system/index.d.ts

@@ -0,0 +1 @@
+export * from './color-guidelines';

package/lib/foundations/index.d.ts

@@ -0,0 +1,4 @@
+export * from './color-system';
+export * from './typography';
+export * from './spacing';
+export * from './shadows';

package/lib/foundations/shadows/components.d.ts

@@ -0,0 +1,8 @@
+declare const ShadowSm: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Shadow: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const ShadowMd: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const ShadowLg: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const ShadowXl: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Shadow2Xl: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const ShadowInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { ShadowSm, Shadow, ShadowLg, ShadowMd, ShadowXl, Shadow2Xl, ShadowInner, };

package/lib/foundations/shadows/index.d.ts

@@ -0,0 +1 @@
+export * from './shadows';

package/lib/foundations/shadows/shadows.d.ts

@@ -0,0 +1,8 @@
+declare const shadowSm: import("styled-components").FlattenSimpleInterpolation;
+declare const shadow: import("styled-components").FlattenSimpleInterpolation;
+declare const shadowMd: import("styled-components").FlattenSimpleInterpolation;
+declare const shadowLg: import("styled-components").FlattenSimpleInterpolation;
+declare const shadowXl: import("styled-components").FlattenSimpleInterpolation;
+declare const shadow2Xl: import("styled-components").FlattenSimpleInterpolation;
+declare const shadowInner: import("styled-components").FlattenSimpleInterpolation;
+export { shadowSm, shadow, shadowMd, shadowLg, shadowXl, shadow2Xl, shadowInner, };

package/lib/foundations/spacing/index.d.ts

@@ -0,0 +1 @@
+export * from './spacing-guidelines';

package/lib/foundations/spacing/spacing-guidelines.d.ts

@@ -0,0 +1,22 @@
+import { SPACING } from './spacing';
+export declare const Padding: {
+    readonly none: 0;
+    readonly xxxs: SPACING.Size2;
+    readonly xxs: SPACING.Size4;
+    readonly xs: SPACING.Size8;
+    readonly s: SPACING.Size12;
+    readonly m: SPACING.Size16;
+    readonly l: SPACING.Size24;
+    readonly xl: SPACING.Size32;
+};
+export declare const Margin: {
+    readonly none: 0;
+    readonly xxxs: SPACING.Size2;
+    readonly xxs: SPACING.Size4;
+    readonly xs: SPACING.Size8;
+    readonly s: SPACING.Size12;
+    readonly m: SPACING.Size16;
+    readonly l: SPACING.Size24;
+    readonly xl: SPACING.Size32;
+    readonly xxl: SPACING.Size64;
+};

package/lib/foundations/spacing/spacing.d.ts

@@ -0,0 +1,18 @@
+export declare enum SPACING {
+    Size2 = "2px",
+    Size4 = "4px",
+    Size8 = "8px",
+    Size12 = "12px",
+    Size16 = "16px",
+    Size24 = "24px",
+    Size32 = "32px",
+    Size64 = "64px",
+    Size96 = "96px",
+    Size128 = "128px",
+    Size192 = "192px",
+    Size256 = "256px",
+    Size384 = "384px",
+    Size512 = "512px",
+    Size640 = "640px",
+    Size768 = "768px"
+}

package/lib/foundations/typography/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const enum FontWeight {
+    Regular = "400",
+    Medium = "500",
+    SemiBold = "600"
+}
+export declare const FontSize: {
+    readonly a: "13px";
+    readonly b: "14px";
+    readonly c: "16px";
+    readonly d: "18px";
+    readonly e: "20px";
+    readonly f: "28px";
+    readonly g: "36px";
+};
+export declare const LineHeight: {
+    readonly a: "16px";
+    readonly b: "20px";
+    readonly c: "24px";
+    readonly d: "28px";
+    readonly e: "32px";
+    readonly f: "44px";
+};

package/lib/foundations/typography/index.d.ts

@@ -0,0 +1 @@
+export * from './typography';

package/lib/foundations/typography/text-aspect-flags.d.ts

@@ -0,0 +1,14 @@
+import { MappedEnum, PropsWithChildren, RequireOnlyOne } from '@helpers';
+export declare const enum TextAspects {
+    default = 1,
+    subdued = 2,
+    light = 4,
+    critical = 8,
+    success = 16,
+    onPrimary = 32,
+    onCritical = 64
+}
+declare type TextOptions<T> = MappedEnum<typeof TextAspects, T>;
+export declare type ITextAspectProps = Partial<RequireOnlyOne<TextOptions<boolean>>> & PropsWithChildren;
+export declare function getTextAspect(props: ITextAspectProps): "#9CA3AF" | "#6B7280" | "#1F2937" | "#DC2626" | "#059669" | "#FFFFFF";
+export {};

package/lib/foundations/typography/typography.d.ts

@@ -0,0 +1,19 @@
+import { ITextAspectProps } from './text-aspect-flags';
+export declare type ITextProps = ITextAspectProps & {
+    emphasis?: boolean;
+};
+export declare const Typography: {
+    Display: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ITextProps, any>>;
+    Heading1: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ITextProps, any>>;
+    Heading2: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ITextProps, any>>;
+    Heading3: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ITextProps, any>>;
+    Heading4: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ITextProps, any>>;
+    BodyLarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ITextProps, any>>;
+    Body: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ITextProps, any>>;
+    Caption: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ITextProps, any>>;
+    Label1: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ITextProps, any>>;
+    Label2: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ITextProps, any>>;
+};
+export declare const _Typography: {
+    LightText: import("styled-components").FlattenSimpleInterpolation;
+};

package/lib/helpers/generic-types.d.ts

@@ -0,0 +1,21 @@
+import { FC as FunctionComponent, ForwardRefExoticComponent, ForwardRefRenderFunction, PropsWithChildren as PWC, PropsWithoutRef, RefAttributes } from 'react';
+import { Slot } from './slots';
+/** @see https://stackoverflow.com/a/49725198/29182 */
+export declare type RequireOnlyOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Record<Exclude<Keys, K>, undefined>>;
+}[Keys];
+export declare type MappedEnum<E, T> = {
+    [key in keyof E]: T;
+};
+export declare type Values<T> = T[keyof T];
+export declare type PropsWithChildren<T = unknown> = PWC<T>;
+export declare type FC<P = {}, E extends {
+    [x: symbol]: FunctionComponent<PropsWithChildren> | typeof Slot;
+} = {}> = FunctionComponent<P> & {
+    [key in keyof E]: E[key];
+};
+declare type ExtensibleForwardRef<T, P = {}, E = {}> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> & {
+    [key in keyof E]: E[key];
+};
+export declare function forwardRef<T, P = {}, E = {}>(render: ForwardRefRenderFunction<T, P>): ExtensibleForwardRef<T, P, E>;
+export {};

package/lib/helpers/index.d.ts

@@ -0,0 +1,6 @@
+export * from './safe-navigation';
+export * from './slots';
+export * from './generic-types';
+export * from './numbers';
+export * from './nothing';
+export * from './strings';

package/lib/helpers/nothing.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from './generic-types';
+export declare const Nothing: FC;
+export declare function maybeRender<T>(prop: T, JSX: JSX.Element): JSX.Element;
+interface IIfProps {
+    is: unknown;
+}
+export declare const If: FC<PropsWithChildren<IIfProps>>;
+export {};

package/{src/lib/helpers/numbers.ts → lib/helpers/numbers.d.ts}

@@ -1,53 +1,41 @@
-export type Hex = `#${string}`
-
-export function clamp(a: number, b: number, c: number) {
-  return Math.max(a, Math.min(b, c))
-}
-
-export function toHex(n: number, length: number): Hex {
-  return `#${n.toString(16).padStart(length, '0').toUpperCase()}`
-}
-
-export function concatHex(a: Hex, b: Hex): Hex {
-  return `#${a.slice(1) + b.slice(1)}`
-}
-
-/** given an array of boolean flags, bitwiseOr interprets them as an unsigned integer
- * 
- * ```ts
- * bitwiseOr([false, true, false, true]) => 5 // 0b0101
- * ```
- * 
- * This is useful for indexing into an enum:
- * 
- * ```ts
- * const enum Level {
- *   default = 0,
- *   info = 0,
- *   danger = 1,
- *   warning = 2
- * }
- * 
- * interface IProps {
- *  info?: boolean
- *  danger?: boolean
- *  warning?: boolean
- * }
- * 
- * function toLevel(n: number): Level {
- *   switch (n) {
- *     case Level.info: return Level.info
- *     case Level.danger: return Level.danger
- *     case Level.warning: return Level.warning
- *     default: return Level.default
- *   }
- * }
- * 
- * const level = bitwiseOr([props.info, props.danger, props.warning])
- * 
- * const levelEnum = toLevel(level)
- * ```
-*/
-export function bitwiseOr(flags: unknown[]): number {
-  return flags.reduce((mask: number, flag, i) => mask | (Number(flag) << i), 0)
-}
+export declare type Hex = `#${string}`;
+export declare function clamp(a: number, b: number, c: number): number;
+export declare function toHex(n: number, length: number): Hex;
+export declare function concatHex(a: Hex, b: Hex): Hex;
+/** given an array of boolean flags, bitwiseOr interprets them as an unsigned integer
+ *
+ * ```ts
+ * bitwiseOr([false, true, false, true]) => 5 // 0b0101
+ * ```
+ *
+ * This is useful for indexing into an enum:
+ *
+ * ```ts
+ * const enum Level {
+ *   default = 0,
+ *   info = 0,
+ *   danger = 1,
+ *   warning = 2
+ * }
+ *
+ * interface IProps {
+ *  info?: boolean
+ *  danger?: boolean
+ *  warning?: boolean
+ * }
+ *
+ * function toLevel(n: number): Level {
+ *   switch (n) {
+ *     case Level.info: return Level.info
+ *     case Level.danger: return Level.danger
+ *     case Level.warning: return Level.warning
+ *     default: return Level.default
+ *   }
+ * }
+ *
+ * const level = bitwiseOr([props.info, props.danger, props.warning])
+ *
+ * const levelEnum = toLevel(level)
+ * ```
+*/
+export declare function bitwiseOr(flags: unknown[]): number;

package/lib/helpers/safe-navigation.d.ts

@@ -0,0 +1,14 @@
+/** even though we have null disabled in the repo,
+ * I still would not want isNil to skip checking null
+ * it is for juuuuust in case a third party sends us a null
+ * or something, and the types are not correct
+ */
+export declare function isNil<T>(value: T | undefined | null): value is undefined | null;
+export declare function isDefined<T>(value: T | undefined | null): value is T;
+export declare function defaultTo<T>(value: T | undefined | null, fallback: T): T;
+export declare function isEmpty<T extends {
+    length: number;
+}>(obj: T): boolean;
+/** used for evaluating tri-state logic (true | false | undefined) */
+export declare function is(pred?: boolean): boolean;
+export declare function safeArray<T>(arr: T[] | undefined | null): T[];

package/lib/helpers/slots.d.ts

@@ -0,0 +1,8 @@
+import { PureComponent, ReactNode } from 'react';
+import { PropsWithChildren } from './generic-types';
+export declare class Slot<T = unknown> extends PureComponent<PropsWithChildren<T>> {
+    render(): PropsWithChildren<T>["children"] | undefined;
+}
+export declare function getChildren(children?: ReactNode): ReactNode[];
+export declare function getSlots<T extends typeof Slot>(slot: T, children?: ReactNode): ReactNode[];
+export declare function getSlot<T extends typeof Slot>(slot: T, children?: ReactNode): ReactNode;

package/lib/helpers/strings.d.ts

@@ -0,0 +1 @@
+export declare const toKebabCase: (str: string) => string;

package/package.json

@@ -1,30 +1,20 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.1.0",
+  "version": "0.1.1",
+  "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",
-  "scripts": {
-    "release": "release-it --disable-metrics"
-  },
-  "peerDependencies": {
-    "release": "*"
-  },
   "devDependencies": {
-    "@types/jest-axe": "^3.5.4"
+    "@types/jest-axe": "^3.5.4",
+    "release-it": "^15.5.0"
   },
-  "release-it": {
-    "git": {
-      "commitMessage": "chore: release ${version}",
-      "tagName": "v${version}"
-    },
-    "github": {
-      "release": true
-    },
-    "npm": {
-      "publish": true
-    },
-    "publishConfig": {
-      "registry": "https://registry.npmjs.org"
-    }
+  "module": "./index.js",
+  "main": "./index.js",
+  "type": "module",
+  "types": "./index.d.ts",
+  "dependencies": {},
+  "peerDependencies": {
+    "styled-components": "5.3.5",
+    "react": "18.2.0"
   }
 }

package/release-it.json

@@ -0,0 +1,18 @@
+{
+  "git": {
+    "requireCleanWorkingDir": false,
+    "commitMessage": "chore: release ${version}",
+    "tagName": "v${version}"
+  },
+  "github": {
+    "release": true,
+    "tokenRef": "BOB"
+  },
+  "npm": {
+    "publish": true,
+    "manifestPath": "./dist/packages/product-language/package.json"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nrwl/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": [["styled-components", { "pure": true, "ssr": true }]]
-}