@clearstory/drywall-react 3.3.0 → 3.4.1

package/dist/SelectControl-BmDx8v5U.js

@@ -0,0 +1,354 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { useId as $ } from "./hooks/useId.js";
+import "./icons/ClearstoryIcon.js";
+import "./icons/InternalOnlyIcon.js";
+import "./icons/MoneyBucketIcon.js";
+import "./icons/MoreCircleOutlineIcon.js";
+import { I as F } from "./Info-DtWHV9kz.js";
+import "./theme/index.js";
+import { A as M } from "./Autocomplete-CfXcTXLL.js";
+import { D as O } from "./Datepicker-CJBEgBsm.js";
+import "./components/DescriptionDetails/DescriptionDetails.js";
+import "./components/DescriptionList/DescriptionList.js";
+import "./components/DescriptionList/DescriptionListContext.js";
+import "./components/DescriptionTerm/DescriptionTerm.js";
+import { Input as Q } from "./components/Input/Input.js";
+import { Select as U } from "./components/Select/Select.js";
+import "./theme/internal.js";
+import "./components/ToastContainer/ToastContainer.js";
+import "./components/ToastContainer/ToastLabelContext.js";
+import "./index-SzwnPTHF.js";
+import { F as k } from "./FormControl-CuHXXTcL.js";
+import { B as C } from "./Box-CKDKtm7F.js";
+import { F as w } from "./FormLabel-CgNd8XLN.js";
+import { T as B } from "./Tooltip-BJmTHiZe.js";
+import { F as I } from "./FormHelperText-wucHHOG8.js";
+import { s as V } from "./styled-fvngWWLy.js";
+function X(c, m) {
+  const {
+    disabled: d,
+    error: t,
+    helperText: n,
+    id: f,
+    label: p,
+    required: o,
+    slotProps: l,
+    sublabel: s,
+    tooltip: a,
+    ...h
+  } = c, y = $("autocomplete"), i = f || y, r = n ? `${i}-helper` : void 0;
+  return /* @__PURE__ */ b(k, { disabled: d, error: t, ...l?.root, children: [
+    /* @__PURE__ */ b(
+      C,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          gap: "0.25rem"
+        },
+        children: [
+          /* @__PURE__ */ e(w, { htmlFor: i, required: o, ...l?.label, children: p }),
+          a && /* @__PURE__ */ e(B, { title: a, arrow: !0, children: /* @__PURE__ */ e(
+            F,
+            {
+              sx: ({ vars: x }) => ({
+                color: x?.palette.text.secondary,
+                marginBlockEnd: "3px",
+                height: "1rem",
+                width: "1rem"
+              })
+            }
+          ) })
+        ]
+      }
+    ),
+    s && /* @__PURE__ */ e(A, { ...l?.sublabel, children: s }),
+    /* @__PURE__ */ e(
+      M,
+      {
+        disabled: d,
+        ref: m,
+        error: t,
+        id: i,
+        "aria-describedby": r ? h["aria-describedby"] ? `${h["aria-describedby"]} ${r}` : r : h["aria-describedby"],
+        ...h
+      }
+    ),
+    n && /* @__PURE__ */ e(I, { id: r, ...l?.helperText, children: n })
+  ] });
+}
+const Y = u(
+  X
+);
+Y.displayName = "AutocompleteControl";
+const Z = u(
+  ({
+    disabled: c = !1,
+    error: m = !1,
+    fullWidth: d,
+    helperText: t,
+    label: n,
+    required: f = !1,
+    slotProps: p = {},
+    sublabel: o,
+    tooltip: l,
+    name: s,
+    value: a,
+    onChange: h,
+    onAccept: y,
+    onClose: i,
+    onOpen: r,
+    format: x,
+    views: S,
+    openTo: E,
+    disableFuture: v,
+    disablePast: N,
+    minDate: j,
+    maxDate: T,
+    closeOnSelect: q,
+    readOnly: H,
+    clearable: L,
+    reduceAnimations: R,
+    ...z
+  }, G) => {
+    const J = $("datepicker"), g = s || J, D = t ? `${g}-helper` : void 0;
+    return /* @__PURE__ */ b(
+      k,
+      {
+        disabled: c,
+        error: m,
+        fullWidth: d,
+        ...p.root,
+        children: [
+          /* @__PURE__ */ b(
+            C,
+            {
+              sx: {
+                alignItems: "center",
+                display: "flex",
+                gap: "0.25rem"
+              },
+              children: [
+                /* @__PURE__ */ e(w, { htmlFor: g, required: f, ...p.label, children: n }),
+                l && /* @__PURE__ */ e(B, { title: l, arrow: !0, children: /* @__PURE__ */ e(
+                  F,
+                  {
+                    sx: ({ vars: K }) => ({
+                      color: K?.palette.text.secondary,
+                      marginBlockEnd: "3px",
+                      height: "1rem",
+                      width: "1rem"
+                    })
+                  }
+                ) })
+              ]
+            }
+          ),
+          o && /* @__PURE__ */ e(A, { ...p.sublabel, children: o }),
+          /* @__PURE__ */ e(
+            O,
+            {
+              ref: G,
+              disabled: c,
+              name: g,
+              value: a,
+              onChange: h,
+              onAccept: y,
+              onClose: i,
+              onOpen: r,
+              format: x,
+              views: S,
+              openTo: E,
+              disableFuture: v,
+              disablePast: N,
+              minDate: j,
+              maxDate: T,
+              closeOnSelect: q,
+              readOnly: H,
+              clearable: L,
+              reduceAnimations: R,
+              error: m,
+              slotProps: {
+                field: {
+                  id: g,
+                  "aria-describedby": D,
+                  ...d && { sx: { width: "100%" } }
+                },
+                popper: {
+                  "aria-label": `Date picker${typeof n == "string" && ` for ${n}`}`
+                }
+              },
+              ...z
+            }
+          ),
+          t && /* @__PURE__ */ e(I, { id: D, ...p.helperText, children: t })
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "DatepickerControl";
+const A = V(I)(() => ({
+  marginBlockStart: 0,
+  marginBlockEnd: "3px",
+  marginInline: 0
+})), _ = u(
+  ({
+    disabled: c,
+    error: m,
+    fullWidth: d,
+    helperText: t,
+    id: n,
+    label: f,
+    required: p,
+    slotProps: o,
+    sublabel: l,
+    tooltip: s,
+    ...a
+  }, h) => {
+    const y = $("input"), i = n || y, r = t ? `${i}-helper` : void 0;
+    return /* @__PURE__ */ b(
+      k,
+      {
+        disabled: c,
+        error: m,
+        fullWidth: d,
+        ...o?.root,
+        children: [
+          /* @__PURE__ */ b(
+            C,
+            {
+              sx: {
+                alignItems: "center",
+                display: "flex",
+                gap: "0.25rem"
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  w,
+                  {
+                    htmlFor: i,
+                    required: p,
+                    ...o?.label,
+                    children: f
+                  }
+                ),
+                s && /* @__PURE__ */ e(B, { title: s, arrow: !0, children: /* @__PURE__ */ e(
+                  F,
+                  {
+                    sx: ({ vars: x }) => ({
+                      color: x?.palette.text.secondary,
+                      marginBlockEnd: "3px",
+                      height: "1rem",
+                      width: "1rem"
+                    })
+                  }
+                ) })
+              ]
+            }
+          ),
+          l && /* @__PURE__ */ e(A, { ...o?.sublabel, children: l }),
+          /* @__PURE__ */ e(
+            Q,
+            {
+              ref: h,
+              disabled: c,
+              error: m,
+              fullWidth: d,
+              id: i,
+              "aria-describedby": r ? a["aria-describedby"] ? `${a["aria-describedby"]} ${r}` : r : a["aria-describedby"],
+              ...a
+            }
+          ),
+          t && /* @__PURE__ */ e(I, { id: r, ...o?.helperText, children: t })
+        ]
+      }
+    );
+  }
+);
+_.displayName = "InputControl";
+const W = u(
+  ({
+    disabled: c,
+    error: m,
+    fullWidth: d,
+    helperText: t,
+    id: n,
+    label: f,
+    required: p,
+    slotProps: o,
+    sublabel: l,
+    tooltip: s,
+    ...a
+  }, h) => {
+    const y = $("select"), i = n || y, r = t ? `${i}-helper` : void 0;
+    return /* @__PURE__ */ b(
+      k,
+      {
+        disabled: c,
+        error: m,
+        fullWidth: d,
+        ...o?.root,
+        children: [
+          /* @__PURE__ */ b(
+            C,
+            {
+              sx: {
+                alignItems: "center",
+                display: "flex",
+                gap: "0.25rem"
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  w,
+                  {
+                    id: `${i}-label`,
+                    htmlFor: i,
+                    required: p,
+                    ...o?.label,
+                    children: f
+                  }
+                ),
+                s && /* @__PURE__ */ e(B, { title: s, arrow: !0, children: /* @__PURE__ */ e(
+                  F,
+                  {
+                    sx: ({ vars: x }) => ({
+                      color: x?.palette.text.secondary,
+                      marginBlockEnd: "3px",
+                      height: "1rem",
+                      width: "1rem"
+                    })
+                  }
+                ) })
+              ]
+            }
+          ),
+          l && /* @__PURE__ */ e(A, { ...o?.sublabel, children: l }),
+          /* @__PURE__ */ e(
+            U,
+            {
+              ref: h,
+              disabled: c,
+              error: m,
+              fullWidth: d,
+              labelId: `${i}-label`,
+              id: i,
+              "aria-describedby": r ? a["aria-describedby"] ? `${a["aria-describedby"]} ${r}` : r : a["aria-describedby"],
+              ...a
+            }
+          ),
+          t && /* @__PURE__ */ e(I, { id: r, ...o?.helperText, children: t })
+        ]
+      }
+    );
+  }
+);
+W.displayName = "SelectControl";
+export {
+  Y as A,
+  Z as D,
+  A as F,
+  _ as I,
+  W as S
+};

package/dist/components/AutocompleteControl/AutocompleteControl.js

@@ -8,8 +8,12 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { A as v } from "../../SelectControl-BWiB-iy9.js";
+import { A as B } from "../../SelectControl-BmDx8v5U.js";
 import "../../Datepicker-CJBEgBsm.js";
+import "../DescriptionDetails/DescriptionDetails.js";
+import "../DescriptionList/DescriptionList.js";
+import "../DescriptionList/DescriptionListContext.js";
+import "../DescriptionTerm/DescriptionTerm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";
@@ -22,5 +26,5 @@ import "../../FormLabel-CgNd8XLN.js";
 import "../../Tooltip-BJmTHiZe.js";
 import "../../FormHelperText-wucHHOG8.js";
 export {
-  v as AutocompleteControl
+  B as AutocompleteControl
 };

package/dist/components/AutocompleteControl/index.js

@@ -1,4 +1,4 @@
-import { A as e } from "../../SelectControl-BWiB-iy9.js";
+import { A as e } from "../../SelectControl-BmDx8v5U.js";
 export {
   e as AutocompleteControl
 };

package/dist/components/DatepickerControl/DatepickerControl.d.ts

@@ -13,6 +13,7 @@ export interface DatepickerControlProps {
     required?: boolean;
     error?: boolean;
     disabled?: boolean;
+    fullWidth?: boolean;
     format?: string;
     views?: ("year" | "month" | "day")[];
     openTo?: "year" | "month" | "day";

package/dist/components/DatepickerControl/DatepickerControl.js

@@ -8,8 +8,12 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { D as v } from "../../SelectControl-BWiB-iy9.js";
+import { D as A } from "../../SelectControl-BmDx8v5U.js";
 import "../../Datepicker-CJBEgBsm.js";
+import "../DescriptionDetails/DescriptionDetails.js";
+import "../DescriptionList/DescriptionList.js";
+import "../DescriptionList/DescriptionListContext.js";
+import "../DescriptionTerm/DescriptionTerm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";
@@ -22,5 +26,5 @@ import "../../FormLabel-CgNd8XLN.js";
 import "../../Tooltip-BJmTHiZe.js";
 import "../../FormHelperText-wucHHOG8.js";
 export {
-  v as DatepickerControl
+  A as DatepickerControl
 };

package/dist/components/DatepickerControl/index.js

@@ -1,4 +1,4 @@
-import { D as e } from "../../SelectControl-BWiB-iy9.js";
+import { D as e } from "../../SelectControl-BmDx8v5U.js";
 export {
   e as DatepickerControl
 };

package/dist/components/DescriptionDetails/DescriptionDetails.d.ts

@@ -0,0 +1,4 @@
+import { TypographyProps } from '../Typography';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type DescriptionDetailsProps = Omit<TypographyProps, "component">;
+export declare const DescriptionDetails: ForwardRefExoticComponent<Omit<DescriptionDetailsProps, "ref"> & RefAttributes<HTMLElement>>;

package/dist/components/DescriptionDetails/DescriptionDetails.js

@@ -0,0 +1,30 @@
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { useDescriptionListContext as a } from "../DescriptionList/DescriptionListContext.js";
+import { T as e } from "../../Typography-DnNWmNen.js";
+const c = s(({ variant: t = "body2", sx: o, ...i }, n) => {
+  const r = a()?.spacing;
+  return /* @__PURE__ */ p(
+    e,
+    {
+      component: "dd",
+      variant: t,
+      ref: n,
+      ...i,
+      sx: [
+        { border: "1px solid transparent", padding: "6px 10px" },
+        r && {
+          marginBlockEnd: r,
+          "&:last-child": {
+            marginBlockEnd: 0
+          }
+        },
+        ...Array.isArray(o) ? o : [o]
+      ]
+    }
+  );
+});
+c.displayName = "DescriptionDetails";
+export {
+  c as DescriptionDetails
+};

package/dist/components/DescriptionDetails/index.d.ts

@@ -0,0 +1 @@
+export * from './DescriptionDetails';

package/dist/components/DescriptionDetails/index.js

@@ -0,0 +1,4 @@
+import { DescriptionDetails as o } from "./DescriptionDetails.js";
+export {
+  o as DescriptionDetails
+};

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from '../Box';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface DescriptionListProps extends Omit<BoxProps<"dl">, "component"> {
+    spacing?: string | number;
+}
+export declare const DescriptionList: ForwardRefExoticComponent<Omit<DescriptionListProps, "ref"> & RefAttributes<HTMLDListElement>>;

package/dist/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { DescriptionListContext as p } from "./DescriptionListContext.js";
+import { B as s } from "../../Box-CKDKtm7F.js";
+const n = m(({ spacing: r, children: i, ...t }, e) => /* @__PURE__ */ o(p.Provider, { value: { spacing: r }, children: /* @__PURE__ */ o(s, { component: "dl", ref: e, ...t, children: i }) }));
+n.displayName = "DescriptionList";
+export {
+  n as DescriptionList
+};

package/dist/components/DescriptionList/DescriptionListContext.d.ts

@@ -0,0 +1,7 @@
+import { Context } from 'react';
+type DescriptionListContextValue = {
+    spacing?: string | number;
+};
+export declare const DescriptionListContext: Context<DescriptionListContextValue | null>;
+export declare const useDescriptionListContext: () => DescriptionListContextValue | null;
+export {};

package/dist/components/DescriptionList/DescriptionListContext.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as e } from "react";
+const o = t(null), r = () => e(o);
+export {
+  o as DescriptionListContext,
+  r as useDescriptionListContext
+};

package/dist/components/DescriptionList/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DescriptionList';
+export { useDescriptionListContext } from './DescriptionListContext';

package/dist/components/DescriptionList/index.js

@@ -0,0 +1,6 @@
+import { DescriptionList as e } from "./DescriptionList.js";
+import { useDescriptionListContext as r } from "./DescriptionListContext.js";
+export {
+  e as DescriptionList,
+  r as useDescriptionListContext
+};

package/dist/components/DescriptionTerm/DescriptionTerm.d.ts

@@ -0,0 +1,4 @@
+import { TypographyProps } from '../Typography';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type DescriptionTermProps = Omit<TypographyProps, "component">;
+export declare const DescriptionTerm: ForwardRefExoticComponent<Omit<DescriptionTermProps, "ref"> & RefAttributes<HTMLElement>>;

package/dist/components/DescriptionTerm/DescriptionTerm.js

@@ -0,0 +1,27 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { T as p } from "../../Typography-DnNWmNen.js";
+const n = m(
+  ({ sx: r, ...o }, e) => /* @__PURE__ */ i(
+    p,
+    {
+      component: "dt",
+      ref: e,
+      ...o,
+      sx: [
+        {
+          color: ({ vars: t }) => t?.palette.text.primary,
+          fontSize: "0.875rem",
+          fontWeight: "500",
+          lineHeight: "1.4375em",
+          marginBlockEnd: "3px"
+        },
+        ...Array.isArray(r) ? r : [r]
+      ]
+    }
+  )
+);
+n.displayName = "DescriptionTerm";
+export {
+  n as DescriptionTerm
+};

package/dist/components/DescriptionTerm/index.d.ts

@@ -0,0 +1 @@
+export * from './DescriptionTerm';

package/dist/components/DescriptionTerm/index.js

@@ -0,0 +1,4 @@
+import { DescriptionTerm as o } from "./DescriptionTerm.js";
+export {
+  o as DescriptionTerm
+};

package/dist/components/FormSublabel/FormSublabel.js

@@ -5,8 +5,12 @@ import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { F as h } from "../../SelectControl-BWiB-iy9.js";
+import { F as q } from "../../SelectControl-BmDx8v5U.js";
 import "../../Datepicker-CJBEgBsm.js";
+import "../DescriptionDetails/DescriptionDetails.js";
+import "../DescriptionList/DescriptionList.js";
+import "../DescriptionList/DescriptionListContext.js";
+import "../DescriptionTerm/DescriptionTerm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "react/jsx-runtime";
@@ -17,5 +21,5 @@ import "../../index-SzwnPTHF.js";
 import "../../styled-fvngWWLy.js";
 import "../../FormHelperText-wucHHOG8.js";
 export {
-  h as FormSublabel
+  q as FormSublabel
 };

package/dist/components/FormSublabel/index.js

@@ -1,4 +1,4 @@
-import { F as a } from "../../SelectControl-BWiB-iy9.js";
+import { F as a } from "../../SelectControl-BmDx8v5U.js";
 export {
   a as FormSublabel
 };

package/dist/components/InputControl/InputControl.js

@@ -8,8 +8,12 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { I as v } from "../../SelectControl-BWiB-iy9.js";
+import { I as A } from "../../SelectControl-BmDx8v5U.js";
 import "../../Datepicker-CJBEgBsm.js";
+import "../DescriptionDetails/DescriptionDetails.js";
+import "../DescriptionList/DescriptionList.js";
+import "../DescriptionList/DescriptionListContext.js";
+import "../DescriptionTerm/DescriptionTerm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";
@@ -22,5 +26,5 @@ import "../../FormLabel-CgNd8XLN.js";
 import "../../Tooltip-BJmTHiZe.js";
 import "../../FormHelperText-wucHHOG8.js";
 export {
-  v as InputControl
+  A as InputControl
 };

package/dist/components/InputControl/index.js

@@ -1,4 +1,4 @@
-import { I as t } from "../../SelectControl-BWiB-iy9.js";
+import { I as t } from "../../SelectControl-BmDx8v5U.js";
 export {
   t as InputControl
 };

package/dist/components/SelectControl/SelectControl.js

@@ -8,8 +8,12 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { S as v } from "../../SelectControl-BWiB-iy9.js";
+import { S as A } from "../../SelectControl-BmDx8v5U.js";
 import "../../Datepicker-CJBEgBsm.js";
+import "../DescriptionDetails/DescriptionDetails.js";
+import "../DescriptionList/DescriptionList.js";
+import "../DescriptionList/DescriptionListContext.js";
+import "../DescriptionTerm/DescriptionTerm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";
@@ -22,5 +26,5 @@ import "../../FormLabel-CgNd8XLN.js";
 import "../../Tooltip-BJmTHiZe.js";
 import "../../FormHelperText-wucHHOG8.js";
 export {
-  v as SelectControl
+  A as SelectControl
 };

package/dist/components/SelectControl/index.js

@@ -1,4 +1,4 @@
-import { S as r } from "../../SelectControl-BWiB-iy9.js";
+import { S as r } from "../../SelectControl-BmDx8v5U.js";
 export {
   r as SelectControl
 };

package/dist/main.d.ts

@@ -31,6 +31,9 @@ export * from './components/CircularProgress';
 export * from './components/Container';
 export * from './components/CssBaseline';
 export * from './components/Datepicker';
+export * from './components/DescriptionDetails';
+export * from './components/DescriptionList';
+export * from './components/DescriptionTerm';
 export * from './components/DatepickerControl';
 export * from './components/Dialog';
 export * from './components/DialogActions';