@caseparts-org/caseblocks 0.0.70 → 0.0.72

package/dist/assets/Text.css

@@ -1 +1 @@
-._text-body_1l0ox_1{font-family:var(--font-family-body),sans-serif}._text-display_1l0ox_4{font-family:var(--font-family-display)}._text-xxs_1l0ox_8{font-size:var(--font-size-xxs);line-height:var(--line-height-xxs)}._text-xs_1l0ox_12{font-size:var(--font-size-xs);line-height:var(--line-height-xs)}._text-sm_1l0ox_16{font-size:var(--font-size-sm);line-height:var(--line-height-sm)}._text-md_1l0ox_20{font-size:var(--font-size-md);line-height:var(--line-height-md)}._text-lg_1l0ox_24{font-size:var(--font-size-lg);line-height:var(--line-height-lg)}._text-xl_1l0ox_28{font-size:var(--font-size-xl);line-height:var(--line-height-xl)}._text-2xl_1l0ox_32{font-size:var(--font-size-2xl);line-height:var(--line-height-2xl)}._text-3xl_1l0ox_36{font-size:var(--font-size-3xl);line-height:var(--line-height-3xl)}._text-4xl_1l0ox_40{font-size:var(--font-size-4xl);line-height:var(--line-height-4xl)}._text-5xl_1l0ox_44{font-size:var(--font-size-5xl);line-height:var(--line-height-5xl)}._text-6xl_1l0ox_48{font-size:var(--font-size-6xl);line-height:var(--line-height-6xl)}._text-thin_1l0ox_53{font-weight:var(--font-weight-thin)}._text-extra-light_1l0ox_56{font-weight:var(--font-weight-extra-light)}._text-light_1l0ox_59{font-weight:var(--font-weight-light)}._text-regular_1l0ox_62{font-weight:var(--font-weight-regular)}._text-medium_1l0ox_65{font-weight:var(--font-weight-medium)}._text-semibold_1l0ox_68{font-weight:var(--font-weight-semibold)}._text-bold_1l0ox_71{font-weight:var(--font-weight-bold)}
+._text-body_1x8xm_1{font-family:var(--font-family-body),sans-serif}._text-display_1x8xm_4{font-family:var(--font-family-display)}._text-xxs_1x8xm_8{font-size:var(--font-size-xxs);line-height:var(--line-height-xxs)}._text-xs_1x8xm_12{font-size:var(--font-size-xs);line-height:var(--line-height-xs)}._text-sm_1x8xm_16{font-size:var(--font-size-sm);line-height:var(--line-height-sm)}._text-md_1x8xm_20{font-size:var(--font-size-md);line-height:var(--line-height-md)}._text-lg_1x8xm_24{font-size:var(--font-size-lg);line-height:var(--line-height-lg)}._text-xl_1x8xm_28{font-size:var(--font-size-xl);line-height:var(--line-height-xl)}._text-2xl_1x8xm_32{font-size:var(--font-size-2xl);line-height:var(--line-height-2xl)}._text-3xl_1x8xm_36{font-size:var(--font-size-3xl);line-height:var(--line-height-3xl)}._text-4xl_1x8xm_40{font-size:var(--font-size-4xl);line-height:var(--line-height-4xl)}._text-5xl_1x8xm_44{font-size:var(--font-size-5xl);line-height:var(--line-height-5xl)}._text-6xl_1x8xm_48{font-size:var(--font-size-6xl);line-height:var(--line-height-6xl)}._text-thin_1x8xm_53{font-weight:var(--font-weight-thin)}._text-extra-light_1x8xm_56{font-weight:var(--font-weight-extra-light)}._text-light_1x8xm_59{font-weight:var(--font-weight-light)}._text-regular_1x8xm_62{font-weight:var(--font-weight-regular)}._text-medium_1x8xm_65{font-weight:var(--font-weight-medium)}._text-semibold_1x8xm_68{font-weight:var(--font-weight-semibold)}._text-bold_1x8xm_71{font-weight:var(--font-weight-bold)}._text-color-inherit_1x8xm_75{color:inherit}._text-color-warning_1x8xm_76{color:var(--text-text-caution)}._text-color-disabled_1x8xm_77{color:var(--text-text-disabled)}._text-color-error-warning_1x8xm_78{color:var(--text-text-error-warning)}._text-color-default-inverted_1x8xm_79{color:var(--text-text-invert)}._text-color-links_1x8xm_80{color:var(--text-text-links)}._text-color-links-hover-press_1x8xm_81{color:var(--text-text-links-hover-press)}._text-color-primary_1x8xm_82{color:var(--text-text-primary)}._text-color-quaternary_1x8xm_83{color:var(--text-text-quaternary)}._text-color-search-bar_1x8xm_84{color:var(--text-text-search-bar)}._text-color-secondary_1x8xm_85{color:var(--text-text-secondary)}._text-color-success_1x8xm_86{color:var(--text-text-success)}._text-color-tertiary_1x8xm_87{color:var(--text-text-tertiary)}._text-color-footer_1x8xm_88{color:var(--text-text-footer)}

