@helpwave/hightide 0.1.22 → 0.1.24

package/dist/css/uncompiled/theme/colors-basic.css

@@ -4,30 +4,40 @@
  * default light-theme basic colors
  */
 @theme {
+  /* Basic */
   --color-white: #FFFFFF;
   --color-black: #000000;
   --color-gray-25: #F8F8F8;
   --color-gray-50: #F2F2F2;
+  --color-gray-75: #EEEEEE;
   --color-gray-100: #E6E6E6;
+  --color-gray-150: #D8D8D8;
   --color-gray-200: #CCCCCC;
   --color-gray-300: #B3B3B3;
   --color-gray-400: #999999;
   --color-gray-500: #888888;
+  --color-gray-550: #777777;
   --color-gray-600: #666666;
+  --color-gray-650: #555555;
   --color-gray-700: #4D4D4D;
+  --color-gray-750: #3F3F3F;
   --color-gray-800: #333333;
+  --color-gray-850: #222222;
   --color-gray-900: #1A1A1A;
   --color-gray-950: #0D0D0D;
 
+  /* Green */
   --color-green-100: #D1EFD8;
   --color-green-500: #69CB81;
   --color-green-700: #53a567;
   --color-green-900: #2C5536;
 
+  /* Orange */
   --color-orange-100: #FBECD9;
   --color-orange-200: #F7D8B3;
   --color-orange-500: #EA9E40;
 
+  /* Purple */
   --color-purple-50: #EFE6FD;
   --color-purple-100: #CEB0FA;
   --color-purple-200: #B892F3;
@@ -40,13 +50,16 @@
   --color-purple-900: #27144A;
   --color-purple-950: #1B0D33;
 
+  /* Blue */
   --color-blue-50: #F6FAFF;
   --color-blue-100: #D6E3F9;
   --color-blue-200: #99B9EF;
   --color-blue-500: #3272DF;
   --color-blue-600: #285BB2;
   --color-blue-800: #1A4080;
+  --color-blue-900: #11243E;
 
+  /* Red */
   --color-red-50: #FFF9F9;
   --color-red-100: #FBE0E2;
   --color-red-200: #F7C2C5;
@@ -62,11 +75,6 @@
 @layer base {
   /* dark theme */
   @variant dark {
-    --color-primary: var(--color-purple-400);
-    --color-positive: var(--color-green-700);
-    --color-negative: var(--color-red-500);
-    --color-negative-border-hover: var(--color-red-600);
 
-    --color-focus: var(--color-purple-500);
   }
 }

package/dist/css/uncompiled/theme/colors-component.css

@@ -5,6 +5,11 @@
  * default light-theme component colors
  */
 @theme {
+  /* Icon */
+  --color-icon-primary: var(--color-text-primary);
+  --color-icon-secondary: var(--color-text-secondary);
+  --color-icon-highlight: var(--color-highlight);
+
   /* Button Outline */
   --color-button-outline-primary-outline: var(--color-primary);
   --color-button-outline-primary-icon: var(--color-primary);
@@ -17,12 +22,12 @@
   --color-button-solid-secondary-background: var(--color-purple-50);
   --color-button-solid-secondary-text: var(--color-primary);
   --color-button-solid-secondary-icon: var(--color-primary);
-  --color-button-solid-tertiary-background: #F2F2F2;
-  --color-button-solid-tertiary-icon: #888888;
-  --color-button-solid-tertiary-text: #888888;
-  --color-button-solid-neutral-background: #D6D6D6;
-  --color-button-solid-neutral-icon: #1A1A1A;
-  --color-button-solid-neutral-text: #1A1A1A;
+  --color-button-solid-tertiary-background: var(--color-gray-50);
+  --color-button-solid-tertiary-icon: var(--color-gray-500);
+  --color-button-solid-tertiary-text: var(--color-gray-500);
+  --color-button-solid-neutral-background: var(--color-gray-150);
+  --color-button-solid-neutral-icon: var(--color-text-primary);
+  --color-button-solid-neutral-text: var(--color-text-primary);
   --color-button-solid-positive-background: var(--color-positive);
   --color-button-solid-positive-icon: var(--color-on-positive);
   --color-button-solid-positive-text: var(--color-on-positive);
@@ -35,8 +40,8 @@
 
   /* Button Text */
   --color-button-text-hover-background: #77777733;
-  --color-button-text-neutral-text: #333333;
-  --color-button-text-neutral-icon: #333333;
+  --color-button-text-neutral-text: var(--color-gray-800);
+  --color-button-text-neutral-icon: var(--color-gray-800);
   --color-button-text-negative-text: var(--color-negative);
   --color-button-text-negative-icon: var(--color-negative);
   --color-button-text-primary-text: var(--color-primary);
@@ -46,14 +51,18 @@
   --color-carousel-dot-active: var(--color-primary);
   --color-carousel-dot-disabled: var(--color-disabled-background);
 
+  /* Input */
+  --color-input-background: var(--color-surface);
+  --color-input-text: var(--color-on-surface);
+
   /* Menu */
-  --color-menu-background: #F2F2F2;
-  --color-menu-text: var(--color-text-default);
+  --color-menu-background: var(--color-surface-variant);
+  --color-menu-text: var(--color-on-surface);
   --color-menu-border: var(--color-border);
 
   /* Overlay, Dialog, Modal */
-  --color-overlay-background: #FAFAFA;
-  --color-overlay-text: var(--color-text-default);
+  --color-overlay-background: var(--color-surface);
+  --color-overlay-text: var(--color-on-surface);
   --color-overlay-shadow: #00000039;
 
   /* ProgressIndicator */
@@ -61,7 +70,7 @@
   --color-progress-indicator-background: var(--color-gray-300);
 
   /* Property */
-  --color-property-title-background: #EDEDED;
+  --color-property-title-background: var(--color-gray-100);
   --color-property-title-text: var(--color-text-secondary);
 
   /* Stepper Bar */
@@ -70,14 +79,18 @@
   --color-stepperbar-dot-disabled: var(--color-description);
 
   /* Table */
-  --color-tabel-header-background: #F6FAFF;
-  --color-table-row-hover-background: var(--color-purple-50);
-  --color-table-row-hover-text: var(--color-text-default);
+  --color-table-background: var(--color-surface);
+  --color-table-text: var(--color-on-surface);
+  --color-table-header-background: color-mix(in srgb, var(--color-blue-500) 15%, var(--color-surface));
+  --color-table-row-hover-background: color-mix(in srgb, var(--color-purple-500) 15%, var(--color-surface));
 
   /* Tag */
-  --color-tag-dark-background: #333333;
-  --color-tag-dark-text: var(--color-text-light);
-  --color-tag-dark-icon: var(--color-text-light);
+  --color-tag-dark-background: var(--color-gray-800);
+  --color-tag-dark-text: var(--color-gray-100);
+  --color-tag-dark-icon: var(--color-gray-100);
+  --color-tag-default-background: #50687C;
+  --color-tag-default-text: var(--color-gray-100);
+  --color-tag-default-icon: var(--color-gray-100);
   --color-tag-green-background: #E2E9DB;
   --color-tag-green-text: #7A977E;
   --color-tag-green-icon: #7A977E;
@@ -97,14 +110,21 @@
   /* TextImage */
   --color-text-image-primary-background: var(--color-primary);
   --color-text-image-primary-text: var(--color-white);
-  --color-text-image-secondary-background: #3171DE;
+  --color-text-image-secondary-background: var(--color-blue-500);
   --color-text-image-secondary-text: var(--color-white);
-  --color-text-image-dark-background: #11243E;
+  --color-text-image-dark-background: var(--color-blue-900);
   --color-text-image-dark-text: var(--color-white);
 
   /* Tooltip */
   --color-tooltip-background: var(--color-menu-background);
   --color-tooltip-text: var(--color-description);
+
+  /* Other */
+  --color-border: var(--color-gray-200);
+  --color-divider: var(--color-gray-100);
+  --color-focus: var(--color-purple-400);
+  --color-outline: var(--color-gray-100);
+  --color-outline-variant: var(--color-gray-200);
 }
 
 /* non light-theme overrides */
@@ -112,37 +132,32 @@
   /* dark theme */
   @variant dark {
     /* Button Solid */
-    --color-button-solid-neutral-background: #424242;
-    --color-button-solid-neutral-icon: var(--color-text-light);
-    --color-button-solid-neutral-text: var(--color-text-light);
+    --color-button-solid-neutral-background: var(--color-gray-750);
+    --color-button-solid-neutral-icon: var(--color-gray-100);
+    --color-button-solid-neutral-text: var(--color-gray-100);
 
     /* Button Text */
-    --color-button-text-hover-background: #3F3F3F;
-    --color-button-text-neutral-text: var(--color-text-light);
-    --color-button-text-neutral-icon: var(--color-text-light);
-
-    /* Menu */
-    --color-menu-background: #333333;
-    --color-menu-text: var(--color-text-light);
-    --color-menu-border: var(--color-border);
+    --color-button-text-hover-background: #3F3F3F33;
+    --color-button-text-neutral-text: var(--color-gray-100);
+    --color-button-text-neutral-icon: var(--color-gray-100);
 
     /* Property */
-    --color-property-title-background: #393939;
-    --color-property-title-text: var(--color-on-surface);
+    --color-property-title-background: var(--color-gray-750);
 
     /* ProgressIndicator */
     --color-progress-indicator-background: var(--color-gray-700);
 
     /* Overlay, Dialog, Modal */
-    --color-overlay-background: #2A2A2A;
-    --color-overlay-text: var(--color-text-light);
     --color-overlay-shadow: #00000060;
 
-    /* Table */
-    --color-tabel-header-background: #2F2F2F;
-    --color-table-row-hover-background: #2f2841;
-
     /* Tag */
-    --color-tag-dark-background: #1A1A1A;
+    --color-tag-dark-background: var(--color-gray-900);
+
+    /* Other */
+    --color-border: var(--color-gray-600);
+    --color-divider: var(--color-gray-700);
+    --color-focus: var(--color-purple-500);
+    --color-outline: var(--color-gray-700);
+    --color-outline-variant: var(--color-gray-600);
   }
 }

