@caseparts-org/caseblocks 0.0.58 → 0.0.60

package/dist/CarouselArrowButtons-DEFgjKJv.js

@@ -0,0 +1,48 @@
+import { jsxs as e, jsx as s } from "react/jsx-runtime";
+import { Icon as r } from "./atoms/Icon/Icon.js";
+import { c } from "./clsx-OuTLNxxd.js";
+import './assets/CarouselArrowButtons.css';const i = "_main_irnm9_1", _ = "_viewport_irnm9_4", a = "_track_irnm9_8", u = "_slide_irnm9_12", m = "_button_irnm9_17", d = "_prevButton_irnm9_33", l = "_nextButton_irnm9_36", p = "_carouselDots_irnm9_39", f = "_dot_irnm9_47", v = "_dotSelected_irnm9_55", t = {
+  main: i,
+  viewport: _,
+  track: a,
+  slide: u,
+  button: m,
+  prevButton: d,
+  nextButton: l,
+  carouselDots: p,
+  dot: f,
+  dotSelected: v
+}, h = ({
+  children: o,
+  ...n
+}) => /* @__PURE__ */ e(
+  "button",
+  {
+    className: c(t.button, t.prevButton),
+    type: "button",
+    ...n,
+    children: [
+      /* @__PURE__ */ s(r, { iconKey: "fa-sharp fa-solid fa-chevron-left", size: "md" }),
+      o
+    ]
+  }
+), y = ({
+  children: o,
+  ...n
+}) => /* @__PURE__ */ e(
+  "button",
+  {
+    className: c(t.button, t.nextButton),
+    type: "button",
+    ...n,
+    children: [
+      /* @__PURE__ */ s(r, { iconKey: "fa-sharp fa-solid fa-chevron-right", size: "md" }),
+      o
+    ]
+  }
+);
+export {
+  y as N,
+  h as P,
+  t as s
+};

package/dist/assets/BannerCard.css

