@caseparts-org/caseblocks 0.0.213 → 0.0.214

package/dist/assets/Input.css

@@ -1 +1 @@
-._input-container_8oisf_1{display:flex;flex-direction:column;align-items:flex-start;width:100%;box-sizing:border-box}._input-container_8oisf_1>label{font-family:var(--font-family-label);font-size:var(--font-size-xs)}._input_8oisf_1{height:32px;border-radius:var(--radius-radius-minimal, 2px);border:1px solid var(--border-border-primary, #dfdfdf);background:var(--surface-surface-primary);padding:0px var(--spacing-spacing-1xs, 12px);outline:none;font-size:var(--font-size-sm);width:100%}@media (max-width:768px){._input_8oisf_1{font-size:var(--font-size-md)}}._input_8oisf_1:focus{border:1px solid var(--border-border-primary-btn, #1380b1);box-shadow:0 0 2px 1px var(--border-border-primary-btn)}
+._input-container_11f48_1{display:flex;position:relative;flex-direction:column;align-items:flex-start;width:100%;box-sizing:border-box}._input_11f48_1{height:32px;border-radius:var(--radius-radius-minimal, 2px);border:1px solid var(--border-border-primary, #dfdfdf);background:var(--surface-surface-primary);padding:0px var(--spacing-spacing-1xs, 12px);outline:none;font-size:var(--font-size-sm);width:100%}@media (max-width:767px){._input_11f48_1{font-size:var(--font-size-md)}}._input_11f48_1:focus{border:1px solid var(--border-border-primary-btn, #1380b1);box-shadow:0 0 2px 1px var(--border-border-primary-btn)}._label_11f48_29{position:absolute;align-self:flex-start;left:8px;top:-8px;padding:0 8px;cursor:text;transition:all .2s ease-in;font-family:var(--font-family-label);font-size:var(--font-size-xxs);color:var(--text-text-quaternary);background-color:var(--surface-surface-primary)}._labelPlaceholder_11f48_43{position:absolute;align-self:flex-start;font-style:italic;font-family:var(--font-family-label);font-size:var(--font-size-sm);background-color:transparent;color:var(--text-text-quaternary);left:12px;top:8px;padding:0 2px;cursor:text;transition:all .2s ease-in}input:hover{border:1px solid var(--border-border-primary-btn, #1380b1);transition:all .2s ease}

package/dist/atoms/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { HideAtProps } from '../HideAt';
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HideAtProps {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "placeholder">, HideAtProps {
     label: string | null;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/atoms/Input/Input.js

@@ -1,26 +1,34 @@
-import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import r from "react";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import { getHideAtStyles as c } from "../HideAt.js";
-import '../../assets/Input.css';const u = "_input_8oisf_1", e = {
-  "input-container": "_input-container_8oisf_1",
-  input: u
-}, l = r.forwardRef(
-  ({ label: n, hideAt: s, className: a, ...t }, o) => /* @__PURE__ */ p("div", { className: e["input-container"], children: [
-    n && /* @__PURE__ */ i("label", { htmlFor: t.name, children: n }),
-    /* @__PURE__ */ i(
-      "input",
-      {
-        ref: o,
-        id: t.name,
-        type: "text",
-        className: m(e.input, c(s), a),
-        ...t
-      }
-    )
-  ] })
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import m, { useState as p } from "react";
+import { c as s } from "../../clsx-OuTLNxxd.js";
+import { getHideAtStyles as _ } from "../HideAt.js";
+import '../../assets/Input.css';const f = "_input_11f48_1", b = "_label_11f48_29", F = "_labelPlaceholder_11f48_43", e = {
+  "input-container": "_input-container_11f48_1",
+  input: f,
+  label: b,
+  labelPlaceholder: F
+}, h = m.forwardRef(
+  ({ label: o, value: t, hideAt: c, className: i, ...l }, r) => {
+    const [u, a] = p(!1);
+    return /* @__PURE__ */ d("div", { className: s(e["input-container"], _(c)), children: [
+      /* @__PURE__ */ n("label", { htmlFor: l.name, className: u || t ? e.label : e.labelPlaceholder, children: o }),
+      /* @__PURE__ */ n(
+        "input",
+        {
+          value: t,
+          ref: r,
+          id: l.name,
+          type: "text",
+          onFocus: () => a(!0),
+          onBlur: () => a(!1),
+          className: s(e.input, i),
+          ...l
+        }
+      )
+    ] });
+  }
 );
-l.displayName = "Input";
+h.displayName = "Input";
 export {
-  l as Input
+  h as Input
 };

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

@@ -11,3 +11,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithHideAt: Story;
+export declare const ContactAutocompleteForm: Story;

package/dist/atoms/Input/Input.stories.js

@@ -1,27 +1,164 @@
-import { Input as e } from "./Input.js";
-const a = {
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import { useState as u, useEffect as i } from "react";
+import { Input as l } from "./Input.js";
+const h = {
   title: "Case Parts/Atoms/Input",
-  component: e,
+  component: l,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "centered"
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
-}, l = {
+}, d = ({ value: e, onChange: o, ...t }) => {
+  const [m, s] = u(e ?? "");
+  i(() => {
+    s(e ?? "");
+  }, [e]);
+  function r(n) {
+    s(n.target.value), o == null || o(n);
+  }
+  return /* @__PURE__ */ a(l, { ...t, value: m, onChange: r });
+}, C = () => {
+  const [e, o] = u({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+    address1: "",
+    city: "",
+    state: "",
+    postalCode: ""
+  });
+  function t(m) {
+    const { name: s, value: r } = m.target;
+    o((n) => ({
+      ...n,
+      [s]: r
+    }));
+  }
+  return /* @__PURE__ */ p(
+    "form",
+    {
+      style: {
+        display: "grid",
+        gap: "1rem",
+        width: "min(40rem, 100%)",
+        gridTemplateColumns: "repeat(2, minmax(0, 1fr))"
+      },
+      children: [
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "First name",
+            name: "firstName",
+            autoComplete: "given-name",
+            value: e.firstName,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Last name",
+            name: "lastName",
+            autoComplete: "family-name",
+            value: e.lastName,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Email",
+            name: "email",
+            type: "email",
+            autoComplete: "email",
+            value: e.email,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Phone",
+            name: "phone",
+            type: "tel",
+            autoComplete: "tel",
+            value: e.phone,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Address",
+            name: "address1",
+            autoComplete: "street-address",
+            value: e.address1,
+            onChange: t,
+            style: { gridColumn: "1 / -1" }
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "City",
+            name: "city",
+            autoComplete: "address-level2",
+            value: e.city,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "State",
+            name: "state",
+            autoComplete: "address-level1",
+            value: e.state,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Postal code",
+            name: "postalCode",
+            autoComplete: "postal-code",
+            value: e.postalCode,
+            onChange: t
+          }
+        )
+      ]
+    }
+  );
+}, f = {
   args: {
     label: "Label",
-    placeholder: "Type here..."
-  }
-}, o = {
+    value: ""
+  },
+  render: (e) => /* @__PURE__ */ a(d, { ...e })
+}, b = {
   args: {
     label: "Label",
-    placeholder: "Hidden at md",
-    hideAt: "md"
-  }
+    hideAt: ["md", "lg"],
+    value: ""
+  },
+  render: (e) => /* @__PURE__ */ a(d, { ...e })
+}, y = {
+  args: {
+    label: "Label",
+    value: ""
+  },
+  parameters: {
+    layout: "padded"
+  },
+  render: () => /* @__PURE__ */ a(C, {})
 };
 export {
-  l as Default,
-  o as WithHideAt,
-  a as default
+  y as ContactAutocompleteForm,
+  f as Default,
+  b as WithHideAt,
+  h as default
 };

package/dist/main-client.js

@@ -4,11 +4,11 @@ import { Column as f, Grid as x } from "./atoms/Grid/Grid.js";
 import { Head as i } from "./atoms/Root/Head.js";
 import { Icon as l } from "./atoms/Icon/Icon.js";
 import { Root as u } from "./atoms/Root/Root.js";
-import { Separator as C } from "./atoms/Separator/Separator.js";
-import { Text as S } from "./atoms/Text/Text.js";
-import { Input as A } from "./atoms/Input/Input.js";
-import { ToggleSwitch as T } from "./atoms/ToggleSwitch/ToggleSwitch.js";
-import { Link as B } from "./atoms/Link/Link.js";
+import { Separator as g } from "./atoms/Separator/Separator.js";
+import { Text as s } from "./atoms/Text/Text.js";
+import { Input as P } from "./atoms/Input/Input.js";
+import { ToggleSwitch as B } from "./atoms/ToggleSwitch/ToggleSwitch.js";
+import { Link as k } from "./atoms/Link/Link.js";
 import { linkClassName as h } from "./atoms/Link/linkClassName.js";
 import { configureLink as w, routerOverride as L } from "./atoms/Link/configureLink.js";
 import { LinkButton as y } from "./atoms/LinkButton/LinkButton.js";
@@ -19,89 +19,91 @@ import { Logo as E } from "./molecules/Logo/Logo.js";
 import { SearchBox as O } from "./molecules/SearchBox/SearchBox.js";
 import { QuantityInput as R } from "./molecules/QuantityInput/QuantityInput.js";
 import { Pricing as j } from "./molecules/Pricing/Pricing.js";
-import { Availability as J } from "./molecules/Availability/Availability.js";
-import { Avatar as U } from "./molecules/Avatar/Avatar.js";
-import { BannerCard as X } from "./molecules/BannerCard/BannerCard.js";
-import { CardLink as _ } from "./molecules/CardLink/CardLink.js";
-import { Breadcrumbs as oo } from "./molecules/Breadcrumbs/Breadcrumbs.js";
-import { Disclaimer as eo } from "./molecules/Disclaimer/Disclaimer.js";
-import { Admonition as mo } from "./molecules/Admonition/Admonition.js";
-import { NotFound as fo } from "./organisms/NotFound/NotFound.js";
-import { HorizontalScroll as ao } from "./atoms/HorizontalScroll/HorizontalScroll.js";
-import { SlideInPanel as no } from "./atoms/SlideInPanel/SlideInPanel.js";
-import { DropdownButton as uo } from "./atoms/DropdownButton/DropdownButton.js";
-import { Tooltip as Co } from "./atoms/Tooltip/Tooltip.js";
-import { Popover as So } from "./atoms/Popover/Popover.js";
-import { Account as Ao } from "./molecules/Account/Account.js";
-import { Chip as To } from "./molecules/Chip/Chip.js";
-import { ToggleView as Bo } from "./molecules/ToggleView/ToggleView.js";
-import { CartPart as ho } from "./molecules/Cart/CartPart.js";
-import { AddToCartPart as wo } from "./molecules/AddToCartPart/AddToCartPart.js";
-import { CartSlideInPanel as bo } from "./molecules/Cart/CartSlideInPanel.js";
-import { StatefulButton as Fo } from "./molecules/StatefulButton/StatefulButton.js";
-import { AnimatedCheckMark as Mo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as Vo } from "./molecules/AddToCart/AddToCart.js";
-import { Modal as zo } from "./molecules/Modal/Modal.js";
-import { ImageViewer as Go } from "./molecules/ImageViewer/ImageViewer.js";
-import { T as Qo } from "./Table-BX4PtCNE.js";
-import { Error as Zo } from "./molecules/Error/Error.js";
-import { MainNav as qo } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as Ko } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as Wo } from "./organisms/Product/Product.js";
-import { Carousel as Yo } from "./organisms/Carousel/Carousel.js";
-import { Footer as $o } from "./organisms/Footer/Footer.js";
-import { default as rr } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
+import { ProgressBar as J } from "./molecules/ProgressBar/ProgressBar.js";
+import { Availability as U } from "./molecules/Availability/Availability.js";
+import { Avatar as X } from "./molecules/Avatar/Avatar.js";
+import { BannerCard as _ } from "./molecules/BannerCard/BannerCard.js";
+import { CardLink as oo } from "./molecules/CardLink/CardLink.js";
+import { Breadcrumbs as eo } from "./molecules/Breadcrumbs/Breadcrumbs.js";
+import { Disclaimer as mo } from "./molecules/Disclaimer/Disclaimer.js";
+import { Admonition as fo } from "./molecules/Admonition/Admonition.js";
+import { NotFound as ao } from "./organisms/NotFound/NotFound.js";
+import { HorizontalScroll as no } from "./atoms/HorizontalScroll/HorizontalScroll.js";
+import { SlideInPanel as uo } from "./atoms/SlideInPanel/SlideInPanel.js";
+import { DropdownButton as go } from "./atoms/DropdownButton/DropdownButton.js";
+import { Tooltip as so } from "./atoms/Tooltip/Tooltip.js";
+import { Popover as Po } from "./atoms/Popover/Popover.js";
+import { Account as Bo } from "./molecules/Account/Account.js";
+import { Chip as ko } from "./molecules/Chip/Chip.js";
+import { ToggleView as ho } from "./molecules/ToggleView/ToggleView.js";
+import { CartPart as wo } from "./molecules/Cart/CartPart.js";
+import { AddToCartPart as bo } from "./molecules/AddToCartPart/AddToCartPart.js";
+import { CartSlideInPanel as Fo } from "./molecules/Cart/CartSlideInPanel.js";
+import { StatefulButton as Mo } from "./molecules/StatefulButton/StatefulButton.js";
+import { AnimatedCheckMark as Vo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
+import { AddToCart as zo } from "./molecules/AddToCart/AddToCart.js";
+import { Modal as Go } from "./molecules/Modal/Modal.js";
+import { ImageViewer as Qo } from "./molecules/ImageViewer/ImageViewer.js";
+import { T as Zo } from "./Table-BX4PtCNE.js";
+import { Error as qo } from "./molecules/Error/Error.js";
+import { MainNav as Ko } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as Wo } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Yo } from "./organisms/Product/Product.js";
+import { Carousel as $o } from "./organisms/Carousel/Carousel.js";
+import { Footer as rr } from "./organisms/Footer/Footer.js";
+import { default as tr } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
 export {
-  Ao as Account,
-  Vo as AddToCart,
-  wo as AddToCartPart,
-  mo as Admonition,
-  Mo as AnimatedCheckMark,
-  J as Availability,
-  U as Avatar,
-  X as BannerCard,
-  oo as Breadcrumbs,
+  Bo as Account,
+  zo as AddToCart,
+  bo as AddToCartPart,
+  fo as Admonition,
+  Vo as AnimatedCheckMark,
+  U as Availability,
+  X as Avatar,
+  _ as BannerCard,
+  eo as Breadcrumbs,
   e as Button,
-  _ as CardLink,
-  Yo as Carousel,
-  ho as CartPart,
-  bo as CartSlideInPanel,
-  To as Chip,
-  Ko as ChipSelector,
+  oo as CardLink,
+  $o as Carousel,
+  wo as CartPart,
+  Fo as CartSlideInPanel,
+  ko as Chip,
+  Wo as ChipSelector,
   f as Column,
-  eo as Disclaimer,
-  uo as DropdownButton,
-  Zo as Error,
+  mo as Disclaimer,
+  go as DropdownButton,
+  qo as Error,
   m as Flex,
-  $o as Footer,
+  rr as Footer,
   x as Grid,
   i as Head,
-  ao as HorizontalScroll,
+  no as HorizontalScroll,
   l as Icon,
-  Go as ImageViewer,
-  A as Input,
-  B as Link,
+  Qo as ImageViewer,
+  P as Input,
+  k as Link,
   y as LinkButton,
   E as Logo,
-  qo as MainNav,
-  zo as Modal,
-  fo as NotFound,
+  Ko as MainNav,
+  Go as Modal,
+  ao as NotFound,
   H as Pill,
-  So as Popover,
+  Po as Popover,
   j as Pricing,
-  Wo as Product,
+  Yo as Product,
+  J as ProgressBar,
   R as QuantityInput,
   u as Root,
   O as SearchBox,
-  C as Separator,
-  no as SlideInPanel,
-  rr as SpinZoomViewer,
-  Fo as StatefulButton,
-  Qo as Table,
-  S as Text,
-  T as ToggleSwitch,
-  Bo as ToggleView,
-  Co as Tooltip,
+  g as Separator,
+  uo as SlideInPanel,
+  tr as SpinZoomViewer,
+  Mo as StatefulButton,
+  Zo as Table,
+  s as Text,
+  B as ToggleSwitch,
+  ho as ToggleView,
+  so as Tooltip,
   N as configureImage,
   w as configureLink,
   D as getHideAtStyles,

package/dist/main-server.d.ts

@@ -36,6 +36,8 @@ export type { QuantityInputProps } from './molecules/QuantityInput/QuantityInput
 export { QuantityInput } from './molecules/QuantityInput/QuantityInput';
 export { Pricing } from './molecules/Pricing/Pricing';
 export type { PricingProps } from './molecules/Pricing/Pricing';
+export { ProgressBar } from './molecules/ProgressBar/ProgressBar';
+export type { ProgressBarProps } from './molecules/ProgressBar/ProgressBar';
 export { Availability } from './molecules/Availability/Availability';
 export type { AvailabilityProps } from './molecules/Availability/Availability';
 export { Avatar } from './molecules/Avatar/Avatar';

package/dist/main-server.js

@@ -1,17 +1,17 @@
-import { Button as t } from "./atoms/Button/Button.js";
+import { Button as e } from "./atoms/Button/Button.js";
 import { Flex as m } from "./atoms/Flex/Flex.js";
 import { Column as x, Grid as f } from "./atoms/Grid/Grid.js";
 import { Head as n } from "./atoms/Root/Head.js";
 import { Icon as l } from "./atoms/Icon/Icon.js";
 import { Root as d } from "./atoms/Root/Root.js";
-import { Separator as g } from "./atoms/Separator/Separator.js";
-import { Text as s } from "./atoms/Text/Text.js";
+import { Separator as c } from "./atoms/Separator/Separator.js";
+import { Text as B } from "./atoms/Text/Text.js";
 import { Input as L } from "./atoms/Input/Input.js";
 import { ToggleSwitch as C } from "./atoms/ToggleSwitch/ToggleSwitch.js";
 import { Link as S } from "./atoms/Link/Link.js";
 import { linkClassName as y } from "./atoms/Link/linkClassName.js";
-import { configureLink as h, routerOverride as F } from "./atoms/Link/configureLink.js";
-import { LinkButton as N } from "./atoms/LinkButton/LinkButton.js";
+import { configureLink as b, routerOverride as h } from "./atoms/Link/configureLink.js";
+import { LinkButton as H } from "./atoms/LinkButton/LinkButton.js";
 import { Pill as T } from "./atoms/Pill/Pill.js";
 import { configureImage as D } from "./atoms/Image/configureImage.js";
 import { getHideAtStyles as O } from "./atoms/HideAt.js";
@@ -19,44 +19,46 @@ import { Logo as R } from "./molecules/Logo/Logo.js";
 import { SearchBox as q } from "./molecules/SearchBox/SearchBox.js";
 import { QuantityInput as E } from "./molecules/QuantityInput/QuantityInput.js";
 import { Pricing as K } from "./molecules/Pricing/Pricing.js";
-import { Availability as U } from "./molecules/Availability/Availability.js";
-import { Avatar as W } from "./molecules/Avatar/Avatar.js";
-import { BannerCard as Y } from "./molecules/BannerCard/BannerCard.js";
-import { CardLink as _ } from "./molecules/CardLink/CardLink.js";
-import { Breadcrumbs as oo } from "./molecules/Breadcrumbs/Breadcrumbs.js";
-import { Disclaimer as to } from "./molecules/Disclaimer/Disclaimer.js";
-import { Admonition as mo } from "./molecules/Admonition/Admonition.js";
-import { NotFound as xo } from "./organisms/NotFound/NotFound.js";
+import { ProgressBar as U } from "./molecules/ProgressBar/ProgressBar.js";
+import { Availability as W } from "./molecules/Availability/Availability.js";
+import { Avatar as Y } from "./molecules/Avatar/Avatar.js";
+import { BannerCard as _ } from "./molecules/BannerCard/BannerCard.js";
+import { CardLink as rr } from "./molecules/CardLink/CardLink.js";
+import { Breadcrumbs as er } from "./molecules/Breadcrumbs/Breadcrumbs.js";
+import { Disclaimer as mr } from "./molecules/Disclaimer/Disclaimer.js";
+import { Admonition as xr } from "./molecules/Admonition/Admonition.js";
+import { NotFound as ir } from "./organisms/NotFound/NotFound.js";
 export {
-  mo as Admonition,
-  U as Availability,
-  W as Avatar,
-  Y as BannerCard,
-  oo as Breadcrumbs,
-  t as Button,
-  _ as CardLink,
+  xr as Admonition,
+  W as Availability,
+  Y as Avatar,
+  _ as BannerCard,
+  er as Breadcrumbs,
+  e as Button,
+  rr as CardLink,
   x as Column,
-  to as Disclaimer,
+  mr as Disclaimer,
   m as Flex,
   f as Grid,
   n as Head,
   l as Icon,
   L as Input,
   S as Link,
-  N as LinkButton,
+  H as LinkButton,
   R as Logo,
-  xo as NotFound,
+  ir as NotFound,
   T as Pill,
   K as Pricing,
+  U as ProgressBar,
   E as QuantityInput,
   d as Root,
   q as SearchBox,
-  g as Separator,
-  s as Text,
+  c as Separator,
+  B as Text,
   C as ToggleSwitch,
   D as configureImage,
-  h as configureLink,
+  b as configureLink,
   O as getHideAtStyles,
   y as linkClassName,
-  F as routerOverride
+  h as routerOverride
 };

package/package.json

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