@uva-glass/component-library 3.16.0 → 3.17.0

package/dist/assets/Backdrop.css

@@ -1 +1 @@
-._backdrop_k1x6d_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:100}@media (min-width: 28rem) and (min-height: 28rem){._backdrop_k1x6d_1{align-items:center;background:var(--color-black-transparent);display:flex;justify-content:center}}
+._backdrop_8s6aa_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:100;overflow:hidden}._backdrop_8s6aa_1:after{content:"";top:0;right:0;bottom:0;left:0;background-color:var(--color-uva-black);opacity:.5;pointer-events:none}@media (min-width: 28rem) and (min-height: 28rem){._backdrop_8s6aa_1{align-items:center;display:flex;justify-content:center}._backdrop_8s6aa_1:after{position:absolute}._backdrop_8s6aa_1>*{position:relative;z-index:1}}

package/dist/assets/Input.css

@@ -1 +1 @@
-._input_25til_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid var(--color-black);color:var(--color-black);font-family:inherit;font-size:inherit;height:2rem;margin:0;padding:0 .5rem}._input--numeric_25til_13{text-align:right;width:8rem}._input--error_25til_18,._input_25til_1:invalid{border-color:var(--color-chilean-fire)}._input--full-with_25til_23{min-width:100%;width:0}._input_25til_1::placeholder{color:var(--color-black-transparent);font-size:inherit;opacity:1}._input_25til_1[type=file]{border:none}._input_25til_1:disabled{color:var(--color-black-transparent)}
+._input_whbfw_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid var(--color-black);color:var(--color-black);font-family:inherit;font-size:inherit;height:2rem;margin:0;padding:0 .5rem}._input--numeric_whbfw_13{text-align:right;width:8rem}._input--error_whbfw_18,._input_whbfw_1:invalid{border-color:var(--color-chilean-fire)}._input--full-with_whbfw_23{min-width:100%;width:0}._input_whbfw_1::placeholder{color:var(--color-grey-500);font-size:inherit;opacity:1}._input_whbfw_1[type=file]{border:none}._input_whbfw_1:disabled{color:var(--color-grey-500)}

package/dist/assets/variables.css

@@ -24,7 +24,6 @@
   --color-blue-400: #a3e7ff;
   --color-blue-50: #e0f7ff;
   --color-purple-400: #9747ff;
-  --color-black-transparent: rgba(0 0 0 / 50%);
   --color-cobalt: #0d4da5;
   --color-san-felix: #2c632e;
   --color-uva-green: #49a74c;
@@ -41,9 +40,8 @@
   --color-amour: #ffe5ec;
   --color-dandelion: #ffde66;
   --color-natural-wood: #fff6d6;
-  --color-uva-black: #1F1D20;
-  --color-uva-red-transparent: rgba(189 0 50 / 10%);
-  --color-electric-violet: #9747FF;
+  --color-uva-black: #1f1d20;
+  --color-electric-violet: #9747ff;
   --color-lemon-grass: #99998a;
   --color-vista-blue: #8feabb;
   --color-medium-aquamarine: #62df9f;
@@ -52,6 +50,5 @@
   --color-french-grey: #b3afb6;
   --color-columbia-blue: #a1e7fc;
   --color-light-cyan: #e1f8ff;
-  --color-lavender-transparent: rgba(235 235 236 / 50%);
-  --color-natural-wool: #FFF6D6;
+  --color-natural-wool: #fff6d6;
 }

package/dist/components/Backdrop/Backdrop.js

@@ -1,8 +1,8 @@
-import { jsx as r } from "react/jsx-runtime";
-import '../../assets/Backdrop.css';const s = "_backdrop_k1x6d_1", a = {
+import { jsx as c } from "react/jsx-runtime";
+import '../../assets/Backdrop.css';const s = "_backdrop_8s6aa_1", r = {
   backdrop: s
-}, p = ({ children: o, ...c }) => /* @__PURE__ */ r("div", { ...c, className: a.backdrop, children: o });
+}, d = ({ children: o, ...a }) => /* @__PURE__ */ c("div", { ...a, className: r.backdrop, children: o });
 export {
-  p as Backdrop
+  d as Backdrop
 };
 //# sourceMappingURL=Backdrop.js.map

package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.d.ts

