@caspeco/casper-ui-library 8.4.0 → 9.0.0-alpha.0

package/dist/theme/theme-types.js

@@ -1,10 +1,10 @@
-var c = /* @__PURE__ */ ((r) => (r.Primary = "var(--theme-colors-primary-wlv)", r.PrimaryHover = "var(--theme-colors-primary-hover-wlv)", r.PrimaryActive = "var(--theme-colors-primary-active-wlv)", r.OnPrimary = "var(--theme-colors-on-primary-wlv)", r.PrimaryContainer = "var(--theme-colors-primary-container-wlv)", r.OnPrimaryContainer = "var(--theme-colors-on-primary-container-wlv)", r.Secondary = "var(--theme-colors-secondary-wlv)", r.SecondaryHover = "var(--theme-colors-secondary-hover-wlv)", r.SecondaryActive = "var(--theme-colors-secondary-active-wlv)", r.OnSecondary = "var(--theme-colors-on-secondary-wlv)", r.SecondaryContainer = "var(--theme-colors-secondary-container-wlv)", r.OnSecondaryContainer = "var(--theme-colors-on-secondary-container-wlv)", r.Accent = "var(--theme-colors-accent-wlv)", r.AccentHover = "var(--theme-colors-accent-hover-wlv)", r.AccentHoverAlpha = "var(--theme-colors-accent-hover-alpha-wlv)", r.AccentActive = "var(--theme-colors-accent-active-wlv)", r.AccentActiveAlpha = "var(--theme-colors-accent-active-alpha-wlv)", r.OnAccent = "var(--theme-colors-on-accent-wlv)", r.AccentContainer = "var(--theme-colors-accent-container-wlv)", r.OnAccentContainer = "var(--theme-colors-on-accent-container-wlv)", r.Background = "var(--theme-colors-background-wlv)", r.OnBackground = "var(--theme-colors-on-background-wlv)", r.OnBackgroundBorder = "var(--theme-colors-on-background-border-wlv)", r.OnBackgroundSubdued = "var(--theme-colors-on-background-subdued-wlv)", r.BackgroundDisabled = "var(--theme-colors-background-disabled-wlv)", r.OnBackgroundHeader = "var(--theme-colors-on-background-header-wlv)", r.ViewHeaderBackground = "var(--theme-colors-view-header-background-wlv)", r.Surface = "var(--theme-colors-surface-wlv)", r.OnSurface = "var(--theme-colors-on-surface-wlv)", r.OnSurfaceBorder = "var(--theme-colors-on-surface-border-wlv)", r.OnSurfaceSubdued = "var(--theme-colors-on-surface-subdued-wlv)", r.SurfaceDisabled = "var(--theme-colors-surface-disabled-wlv)", r.OnSurfaceHeader = "var(--theme-colors-on-surface-header-wlv)", r.Info = "var(--theme-colors-info-wlv)", r.InfoHover = "var(--theme-colors-info-hover-wlv)", r.InfoActive = "var(--theme-colors-info-active-wlv)", r.OnInfo = "var(--theme-colors-on-info-wlv)", r.InfoContainer = "var(--theme-colors-info-container-wlv)", r.OnInfoContainer = "var(--theme-colors-on-info-container-wlv)", r.Success = "var(--theme-colors-success-wlv)", r.SuccessHover = "var(--theme-colors-success-hover-wlv)", r.SuccessActive = "var(--theme-colors-success-active-wlv)", r.OnSuccess = "var(--theme-colors-on-success-wlv)", r.SuccessContainer = "var(--theme-colors-success-container-wlv)", r.OnSuccessContainer = "var(--theme-colors-on-success-container-wlv)", r.Warning = "var(--theme-colors-warning-wlv)", r.WarningHover = "var(--theme-colors-warning-hover-wlv)", r.WarningActive = "var(--theme-colors-warning-active-wlv)", r.OnWarning = "var(--theme-colors-on-warning-wlv)", r.WarningContainer = "var(--theme-colors-warning-container-wlv)", r.OnWarningContainer = "var(--theme-colors-on-warning-container-wlv)", r.Error = "var(--theme-colors-error-wlv)", r.ErrorHover = "var(--theme-colors-error-hover-wlv)", r.ErrorActive = "var(--theme-colors-error-active-wlv)", r.OnError = "var(--theme-colors-on-error-wlv)", r.ErrorContainer = "var(--theme-colors-error-container-wlv)", r.OnErrorContainer = "var(--theme-colors-on-error-container-wlv)", r.Neutral = "var(--theme-colors-neutral-wlv)", r.NeutralHover = "var(--theme-colors-neutral-hover-wlv)", r.NeutralActive = "var(--theme-colors-neutral-active-wlv)", r.OnNeutral = "var(--theme-colors-on-neutral-wlv)", r.NeutralContainer = "var(--theme-colors-neutral-container-wlv)", r.OnNeutralContainer = "var(--theme-colors-on-neutral-container-wlv)", r.Shadow = "var(--theme-colors-shadow)", r.ModalOverlay = "var(--theme-colors-modal-overlay)", r.ViewFinderOverlay = "var(--theme-colors-view-finder-overlay)", r.ShadowHeader = "var(--theme-colors-shadow-header)", r.ShadowFooter = "var(--theme-colors-shadow-footer)", r.ShadowCard = "var(--theme-colors-shadow-card)", r.ShadowScroll = "var(--theme-colors-shadow-scroll)", r.PickerOnPicker = "var(--theme-colors-picker-on-picker)", r.PickerBerry = "var(--theme-colors-picker-berry)", r.PickerBerryLight = "var(--theme-colors-picker-berry-light)", r.PickerCoral = "var(--theme-colors-picker-coral)", r.PickerCoralLight = "var(--theme-colors-picker-coral-light)", r.PickerFlamingo = "var(--theme-colors-picker-flamingo)", r.PickerFlamingoLight = "var(--theme-colors-picker-flamingo-light)", r.PickerFog = "var(--theme-colors-picker-fog)", r.PickerFogLight = "var(--theme-colors-picker-fog-light)", r.PickerHoney = "var(--theme-colors-picker-honey)", r.PickerHoneyLight = "var(--theme-colors-picker-honey-light)", r.PickerLemon = "var(--theme-colors-picker-lemon)", r.PickerLemonLight = "var(--theme-colors-picker-lemon-light)", r.PickerLime = "var(--theme-colors-picker-lime)", r.PickerLimeLight = "var(--theme-colors-picker-lime-light)", r.PickerOlive = "var(--theme-colors-picker-olive)", r.PickerOliveLight = "var(--theme-colors-picker-olive-light)", r.PickerPlum = "var(--theme-colors-picker-plum)", r.PickerPlumLight = "var(--theme-colors-picker-plum-light)", r.PickerSky = "var(--theme-colors-picker-sky)", r.PickerSkyLight = "var(--theme-colors-picker-sky-light)", r.Highlight = "var(--theme-colors-highlight)", r.OnHighlight = "var(--theme-colors-on-highlight)", r))(c || {}), v = /* @__PURE__ */ ((r) => (r.None = "var(--theme-space-none)", r.XSmall = "var(--theme-space-xsmall)", r.Small = "var(--theme-space-small)", r.Medium = "var(--theme-space-medium)", r.Large = "var(--theme-space-large)", r.XLarge = "var(--theme-space-xlarge)", r.X2Large = "var(--theme-space-x2large)", r))(v || {}), t = /* @__PURE__ */ ((r) => (r.None = "var(--theme-borders-none)", r.XSmall = "var(--theme-borders-xsmall)", r.Small = "var(--theme-borders-small)", r.Medium = "var(--theme-borders-medium)", r.Large = "var(--theme-borders-large)", r.XLarge = "var(--theme-borders-xlarge)", r))(t || {}), n = /* @__PURE__ */ ((r) => (r.None = "var(--theme-radii-none)", r.XSmall = "var(--theme-radii-xsmall)", r.Small = "var(--theme-radii-small)", r.Medium = "var(--theme-radii-medium)", r.Large = "var(--theme-radii-large)", r.XLarge = "var(--theme-radii-xlarge)", r))(n || {}), e = /* @__PURE__ */ ((r) => (r.Header = "var(--theme-fonts-header-wlv)", r.SubHeader = "var(--theme-fonts-subheader-wlv)", r.Body = "var(--theme-fonts-body-wlv)", r))(e || {}), s = /* @__PURE__ */ ((r) => (r.XSmall = "var(--theme-fontSizes-xsmall)", r.Small = "var(--theme-fontSizes-small)", r.Medium = "var(--theme-fontSizes-medium)", r.Large = "var(--theme-fontSizes-large)", r.XLarge = "var(--theme-fontSizes-xlarge)", r.X2Large = "var(--theme-fontSizes-x2large)", r.X3Large = "var(--theme-fontSizes-x3large)", r.X4Large = "var(--theme-fontSizes-x4large)", r.X5Large = "var(--theme-fontSizes-x5large)", r.X6Large = "var(--theme-fontSizes-x6large)", r))(s || {}), o = /* @__PURE__ */ ((r) => (r.Small = "var(--theme-shadows-small)", r.Medium = "var(--theme-shadows-medium)", r.Large = "var(--theme-shadows-large)", r.Header = "var(--theme-shadows-header)", r.Footer = "var(--theme-shadows-footer)", r))(o || {}), a = /* @__PURE__ */ ((r) => (r.Base = "var(--theme-breakpoints-base)", r.Small = "var(--theme-breakpoints-small)", r.Medium = "var(--theme-breakpoints-medium)", r.Large = "var(--theme-breakpoints-large)", r.XLarge = "var(--theme-breakpoints-xlarge)", r.X2Large = "var(--theme-breakpoints-x2large)", r))(a || {}), g = /* @__PURE__ */ ((r) => (r.XSmall = "var(--theme-iconSizes-xsmall)", r.Small = "var(--theme-iconSizes-small)", r.Medium = "var(--theme-iconSizes-medium)", r.Large = "var(--theme-iconSizes-large)", r.XLarge = "var(--theme-iconSizes-xlarge)", r.X2Large = "var(--theme-iconSizes-x2large)", r.X3Large = "var(--theme-iconSizes-x3large)", r))(g || {});
+var c = /* @__PURE__ */ ((r) => (r.Primary = "var(--theme-colors-primary-wlv)", r.PrimaryHover = "var(--theme-colors-primary-hover-wlv)", r.PrimaryActive = "var(--theme-colors-primary-active-wlv)", r.OnPrimary = "var(--theme-colors-on-primary-wlv)", r.PrimaryContainer = "var(--theme-colors-primary-container-wlv)", r.OnPrimaryContainer = "var(--theme-colors-on-primary-container-wlv)", r.Secondary = "var(--theme-colors-secondary-wlv)", r.SecondaryHover = "var(--theme-colors-secondary-hover-wlv)", r.SecondaryActive = "var(--theme-colors-secondary-active-wlv)", r.OnSecondary = "var(--theme-colors-on-secondary-wlv)", r.SecondaryContainer = "var(--theme-colors-secondary-container-wlv)", r.OnSecondaryContainer = "var(--theme-colors-on-secondary-container-wlv)", r.Accent = "var(--theme-colors-accent-wlv)", r.AccentHover = "var(--theme-colors-accent-hover-wlv)", r.AccentHoverAlpha = "var(--theme-colors-accent-hover-alpha-wlv)", r.AccentActive = "var(--theme-colors-accent-active-wlv)", r.AccentActiveAlpha = "var(--theme-colors-accent-active-alpha-wlv)", r.OnAccent = "var(--theme-colors-on-accent-wlv)", r.AccentContainer = "var(--theme-colors-accent-container-wlv)", r.OnAccentContainer = "var(--theme-colors-on-accent-container-wlv)", r.Background = "var(--theme-colors-background-wlv)", r.OnBackground = "var(--theme-colors-on-background-wlv)", r.OnBackgroundBorder = "var(--theme-colors-on-background-border-wlv)", r.OnBackgroundSubdued = "var(--theme-colors-on-background-subdued-wlv)", r.BackgroundDisabled = "var(--theme-colors-background-disabled-wlv)", r.OnBackgroundHeader = "var(--theme-colors-on-background-header-wlv)", r.ViewHeaderBackground = "var(--theme-colors-view-header-background-wlv)", r.Surface = "var(--theme-colors-surface-wlv)", r.OnSurface = "var(--theme-colors-on-surface-wlv)", r.OnSurfaceBorder = "var(--theme-colors-on-surface-border-wlv)", r.OnSurfaceSubdued = "var(--theme-colors-on-surface-subdued-wlv)", r.SurfaceDisabled = "var(--theme-colors-surface-disabled-wlv)", r.OnSurfaceHeader = "var(--theme-colors-on-surface-header-wlv)", r.Info = "var(--theme-colors-info-wlv)", r.InfoHover = "var(--theme-colors-info-hover-wlv)", r.InfoActive = "var(--theme-colors-info-active-wlv)", r.OnInfo = "var(--theme-colors-on-info-wlv)", r.InfoContainer = "var(--theme-colors-info-container-wlv)", r.OnInfoContainer = "var(--theme-colors-on-info-container-wlv)", r.Success = "var(--theme-colors-success-wlv)", r.SuccessHover = "var(--theme-colors-success-hover-wlv)", r.SuccessActive = "var(--theme-colors-success-active-wlv)", r.OnSuccess = "var(--theme-colors-on-success-wlv)", r.SuccessContainer = "var(--theme-colors-success-container-wlv)", r.OnSuccessContainer = "var(--theme-colors-on-success-container-wlv)", r.Warning = "var(--theme-colors-warning-wlv)", r.WarningHover = "var(--theme-colors-warning-hover-wlv)", r.WarningActive = "var(--theme-colors-warning-active-wlv)", r.OnWarning = "var(--theme-colors-on-warning-wlv)", r.WarningContainer = "var(--theme-colors-warning-container-wlv)", r.OnWarningContainer = "var(--theme-colors-on-warning-container-wlv)", r.Error = "var(--theme-colors-error-wlv)", r.ErrorHover = "var(--theme-colors-error-hover-wlv)", r.ErrorActive = "var(--theme-colors-error-active-wlv)", r.OnError = "var(--theme-colors-on-error-wlv)", r.ErrorContainer = "var(--theme-colors-error-container-wlv)", r.OnErrorContainer = "var(--theme-colors-on-error-container-wlv)", r.Neutral = "var(--theme-colors-neutral-wlv)", r.NeutralHover = "var(--theme-colors-neutral-hover-wlv)", r.NeutralActive = "var(--theme-colors-neutral-active-wlv)", r.OnNeutral = "var(--theme-colors-on-neutral-wlv)", r.NeutralContainer = "var(--theme-colors-neutral-container-wlv)", r.OnNeutralContainer = "var(--theme-colors-on-neutral-container-wlv)", r.Shadow = "var(--theme-colors-shadow)", r.ModalOverlay = "var(--theme-colors-modal-overlay)", r.ViewFinderOverlay = "var(--theme-colors-view-finder-overlay)", r.ShadowHeader = "var(--theme-colors-shadow-header)", r.ShadowFooter = "var(--theme-colors-shadow-footer)", r.ShadowCard = "var(--theme-colors-shadow-card)", r.ShadowScroll = "var(--theme-colors-shadow-scroll)", r.PickerOnPicker = "var(--theme-colors-picker-on-picker)", r.PickerBerry = "var(--theme-colors-picker-berry)", r.PickerBerryLight = "var(--theme-colors-picker-berry-light)", r.PickerCoral = "var(--theme-colors-picker-coral)", r.PickerCoralLight = "var(--theme-colors-picker-coral-light)", r.PickerFlamingo = "var(--theme-colors-picker-flamingo)", r.PickerFlamingoLight = "var(--theme-colors-picker-flamingo-light)", r.PickerFog = "var(--theme-colors-picker-fog)", r.PickerFogLight = "var(--theme-colors-picker-fog-light)", r.PickerHoney = "var(--theme-colors-picker-honey)", r.PickerHoneyLight = "var(--theme-colors-picker-honey-light)", r.PickerLemon = "var(--theme-colors-picker-lemon)", r.PickerLemonLight = "var(--theme-colors-picker-lemon-light)", r.PickerLime = "var(--theme-colors-picker-lime)", r.PickerLimeLight = "var(--theme-colors-picker-lime-light)", r.PickerOlive = "var(--theme-colors-picker-olive)", r.PickerOliveLight = "var(--theme-colors-picker-olive-light)", r.PickerPlum = "var(--theme-colors-picker-plum)", r.PickerPlumLight = "var(--theme-colors-picker-plum-light)", r.PickerSky = "var(--theme-colors-picker-sky)", r.PickerSkyLight = "var(--theme-colors-picker-sky-light)", r.Highlight = "var(--theme-colors-highlight)", r.OnHighlight = "var(--theme-colors-on-highlight)", r))(c || {}), v = /* @__PURE__ */ ((r) => (r.None = "var(--theme-spacing-none)", r.XSmall = "var(--theme-spacing-xsmall)", r.Small = "var(--theme-spacing-small)", r.Medium = "var(--theme-spacing-medium)", r.Large = "var(--theme-spacing-large)", r.XLarge = "var(--theme-spacing-xlarge)", r.X2Large = "var(--theme-spacing-x2large)", r))(v || {}), t = /* @__PURE__ */ ((r) => (r.None = "var(--theme-borders-none)", r.XSmall = "var(--theme-borders-xsmall)", r.Small = "var(--theme-borders-small)", r.Medium = "var(--theme-borders-medium)", r.Large = "var(--theme-borders-large)", r.XLarge = "var(--theme-borders-xlarge)", r))(t || {}), n = /* @__PURE__ */ ((r) => (r.None = "var(--theme-radii-none)", r.XSmall = "var(--theme-radii-xsmall)", r.Small = "var(--theme-radii-small)", r.Medium = "var(--theme-radii-medium)", r.Large = "var(--theme-radii-large)", r.XLarge = "var(--theme-radii-xlarge)", r))(n || {}), s = /* @__PURE__ */ ((r) => (r.Header = "var(--theme-fonts-header-wlv)", r.SubHeader = "var(--theme-fonts-subheader-wlv)", r.Body = "var(--theme-fonts-body-wlv)", r))(s || {}), e = /* @__PURE__ */ ((r) => (r.XSmall = "var(--theme-font-sizes-xsmall)", r.Small = "var(--theme-font-sizes-small)", r.Medium = "var(--theme-font-sizes-medium)", r.Large = "var(--theme-font-sizes-large)", r.XLarge = "var(--theme-font-sizes-xlarge)", r.X2Large = "var(--theme-font-sizes-x2large)", r.X3Large = "var(--theme-font-sizes-x3large)", r.X4Large = "var(--theme-font-sizes-x4large)", r.X5Large = "var(--theme-font-sizes-x5large)", r.X6Large = "var(--theme-font-sizes-x6large)", r))(e || {}), o = /* @__PURE__ */ ((r) => (r.Small = "var(--theme-shadows-small)", r.Medium = "var(--theme-shadows-medium)", r.Large = "var(--theme-shadows-large)", r.Header = "var(--theme-shadows-header)", r.Footer = "var(--theme-shadows-footer)", r))(o || {}), a = /* @__PURE__ */ ((r) => (r.Base = "var(--theme-breakpoints-base)", r.Small = "var(--theme-breakpoints-small)", r.Medium = "var(--theme-breakpoints-medium)", r.Large = "var(--theme-breakpoints-large)", r.XLarge = "var(--theme-breakpoints-xlarge)", r.X2Large = "var(--theme-breakpoints-x2large)", r))(a || {}), g = /* @__PURE__ */ ((r) => (r.XSmall = "var(--theme-sizes-icons-xsmall)", r.Small = "var(--theme-sizes-icons-small)", r.Medium = "var(--theme-sizes-icons-medium)", r.Large = "var(--theme-sizes-icons-large)", r.XLarge = "var(--theme-sizes-icons-xlarge)", r.X2Large = "var(--theme-sizes-icons-x2large)", r.X3Large = "var(--theme-sizes-icons-x3large)", r))(g || {});
 export {
   t as ThemeBorderVariable,
   a as ThemeBreakPointVariable,
   c as ThemeColorVariable,
-  s as ThemeFontSizeVariable,
-  e as ThemeFontVariable,
+  e as ThemeFontSizeVariable,
+  s as ThemeFontVariable,
   g as ThemeIconSizeVariable,
   n as ThemeRadiusVariable,
   o as ThemeShadowVariable,

package/dist/theme/theme.d.ts

@@ -0,0 +1,30 @@
+import { SystemConfig, ThemingConfig } from '@chakra-ui/react';
+import { ThemeColorValues, ThemeFontValues } from './theme-types.js';
+/**
+ * DO NOT USE.
+ * We only use this for the Chakra typegen CLI, you should use createSystemWithOverrides() instead.
+ */
+export declare const system: import('@chakra-ui/react').SystemContext;
+interface ConfigOptions {
+    globalCss?: SystemConfig["globalCss"];
+    colors?: ThemeColorValues;
+    fonts?: ThemeFontValues;
+}
+export declare function createSystemWithOverrides(options: ConfigOptions): import('@chakra-ui/react').SystemContext;
+export declare function createTokens(): ThemingConfig["tokens"];
+/**
+ * Defines custom theme token names and their associated
+ * style values (some white label-override:able and some static).
+ *
+ * @returns Object to be used in the Chakra util createSystem() fn (see theme-provider.tsx).
+ * It results in our theme output containing corresponding css-variables,
+ * applied to the theme stylesheet.
+ *
+ * Example: `{ colors.[ThemeColorToken.Primary]: '#ff0000' }
+ * => --theme-colors-primary-wlv: #ff0000`;
+ *
+ * @see Chakra Docs Reference: https://chakra-ui.com/docs/theming/semantic-tokens
+ */
+export declare function createSemanticTokens(colors: ThemeColorValues, fonts: ThemeFontValues): ThemingConfig["semanticTokens"];
+export {};
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../lib/theme/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AActG,OAAO,EAAE,KAAK,gBAAgB,EAAsB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAqChG;;;GAGG;AACH,eAAO,MAAM,MAAM,0CAAsD,CAAC;AAE1E,UAAU,aAAa;IACtB,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,KAAK,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,aAAa,4CAE/D;AAED,wBAAgB,YAAY,IAAI,aAAa,CAAC,QAAQ,CAAC,CAkEtD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CACnC,MAAM,EAAE,gBAAgB,EACxB,KAAK,EAAE,eAAe,GACpB,aAAa,CAAC,gBAAgB,CAAC,CAuGjC"}

package/dist/theme/theme.js

@@ -0,0 +1,261 @@
+import { createSystem as v, defaultConfig as k } from "@chakra-ui/react";
+import { componentSlotRecipes as y, componentRecipes as p } from "./component-recipes.js";
+import { casperUITheme as S } from "./theme-casper-ui.js";
+import { ThemeFontToken as o, ThemeColorToken as r, ThemeIconSizeToken as d, ThemeBreakPointToken as u, ThemeShadowToken as D, ThemeFontSizeToken as i, ThemeRadiusToken as c, ThemeSpaceToken as m, ThemeBorderToken as g } from "./theme-tokens.js";
+import { ThemeColorVariable as C } from "./theme-types.js";
+function f({
+  globalCss: e = S.globalStyles,
+  colors: t = S.colors,
+  fonts: h = S.fonts
+} = {}) {
+  return {
+    cssVarsPrefix: "theme",
+    globalCss: e,
+    preflight: !0,
+    disableLayers: !0,
+    theme: {
+      tokens: H(),
+      semanticTokens: B(t, h),
+      recipes: p,
+      slotRecipes: y
+    }
+  };
+}
+function A() {
+  return delete k.globalCss, delete k.theme?.textStyles, delete k.theme?.tokens?.colors, delete k.theme?.tokens?.fontSizes, delete k.theme?.tokens?.fonts, delete k.theme?.tokens?.sizes, delete k.theme?.semanticTokens?.colors, k;
+}
+v(A(), f());
+function w(e) {
+  return v(A(), f(e));
+}
+function H() {
+  return {
+    borders: {
+      [g.None]: a("none"),
+      [g.XSmall]: a("0.0625rem solid"),
+      // 1px
+      [g.Small]: a("0.125rem solid"),
+      // 2px
+      [g.Medium]: a("0.25rem solid"),
+      // 4px
+      [g.Large]: a("0.5rem solid"),
+      // 8px
+      [g.XLarge]: a("0.5rem solid")
+      // 8px purposly same as Large for now
+    },
+    spacing: {
+      [m.None]: a("0"),
+      [m.XSmall]: a("0.25rem"),
+      // 4px
+      [m.Small]: a("0.5rem"),
+      // 8px
+      [m.Medium]: a("1rem"),
+      // 16px
+      [m.Large]: a("2rem"),
+      // 32px
+      [m.XLarge]: a("3rem"),
+      // 48px
+      [m.X2Large]: a("5rem")
+      // 80px
+    },
+    radii: {
+      [c.None]: a("0"),
+      [c.XSmall]: a("0.125rem"),
+      // 2px
+      [c.Small]: a("0.25rem"),
+      // 4px
+      [c.Medium]: a("0.5rem"),
+      // 8px
+      [c.Large]: a("1rem"),
+      // 16px
+      [c.XLarge]: a("31.25rem")
+      // 500px
+    },
+    fontSizes: {
+      [i.XSmall]: a("0.75rem"),
+      // 12px
+      [i.Small]: a("0.875rem"),
+      // 14px
+      [i.Medium]: a("1rem"),
+      // 16px
+      [i.Large]: a("1.125rem"),
+      // 18px
+      [i.XLarge]: a("1.5rem"),
+      // 24px
+      [i.X2Large]: a("2rem"),
+      // 32px
+      [i.X3Large]: a("2.5rem"),
+      // 40px
+      [i.X4Large]: a("3.25rem"),
+      // 52px
+      [i.X5Large]: a("4rem"),
+      // 64px
+      [i.X6Large]: a("5rem")
+      // 80px
+    },
+    shadows: {
+      [D.Small]: a(`0px 4px 12px 0px ${C.ShadowCard}`),
+      [D.Medium]: a(`0px 4px 20px 4px ${C.ShadowCard}`),
+      [D.Large]: a(`0px 8px 40px 8px ${C.ShadowCard}`),
+      [D.Header]: a(`0px 8px 40px 8px ${C.ShadowHeader}`),
+      [D.Footer]: a(`0px 0px 16px 0px ${C.ShadowFooter}`)
+    },
+    breakpoints: {
+      [u.Base]: a("0em"),
+      [u.Small]: a("30em"),
+      // 480px
+      [u.Medium]: a("48em"),
+      // 768px
+      [u.Large]: a("62em"),
+      // 992px
+      [u.XLarge]: a("80em"),
+      // 1280px
+      [u.X2Large]: a("96em")
+      // 1536px
+    },
+    sizes: {
+      icons: {
+        [d.XSmall]: a("1rem"),
+        // 16px
+        [d.Small]: a("1.25rem"),
+        // 20px
+        [d.Medium]: a("1.5rem"),
+        // 24px
+        [d.Large]: a("2rem"),
+        // 32px
+        [d.XLarge]: a("2.5rem"),
+        // 40px
+        [d.X2Large]: a("3rem"),
+        // 48 px
+        [d.X3Large]: a("3.5rem")
+        // 56px
+      }
+    }
+  };
+}
+function B(e, t) {
+  return {
+    colors: {
+      [r.Primary]: n(e.primary, e.primaryDark),
+      [r.PrimaryHover]: n(e.primaryHover, e.primaryHoverDark),
+      [r.PrimaryActive]: n(e.primaryActive, e.primaryActiveDark),
+      [r.OnPrimary]: n(e.onPrimary, e.onPrimaryDark),
+      [r.PrimaryContainer]: n(e.primaryContainer, e.primaryContainerDark),
+      [r.OnPrimaryContainer]: n(e.onPrimaryContainer, e.onPrimaryContainerDark),
+      [r.Secondary]: n(e.secondary, e.secondaryDark),
+      [r.SecondaryHover]: n(e.secondaryHover, e.secondaryHoverDark),
+      [r.SecondaryActive]: n(e.secondaryActive, e.secondaryActiveDark),
+      [r.OnSecondary]: n(e.onSecondary, e.onSecondaryDark),
+      [r.SecondaryContainer]: n(e.secondaryContainer, e.secondaryContainerDark),
+      [r.OnSecondaryContainer]: n(e.onSecondaryContainer, e.onSecondaryContainerDark),
+      [r.Accent]: n(e.accent, e.accentDark),
+      [r.AccentHover]: n(e.accentHover, e.accentHoverDark),
+      [r.AccentHoverAlpha]: n(e.accentHoverAlpha, e.accentHoverAlphaDark),
+      [r.AccentActive]: n(e.accentActive, e.accentActiveDark),
+      [r.AccentActiveAlpha]: n(e.accentActiveAlpha, e.accentActiveAlphaDark),
+      [r.OnAccent]: n(e.onAccent, e.onAccentDark),
+      [r.AccentContainer]: n(e.accentContainer, e.accentContainerDark),
+      [r.OnAccentContainer]: n(e.onAccentContainer, e.onAccentContainerDark),
+      [r.Background]: n(e.background, e.backgroundDark),
+      [r.OnBackground]: n(e.onBackground, e.onBackgroundDark),
+      [r.OnBackgroundBorder]: n(e.onBackgroundBorder, e.onBackgroundBorderDark),
+      [r.OnBackgroundSubdued]: n(e.onBackgroundSubdued, e.onBackgroundSubduedDark),
+      [r.BackgroundDisabled]: n(e.backgroundDisabled, e.backgroundDisabledDark),
+      [r.OnBackgroundHeader]: n(e.onBackgroundHeader, e.onBackgroundHeaderDark),
+      [r.Surface]: n(e.surface, e.surfaceDark),
+      [r.OnSurface]: n(e.onSurface, e.onSurfaceDark),
+      [r.ViewHeaderBackground]: n(e.viewHeaderBackground, e.viewHeaderBackgroundDark),
+      [r.OnSurfaceBorder]: n(e.onSurfaceBorder, e.onSurfaceBorderDark),
+      [r.OnSurfaceSubdued]: n(e.onSurfaceSubdued, e.onSurfaceSubduedDark),
+      [r.SurfaceDisabled]: n(e.surfaceDisabled, e.surfaceDisabledDark),
+      [r.OnSurfaceHeader]: n(e.onSurfaceHeader, e.onSurfaceHeaderDark),
+      [r.Info]: n(e.info, e.infoDark),
+      [r.InfoHover]: n(e.infoHover, e.infoHoverDark),
+      [r.InfoActive]: n(e.infoActive, e.infoActiveDark),
+      [r.OnInfo]: n(e.onInfo, e.onInfoDark),
+      [r.InfoContainer]: n(e.infoContainer, e.infoContainerDark),
+      [r.OnInfoContainer]: n(e.onInfoContainer, e.onInfoContainerDark),
+      [r.Success]: n(e.success, e.successDark),
+      [r.SuccessHover]: n(e.successHover, e.successHoverDark),
+      [r.SuccessActive]: n(e.successActive, e.successActiveDark),
+      [r.OnSuccess]: n(e.onSuccess, e.onSuccessDark),
+      [r.SuccessContainer]: n(e.successContainer, e.successContainerDark),
+      [r.OnSuccessContainer]: n(e.onSuccessContainer, e.onSuccessContainerDark),
+      [r.Warning]: n(e.warning, e.warningDark),
+      [r.WarningHover]: n(e.warningHover, e.warningHoverDark),
+      [r.WarningActive]: n(e.warningActive, e.warningActiveDark),
+      [r.OnWarning]: n(e.onWarning, e.onWarningDark),
+      [r.WarningContainer]: n(e.warningContainer, e.warningContainerDark),
+      [r.OnWarningContainer]: n(e.onWarningContainer, e.onWarningContainerDark),
+      [r.Error]: n(e.error, e.errorDark),
+      [r.ErrorHover]: n(e.errorHover, e.errorHoverDark),
+      [r.ErrorActive]: n(e.errorActive, e.errorActiveDark),
+      [r.OnError]: n(e.onError, e.onErrorDark),
+      [r.ErrorContainer]: n(e.errorContainer, e.errorContainerDark),
+      [r.OnErrorContainer]: n(e.onErrorContainer, e.onErrorContainerDark),
+      [r.Neutral]: n(e.neutral, e.neutralDark),
+      [r.NeutralHover]: n(e.neutralHover, e.neutralHoverDark),
+      [r.NeutralActive]: n(e.neutralActive, e.neutralActiveDark),
+      [r.OnNeutral]: n(e.onNeutral, e.onNeutralDark),
+      [r.NeutralContainer]: n(e.neutralContainer, e.neutralContainerDark),
+      [r.OnNeutralContainer]: n(e.onNeutralContainer, e.onNeutralContainerDark),
+      [r.Highlight]: n("#FFE81A", "#FBE952"),
+      [r.OnHighlight]: n("#151411", "#151411"),
+      [r.Shadow]: n("#000000"),
+      [r.ModalOverlay]: n("#FAFAFA50"),
+      // 80% opacity
+      [r.ViewFinderOverlay]: n("#00000078"),
+      // 48% opacity
+      [r.ShadowHeader]: n("#0000003D"),
+      // 24% opacity
+      [r.ShadowFooter]: n("#00000029"),
+      // 16% opacity
+      [r.ShadowCard]: n("#00000029"),
+      // 16% opacity
+      [r.ShadowScroll]: n("#0000001F"),
+      // 12% opacity
+      [r.PickerOnPicker]: n("#151411"),
+      [r.PickerBerry]: n("#A9B2CD"),
+      [r.PickerBerryLight]: n("#CAD0E7"),
+      [r.PickerCoral]: n("#F69C9C"),
+      [r.PickerCoralLight]: n("#FFCCCC"),
+      [r.PickerFlamingo]: n("#E39FB6"),
+      [r.PickerFlamingoLight]: n("#F1C6D1"),
+      [r.PickerFog]: n("#C3C3C3"),
+      [r.PickerFogLight]: n("#D9D9D9"),
+      [r.PickerHoney]: n("#F2B961"),
+      [r.PickerHoneyLight]: n("#F8D9A8"),
+      [r.PickerLemon]: n("#F5EE77"),
+      [r.PickerLemonLight]: n("#F4F0AF"),
+      [r.PickerLime]: n("#9BC87E"),
+      [r.PickerLimeLight]: n("#CAE1BA"),
+      [r.PickerOlive]: n("#9BCDB6"),
+      [r.PickerOliveLight]: n("#CBE4D7"),
+      [r.PickerPlum]: n("#D2A5C2"),
+      [r.PickerPlumLight]: n("#E5C3DA"),
+      [r.PickerSky]: n("#84C1E9"),
+      [r.PickerSkyLight]: n("#BFDDF2")
+    },
+    fonts: {
+      [o.Body]: a(t.body),
+      [o.Header]: a(t.header),
+      [o.SubHeader]: a(t.subheader)
+    }
+  };
+}
+function n(e, t) {
+  return {
+    value: {
+      base: e,
+      ...t ? { _dark: t } : {}
+    }
+  };
+}
+function a(e) {
+  return { value: e };
+}
+export {
+  B as createSemanticTokens,
+  w as createSystemWithOverrides,
+  H as createTokens
+};

package/package.json

@@ -1,79 +1,81 @@
-{
-	"name": "@caspeco/casper-ui-library",
-	"version": "8.4.0",
-	"prettier": "@caspeco/prettier-config",
-	"type": "module",
-	"sideEffects": false,
-	"homepage": "https://github.com/Caspeco/casper-ui-library",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/Caspeco/casper-ui-library.git"
-	},
-	"files": [
-		"dist"
-	],
-	"main": "dist/index.js",
-	"module": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"scripts": {
-		"dev": "vite build --watch --mode dev",
-		"build": "vite build --mode prod",
-		"tsc": "tsc --project tsconfig.app.json",
-		"test": "vitest run",
-		"test:visual:server:start": "docker compose -f docker-compose.visual.yml up -d --wait playwright-server",
-		"test:visual:server:stop": "docker compose -f docker-compose.visual.yml down",
-		"test:visual": "node ./scripts/run-visual-tests.js",
-		"test:visual:ui": "vite preview --outDir html",
-		"test:visual:update": "rimraf __screenshots__ && npm run test:visual:server:start && (vitest --config vitest.visual.config.ts --run --update || true) && npm run test:visual:server:stop",
-		"prettier": "prettier --check .",
-		"prettier:fix": "prettier --write .",
-		"check:types": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
-		"lint": "eslint .",
-		"preview": "vite preview"
-	},
-	"devDependencies": {
-		"@arethetypeswrong/cli": "^0.18.2",
-		"@caspeco/eslint-config-react": "^5.1.0",
-		"@caspeco/prettier-config": "^1.0.7",
-		"@eslint/js": "^9.39.2",
-		"@testing-library/jest-dom": "^6.9.1",
-		"@testing-library/react": "^16.3.2",
-		"@testing-library/user-event": "^14.6.1",
-		"@types/jest": "^30.0.0",
-		"@types/node": "^24.10.12",
-		"@types/react": "^18.3.12",
-		"@types/react-dom": "^18.3.1",
-		"@vitejs/plugin-react-swc": "^4.2.3",
-		"@vitest/browser-playwright": "^4.0.18",
-		"@vitest/ui": "^4.0.18",
-		"eslint": "^9.39.2",
-		"eslint-plugin-react-hooks": "^7.0.1",
-		"eslint-plugin-react-refresh": "^0.5.0",
-		"globals": "^17.3.0",
-		"jsdom": "^28.0.0",
-		"rimraf": "^6.1.2",
-		"tsc-alias": "^1.8.16",
-		"typescript": "~5.9.3",
-		"typescript-eslint": "^8.54.0",
-		"vite": "^7.3.1",
-		"vite-plugin-dts": "^4.5.4",
-		"vite-tsconfig-paths": "^6.1.0",
-		"vitest": "^4.0.18"
-	},
-	"peerDependencies": {
-		"@chakra-ui/react": "^2.8.2",
-		"framer-motion": "^12.23.12",
-		"react": "^18.3.1",
-		"react-dom": "^18.3.1"
-	},
-	"dependencies": {
-		"@chakra-ui/anatomy": "^2.3.4",
-		"@dnd-kit/collision": "^0.3.2",
-		"@dnd-kit/react": "^0.3.2",
-		"@floating-ui/dom": "^1.7.5",
-		"@tanstack/react-table": "^8.21.3",
-		"@tanstack/react-virtual": "^3.13.18",
-		"csstype": "^3.2.3",
-		"date-fns": "^4.1.0"
-	}
-}
+{
+	"name": "@caspeco/casper-ui-library",
+	"version": "9.0.0-alpha.0",
+	"prettier": "@caspeco/prettier-config",
+	"type": "module",
+	"sideEffects": false,
+	"homepage": "https://github.com/Caspeco/casper-ui-library",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Caspeco/casper-ui-library.git"
+	},
+	"files": [
+		"dist"
+	],
+	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"scripts": {
+		"prepare": "npm run chakra:types",
+		"dev": "vite build --watch --mode dev",
+		"build": "vite build --mode prod",
+		"tsc": "tsc --project tsconfig.app.json",
+		"test": "vitest run",
+		"test:visual:server:start": "docker compose -f docker-compose.visual.yml up -d --wait playwright-server",
+		"test:visual:server:stop": "docker compose -f docker-compose.visual.yml down",
+		"test:visual": "node ./scripts/run-visual-tests.js",
+		"test:visual:ui": "vite preview --outDir html",
+		"test:visual:update": "rimraf __screenshots__ && npm run test:visual:server:start && (vitest --config vitest.visual.config.ts --run --update || true) && npm run test:visual:server:stop",
+		"prettier": "prettier --check .",
+		"prettier:fix": "prettier --write .",
+		"check:types": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
+		"chakra:types": "npm run chakra typegen lib/theme/theme.ts -- --tsconfig tsconfig.app.json",
+		"lint": "eslint .",
+		"preview": "vite preview",
+		"chakra": "chakra"
+	},
+	"devDependencies": {
+		"@arethetypeswrong/cli": "^0.18.2",
+		"@caspeco/eslint-config-react": "^5.1.0",
+		"@caspeco/prettier-config": "^1.0.7",
+		"@chakra-ui/cli": "^3.34.0",
+		"@eslint/js": "^9.39.2",
+		"@types/node": "^24.10.12",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.1",
+		"@vitejs/plugin-react-swc": "^4.3.0",
+		"@vitest/browser-playwright": "^4.1.0",
+		"@vitest/ui": "^4.1.0",
+		"eslint": "^9.39.2",
+		"eslint-plugin-react-hooks": "^7.0.1",
+		"eslint-plugin-react-refresh": "^0.5.2",
+		"globals": "^17.4.0",
+		"rimraf": "^6.1.3",
+		"tsc-alias": "^1.8.16",
+		"typescript": "~5.9.3",
+		"typescript-eslint": "^8.58.0",
+		"vite": "^7.3.1",
+		"vite-plugin-dts": "^4.5.4",
+		"vite-tsconfig-paths": "^6.1.1",
+		"vitest": "^4.1.0",
+		"vitest-browser-react": "^2.2.0"
+	},
+	"peerDependencies": {
+		"@chakra-ui/react": "^3.32.0",
+		"@emotion/cache": "^11.14.0",
+		"@emotion/react": "^11.14.0",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
+	},
+	"dependencies": {
+		"@chakra-ui/anatomy": "^2.3.4",
+		"@dnd-kit/collision": "^0.3.2",
+		"@dnd-kit/react": "^0.3.2",
+		"@floating-ui/dom": "^1.7.6",
+		"@tanstack/react-table": "^8.21.3",
+		"@tanstack/react-virtual": "^3.13.23",
+		"csstype": "^3.2.3",
+		"date-fns": "^4.1.0",
+		"next-themes": "^0.4.6"
+	}
+}