package/dist/atoms/Button/buttonClassName.js

@@ -1,4 +1,4 @@
-import { t as s } from "../../Text.module-smM1g1J4.js";
+import { t as s } from "../../Text.module-Dzhzk2fH.js";
 import { c as u } from "../../clsx-OuTLNxxd.js";
 import { getHideAtStyles as r } from "../HideAt.js";
 import '../../assets/buttonClassName.css';const i = "_button_khsww_1", t = {

package/dist/atoms/Link/Link.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import p from "react";
-import { t as g } from "../../Text.module-smM1g1J4.js";
+import { t as g } from "../../Text.module-Dzhzk2fH.js";
 import { c as v } from "../../clsx-OuTLNxxd.js";
 import { getHideAtStyles as y } from "../HideAt.js";
 import '../../assets/Link.css';const I = "_link_ygp31_1", L = "_disabled_ygp31_14", c = {

package/dist/atoms/Text/Text.d.ts

@@ -10,6 +10,7 @@ export type TextProps<T extends ElementType = "span"> = HideAtProps & {
     variant?: "body" | "display";
     /** The weight of the text. */
     weight?: "thin" | "extra-light" | "light" | "regular" | "medium" | "semibold" | "bold";
+    colorToken?: 'inherit' | 'warning' | 'disabled' | 'error-warning' | 'default-inverted' | 'links' | 'links-hover-press' | 'primary' | 'quaternary' | 'search-bar' | 'secondary' | 'success' | 'tertiary' | 'footer';
 } & Omit<React.ComponentPropsWithoutRef<T>, "size">;
-export declare function Text<T extends ElementType = "span">({ as, size, variant, weight, children, hideAt, className, ...otherProps }: TextProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Text<T extends ElementType = "span">({ as, size, variant, weight, colorToken, children, hideAt, className, ...otherProps }: TextProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/atoms/Text/Text.js

@@ -1,32 +1,34 @@
 import { jsx as a } from "react/jsx-runtime";
-import { getHideAtStyles as i } from "../HideAt.js";
-import { t } from "../../Text.module-smM1g1J4.js";
-import { c } from "../../clsx-OuTLNxxd.js";
-function d({
+import { getHideAtStyles as c } from "../HideAt.js";
+import { t } from "../../Text.module-Dzhzk2fH.js";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+function g({
   as: o,
   size: e,
   variant: r = "body",
   weight: m = "regular",
+  colorToken: n = "inherit",
   children: s,
-  hideAt: n,
-  className: p,
-  ...x
+  hideAt: x,
+  className: i,
+  ...p
 }) {
   return /* @__PURE__ */ a(
     o || "span",
     {
-      className: c(
+      className: l(
         t[`text-${r}`],
         t[`text-${e}`],
         t[`text-${m}`],
-        i(n),
-        p
+        t[`text-color-${n}`],
+        c(x),
+        i
       ),
-      ...x,
+      ...p,
       children: s
     }
   );
 }
 export {
-  d as Text
+  g as Text
 };

package/dist/atoms/Text/Text.stories.d.ts

@@ -15,3 +15,4 @@ export declare const Sizes: StoryObj<typeof Text>;
 export declare const Variants: StoryObj<typeof Text>;
 export declare const Weights: StoryObj<typeof Text>;
 export declare const AsElementType: StoryObj<typeof Text>;
+export declare const ColorTokens: StoryObj<typeof Text>;

package/dist/atoms/Text/Text.stories.js

@@ -1,7 +1,7 @@
-import { jsx as s, jsxs as l } from "react/jsx-runtime";
+import { jsx as l, jsxs as s } from "react/jsx-runtime";
 import { Text as i } from "./Text.js";
-import { Flex as r } from "../Flex/Flex.js";
-const p = {
+import { Flex as a } from "../Flex/Flex.js";
+const m = {
   title: "Case Parts/Atoms/Text",
   component: i,
   parameters: {
@@ -10,12 +10,12 @@ const p = {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
-}, m = {
+}, h = {
   args: {
     size: "sm",
     children: "Text value"
   }
-}, a = [
+}, t = [
   "xxs",
   "xs",
   "sm",
@@ -27,17 +27,17 @@ const p = {
   "4xl",
   "5xl",
   "6xl"
-], h = {
-  render: () => /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: a.map((e) => /* @__PURE__ */ l(i, { size: e, children: [
+], y = {
+  render: () => /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: t.map((e) => /* @__PURE__ */ s(i, { size: e, children: [
     e.charAt(0).toUpperCase() + e.slice(1),
     " Text"
   ] }, e)) })
-}, n = ["body", "display"], y = {
-  render: () => /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: n.map((e) => /* @__PURE__ */ l(i, { size: "md", variant: e, children: [
+}, n = ["body", "display"], f = {
+  render: () => /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: n.map((e) => /* @__PURE__ */ s(i, { size: "md", variant: e, children: [
     "variant: ",
     e
   ] }, e)) })
-}, t = [
+}, r = [
   "thin",
   "extra-light",
   "light",
@@ -45,24 +45,24 @@ const p = {
   "medium",
   "semibold",
   "bold"
-], f = {
-  render: () => /* @__PURE__ */ l(r, { flexDirection: "row", style: { gap: "100px" }, children: [
-    /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
-      /* @__PURE__ */ s(i, { size: "xl", weight: "bold", children: "`body` variant" }),
-      t.map((e) => /* @__PURE__ */ l(i, { size: "lg", weight: e, children: [
+], g = {
+  render: () => /* @__PURE__ */ s(a, { flexDirection: "row", style: { gap: "100px" }, children: [
+    /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+      /* @__PURE__ */ l(i, { size: "xl", weight: "bold", children: "`body` variant" }),
+      r.map((e) => /* @__PURE__ */ s(i, { size: "lg", weight: e, children: [
         e,
         " Text"
       ] }, e))
     ] }),
-    /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
-      /* @__PURE__ */ s(i, { size: "xl", weight: "bold", variant: "display", children: "`display` variant" }),
-      t.map((e) => /* @__PURE__ */ l(i, { size: "lg", weight: e, variant: "display", children: [
+    /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+      /* @__PURE__ */ l(i, { size: "xl", weight: "bold", variant: "display", children: "`display` variant" }),
+      r.map((e) => /* @__PURE__ */ s(i, { size: "lg", weight: e, variant: "display", children: [
         e,
         " Text"
       ] }, e))
     ] })
   ] })
-}, d = [
+}, o = [
   "span",
   "p",
   "h1",
@@ -72,18 +72,78 @@ const p = {
   "h5",
   "h6",
   "div"
-], g = {
-  render: () => /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: d.map((e) => /* @__PURE__ */ l(i, { size: "lg", as: e, children: [
+], u = {
+  render: () => /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: o.map((e) => /* @__PURE__ */ s(i, { size: "lg", as: e, children: [
     "Rendered as `",
     e,
     "` element"
   ] }, e)) })
+}, d = [
+  "inherit",
+  "warning",
+  "disabled",
+  "error-warning",
+  "default-inverted",
+  "links",
+  "links-hover-press",
+  "primary",
+  "quaternary",
+  "search-bar",
+  "secondary",
+  "success",
+  "tertiary",
+  "footer"
+], v = {
+  name: "Colors",
+  parameters: {
+    docs: {
+      description: {
+        story: "Visual reference for the `colorToken` prop. Each swatch uses a token via a CSS class (e.g. `.text-color-primary`). Tokens map to semantic design values defined in `tokens.css`."
+      }
+    }
+  },
+  render: () => /* @__PURE__ */ l("div", { style: {
+    display: "grid",
+    gap: "16px",
+    gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+    alignItems: "stretch",
+    width: "100%",
+    maxWidth: 1e3
+  }, children: d.map((e) => /* @__PURE__ */ s(
+    "div",
+    {
+      style: {
+        border: "1px solid #e0e0e0",
+        borderRadius: 6,
+        background: "#fff",
+        padding: "8px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        fontFamily: "sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ s(i, { size: "sm", weight: "semibold", as: "div", children: [
+          "`",
+          e,
+          "`"
+        ] }),
+        /* @__PURE__ */ l(i, { size: "md", colorToken: e, as: "div", children: "Sample text" }),
+        /* @__PURE__ */ s(i, { size: "xs", as: "div", style: { fontFamily: "monospace" }, children: [
+          "class: text-color-",
+          e
+        ] })
+      ]
+    },
+    e
+  )) })
 };
 export {
-  m as AllProps,
-  g as AsElementType,
-  h as Sizes,
-  y as Variants,
-  f as Weights,
-  p as default
+  h as AllProps,
+  u as AsElementType,
+  v as ColorTokens,
+  y as Sizes,
+  f as Variants,
+  g as Weights,
+  m as default
 };

package/dist/main-client.d.ts

@@ -35,3 +35,5 @@ export { NotFound } from './organisms/NotFound/NotFound';
 export type { NotFoundProps } from './organisms/NotFound/NotFound';
 export { Carousel } from './organisms/Carousel/Carousel';
 export type { CarouselProps } from './organisms/Carousel/Carousel';
+export { Footer } from './organisms/Footer/Footer';
+export type { FooterProps } from './organisms/Footer/Footer';

package/dist/main-client.js

@@ -10,7 +10,7 @@ import { Input as A } from "./atoms/Input/Input.js";
 import { Logo as I } from "./molecules/Logo/Logo.js";
 import { SearchBox as L } from "./molecules/SearchBox/SearchBox.js";
 import { QuantityInput as S } from "./molecules/QuantityInput/QuantityInput.js";
-import { Pricing as y } from "./molecules/Pricing/Pricing.js";
+import { Pricing as F } from "./molecules/Pricing/Pricing.js";
 import { Link as M, LinkProvider as N } from "./atoms/Link/Link.js";
 import { LinkButton as s } from "./atoms/LinkButton/LinkButton.js";
 import { Image as G, ImageProvider as H } from "./atoms/Image/Image.js";
@@ -29,6 +29,7 @@ import { ChipSelector as mo } from "./organisms/ChipSelector/ChipSelector.js";
 import { Product as fo } from "./organisms/Product/Product.js";
 import { NotFound as io } from "./organisms/NotFound/NotFound.js";
 import { Carousel as uo } from "./organisms/Carousel/Carousel.js";
+import { Footer as co } from "./organisms/Footer/Footer.js";
 export {
   j as Account,
   Z as AddToCart,
@@ -42,6 +43,7 @@ export {
   mo as ChipSelector,
   x as Column,
   p as Flex,
+  co as Footer,
   f as Grid,
   i as Head,
   u as Icon,
@@ -54,7 +56,7 @@ export {
   I as Logo,
   eo as MainNav,
   io as NotFound,
-  y as Pricing,
+  F as Pricing,
   fo as Product,
   S as QuantityInput,
   l as Root,

package/dist/main-server.d.ts

@@ -14,6 +14,7 @@ export type { TextProps } from './atoms/Text/Text';
 export { Input } from './atoms/Input/Input';
 export type { InputProps } from './atoms/Input/Input';
 export { Logo } from './molecules/Logo/Logo';
+export type { LogoProps } from './molecules/Logo/Logo';
 export { SearchBox } from './molecules/SearchBox/SearchBox';
 export type { SearchBoxProps } from './molecules/SearchBox/SearchBox';
 export type { QuantityInputProps } from './molecules/QuantityInput/QuantityInput';

package/dist/molecules/Avatar/Avatar.js

@@ -3,7 +3,7 @@ import { Flex as m } from "../../atoms/Flex/Flex.js";
 import { Link as c } from "../../atoms/Link/Link.js";
 import { getHideAtStyles as l } from "../../atoms/HideAt.js";
 import { c as f } from "../../clsx-OuTLNxxd.js";
-import { t as r } from "../../Text.module-smM1g1J4.js";
+import { t as r } from "../../Text.module-Dzhzk2fH.js";
 import '../../assets/Avatar.css';const p = "_avatar_vwzwk_1", x = {
   avatar: p
 };

package/dist/molecules/BannerCard/BannerCard.js

@@ -1,8 +1,8 @@
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
 import { getHideAtStyles as f } from "../../atoms/HideAt.js";
-import { Text as _ } from "../../atoms/Text/Text.js";
+import { Text as i } from "../../atoms/Text/Text.js";
 import { c as x } from "../../clsx-OuTLNxxd.js";
-import '../../assets/BannerCard.css';const k = "_root_sclg6_2", N = "_content_sclg6_13", u = "_variant_hero_sclg6_26", z = "_align_left_sclg6_26", S = "_align_right_sclg6_37", $ = "_variant_promo_sclg6_48", b = "_header_sclg6_59", j = "_description_sclg6_70", C = "_overlay_dark_sclg6_102", H = "_overlay_none_sclg6_104", w = "_overlay_light_sclg6_109", t = {
+import '../../assets/BannerCard.css';const k = "_root_ntcay_2", N = "_content_ntcay_13", u = "_variant_hero_ntcay_26", z = "_align_left_ntcay_26", S = "_align_right_ntcay_37", $ = "_variant_promo_ntcay_48", b = "_header_ntcay_59", j = "_description_ntcay_70", C = "_overlay_dark_ntcay_102", H = "_overlay_none_ntcay_104", w = "_overlay_light_ntcay_109", t = {
   root: k,
   content: N,
   variant_hero: u,
@@ -16,34 +16,34 @@ import '../../assets/BannerCard.css';const k = "_root_sclg6_2", N = "_content_sc
   overlay_light: w
 };
 function L({
-  variant: e = "hero",
-  overlayTheme: r = "none",
-  title: c,
-  description: n,
-  backgroundImage: a,
-  align: i = "left",
-  cta: s,
-  className: g,
+  variant: o = "hero",
+  overlayTheme: a = "none",
+  title: s,
+  description: e,
+  backgroundImage: r,
+  align: l = "left",
+  cta: _,
+  className: y,
   hideAt: d
 }) {
-  const h = a ? { backgroundImage: `url(${a})` } : void 0, l = e === "hero", v = l ? "6xl" : "xl", m = l ? "md" : "sm", y = r === "dark" ? t.textLight : t.textDark;
-  return /* @__PURE__ */ o(
+  const h = r ? { backgroundImage: `url(${r})` } : void 0, c = o === "hero", g = c ? "6xl" : "xl", v = c ? "md" : "sm", m = a === "dark" ? t.textLight : t.textDark;
+  return /* @__PURE__ */ n(
     "article",
     {
       className: x(
         t.root,
-        t[`variant_${e}`],
-        t[`align_${i}`],
-        t[`overlay_${r}`],
-        y,
+        t[`variant_${o}`],
+        t[`align_${l}`],
+        t[`overlay_${a}`],
+        m,
         f(d),
-        g
+        y
       ),
       style: { ...h },
       children: /* @__PURE__ */ p("div", { className: t.content, children: [
-        /* @__PURE__ */ o(_, { variant: "display", weight: "light", size: v, className: t.header, children: c }),
-        n && /* @__PURE__ */ o(_, { size: m, className: t.description, children: n }),
-        s && /* @__PURE__ */ o("div", { className: t.cta, children: s })
+        /* @__PURE__ */ n(i, { variant: "display", weight: "light", size: g, className: t.header, children: s }),
+        e && /* @__PURE__ */ n(i, { size: v, className: t.description, children: e }),
+        _ && /* @__PURE__ */ n("div", { className: t.cta, children: _ })
       ] })
     }
   );

package/dist/molecules/Logo/Logo.d.ts

@@ -1 +1,4 @@
-export declare function Logo(): import("react/jsx-runtime").JSX.Element;
+export interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "color" | "white";
+}
+export declare function Logo({ variant, ...otherProps }: LogoProps): import("react/jsx-runtime").JSX.Element;