@randstad-uca/design-system 1.0.20 → 1.0.22-beta.1

package/dist/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@randstad-uca/design-system",
-  "version": "1.0.20",
+  "version": "1.0.22-beta.1",
+  "type": "module",
   "main": "dist/index.js",
   "files": [
-    "dist"
+    "dist",
+    "dist/randstad-design-system.css"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook-live": "storybook dev -p 6006",
     "build-test": "storybook build",
-    "generate-icons": "node src/utils/generateIconList.js",
+    "generate-icons": "node src/utils/generateIconList.cjs",
     "build": "rm -rf dist && rollup -c"
   },
   "keywords": [],

package/dist/{index.css → randstad-design-system.css}

@@ -1 +1 @@
-.button{align-items:center;border:none;border-radius:4px;cursor:pointer;display:flex;font-family:Graphik,sans-serif;font-weight:400;gap:4px;justify-content:center;padding:16px;transition:background-color .2s,color .2s,box-shadow .2s}.button-lg{font-size:18px;line-height:30px;min-width:48px}.button-md{font-size:14px;line-height:25px}.button-primary{background-color:var(--primary-color);color:var(--white)}.button-primary.hover{background-color:var(--primary-button-hover)}.button-primary.active{background-color:var(--primary-button-active)}.button-primary.focus-visible{background-color:var(--primary-button-focus)}.button-primary.disabled{background-color:var(--secondary-color-20);color:var(--secondary-color-60)}.button-secondary{background:none;border:1px solid var(--primary-color);color:var(--primary-color)}.button-secondary.hover{border:1px solid var(#175197);color:var(#175197)}.button-secondary.active{border:1px solid var(--secondary-color-80);color:var(--secondary-color-80)}.button-secondary.focus-visible{border:1px solid var(--primary-color);color:var(--primary-color)}.button-secondary.disabled{border:1px solid var(--secondary-color-60);color:var(--secondary-color-60)}.button-tertiary{background:none;border:none;color:var(--primary-color)}.button-tertiary.hover{background:#2175d90d}.button-tertiary.active{background-color:#2175d91a}.button-tertiary.focus-visible{border:1px solid var(--primary-color)}.button-tertiary.disabled{color:#6f758d}.button-icon-left>.icon,.button-icon-right>.icon{display:inline-block;height:1rem;width:1rem}.button-icon-left>.icon{margin-right:.5rem}.button-icon-right>.icon{margin-left:.5rem}.button-round{align-items:center;background-color:var(--white);border:none;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);cursor:pointer;display:flex;height:48px;justify-content:center;padding:0;width:48px}.button-round img.button-icon{height:24px;-o-object-fit:contain;object-fit:contain;width:24px}.button randstad-icon,.button.button-primary randstad-icon{color:var(--white)}.button.button-secondary randstad-icon,.button.button-tertiary randstad-icon{color:var(--primary-color)}.loader{align-items:center;display:flex;gap:6px;justify-content:center}.dot{animation:growAndFade 1.2s ease-in-out infinite;border-radius:50%;display:inline-block;height:10px;width:10px}.dot:first-child{animation-delay:0s}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes growAndFade{0%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.4)}to{opacity:.3;transform:scale(.9)}}.button-primary.loader .dot,.button-secondary.loader .dot{background-color:var(--white)}.button-secondary.loader{background-color:var(--primary-color);border:none;color:var(--white)}.form{display:flex;flex-direction:column;font-family:Graphik,sans-serif;gap:.3rem}.form-label{color:var(--secondary-color-80);font-size:16px;font-weight:400;line-height:25px}.form-input{border:1px solid var(--secondary-color-10);border-radius:4px;font-size:16px;line-height:30px;outline:none;padding:10px;transition:border-color .3s ease,box-shadow .3s ease}.form.error:not(.disabled) .form-input:hover{box-shadow:0 0 0 4px #e00f0f1a}.form:not(.disabled) .form-input:hover{box-shadow:0 0 0 4px #0f19411a}.form-input:focus{border:1px solid var(--primary-color)}.form.error .form-input{background-color:#fdf3f3;border-color:#e3342f}.form-input.success{background-color:#d4edda;border-color:#28a745}input::-moz-placeholder{color:var(--secondary-color-40);font-size:16px;font-weight:400;line-height:30px}input::placeholder{color:var(--secondary-color-40);font-size:16px;font-weight:400;line-height:30px}.form-button{background-color:#007bff;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:16px;padding:10px 20px;transition:background-color .3s ease}.helper-description{color:var(--secondary-color-40);font-weight:400;text-align:left}.error-message,.helper-description{font-size:16px;line-height:25px;margin:0}.error-message{color:var(--ui-negative)}.toggle-password{background:none;border:none;cursor:pointer;font-size:16px;padding:5px}.form-container,.input-with-button{align-items:center;display:flex;position:relative}.input-with-button input{padding-right:40px;width:100%}.input-with-button button{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:10px;top:50%;transform:translateY(-50%);width:40px}.toggle-password randstad-icon{height:100%;max-height:32px;max-width:32px;width:100%}textarea{font-family:Graphik;font-size:18px;font-weight:400;letter-spacing:0;line-height:30px}textarea.form-input{min-height:100px;resize:none}.form.disabled input.form-input,.form.disabled textarea.form-input{background-color:#f5f5f5;cursor:not-allowed}
+.button{align-items:center;border:none;border-radius:4px;cursor:pointer;display:flex;font-family:Graphik,sans-serif;font-weight:400;gap:4px;justify-content:center;padding:16px;transition:background-color .2s,color .2s,box-shadow .2s}.button-lg{font-size:18px;line-height:30px;min-width:48px}.button-md{font-size:14px;line-height:25px}.button-primary{background-color:var(--primary-color);color:var(--white)}.button-primary.hover{background-color:var(--primary-button-hover)}.button-primary.active{background-color:var(--primary-button-active)}.button-primary.focus-visible{background-color:var(--primary-button-focus)}.button-primary.disabled{background-color:var(--secondary-color-20);color:var(--secondary-color-60)}.button-secondary{background:none;border:1px solid var(--primary-color);color:var(--primary-color)}.button-secondary.hover{border:1px solid var(#175197);color:var(#175197)}.button-secondary.active{border:1px solid var(--secondary-color-80);color:var(--secondary-color-80)}.button-secondary.focus-visible{border:1px solid var(--primary-color);color:var(--primary-color)}.button-secondary.disabled{border:1px solid var(--secondary-color-60);color:var(--secondary-color-60)}.button-tertiary{background:none;border:none;color:var(--primary-color)}.button-tertiary.hover{background:#2175d90d}.button-tertiary.active{background-color:#2175d91a}.button-tertiary.focus-visible{border:1px solid var(--primary-color)}.button-tertiary.disabled{color:#6f758d}.button-icon-left>.icon,.button-icon-right>.icon{display:inline-block;height:1rem;width:1rem}.button-icon-left>.icon{margin-right:.5rem}.button-icon-right>.icon{margin-left:.5rem}.button-round{align-items:center;background-color:var(--white);border:none;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);cursor:pointer;display:flex;height:48px;justify-content:center;padding:0;width:48px}.button-round img.button-icon{height:24px;-o-object-fit:contain;object-fit:contain;width:24px}.button randstad-icon,.button.button-primary randstad-icon{color:var(--white)}.button.button-secondary randstad-icon,.button.button-tertiary randstad-icon{color:var(--primary-color)}.loader{align-items:center;display:flex;gap:6px;justify-content:center}.dot{animation:growAndFade 1.2s ease-in-out infinite;border-radius:50%;display:inline-block;height:10px;width:10px}.dot:first-child{animation-delay:0s}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes growAndFade{0%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.4)}to{opacity:.3;transform:scale(.9)}}.button-primary.loader .dot,.button-secondary.loader .dot{background-color:var(--white)}.button-secondary.loader{background-color:var(--primary-color);border:none;color:var(--white)}:root{--primary-color:#2175d9;--primary-color-80:#4e90e1;--primary-color-60:#7aace8;--primary-color-40:#a6c8f0;--primary-color-20:#d3e3f7;--primary-color-10:#2175d91a;--primary-color-5:#2175d90d;--secondary-color:#0f1941;--secondary-color-80:#404767;--secondary-color-60:#6f758d;--secondary-color-40:#9fa3b3;--secondary-color-20:#cfd1d9;--secondary-color-10:#e7e8ec;--brand-randstad-blue:#2175d9;--randstad-blue-10:#e8f1fb;--randstad-blue-40:#a6c8f0;--brand-dark-blue:#0f1941;--brand-light-blue:#00d7ff;--brand-off-white:#f7f5f0;--ui-negative:#e00f0f;--ui-negative-5:#fdf3f3;--ui-negative-pink-shadow:#e00f0f1a;--ui-positive:#257156;--ui-positve-5:#f4f8f6;--ui-warning:#e9a204;--ui-warning-10:#fcf5e5;--ui-informative:#4e90e1;--ui-informative-10:#e8f1fb;--tertiary-shade:#dedcd8;--tertiary-tint:#f9f7f3;--gray-20:#d7d7d7;--gray-10:#f7f7f7;--white:#fff;--primary-button-hover:#175197;--primary-button-active:#124077;--primary-button-focus:#2175d9;--form-hover-shadow:#d1d3db;--randstad-dark-blue-40:#262626;--primary-light-blue:#00d7ff;--primary-light-blue-20:#00d7ff33}@font-face{font-family:Graphik;font-style:normal;font-weight:400;src:url(/src/assets/font/Graphik-Regular.woff2) format("woff2"),url(/src/assets/font/Graphik-Regular.woff) format("woff"),url(/src/assets/font/Graphik-Regular.eot) format("embedded-opentype")}

package/dist/stories/Button.stories.d.ts

@@ -24,3 +24,4 @@ export declare const Primary: Story;
 export declare const Secondary: Story;
 export declare const Tertiary: Story;
 export declare const GoogleRoundButton: Story;
+export declare const FacebookRoundButton: Story;

package/dist/stories/Icon.stories.d.ts

@@ -3,5 +3,4 @@ import '../components/Icon';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
-export declare const Default: Story;
-export declare const Red: Story;
+export declare const Gallery: Story;

package/dist/stories/Modal.stories.d.ts

@@ -1,4 +1,5 @@
 import '../components/Modal';
+import '../components/Notice';
 declare const _default: {
     title: string;
     component: string;
@@ -8,4 +9,8 @@ declare const _default: {
 };
 export default _default;
 export declare const ModalConScrollInterno: () => import("lit-html").TemplateResult<1>;
+export declare const ModalConScrollInternoSubtitle: () => import("lit-html").TemplateResult<1>;
 export declare const ModalScrollEnBody: () => import("lit-html").TemplateResult<1>;
+export declare const ModalConNotice: () => import("lit-html").TemplateResult<1>;
+export declare const ModalConUnBoton: () => import("lit-html").TemplateResult<1>;
+export declare const ModalConDosBotones: () => import("lit-html").TemplateResult<1>;

package/dist/stories/Notice.stories.d.ts

@@ -1,4 +1,5 @@
 import { TemplateResult } from 'lit';
+import type { StoryFn } from '@storybook/web-components';
 import '../components/Notice';
 declare const _default: {
     title: string;
@@ -6,7 +7,7 @@ declare const _default: {
     parameters: {
         layout: string;
     };
-    decorators: ((story: any) => TemplateResult<1>)[];
+    decorators: ((story: () => TemplateResult) => TemplateResult<1>)[];
     argTypes: {
         icon: {
             control: string;
@@ -25,7 +26,43 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: {
-    render: (args: any) => TemplateResult;
+    render: StoryFn;
+    args: {
+        type: string;
+        icon: string;
+        message: string;
+        open: boolean;
+    };
+};
+export declare const Informative: {
+    render: StoryFn;
+    args: {
+        type: string;
+        icon: string;
+        message: string;
+        open: boolean;
+    };
+};
+export declare const Success: {
+    render: StoryFn;
+    args: {
+        type: string;
+        icon: string;
+        message: string;
+        open: boolean;
+    };
+};
+export declare const Warning: {
+    render: StoryFn;
+    args: {
+        type: string;
+        icon: string;
+        message: string;
+        open: boolean;
+    };
+};
+export declare const Error: {
+    render: StoryFn;
     args: {
         type: string;
         icon: string;
@@ -33,7 +70,3 @@ export declare const Default: {
         open: boolean;
     };
 };
-export declare const Informative: (args: any) => TemplateResult;
-export declare const Success: (args: any) => TemplateResult;
-export declare const Warning: (args: any) => TemplateResult;
-export declare const Error: (args: any) => TemplateResult;

package/dist/stories/Select.stories.d.ts

@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/web-components';
 import '../components/Select';
 declare const _default: {
     title: string;
@@ -5,211 +6,49 @@ declare const _default: {
     argTypes: {
         options: {
             control: string;
-            description: string;
         };
         placeholder: {
             control: string;
-            description: string;
         };
         defaultValue: {
             control: string;
-            description: string;
         };
         disabled: {
             control: string;
-            description: string;
         };
         label: {
             control: string;
-            description: string;
         };
         labelColor: {
             control: string;
-            description: string;
         };
         filterable: {
             control: string;
-            description: string;
         };
         screenWidth: {
             control: string;
-            description: string;
         };
         error: {
             control: string;
-            description: string;
         };
         onOptionSelected: {
             action: string;
-            description: string;
         };
         maxLength: {
             control: string;
-            description: string;
-        };
-    };
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
         };
     };
 };
 export default _default;
-export declare const Default: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithObjects: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithNoOptions: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithLabel: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const NonFilterable: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const Disabled: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithDefaultObjectValue: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const NonFilterableBasic: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithMaxLength: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const MobileModal: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithError: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const MobileWithError: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
+export declare const Default: StoryFn;
+export declare const WithObjects: StoryFn;
+export declare const WithNoOptions: StoryFn;
+export declare const WithLabel: StoryFn;
+export declare const NonFilterable: StoryFn;
+export declare const Disabled: StoryFn;
+export declare const WithDefaultObjectValue: StoryFn;
+export declare const NonFilterableBasic: StoryFn;
+export declare const WithMaxLength: StoryFn;
+export declare const MobileModal: StoryFn;
+export declare const WithError: StoryFn;
+export declare const MobileWithError: StoryFn;

package/dist/stories/Stepper.stories.d.ts

@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/web-components';
 import '../components/Stepper';
 declare const _default: {
     title: string;
@@ -19,20 +20,32 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: ({ steps, currentStep }: {
-    steps: any;
-    currentStep: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const MixedLabels: ({ steps, currentStep }: {
-    steps: any;
-    currentStep: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const NoLabels: ({ steps, currentStep }: {
-    steps: any;
-    currentStep: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const AllStepsCompleted: ({ steps, currentStep }: {
-    steps: any;
-    currentStep: any;
-}) => import("lit-html").TemplateResult<1>;
+export declare const Default: {
+    render: StoryFn;
+    args: {
+        steps: string[];
+        currentStep: number;
+    };
+};
+export declare const MixedLabels: {
+    render: StoryFn;
+    args: {
+        steps: string[];
+        currentStep: number;
+    };
+};
+export declare const NoLabels: {
+    render: StoryFn;
+    args: {
+        steps: string[];
+        currentStep: number;
+    };
+};
+export declare const AllStepsCompleted: {
+    render: StoryFn;
+    args: {
+        steps: string[];
+        currentStep: number;
+    };
+};
 export declare const Interactive: () => import("lit-html").TemplateResult<1>;

package/dist/stories/Tabs.stories.d.ts

@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/web-components';
 import '../components/Tabs';
 declare const _default: {
     title: string;
@@ -8,7 +9,5 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: ({ tabs, selected }: {
-    tabs: any;
-    selected: any;
-}) => import("lit-html").TemplateResult<1>;
+export declare const Default: StoryFn;
+export declare const ContainerPequeño: StoryFn;

package/dist/styles/colors.css

@@ -4,7 +4,8 @@
     --primary-color-60: #7AACE8;
     --primary-color-40: #A6C8F0;
     --primary-color-20: #D3E3F7;
-    --primary-color-10: #E8F1FB;
+    --primary-color-10: #2175D91A;
+    --primary-color-5: #2175D90D;
 
     --secondary-color: #0F1941;
     --secondary-color-80: #404767;
@@ -14,14 +15,21 @@
     --secondary-color-10: #E7E8EC;
 
     --brand-randstad-blue: #2175D9;
+    --randstad-blue-10: #E8F1FB;
+    --randstad-blue-40: #A6C8F0;
     --brand-dark-blue: #0F1941;
     --brand-light-blue: #00D7FF;
     --brand-off-white: #F7F5F0;
 
-    --ui-negative: #E00F0FEE;
-    --ui-positive: #257F56;
+    --ui-negative: #E00F0F;
+    --ui-negative-5: #FDF3F3;
+    --ui-negative-pink-shadow: #E00F0F1A;
+    --ui-positive: #257156;
+    --ui-positve-5: #F4F8F6;
     --ui-warning: #E9A204;
+    --ui-warning-10: #FCF5E5;
     --ui-informative: #4E90E1;
+    --ui-informative-10: #E8F1FB;
 
     --tertiary-shade: #DEDCD8;
     --tertiary-tint: #F9F7F3;
@@ -33,4 +41,10 @@
     --primary-button-active: #124077;
     --primary-button-focus: #2175D9;
 
+    --form-hover-shadow: #D1D3DB;
+
+    --randstad-dark-blue-40: #262626;
+    --primary-light-blue: #00D7FF;
+    --primary-light-blue-20: #00D7FF33;
+
   }

package/dist/styles/fontStyles.d.ts

@@ -0,0 +1,7 @@
+export declare const bodyXS: import("lit").CSSResult;
+export declare const bodyS: import("lit").CSSResult;
+export declare const bodyM: import("lit").CSSResult;
+export declare const bodyL: import("lit").CSSResult;
+export declare const titleXXS: import("lit").CSSResult;
+export declare const titleXS: import("lit").CSSResult;
+export declare const titleS: import("lit").CSSResult;

package/dist/styles/fontStyles.ts

@@ -0,0 +1,60 @@
+import { css } from 'lit';
+
+export const bodyXS = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  letter-spacing: 0%;
+`;
+
+export const bodyS = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 25px;
+  letter-spacing: 0%;
+`;
+
+export const bodyM = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 25px;
+  letter-spacing: 0%;
+`;
+
+export const bodyL = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 30px;
+  letter-spacing: 0%;
+`;
+
+export const titleXXS = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 30px;
+  letter-spacing: 0%;
+  vertical-align: middle;
+`;
+
+export const titleXS = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 30px;
+  letter-spacing: -1%;
+  vertical-align: middle;
+`;
+
+export const titleS = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 26px;
+  line-height: 30px;
+  letter-spacing: -1%;
+  vertical-align: middle;
+`;

package/dist/styles/fonts.css

@@ -5,47 +5,4 @@
         url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');
     font-weight: normal;
     font-style: normal;
-}
-
-:root {
-    --body-xs-font-size: 12px;
-    --body-s-font-size: 14px;
-    --body-m-font-size: 16px;
-    --body-l-font-size: 18px;
-    --body-xs-line-height: 20px;
-    --body-s-line-height: 25px;
-    --body-m-line-height: 25px;
-    --body-l-line-height: 30px;
-}
-
-.body-l {
-    font-family: Graphik;
-    font-weight: 400;
-    font-size: 18px;
-    line-height: 100%;
-    letter-spacing: 0%;
-}
-
-.body-m {
-    font-family: Graphik;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 100%;
-    letter-spacing: 0%;
-}
-
-.body-s {
-    font-family: Graphik;
-    font-weight: 400;
-    font-size: 149px;
-    line-height: 100%;
-    letter-spacing: 0%;
-}
-
-.body-xs {
-    font-family: Graphik;
-    font-weight: 400;
-    font-size: 149px;
-    line-height: 100%;
-    letter-spacing: 0%;
 }

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@randstad-uca/design-system",
-  "version": "1.0.20",
+  "version": "1.0.22-beta.1",
+  "type": "module",
   "main": "dist/index.js",
   "files": [
-    "dist"
+    "dist",
+    "dist/randstad-design-system.css"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook-live": "storybook dev -p 6006",
     "build-test": "storybook build",
-    "generate-icons": "node src/utils/generateIconList.js",
+    "generate-icons": "node src/utils/generateIconList.cjs",
     "build": "rm -rf dist && rollup -c"
   },
   "keywords": [],

package/dist/components/Test.d.ts

@@ -1,5 +0,0 @@
-import { LitElement } from 'lit';
-export declare class TestComponent extends LitElement {
-    static styles: import("lit").CSSResult;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/components/TestButton.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-export declare class TestButton extends LitElement {
-    label: string;
-    static styles: import("lit").CSSResult;
-    render(): import("lit-html").TemplateResult<1>;
-}