package/dist/components/accordion/accordion.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=accordion.spec.d.ts.map

package/dist/components/accordion/accordion.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/accordion/accordion.spec.tsx"],"names":[],"mappings":""}

package/dist/components/accordion/accordion.visual.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=accordion.visual.test.d.ts.map

package/dist/components/accordion/accordion.visual.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/accordion/accordion.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/alert/alert-icon.d.ts

@@ -1,3 +0,0 @@
-import { ComponentWithAs, IconProps } from '@chakra-ui/react';
-export declare const AlertIcon: ComponentWithAs<"svg", IconProps>;
-//# sourceMappingURL=alert-icon.d.ts.map

package/dist/components/alert/alert-icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert-icon.d.ts","sourceRoot":"","sources":["../../../lib/components/alert/alert-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAc,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEpF,eAAO,MAAM,SAAS,EAAE,eAAe,CAAC,KAAK,EAAE,SAAS,CAItD,CAAC"}

package/dist/components/alert/alert.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=alert.spec.d.ts.map

package/dist/components/alert/alert.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/alert/alert.spec.tsx"],"names":[],"mappings":""}

package/dist/components/alert/alert.visual.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=alert.visual.test.d.ts.map

package/dist/components/alert/alert.visual.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/alert/alert.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/badge/badge.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=badge.spec.d.ts.map