package/dist/css/uncompiled/theme/colors-semantic.css

@@ -5,103 +5,96 @@
  * default light-theme sematic colors
  */
 @theme {
-  --color-text-dark: #1A1A1A;
-  --color-text-light: #E6E6E6;
-  --color-text-default: var(--color-text-dark);
+  /* Background */
+  --color-background: var(--color-gray-75);
+  --color-on-background: var(--color-text-primary);
+
+  /* Gender */
+  --color-gender-female: var(--color-red-400);
+  --color-gender-female-outline: var(--color-red-300);
+  --color-gender-female-surface: var(--color-red-100);
+  --color-gender-female-background: var(--color-red-50);
+
+  --color-gender-male: var(--color-blue-500);
+  --color-gender-male-outline: var(--color-blue-200);
+  --color-gender-male-surface: var(--color-blue-100);
+  --color-gender-male-background: var(--color-blue-50);
+
+  --color-gender-neutral: var(--color-gray-700);
+  --color-gender-neutral-outline: var(--color-gray-300);
+  --color-gender-neutral-surface: var(--color-gray-100);
+  --color-gender-neutral-background: var(--color-gray-25);
+
+  /* States */
+  --color-warning: var(--color-orange-500);
+  --color-on-warning:  var(--color-white);
 
-  --color-primary: var(--color-purple-500);
-  --color-on-primary: #FFFFFF;
-  --color-secondary: #11243E;
-  --color-on-secondary: #FFFFFF;
-  --color-warning: var(--color-yellow-500);
-  --color-on-warning: #FFFFFF;
   --color-positive: var(--color-green-500);
-  --color-on-positive: #FFFFFF;
+  --color-on-positive:  var(--color-white);
+
   --color-negative: var(--color-red-500);
-  --color-on-negative: #FFFFFF;
+  --color-on-negative:  var(--color-white);
   --color-negative-border: var(--color-negative);
   --color-negative-border-hover: var(--color-red-700);
 
-  --color-surface: #FFFFFF;
-  --color-on-surface: var(--color-text-dark);
-
-  --color-input-background: var(--color-surface);
-  --color-input-text: var(--color-on-surface);
-
-  --color-surface-variant: #F8F8F8;
-  --color-surface-warning: #FBECD9;
-  --color-highlight: #3272DF;
-  --color-background: #EEEEEE;
-  --color-on-background: var(--color-text-dark);
-
-  --color-female: var(--color-red-400);
-  --color-female-outline: var(--color-red-300);
-  --color-female-surface: var(--color-red-100);
-  --color-female-background: var(--color-red-50);
-
-  --color-male: var(--color-blue-400);
-  --color-male-outline: var(--color-blue-300);
-  --color-male-surface: var(--color-blue-100);
-  --color-male-background: var(--color-blue-50);
-
-  --color-neutral: #4D4D4D;
-  --color-neutral-outline: #B3B3B3;
-  --color-neutral-surface: #E6E6E6;
-  --color-neutral-background: #F8F8F8;
-
-  --color-text-primary: var(--color-text-default);
-  --color-text-secondary: #666666;
-  --color-text-tertiary: #B3B3B3;
-  --color-text-highlight: #3272DF;
-  --color-text-label: #4D4D4D;
-  --color-icon-primary: var(--color-text-primary);
-  --color-icon-secondary: var(--color-text-secondary);
-  --color-icon-highlight: var(--color-text-highlight);
-  --color-divider: #E6E6E6;
-  --color-description: #555555;
-  --color-outline: #E6E6E6;
-  --color-outline-variant: #CCCCCC;
-
-  --color-disabled-background: #E2E2E2;
-  --color-disabled-text: #888888;
+  --color-disabled-background: var(--color-gray-200);
+  --color-disabled-text: var(--color-gray-400);
   --color-disabled-icon: var(--color-disabled-text);
-  --color-disabled-border: #CFCFCF;
+  --color-disabled-border: var(--color-gray-300);
   --color-disabled-outline: var(--color-disabled-border);
 
-  --color-border: #CCCCCC;
-
-  --color-focus: var(--color-purple-400);
+  /* Surface */
+  --color-surface:  var(--color-white);
+  --color-on-surface: var(--color-text-primary);
+  --color-surface-variant: var(--color-gray-25);
+  --color-surface-warning: var(--color-orange-100);
+
+  /* Text */
+  --color-text-primary: var(--color-gray-900);
+  --color-text-secondary: var(--color-gray-600);
+  --color-text-tertiary: var(--color-gray-300);
+  --color-text-highlight: var(--color-highlight);
+  --color-description: var(--color-gray-600);
+  --color-label: var(--color-gray-700);
+
+  /* Other */
+  --color-primary: var(--color-purple-500);
+  --color-on-primary: var(--color-white);
+  --color-secondary: var(--color-blue-800);
+  --color-on-secondary:  var(--color-white);
+  --color-highlight:  var(--color-blue-500);
 }
 
 /* non light-theme overrides */
 @layer base {
   /* dark theme */
   @variant dark {
-    --color-text-default: var(--color-text-light);
-
-    --color-surface: #363636;
-    --color-on-surface: var(--color-text-light);
-    --color-surface-variant: #494949;
-    --color-surface-warning: #FBECD9;
-    --color-text-label: #CFCFCF;
-    --color-highlight: #3272DF;
-    --color-background: #222222;
-    --color-on-background: var(--color-text-light);
-    --color-border: #444444;
-
-    --color-neutral: #4D4D4D;
-    --color-neutral-outline: #B3B3B3;
-    --color-neutral-surface: #E6E6E6;
-    --color-neutral-background: #F8F8F8;
-
-    --color-text-primary: var(--color-text-light);
-    --color-text-secondary: #666666;
-    --color-text-tertiary: #B3B3B3;
-    --color-text-highlight: #3272DF;
-    --color-description: #999999;
-
-    --color-disabled-background: #2C2C2C;
-    --color-disabled-text: #666666;
-    --color-disabled-border: #3D3D3D;
+    /* Background */
+    --color-background: var(--color-gray-850);
+    --color-on-background: var(--color-text-primary);
+
+    /* States */
+    --color-positive: var(--color-green-700);
+
+    --color-negative: var(--color-red-500);
+    --color-negative-border-hover: var(--color-red-600);
+
+    --color-disabled-background: var(--color-gray-800);
+    --color-disabled-text: var(--color-gray-600);
+    --color-disabled-border: var(--color-gray-850);
+
+    /* Surface */
+    --color-surface: var(--color-gray-800);
+    --color-surface-variant: var(--color-gray-700);
+
+    /* Text */
+    --color-text-primary: var(--color-gray-100);
+    --color-text-secondary: var(--color-gray-400);
+    --color-text-tertiary: var(--color-gray-600);
+    --color-description: var(--color-gray-400);
+    --color-label: var(--color-gray-300);
+
+    /* Other */
+    --color-primary: var(--color-purple-400);
   }
 }

