@dnanpm/styleguide 3.7.1 → 3.8.1

package/build/es/themes/themeComponents/radius.js

@@ -1,30 +1,30 @@
-const radius = {
-    /**
-     * 0.5rem (8px)
-     */
-    default: '0.5rem',
-    /**
-     * 0.25rem (4px)
-     */
-    s: '0.25rem',
-    /**
-     * 0.125rem (2px)
-     */
-    xs: '0.125rem',
-    /**
-     * 50%
-     *
-     * Visually rendered with radius of 50% of element width AND 50% of element height
-     * E.g.: Element with width 100px and height 32px will be rendered with radius 50px on "x" axis and 16px on "y" axis
-     */
-    circle: '50%',
-    /**
-     * 100rem
-     *
-     * Visually rendered with radius of half the size of the smaller side of element due to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap rule
-     * E.g.: Element with width 100px and height 32px will be rendered with radius 16px on both axis (all corners)
-     */
-    pill: '100rem',
+const radius = {
+    /**
+     * 0.5rem (8px)
+     */
+    default: '0.5rem',
+    /**
+     * 0.25rem (4px)
+     */
+    s: '0.25rem',
+    /**
+     * 0.125rem (2px)
+     */
+    xs: '0.125rem',
+    /**
+     * 50%
+     *
+     * Visually rendered with radius of 50% of element width AND 50% of element height
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 50px on "x" axis and 16px on "y" axis
+     */
+    circle: '50%',
+    /**
+     * 100rem
+     *
+     * Visually rendered with radius of half the size of the smaller side of element due to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap rule
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 16px on both axis (all corners)
+     */
+    pill: '100rem',
 };
 
 export { radius as default };

package/build/es/utils/common.d.ts

@@ -1,6 +1,6 @@
-import type { ElevationLevel } from '../types/elevation.d';
-declare const getElevationShadow: ({ elevation, shadow, }: {
-    elevation: ElevationLevel;
-    shadow?: string | undefined;
-}) => string;
-export default getElevationShadow;
+import type { ElevationLevel } from '../types/elevation.d';
+declare const getElevationShadow: ({ elevation, shadow, }: {
+    elevation: ElevationLevel;
+    shadow?: string | undefined;
+}) => string;
+export default getElevationShadow;

package/build/es/utils/common.js

@@ -1,24 +1,24 @@
 import theme from '../themes/theme.js';
 
-const getElevationShadow = ({ elevation, shadow, }) => {
-    const shadowConfig = {
-        none: [0, 0, 0],
-        low: [0, 2, 16, `${theme.color.default.black}0f`],
-        high: [0, 6, 24, `${theme.color.default.black}14`],
-        extraHigh: [0, 8, 64, `${theme.color.default.black}29`],
-    };
-    const sidesMap = shadow === null || shadow === void 0 ? void 0 : shadow.split(' ').map(Number);
-    const clipSize = sidesMap &&
-        shadowConfig[elevation]
-            .filter((arg) => typeof arg === 'number')
-            .reduce((sum, v) => sum + v);
-    const boxShadow = `box-shadow: ${shadowConfig[elevation].join('px ')};`;
-    const clipPath = sidesMap && clipSize
-        ? `clip-path: inset(${sidesMap
-            .map(val => (val ? `-${clipSize}px` : '0px'))
-            .join(' ')});`
-        : '';
-    return `${boxShadow}${clipPath}`;
+const getElevationShadow = ({ elevation, shadow, }) => {
+    const shadowConfig = {
+        none: [0, 0, 0],
+        low: [0, 2, 16, `${theme.color.default.black}0f`],
+        high: [0, 6, 24, `${theme.color.default.black}14`],
+        extraHigh: [0, 8, 64, `${theme.color.default.black}29`],
+    };
+    const sidesMap = shadow === null || shadow === void 0 ? void 0 : shadow.split(' ').map(Number);
+    const clipSize = sidesMap &&
+        shadowConfig[elevation]
+            .filter((arg) => typeof arg === 'number')
+            .reduce((sum, v) => sum + v);
+    const boxShadow = `box-shadow: ${shadowConfig[elevation].join('px ')};`;
+    const clipPath = sidesMap && clipSize
+        ? `clip-path: inset(${sidesMap
+            .map(val => (val ? `-${clipSize}px` : '0px'))
+            .join(' ')});`
+        : '';
+    return `${boxShadow}${clipPath}`;
 };
 
 export { getElevationShadow as default };

package/build/es/utils/createStyled.d.ts

@@ -1,172 +1,172 @@
-import * as styledComponents from 'styled-components';
-declare const createStyled: <T extends {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: string;
-        };
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}>() => {
-    styled: styledComponents.ThemedStyledInterface<T>;
-    css: styledComponents.ThemedCssFunction<T>;
-    createGlobalStyle: <P extends object = {}>(first: TemplateStringsArray | styledComponents.CSSObject | styledComponents.InterpolationFunction<styledComponents.ThemedStyledProps<P, T>>, ...interpolations: styledComponents.Interpolation<styledComponents.ThemedStyledProps<P, T>>[]) => styledComponents.GlobalStyleComponent<P, T>;
-    keyframes: (strings: TemplateStringsArray | styledComponents.CSSKeyframes, ...interpolations: styledComponents.SimpleInterpolation[]) => styledComponents.Keyframes;
-    ThemeProvider: styledComponents.BaseThemeProviderComponent<T, T>;
-    ServerStyleSheet: typeof styledComponents.ServerStyleSheet;
-};
-export default createStyled;
+import * as styledComponents from 'styled-components';
+declare const createStyled: <T extends {
+    base: {
+        baseHeight: {
+            value: number;
+            unit: string;
+        };
+        baseWidth: {
+            value: number;
+            unit: string;
+        };
+    };
+    breakpoints: import("../themes/themeComponents/breakpoints").ViewBreakpoints;
+    color: {
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
+    };
+    fontFamily: {
+        default: string;
+        heading: string;
+        numerals: string;
+    };
+    fontSize: {
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    fontWeight: {
+        book: number;
+        medium: number;
+        bold: number;
+        black: number;
+    };
+    form: {
+        smallSelectWidth: string;
+        smallSelectHeight: string;
+    };
+    grid: {
+        gutter: string;
+    };
+    lineHeight: {
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
+}>() => {
+    styled: styledComponents.ThemedStyledInterface<T>;
+    css: styledComponents.ThemedCssFunction<T>;
+    createGlobalStyle: <P extends object = {}>(first: TemplateStringsArray | styledComponents.CSSObject | styledComponents.InterpolationFunction<styledComponents.ThemedStyledProps<P, T>>, ...interpolations: styledComponents.Interpolation<styledComponents.ThemedStyledProps<P, T>>[]) => styledComponents.GlobalStyleComponent<P, T>;
+    keyframes: (strings: TemplateStringsArray | styledComponents.CSSKeyframes, ...interpolations: styledComponents.SimpleInterpolation[]) => styledComponents.Keyframes;
+    ThemeProvider: styledComponents.BaseThemeProviderComponent<T, T>;
+    ServerStyleSheet: typeof styledComponents.ServerStyleSheet;
+};
+export default createStyled;

package/build/es/utils/createStyled.js

@@ -1,8 +1,8 @@
 import * as styled from 'styled-components';
 
-const createStyled = () => {
-    const { default: styled$1, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet, } = styled;
-    return { styled: styled$1, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet };
+const createStyled = () => {
+    const { default: styled$1, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet, } = styled;
+    return { styled: styled$1, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet };
 };
 
 export { createStyled as default };

package/build/es/utils/styledUtils.d.ts

@@ -1,9 +1,9 @@
-export declare const getMultipliedSize: (base: {
-    value: number;
-    unit: string;
-}, multiply: number) => string;
-export declare const getDividedSize: (base: {
-    value: number;
-    unit: string;
-}, divide: number) => string;
-export declare const media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+export declare const getMultipliedSize: (base: {
+    value: number;
+    unit: string;
+}, multiply: number) => string;
+export declare const getDividedSize: (base: {
+    value: number;
+    unit: string;
+}, divide: number) => string;
+export declare const media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;

package/build/es/utils/styledUtils.js

@@ -1,15 +1,15 @@
 import { css } from '../themes/styled.js';
 import breakpoints from '../themes/themeComponents/breakpoints.js';
 
-const getMultipliedSize = (base, multiply) => `${multiply * base.value}${base.unit}`;
-const getDividedSize = (base, divide) => `${base.value / divide}${base.unit}`;
-const media = Object.keys(breakpoints).reduce((acc, label) => {
+const getMultipliedSize = (base, multiply) => `${multiply * base.value}${base.unit}`;
+const getDividedSize = (base, divide) => `${base.value / divide}${base.unit}`;
+const media = Object.keys(breakpoints).reduce((acc, label) => {
     acc[label] = (literals, ...placeholders) => css `
             @media (min-width: ${breakpoints[label]}px) {
                 ${css(literals, ...placeholders)};
             }
-        `.join('');
-    return acc;
+        `.join('');
+    return acc;
 }, {});
 
 export { getDividedSize, getMultipliedSize, media };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "3.7.1",
+    "version": "v3.8.1",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -17,23 +17,19 @@
     ],
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/DNA-Online-Services/kauppa.git"
+        "url": "ssh://git@oakdvcs.dna.fi:7999/dsg/styleguide.git"
     },
     "scripts": {
+        "build": "rm -rf build && rollup -c",
+        "clean": "rm -rf node_modules build dnanpm-styleguide*.tgz",
         "eslint": "cross-env eslint --fix './**/*.{ts,tsx}'",
         "eslint:check": "cross-env eslint './**/*.{ts,tsx}'",
+        "format": "cross-env prettier --ignore-path .prettierignore --write --loglevel silent '**/*.{ts,tsx,js,json}'",
+        "format:check": "cross-env prettier --ignore-path .prettierignore --check '**/*.{ts,tsx,js,json}'",
+        "prepublishOnly": "npm run clean && npm ci && npm run eslint:check && npm run format:check && npm run build",
         "styleguide": "styleguidist server",
         "styleguide:build": "styleguidist build",
-        "build": "rm -rf build && rollup -c",
-        "clean": "rm -rf node_modules build dnanpm-styleguide*.tgz",
-        "lock": "echo 'check if tarlock is too old,remove it,create own file with pid,ln it to tarlock,if it fails,loop until it doesnt'",
-        "unlock": "echo 'check if its ours ,remove it and ours.'",
-        "condtar": "npm run lock && ( [ -s dnanpm-styleguide-snapshot.tgz ] || npm run tar) && npm run unlock",
         "tar": "npm run clean && npm ci && npm run build && npm pack && mv dnanpm-styleguide*.tgz dnanpm-styleguide-snapshot.tgz",
-        "prepublishOnly": "npm run clean && npm ci && npm run eslint:check && npm run build",
-        "format": "cross-env prettier --ignore-path .prettierignore --write --loglevel silent '**/*.{ts,tsx,js,json}'",
-        "format:check": "cross-env prettier --ignore-path .prettierignore --check '**/*.{ts,tsx,js,json}'",
-        "preCommit": "npm run eslint:check && npm run format:check",
         "test": "cross-env jest --coverage"
     },
     "browserslist": [
@@ -47,7 +43,7 @@
         "@babel/preset-env": "^7.22.10",
         "@babel/preset-react": "^7.22.5",
         "@babel/preset-typescript": "^7.22.11",
-        "@dnanpm/icons": "2.0.1",
+        "@dnanpm/icons": "2.0.3",
         "@rollup/plugin-commonjs": "^25.0.4",
         "@rollup/plugin-node-resolve": "^15.2.1",
         "@rollup/plugin-typescript": "^11.1.5",