package/dist/components/badge/badge.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/badge/badge.spec.tsx"],"names":[],"mappings":""}

package/dist/components/badge/badge.visual.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=badge.visual.test.d.ts.map

package/dist/components/badge/badge.visual.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/badge/badge.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/box/box.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=box.spec.d.ts.map

package/dist/components/box/box.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"box.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/box/box.spec.tsx"],"names":[],"mappings":""}

package/dist/components/box/box.visual.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=box.visual.test.d.ts.map

package/dist/components/box/box.visual.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"box.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/box/box.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/breadcrumbs/breadcrumbs.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=breadcrumbs.spec.d.ts.map

package/dist/components/breadcrumbs/breadcrumbs.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"breadcrumbs.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumbs.spec.tsx"],"names":[],"mappings":""}

package/dist/components/breadcrumbs/breadcrumbs.visual.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=breadcrumbs.visual.test.d.ts.map

package/dist/components/breadcrumbs/breadcrumbs.visual.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"breadcrumbs.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumbs.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/button/button.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=button.spec.d.ts.map

package/dist/components/button/button.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/button/button.spec.tsx"],"names":[],"mappings":""}

package/dist/components/button/button.visual.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=button.visual.test.d.ts.map

package/dist/components/button/button.visual.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/button/button.visual.test.tsx"],"names":[],"mappings":""}