@@ -4,7 +4,7 @@ export interface EmptyStateDataDisplayProps {
     /** The sub-text to display. */
     paragraph?: string;
     /** The colors of the wrapper and icon background are inverted. */
-    invertColors: boolean;
+    invertColors?: boolean;
 }
 /** Represents a component to indicate an empty state. */
 export declare function EmptyStateDataDisplay({ label, paragraph, invertColors }: EmptyStateDataDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateDataDisplay.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './EmptyStateDataDisplay.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface EmptyStateDataDisplayProps {\n  /** The main text to display. */\n  label: string;\n  /** The sub-text to display. */\n  paragraph?: string;\n  /** The colors of the wrapper and icon background are inverted. */\n  invertColors: boolean;\n}\n\n/** Represents a component to indicate an empty state. */\nexport function EmptyStateDataDisplay({ label, paragraph, invertColors }: EmptyStateDataDisplayProps) {\n  return (\n    <div\n      className={clsx(styles['empty-state-data-display_wrapper'], {\n        [styles['empty-state-data-display_wrapper--invert-colors']]: invertColors,\n      })}\n    >\n      <div\n        className={clsx(styles['empty-state-data-display_icon-frame'], {\n          [styles['empty-state-data-display_icon-frame--invert-colors']]: invertColors,\n        })}\n      >\n        <Icon name=\"CubeTransparent\" />\n      </div>\n      <div className={styles['empty-state-data-display_text-content']}>\n        <label className={styles['empty-state-data-display_label']}>{label}</label>\n        {paragraph && <p className={styles['empty-state-data-display_paragraph']}>{paragraph}</p>}\n      </div>\n    </div>\n  );\n}\n"],"names":["EmptyStateDataDisplay","label","paragraph","invertColors","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;;;;AAgBO,SAASA,EAAsB,EAAE,OAAAC,GAAO,WAAAC,GAAW,cAAAC,KAA4C;AAElG,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,kCAAkC,GAAG;AAAA,QAC1D,CAACA,EAAO,iDAAiD,CAAC,GAAGH;AAAA,MAAA,CAC9D;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,qCAAqC,GAAG;AAAA,cAC7D,CAACA,EAAO,oDAAoD,CAAC,GAAGH;AAAA,YAAA,CACjE;AAAA,YAED,UAAA,gBAAAI,EAACC,GAAK,EAAA,MAAK,kBAAkB,CAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,QACC,gBAAAJ,EAAA,OAAA,EAAI,WAAWE,EAAO,uCAAuC,GAC5D,UAAA;AAAA,UAAA,gBAAAC,EAAC,SAAM,EAAA,WAAWD,EAAO,gCAAgC,GAAI,UAAML,GAAA;AAAA,UAClEC,KAAc,gBAAAK,EAAA,KAAA,EAAE,WAAWD,EAAO,oCAAoC,GAAI,UAAUJ,EAAA,CAAA;AAAA,QAAA,EACvF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"EmptyStateDataDisplay.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './EmptyStateDataDisplay.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface EmptyStateDataDisplayProps {\n  /** The main text to display. */\n  label: string;\n  /** The sub-text to display. */\n  paragraph?: string;\n  /** The colors of the wrapper and icon background are inverted. */\n  invertColors?: boolean;\n}\n\n/** Represents a component to indicate an empty state. */\nexport function EmptyStateDataDisplay({ label, paragraph, invertColors }: EmptyStateDataDisplayProps) {\n  return (\n    <div\n      className={clsx(styles['empty-state-data-display_wrapper'], {\n        [styles['empty-state-data-display_wrapper--invert-colors']]: invertColors,\n      })}\n    >\n      <div\n        className={clsx(styles['empty-state-data-display_icon-frame'], {\n          [styles['empty-state-data-display_icon-frame--invert-colors']]: invertColors,\n        })}\n      >\n        <Icon name=\"CubeTransparent\" />\n      </div>\n      <div className={styles['empty-state-data-display_text-content']}>\n        <label className={styles['empty-state-data-display_label']}>{label}</label>\n        {paragraph && <p className={styles['empty-state-data-display_paragraph']}>{paragraph}</p>}\n      </div>\n    </div>\n  );\n}\n"],"names":["EmptyStateDataDisplay","label","paragraph","invertColors","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;;;;AAgBO,SAASA,EAAsB,EAAE,OAAAC,GAAO,WAAAC,GAAW,cAAAC,KAA4C;AAElG,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,kCAAkC,GAAG;AAAA,QAC1D,CAACA,EAAO,iDAAiD,CAAC,GAAGH;AAAA,MAAA,CAC9D;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,qCAAqC,GAAG;AAAA,cAC7D,CAACA,EAAO,oDAAoD,CAAC,GAAGH;AAAA,YAAA,CACjE;AAAA,YAED,UAAA,gBAAAI,EAACC,GAAK,EAAA,MAAK,kBAAkB,CAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,QACC,gBAAAJ,EAAA,OAAA,EAAI,WAAWE,EAAO,uCAAuC,GAC5D,UAAA;AAAA,UAAA,gBAAAC,EAAC,SAAM,EAAA,WAAWD,EAAO,gCAAgC,GAAI,UAAML,GAAA;AAAA,UAClEC,KAAc,gBAAAK,EAAA,KAAA,EAAE,WAAWD,EAAO,oCAAoC,GAAI,UAAUJ,EAAA,CAAA;AAAA,QAAA,EACvF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/Input/Input.js

@@ -1,28 +1,28 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as _ } from "react";
-import { c } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Input.css';const f = "_input_25til_1", t = {
-  input: f,
-  "input--numeric": "_input--numeric_25til_13",
-  "input--error": "_input--error_25til_18",
-  "input--full-with": "_input--full-with_25til_23"
-}, x = _(function({ id: i, appearance: r, type: n = "text", isNumeric: u, fullWidth: p, ...o }, e) {
-  return /* @__PURE__ */ l(
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Input.css';const c = "_input_whbfw_1", t = {
+  input: c,
+  "input--numeric": "_input--numeric_whbfw_13",
+  "input--error": "_input--error_whbfw_18",
+  "input--full-with": "_input--full-with_whbfw_23"
+}, a = w(function({ id: r, appearance: n, type: i = "text", isNumeric: u, fullWidth: p, ...o }, e) {
+  return /* @__PURE__ */ f(
     "input",
     {
       ...o,
       ref: e,
-      id: i,
-      className: c(t.input, {
-        [t["input--error"]]: r === "error",
+      id: r,
+      className: _(t.input, {
+        [t["input--error"]]: n === "error",
         [t["input--full-with"]]: p,
         [t["input--numeric"]]: u
       }),
-      type: n
+      type: i
     }
   );
 });
 export {
-  x as Input
+  a as Input
 };
 //# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.stories.js

@@ -1,11 +1,11 @@
 import { jsx as n } from "react/jsx-runtime";
-import { Input as t } from "./Input.js";
+import { Input as a } from "./Input.js";
 const r = `
 // Has all HTMLInputElement props available except "className" and "style" 
 <Input id={id} type={type} aria-label={aria-label} onChange={onChangeFunction} value={value}/>
-`, u = {
+`, d = {
   title: "Atoms/Input",
-  component: t,
+  component: a,
   argTypes: {
     appearance: {
       table: {
@@ -18,20 +18,22 @@ const r = `
   },
   args: {
     id: "30daa7c7",
-    type: "text"
+    type: "text",
+    disabled: !1,
+    placeholder: ""
   },
   parameters: {
-    inspectComponent: t,
+    inspectComponent: a,
     codeString: r
   }
-}, e = (a) => /* @__PURE__ */ n(t, { ...a }), p = e.bind({});
+}, e = (t) => /* @__PURE__ */ n(a, { ...t }), p = e.bind({});
 p.args = {};
-const o = e.bind({});
-o.args = {
+const l = e.bind({});
+l.args = {
   fullWidth: !0
 };
-const i = e.bind({});
-i.args = {
+const o = e.bind({});
+o.args = {
   isNumeric: !0
 };
 const s = e.bind({});
@@ -39,10 +41,10 @@ s.args = {
   appearance: "error"
 };
 export {
-  o as FullWidth,
+  l as FullWidth,
   p as InputExample,
-  i as Numeric,
+  o as Numeric,
   s as WithErrorAppearance,
-  u as default
+  d as default
 };
 //# sourceMappingURL=Input.stories.js.map

package/dist/components/Input/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.js","sources":["../../../src/components/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InputProps } from './Input';\n\nimport { Input } from './Input';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<Input id={id} type={type} aria-label={aria-label} onChange={onChangeFunction} value={value}/>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Input',\n  component: Input,\n  argTypes: {\n    appearance: {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      control: 'inline-radio',\n    },\n  },\n  args: {\n    id: '30daa7c7',\n    type: 'text',\n  },\n  parameters: {\n    inspectComponent: Input,\n    codeString: codeString,\n  },\n} as Meta<InputProps>;\n\nconst Template: StoryFn<InputProps> = (args) => {\n  return <Input {...args} />;\n};\n\nexport const InputExample = Template.bind({});\nInputExample.args = {};\n\nexport const FullWidth = Template.bind({});\nFullWidth.args = {\n  fullWidth: true,\n};\n\nexport const Numeric = Template.bind({});\nNumeric.args = {\n  isNumeric: true,\n};\n\nexport const WithErrorAppearance = Template.bind({});\nWithErrorAppearance.args = {\n  appearance: 'error',\n};\n"],"names":["codeString","Input_stories","Input","Template","args","jsx","InputExample","FullWidth","Numeric","WithErrorAppearance"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAgC,CAACC,MAC9B,gBAAAC,EAACH,GAAO,EAAA,GAAGE,EAAM,CAAA,GAGbE,IAAeH,EAAS,KAAK,CAAE,CAAA;AAC5CG,EAAa,OAAO,CAAC;AAEd,MAAMC,IAAYJ,EAAS,KAAK,CAAE,CAAA;AACzCI,EAAU,OAAO;AAAA,EACf,WAAW;AACb;AAEO,MAAMC,IAAUL,EAAS,KAAK,CAAE,CAAA;AACvCK,EAAQ,OAAO;AAAA,EACb,WAAW;AACb;AAEO,MAAMC,IAAsBN,EAAS,KAAK,CAAE,CAAA;AACnDM,EAAoB,OAAO;AAAA,EACzB,YAAY;AACd;"}
+{"version":3,"file":"Input.stories.js","sources":["../../../src/components/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InputProps } from './Input';\n\nimport { Input } from './Input';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<Input id={id} type={type} aria-label={aria-label} onChange={onChangeFunction} value={value}/>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Input',\n  component: Input,\n  argTypes: {\n    appearance: {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      control: 'inline-radio',\n    },\n  },\n  args: {\n    id: '30daa7c7',\n    type: 'text',\n    disabled: false,\n    placeholder: '',\n  },\n  parameters: {\n    inspectComponent: Input,\n    codeString: codeString,\n  },\n} as Meta<InputProps>;\n\nconst Template: StoryFn<InputProps> = (args) => {\n  return <Input {...args} />;\n};\n\nexport const InputExample = Template.bind({});\nInputExample.args = {};\n\nexport const FullWidth = Template.bind({});\nFullWidth.args = {\n  fullWidth: true,\n};\n\nexport const Numeric = Template.bind({});\nNumeric.args = {\n  isNumeric: true,\n};\n\nexport const WithErrorAppearance = Template.bind({});\nWithErrorAppearance.args = {\n  appearance: 'error',\n};\n"],"names":["codeString","Input_stories","Input","Template","args","jsx","InputExample","FullWidth","Numeric","WithErrorAppearance"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAgC,CAACC,MAC9B,gBAAAC,EAACH,GAAO,EAAA,GAAGE,EAAM,CAAA,GAGbE,IAAeH,EAAS,KAAK,CAAE,CAAA;AAC5CG,EAAa,OAAO,CAAC;AAEd,MAAMC,IAAYJ,EAAS,KAAK,CAAE,CAAA;AACzCI,EAAU,OAAO;AAAA,EACf,WAAW;AACb;AAEO,MAAMC,IAAUL,EAAS,KAAK,CAAE,CAAA;AACvCK,EAAQ,OAAO;AAAA,EACb,WAAW;AACb;AAEO,MAAMC,IAAsBN,EAAS,KAAK,CAAE,CAAA;AACnDM,EAAoB,OAAO;AAAA,EACzB,YAAY;AACd;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.16.0",
+  "version": "3.17.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",