@@ -1 +1 @@
-._root_1x7t0_2{position:relative;display:grid;grid-template-columns:1fr 1fr;background-size:cover;background-position:center;overflow:hidden;box-sizing:border-box}._content_1x7t0_12{box-sizing:border-box;width:100%;padding:var(--spacing-spacing-default, 16px);display:flex;flex-direction:column;gap:var(--spacing-spacing-default, 16px)}@media (max-width: 980px){._content_1x7t0_12{grid-column:1 / -1}}._align_left_1x7t0_24 ._content_1x7t0_12{align-items:flex-start;grid-column:1 / span 1;text-align:left}@media (max-width: 980px){._align_left_1x7t0_24 ._content_1x7t0_12{grid-column:1 / -1}}._align_right_1x7t0_32 ._content_1x7t0_12{align-items:flex-end;grid-column:2 / span 1;text-align:right}@media (max-width: 980px){._align_right_1x7t0_32 ._content_1x7t0_12{grid-column:1 / -1}}._content_1x7t0_12>*{position:relative;z-index:1}._overlay_dark_1x7t0_47 ._header_1x7t0_47,._overlay_dark_1x7t0_47 ._description_1x7t0_48,._overlay_none_1x7t0_49 ._header_1x7t0_47,._overlay_none_1x7t0_49 ._description_1x7t0_48{color:var(--color-neutrals-neutral-1)}._overlay_light_1x7t0_55 ._header_1x7t0_47,._overlay_light_1x7t0_55 ._description_1x7t0_48{color:#000}._overlay_dark_1x7t0_47:before,._overlay_light_1x7t0_55:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}._overlay_dark_1x7t0_47:before{background:#137fb13a}._overlay_light_1x7t0_55:before{background:#ffffff73}
+._root_1gg4a_2{position:relative;display:grid;grid-template-columns:1fr 1fr;background-size:cover;background-position:center;overflow:hidden;box-sizing:border-box;align-items:center}._content_1gg4a_13{box-sizing:border-box;width:100%;display:flex;flex-direction:column;gap:var(--spacing-spacing-default, 16px)}@media (max-width: 980px){._content_1gg4a_13{grid-column:1 / -1}}._variant_hero_1gg4a_24 ._content_1gg4a_13{padding:var(--spacing-spacing-lg, 32px)}._variant_promo_1gg4a_27 ._content_1gg4a_13{padding:var(--spacing-spacing-default, 16px)}._align_left_1gg4a_31 ._content_1gg4a_13{align-items:flex-start;grid-column:1 / span 1;text-align:left}@media (max-width: 980px){._align_left_1gg4a_31 ._content_1gg4a_13{grid-column:1 / -1}}._align_right_1gg4a_39 ._content_1gg4a_13{align-items:flex-end;grid-column:2 / span 1;text-align:right}@media (max-width: 980px){._align_right_1gg4a_39 ._content_1gg4a_13{grid-column:1 / -1}}._content_1gg4a_13>*{position:relative;z-index:1}._overlay_dark_1gg4a_54 ._header_1gg4a_54,._overlay_dark_1gg4a_54 ._description_1gg4a_55,._overlay_none_1gg4a_56 ._header_1gg4a_54,._overlay_none_1gg4a_56 ._description_1gg4a_55{color:var(--color-neutrals-neutral-1)}._overlay_light_1gg4a_62 ._header_1gg4a_54,._overlay_light_1gg4a_62 ._description_1gg4a_55{color:#000}._overlay_dark_1gg4a_54:before,._overlay_light_1gg4a_62:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}._overlay_dark_1gg4a_54:before{background:#137fb13a}._overlay_light_1gg4a_62:before{background:#ffffff73}

package/dist/assets/CarouselArrowButtons.css

@@ -1 +1 @@
-._main_wngg9_1{position:relative}._viewport_wngg9_4{overflow:hidden;width:100%}._track_wngg9_8{display:flex;touch-action:pan-y}._slide_wngg9_12{flex:0 0 100%;min-width:0}._button_wngg9_17{position:absolute;top:50%;transform:translateY(-50%);background-color:transparent;padding:0;margin:0;border:none}._button_wngg9_17 path{fill:var(--color-neutrals-neutral-1)}._button_wngg9_17:disabled path{opacity:.4}._prevButton_wngg9_32{left:var(--spacing-spacing-default)}._nextButton_wngg9_35{right:var(--spacing-spacing-default)}._carouselDots_wngg9_38{position:absolute;bottom:var(--spacing-spacing-default);left:50%;transform:translate(-50%);display:flex;gap:var(--spacing-spacing-2xs)}._dot_wngg9_46{width:40px;height:2px;background:var(--color-neutrals-neutral-1);border:none;cursor:pointer;opacity:.5}._dotSelected_wngg9_54{opacity:1;width:80px}
+._main_irnm9_1{position:relative}._viewport_irnm9_4{overflow:hidden;width:100%}._track_irnm9_8{display:flex;touch-action:pan-y}._slide_irnm9_12{flex:0 0 100%;min-width:0}._button_irnm9_17{position:absolute;top:50%;transform:translateY(-50%);background-color:transparent;padding:0;margin:0;border:none}._button_irnm9_17 path{fill:var(--color-neutrals-neutral-1);opacity:.6}._button_irnm9_17:disabled path{opacity:.2}._prevButton_irnm9_33{left:var(--spacing-spacing-2xs)}._nextButton_irnm9_36{right:var(--spacing-spacing-2xs)}._carouselDots_irnm9_39{position:absolute;bottom:var(--spacing-spacing-default);left:50%;transform:translate(-50%);display:flex;gap:var(--spacing-spacing-2xs)}._dot_irnm9_47{width:40px;height:2px;background:var(--color-neutrals-neutral-1);border:none;cursor:pointer;opacity:.5}._dotSelected_irnm9_55{opacity:1;width:80px}

package/dist/atoms/Icon/Icon.d.ts

@@ -1,7 +1,8 @@
 import { HideAtProps } from '../HideAt';
 type IconSet = "fa-kit" | "fa-solid" | "fa-regular" | "fa-light" | "fa-thin" | "fa-brands";
+type IconVariant = "fa-sharp" | "fa-duotone" | "fa-sharp-duotone";
 interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, HideAtProps {
-    iconKey: `${IconSet} ${string}`;
+    iconKey: `${IconSet} ${string}` | `${IconVariant} ${IconSet} ${string}`;
     size?: "sm" | "md" | "lg";
 }
 export declare function Icon({ iconKey, size, hideAt, className, ...otherProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/Icon/Icon.js

@@ -1,27 +1,26 @@
-import { jsx as r } from "react/jsx-runtime";
-import { c as _ } from "../../clsx-OuTLNxxd.js";
-import { getHideAtStyles as e } from "../HideAt.js";
-import '../../assets/Icon.css';const l = {
+import { jsx as m } from "react/jsx-runtime";
+import { c as r } from "../../clsx-OuTLNxxd.js";
+import { getHideAtStyles as t } from "../HideAt.js";
+import '../../assets/Icon.css';const _ = {
   "icon-sm": "_icon-sm_nwr4s_1",
   "icon-md": "_icon-md_nwr4s_6",
   "icon-lg": "_icon-lg_nwr4s_11"
 };
-function a({
+function f({
   iconKey: o,
   size: n = "md",
   hideAt: s,
   className: c,
   ...i
 }) {
-  const [t, m] = o.split(" ");
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ m(
     "i",
     {
-      className: _(
-        t,
-        m,
-        l[`icon-${n}`],
-        e(s),
+      className: r(
+        o,
+        // can contain 2 or 3 (or more) Font Awesome classes
+        _[`icon-${n}`],
+        t(s),
         c
       ),
       ...i
@@ -29,5 +28,5 @@ function a({
   );
 }
 export {
-  a as Icon
+  f as Icon
 };

package/dist/molecules/BannerCard/BannerCard.js

@@ -1,51 +1,53 @@
-import { jsx as e, jsxs as v } from "react/jsx-runtime";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
 import { getHideAtStyles as f } from "../../atoms/HideAt.js";
-import { Text as _ } from "../../atoms/Text/Text.js";
-import { c as p } from "../../clsx-OuTLNxxd.js";
-import '../../assets/BannerCard.css';const k = "_root_1x7t0_2", N = "_content_1x7t0_12", u = "_align_left_1x7t0_24", z = "_align_right_1x7t0_32", S = "_overlay_dark_1x7t0_47", $ = "_header_1x7t0_47", b = "_description_1x7t0_48", j = "_overlay_none_1x7t0_49", C = "_overlay_light_1x7t0_55", t = {
+import { Text as s } from "../../atoms/Text/Text.js";
+import { c as x } from "../../clsx-OuTLNxxd.js";
+import '../../assets/BannerCard.css';const k = "_root_1gg4a_2", N = "_content_1gg4a_13", u = "_variant_hero_1gg4a_24", z = "_variant_promo_1gg4a_27", S = "_align_left_1gg4a_31", $ = "_align_right_1gg4a_39", b = "_overlay_dark_1gg4a_54", j = "_header_1gg4a_54", C = "_description_1gg4a_55", H = "_overlay_none_1gg4a_56", w = "_overlay_light_1gg4a_62", t = {
   root: k,
   content: N,
-  align_left: u,
-  align_right: z,
-  overlay_dark: S,
-  header: $,
-  description: b,
-  overlay_none: j,
-  overlay_light: C
+  variant_hero: u,
+  variant_promo: z,
+  align_left: S,
+  align_right: $,
+  overlay_dark: b,
+  header: j,
+  description: C,
+  overlay_none: H,
+  overlay_light: w
 };
-function I({
-  variant: o = "hero",
-  overlayTheme: n = "none",
-  title: i,
+function L({
+  variant: a = "hero",
+  overlayTheme: e = "none",
+  title: l,
   description: r,
-  backgroundImage: a,
-  align: c = "left",
-  cta: l,
-  className: d,
-  hideAt: x
+  backgroundImage: n,
+  align: g = "left",
+  cta: _,
+  className: c,
+  hideAt: d
 }) {
-  const g = a ? { backgroundImage: `url(${a})` } : void 0, s = o === "hero", h = s ? "6xl" : "xl", m = s ? "md" : "sm", y = n === "dark" ? t.textLight : t.textDark;
-  return /* @__PURE__ */ e(
+  const h = n ? { backgroundImage: `url(${n})` } : void 0, i = a === "hero", v = i ? "6xl" : "xl", m = i ? "md" : "sm", y = e === "dark" ? t.textLight : t.textDark;
+  return /* @__PURE__ */ o(
     "article",
     {
-      className: p(
+      className: x(
         t.root,
-        t[`variant_${o}`],
-        t[`align_${c}`],
-        t[`overlay_${n}`],
+        t[`variant_${a}`],
+        t[`align_${g}`],
+        t[`overlay_${e}`],
         y,
-        f(x),
-        d
+        f(d),
+        c
       ),
-      style: { ...g },
-      children: /* @__PURE__ */ v("div", { className: t.content, children: [
-        /* @__PURE__ */ e(_, { variant: "display", size: h, className: t.header, children: i }),
-        r && /* @__PURE__ */ e(_, { size: m, className: t.description, children: r }),
-        l && /* @__PURE__ */ e("div", { className: t.cta, children: l })
+      style: { ...h },
+      children: /* @__PURE__ */ p("div", { className: t.content, children: [
+        /* @__PURE__ */ o(s, { variant: "display", weight: "light", size: v, className: t.header, children: l }),
+        r && /* @__PURE__ */ o(s, { size: m, className: t.description, children: r }),
+        _ && /* @__PURE__ */ o("div", { className: t.cta, children: _ })
       ] })
     }
   );
 }
 export {
-  I as BannerCard
+  L as BannerCard
 };

package/dist/molecules/BannerCard/BannerCard.stories.js

@@ -1,19 +1,19 @@
 import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { BannerCard as t } from "./BannerCard.js";
+import { BannerCard as r } from "./BannerCard.js";
 import { LinkButton as m } from "../../atoms/LinkButton/LinkButton.js";
 import { Icon as d } from "../../atoms/Icon/Icon.js";
 const v = {
   title: "Case Parts/Molecules/BannerCard",
-  component: t,
+  component: r,
   tags: ["autodocs"],
   render: (e) => {
     const {
-      showCta: r,
+      showCta: t,
       customCtaLabel: a,
       backgroundImageUrl: i,
       cta: n,
       ...s
-    } = e, l = r ? n ?? /* @__PURE__ */ c(
+    } = e, l = t ? n ?? /* @__PURE__ */ c(
       m,
       {
         variant: e.overlayTheme === "light" ? "primary" : "secondary-transparent",
@@ -26,7 +26,7 @@ const v = {
       }
     ) : void 0;
     return /* @__PURE__ */ o("div", { style: { maxWidth: e.variant === "hero" ? 1200 : 640 }, children: /* @__PURE__ */ o(
-      t,
+      r,
       {
         ...s,
         cta: l,
@@ -41,8 +41,8 @@ const v = {
     description: "We specialize in made-to-spec parts—including cutting boards, walk-in doors, wire shelving, heaters, warmer wires, gaskets and more!",
     align: "left",
     showCta: !0,
-    customCtaLabel: "Shop Now",
-    backgroundImageUrl: "https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=1400&q=60"
+    customCtaLabel: "Help Me Find a Part",
+    backgroundImageUrl: "assets/IMG-4-hero.png"
   },
   argTypes: {
     variant: {
@@ -158,7 +158,7 @@ Layout (width/height) is consumer-controlled.`
     overlayTheme: "light",
     backgroundImageUrl: ""
   }
-}, L = {
+}, I = {
   args: {
     variant: "promo",
     overlayTheme: "dark",
@@ -175,7 +175,7 @@ export {
   y as Playground,
   C as PromoLight,
   w as PromoWithDarkOverlay,
-  L as RightAlignedPromo,
+  I as RightAlignedPromo,
   T as WithoutCTA,
   v as default
 };

package/dist/organisms/Carousel/Carousel.js

@@ -2,7 +2,7 @@ import { jsxs as fn, jsx as ot } from "react/jsx-runtime";
 import vt, { useRef as Ut, useState as $t, useCallback as ln, useEffect as Ot } from "react";
 import { getHideAtStyles as dn } from "../../atoms/HideAt.js";
 import { c as qt } from "../../clsx-OuTLNxxd.js";
-import { s as rt, P as pn, N as mn } from "../../CarouselArrowButtons-DMKru3f7.js";
+import { s as rt, P as pn, N as mn } from "../../CarouselArrowButtons-DEFgjKJv.js";
 import { useDotButton as gn, DotButton as hn } from "./CarouselDotButton.js";
 import { usePrevNextButtons as yn } from "./usePrevNextButtons.js";
 function Sn(t) {

package/dist/organisms/Carousel/CarouselArrowButtons.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "../../atoms/Icon/Icon.js";
-import { N as e, P as i } from "../../CarouselArrowButtons-DMKru3f7.js";
+import { N as e, P as i } from "../../CarouselArrowButtons-DEFgjKJv.js";
 import "../../clsx-OuTLNxxd.js";
 export {
   e as NextButton,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.58",
+  "version": "0.0.60",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/CarouselArrowButtons-DMKru3f7.js

@@ -1,48 +0,0 @@
-import { jsxs as e, jsx as s } from "react/jsx-runtime";
-import { Icon as c } from "./atoms/Icon/Icon.js";
-import { c as r } from "./clsx-OuTLNxxd.js";
-import './assets/CarouselArrowButtons.css';const _ = "_main_wngg9_1", u = "_viewport_wngg9_4", a = "_track_wngg9_8", g = "_slide_wngg9_12", i = "_button_wngg9_17", d = "_prevButton_wngg9_32", l = "_nextButton_wngg9_35", m = "_carouselDots_wngg9_38", p = "_dot_wngg9_46", w = "_dotSelected_wngg9_54", t = {
-  main: _,
-  viewport: u,
-  track: a,
-  slide: g,
-  button: i,
-  prevButton: d,
-  nextButton: l,
-  carouselDots: m,
-  dot: p,
-  dotSelected: w
-}, x = ({
-  children: o,
-  ...n
-}) => /* @__PURE__ */ e(
-  "button",
-  {
-    className: r(t.button, t.prevButton),
-    type: "button",
-    ...n,
-    children: [
-      /* @__PURE__ */ s(c, { iconKey: "fa-solid fa-chevron-left", size: "md" }),
-      o
-    ]
-  }
-), f = ({
-  children: o,
-  ...n
-}) => /* @__PURE__ */ e(
-  "button",
-  {
-    className: r(t.button, t.nextButton),
-    type: "button",
-    ...n,
-    children: [
-      /* @__PURE__ */ s(c, { iconKey: "fa-solid fa-chevron-right", size: "md" }),
-      o
-    ]
-  }
-);
-export {
-  f as N,
-  x as P,
-  t as s
-};