package/dist/css/uncompiled/theme/index.css

@@ -1,5 +1,4 @@
 @import './variants.css';
 @import './colors-basic.css';
 @import './colors-semantic.css';
-@import './colors-component.css';
-@import './theme.css';
+@import './colors-component.css';

package/dist/hooks/useLocalStorage.js

@@ -1,3 +1,4 @@
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -75,9 +76,6 @@ var useLocalStorage = (key, initValue) => {
     storageService.set(key, newValue);
     setStoredValue(newValue);
   }, [storedValue, setStoredValue, key]);
-  (0, import_react.useEffect)(() => {
-    setStoredValue(get());
-  }, []);
   return [storedValue, setValue];
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/hooks/useLocalStorage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/util/resolveSetState.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","class StorageService {\n  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n  constructor(private storage: Storage) {\n  }\n\n  public get<T>(key: string): T | null {\n    const value = this.storage.getItem(key)\n    if (value === null) {\n      return null\n    }\n    return JSON.parse(value)\n  }\n\n  public set<T>(key: string, value: T) {\n    this.storage.setItem(key, JSON.stringify(value))\n  }\n\n  public delete(key: string) {\n    this.storage.removeItem(key)\n  }\n\n  public deleteAll() {\n    this.storage.clear()\n  }\n}\n\nexport class LocalStorageService extends StorageService {\n  constructor() {\n    super(window.localStorage)\n  }\n}\n\nexport class SessionStorageService extends StorageService {\n  constructor() {\n    super(window.sessionStorage)\n  }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n  return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAiD;;;ACDjD,IAAM,iBAAN,MAAqB;AAAA;AAAA,EAGnB,YAAoB,SAAkB;AAAlB;AAAA,EACpB;AAAA,EAEO,IAAO,KAAuB;AACnC,UAAM,QAAQ,KAAK,QAAQ,QAAQ,GAAG;AACtC,QAAI,UAAU,MAAM;AAClB,aAAO;AAAA,IACT;AACA,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEO,IAAO,KAAa,OAAU;AACnC,SAAK,QAAQ,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACjD;AAAA,EAEO,OAAO,KAAa;AACzB,SAAK,QAAQ,WAAW,GAAG;AAAA,EAC7B;AAAA,EAEO,YAAY;AACjB,SAAK,QAAQ,MAAM;AAAA,EACrB;AACF;AAEO,IAAM,sBAAN,cAAkC,eAAe;AAAA,EACtD,cAAc;AACZ,UAAM,OAAO,YAAY;AAAA,EAC3B;AACF;;;AC7BO,SAAS,gBAAmB,QAA2B,MAAY;AACxE,SAAO,OAAO,WAAW,aAAc,OAA0B,IAAI,IAAI;AAC3E;;;AFEO,IAAM,kBAAkB,CAAI,KAAa,cAAmC;AACjF,QAAM,UAAM,0BAAY,MAAS;AAC/B,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,UAAM,QAAQ,eAAe,IAAO,GAAG;AACvC,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAY,GAAG;AAErD,QAAM,eAAwB,0BAAY,YAAU;AAClD,UAAM,WAAW,gBAAgB,QAAQ,WAAW;AACpD,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,mBAAe,IAAI,KAAK,QAAQ;AAEhC,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,aAAa,gBAAgB,GAAG,CAAC;AAErC,8BAAU,MAAM;AACd,mBAAe,IAAI,CAAC;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;","names":[]}
+{"version":3,"sources":["../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/util/resolveSetState.ts"],"sourcesContent":["'use client'\n\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  return [storedValue, setValue]\n}","class StorageService {\n  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n  constructor(private storage: Storage) {\n  }\n\n  public get<T>(key: string): T | null {\n    const value = this.storage.getItem(key)\n    if (value === null) {\n      return null\n    }\n    return JSON.parse(value)\n  }\n\n  public set<T>(key: string, value: T) {\n    this.storage.setItem(key, JSON.stringify(value))\n  }\n\n  public delete(key: string) {\n    this.storage.removeItem(key)\n  }\n\n  public deleteAll() {\n    this.storage.clear()\n  }\n}\n\nexport class LocalStorageService extends StorageService {\n  constructor() {\n    super(window.localStorage)\n  }\n}\n\nexport class SessionStorageService extends StorageService {\n  constructor() {\n    super(window.sessionStorage)\n  }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n  return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAsC;;;ACHtC,IAAM,iBAAN,MAAqB;AAAA;AAAA,EAGnB,YAAoB,SAAkB;AAAlB;AAAA,EACpB;AAAA,EAEO,IAAO,KAAuB;AACnC,UAAM,QAAQ,KAAK,QAAQ,QAAQ,GAAG;AACtC,QAAI,UAAU,MAAM;AAClB,aAAO;AAAA,IACT;AACA,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEO,IAAO,KAAa,OAAU;AACnC,SAAK,QAAQ,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACjD;AAAA,EAEO,OAAO,KAAa;AACzB,SAAK,QAAQ,WAAW,GAAG;AAAA,EAC7B;AAAA,EAEO,YAAY;AACjB,SAAK,QAAQ,MAAM;AAAA,EACrB;AACF;AAEO,IAAM,sBAAN,cAAkC,eAAe;AAAA,EACtD,cAAc;AACZ,UAAM,OAAO,YAAY;AAAA,EAC3B;AACF;;;AC7BO,SAAS,gBAAmB,QAA2B,MAAY;AACxE,SAAO,OAAO,WAAW,aAAc,OAA0B,IAAI,IAAI;AAC3E;;;AFIO,IAAM,kBAAkB,CAAI,KAAa,cAAmC;AACjF,QAAM,UAAM,0BAAY,MAAS;AAC/B,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,UAAM,QAAQ,eAAe,IAAO,GAAG;AACvC,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAY,GAAG;AAErD,QAAM,eAAwB,0BAAY,YAAU;AAClD,UAAM,WAAW,gBAAgB,QAAQ,WAAW;AACpD,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,mBAAe,IAAI,KAAK,QAAQ;AAEhC,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,aAAa,gBAAgB,GAAG,CAAC;AAErC,SAAO,CAAC,aAAa,QAAQ;AAC/B;","names":[]}

package/dist/hooks/useLocalStorage.mjs

@@ -1,5 +1,7 @@
+"use client";
+
 // src/hooks/useLocalStorage.ts
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 
 // src/util/storage.ts
 var StorageService = class {
@@ -52,9 +54,6 @@ var useLocalStorage = (key, initValue) => {
     storageService.set(key, newValue);
     setStoredValue(newValue);
   }, [storedValue, setStoredValue, key]);
-  useEffect(() => {
-    setStoredValue(get());
-  }, []);
   return [storedValue, setValue];
 };
 export {

package/dist/hooks/useLocalStorage.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/util/resolveSetState.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","class StorageService {\n  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n  constructor(private storage: Storage) {\n  }\n\n  public get<T>(key: string): T | null {\n    const value = this.storage.getItem(key)\n    if (value === null) {\n      return null\n    }\n    return JSON.parse(value)\n  }\n\n  public set<T>(key: string, value: T) {\n    this.storage.setItem(key, JSON.stringify(value))\n  }\n\n  public delete(key: string) {\n    this.storage.removeItem(key)\n  }\n\n  public deleteAll() {\n    this.storage.clear()\n  }\n}\n\nexport class LocalStorageService extends StorageService {\n  constructor() {\n    super(window.localStorage)\n  }\n}\n\nexport class SessionStorageService extends StorageService {\n  constructor() {\n    super(window.sessionStorage)\n  }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n  return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":";AACA,SAAS,aAAa,WAAW,gBAAgB;;;ACDjD,IAAM,iBAAN,MAAqB;AAAA;AAAA,EAGnB,YAAoB,SAAkB;AAAlB;AAAA,EACpB;AAAA,EAEO,IAAO,KAAuB;AACnC,UAAM,QAAQ,KAAK,QAAQ,QAAQ,GAAG;AACtC,QAAI,UAAU,MAAM;AAClB,aAAO;AAAA,IACT;AACA,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEO,IAAO,KAAa,OAAU;AACnC,SAAK,QAAQ,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACjD;AAAA,EAEO,OAAO,KAAa;AACzB,SAAK,QAAQ,WAAW,GAAG;AAAA,EAC7B;AAAA,EAEO,YAAY;AACjB,SAAK,QAAQ,MAAM;AAAA,EACrB;AACF;AAEO,IAAM,sBAAN,cAAkC,eAAe;AAAA,EACtD,cAAc;AACZ,UAAM,OAAO,YAAY;AAAA,EAC3B;AACF;;;AC7BO,SAAS,gBAAmB,QAA2B,MAAY;AACxE,SAAO,OAAO,WAAW,aAAc,OAA0B,IAAI,IAAI;AAC3E;;;AFEO,IAAM,kBAAkB,CAAI,KAAa,cAAmC;AACjF,QAAM,MAAM,YAAY,MAAS;AAC/B,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,UAAM,QAAQ,eAAe,IAAO,GAAG;AACvC,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAY,GAAG;AAErD,QAAM,WAAwB,YAAY,YAAU;AAClD,UAAM,WAAW,gBAAgB,QAAQ,WAAW;AACpD,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,mBAAe,IAAI,KAAK,QAAQ;AAEhC,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,aAAa,gBAAgB,GAAG,CAAC;AAErC,YAAU,MAAM;AACd,mBAAe,IAAI,CAAC;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;","names":[]}
+{"version":3,"sources":["../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/util/resolveSetState.ts"],"sourcesContent":["'use client'\n\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  return [storedValue, setValue]\n}","class StorageService {\n  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n  constructor(private storage: Storage) {\n  }\n\n  public get<T>(key: string): T | null {\n    const value = this.storage.getItem(key)\n    if (value === null) {\n      return null\n    }\n    return JSON.parse(value)\n  }\n\n  public set<T>(key: string, value: T) {\n    this.storage.setItem(key, JSON.stringify(value))\n  }\n\n  public delete(key: string) {\n    this.storage.removeItem(key)\n  }\n\n  public deleteAll() {\n    this.storage.clear()\n  }\n}\n\nexport class LocalStorageService extends StorageService {\n  constructor() {\n    super(window.localStorage)\n  }\n}\n\nexport class SessionStorageService extends StorageService {\n  constructor() {\n    super(window.sessionStorage)\n  }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n  return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":";;;AAGA,SAAS,aAAa,gBAAgB;;;ACHtC,IAAM,iBAAN,MAAqB;AAAA;AAAA,EAGnB,YAAoB,SAAkB;AAAlB;AAAA,EACpB;AAAA,EAEO,IAAO,KAAuB;AACnC,UAAM,QAAQ,KAAK,QAAQ,QAAQ,GAAG;AACtC,QAAI,UAAU,MAAM;AAClB,aAAO;AAAA,IACT;AACA,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEO,IAAO,KAAa,OAAU;AACnC,SAAK,QAAQ,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACjD;AAAA,EAEO,OAAO,KAAa;AACzB,SAAK,QAAQ,WAAW,GAAG;AAAA,EAC7B;AAAA,EAEO,YAAY;AACjB,SAAK,QAAQ,MAAM;AAAA,EACrB;AACF;AAEO,IAAM,sBAAN,cAAkC,eAAe;AAAA,EACtD,cAAc;AACZ,UAAM,OAAO,YAAY;AAAA,EAC3B;AACF;;;AC7BO,SAAS,gBAAmB,QAA2B,MAAY;AACxE,SAAO,OAAO,WAAW,aAAc,OAA0B,IAAI,IAAI;AAC3E;;;AFIO,IAAM,kBAAkB,CAAI,KAAa,cAAmC;AACjF,QAAM,MAAM,YAAY,MAAS;AAC/B,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,UAAM,QAAQ,eAAe,IAAO,GAAG;AACvC,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAY,GAAG;AAErD,QAAM,WAAwB,YAAY,YAAU;AAClD,UAAM,WAAW,gBAAgB,QAAQ,WAAW;AACpD,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,mBAAe,IAAI,KAAK,QAAQ;AAEhC,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,aAAa,gBAAgB,GAAG,CAAC;AAErC,SAAO,CAAC,aAAa,QAAQ;AAC/B;","names":[]}

package/dist/index.d.mts

@@ -24,7 +24,7 @@ export { Pagination, PaginationProps } from './components/layout-and-navigation/
 export { SearchableList, SearchableListProps } from './components/layout-and-navigation/SearchableList.mjs';
 export { StepperBar, StepperBarProps, StepperBarUncontrolled, StepperState } from './components/layout-and-navigation/StepperBar.mjs';
 export { TextImage, TextImageProps } from './components/layout-and-navigation/TextImage.mjs';
-export { Tile, TileProps } from './components/layout-and-navigation/Tile.mjs';
+export { ListTile, ListTileProps, Tile, TileProps } from './components/layout-and-navigation/Tile.mjs';
 export { VerticalDivider, VerticalDividerProps } from './components/layout-and-navigation/VerticalDivider.mjs';
 export { ErrorComponent, ErrorComponentProps } from './components/loading-states/ErrorComponent.mjs';
 export { LoadingAndErrorComponent, LoadingAndErrorComponentProps } from './components/loading-states/LoadingAndErrorComponent.mjs';
@@ -60,7 +60,7 @@ export { Menu, MenuBag, MenuItem, MenuItemProps, MenuProps } from './components/
 export { MultiSelect, MultiSelectBag, MultiSelectOption, MultiSelectProps, MultiSelectUncontrolled } from './components/user-action/MultiSelect.mjs';
 export { ScrollPicker, ScrollPickerProps } from './components/user-action/ScrollPicker.mjs';
 export { SearchBar, SearchBarProps } from './components/user-action/SearchBar.mjs';
-export { Select, SelectBag, SelectOption, SelectProps, SelectTile, SelectTileProps, SelectUncontrolled } from './components/user-action/Select.mjs';
+export { Select, SelectBag, SelectOption, SelectProps, SelectUncontrolled } from './components/user-action/Select.mjs';
 export { Textarea, TextareaProps, TextareaUncontrolled } from './components/user-action/Textarea.mjs';
 export { ToggleableInput, ToggleableInputUncontrolled } from './components/user-action/ToggleableInput.mjs';
 export { Tooltip, TooltipProps } from './components/user-action/Tooltip.mjs';

package/dist/index.d.ts

@@ -24,7 +24,7 @@ export { Pagination, PaginationProps } from './components/layout-and-navigation/
 export { SearchableList, SearchableListProps } from './components/layout-and-navigation/SearchableList.js';
 export { StepperBar, StepperBarProps, StepperBarUncontrolled, StepperState } from './components/layout-and-navigation/StepperBar.js';
 export { TextImage, TextImageProps } from './components/layout-and-navigation/TextImage.js';
-export { Tile, TileProps } from './components/layout-and-navigation/Tile.js';
+export { ListTile, ListTileProps, Tile, TileProps } from './components/layout-and-navigation/Tile.js';
 export { VerticalDivider, VerticalDividerProps } from './components/layout-and-navigation/VerticalDivider.js';
 export { ErrorComponent, ErrorComponentProps } from './components/loading-states/ErrorComponent.js';
 export { LoadingAndErrorComponent, LoadingAndErrorComponentProps } from './components/loading-states/LoadingAndErrorComponent.js';
@@ -60,7 +60,7 @@ export { Menu, MenuBag, MenuItem, MenuItemProps, MenuProps } from './components/
 export { MultiSelect, MultiSelectBag, MultiSelectOption, MultiSelectProps, MultiSelectUncontrolled } from './components/user-action/MultiSelect.js';
 export { ScrollPicker, ScrollPickerProps } from './components/user-action/ScrollPicker.js';
 export { SearchBar, SearchBarProps } from './components/user-action/SearchBar.js';
-export { Select, SelectBag, SelectOption, SelectProps, SelectTile, SelectTileProps, SelectUncontrolled } from './components/user-action/Select.js';
+export { Select, SelectBag, SelectOption, SelectProps, SelectUncontrolled } from './components/user-action/Select.js';
 export { Textarea, TextareaProps, TextareaUncontrolled } from './components/user-action/Textarea.js';
 export { ToggleableInput, ToggleableInputUncontrolled } from './components/user-action/ToggleableInput.js';
 export { Tooltip, TooltipProps } from './components/user-action/Tooltip.js';