jcicl 1.0.5 → 1.0.9

package/EditableDetailItemWithIcon/EditableDetailItemWithIcon.js

@@ -1,28 +1,23 @@
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { useState as y } from "react";
-import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as k } from "../.chunks/emotion-react.browser.esm.js";
-import o from "../theme.js";
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { n as u } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as g } from "../.chunks/emotion-react.browser.esm.js";
+import e from "../theme.js";
 import { Flex as c } from "../Flex/Flex.js";
-import { Input as x } from "../Input/Input.js";
-import { DetailItemContainer as C } from "../DetailPageComponents/DetailPageComponents.js";
-import I from "../SquareIcon/SquareIcon.js";
-import l from "../SquareIconButton/SquareIconButton.js";
-import { c as a } from "../.chunks/createLucideIcon.js";
+import { Input as w } from "../Input/Input.js";
+import { DetailItemContainer as x } from "../DetailPageComponents/DetailPageComponents.js";
+import y from "../SquareIcon/SquareIcon.js";
+import m from "../SquareIconButton/SquareIconButton.js";
+import { useThemeColors as B } from "../ThemeContext.js";
+import { c as D } from "../.chunks/createLucideIcon.js";
+import { X as z, C as j } from "../.chunks/x.js";
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const G = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], _ = a("check", G);
-/**
- * @license lucide-react v0.525.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const z = [
+const G = [
   [
     "path",
     {
@@ -31,88 +26,78 @@ const z = [
     }
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
-], D = a("pencil", z);
-/**
- * @license lucide-react v0.525.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const j = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], A = a("x", j), L = h("p")(() => ({
-  ...k`
+], L = D("pencil", G), S = u("p")(() => ({
+  ...g`
     font-size: 0.875rem;
     font-weight: 500;
-    color: ${o.colors.charcoal} !important;
+    color: ${e.colors.charcoal} !important;
     margin: 0;
     margin-bottom: 0.25rem;
   `
-})), N = h("p")(() => ({
-  ...k`
+})), W = u("p")(() => ({
+  ...g`
     font-size: 1rem;
     word-wrap: break-word;
     margin: 0;
   `
-})), H = ({
-  icon: u,
-  iconSize: g = 20,
+})), O = (i) => /* @__PURE__ */ o(q, { ...i }), q = ({
+  icon: i,
+  iconSize: k = 20,
   onValueChange: s,
-  onSave: m,
+  onSave: p,
   onCancel: d,
-  customEditForm: n,
-  editButtonMarginTop: p,
-  label: b,
+  customEditForm: l,
+  editButtonMarginTop: h,
+  label: I,
   value: f
 }) => {
-  const [e, i] = y(!1);
-  return /* @__PURE__ */ r(C, { children: /* @__PURE__ */ t(c, { gap: "19px", children: [
-    /* @__PURE__ */ r(
-      I,
+  const [r, a] = b(!1), t = B();
+  return /* @__PURE__ */ o(x, { children: /* @__PURE__ */ n(c, { gap: "19px", children: [
+    /* @__PURE__ */ o(
+      y,
       {
-        icon: u,
-        iconSize: g,
-        color: o.colors.darkGreen,
-        backgroundColor: o.colors.whiteGreenA
+        icon: i,
+        iconSize: k,
+        color: t.themeIconColorB,
+        backgroundColor: t.themeIconBackgroundB
       }
     ),
-    /* @__PURE__ */ t(c, { justifyContent: "space-between", width: "100%", gap: "12px", children: [
-      /* @__PURE__ */ t(c, { column: !0, styles: { flexGrow: 1 }, children: [
-        /* @__PURE__ */ r(L, { children: b }),
-        !e && /* @__PURE__ */ r(N, { children: f }),
-        e && !n && /* @__PURE__ */ r(x, { defaultValue: f, onChange: (w) => s && s(w.target.value) }),
-        e && n && n
+    /* @__PURE__ */ n(c, { justifyContent: "space-between", width: "100%", gap: "12px", children: [
+      /* @__PURE__ */ n(c, { column: !0, styles: { flexGrow: 1 }, children: [
+        /* @__PURE__ */ o(S, { children: I }),
+        !r && /* @__PURE__ */ o(W, { children: f }),
+        r && !l && /* @__PURE__ */ o(w, { defaultValue: f, onChange: (C) => s && s(C.target.value) }),
+        r && l && l
       ] }),
-      !e && /* @__PURE__ */ r(
-        l,
+      !r && /* @__PURE__ */ o(
+        m,
         {
-          backgroundColor: o.colors.whiteGreenA,
-          color: o.colors.darkGreen,
-          icon: D,
-          onClick: () => i(!0)
+          backgroundColor: t.themeIconBackgroundB,
+          color: t.themeIconColorB,
+          icon: L,
+          onClick: () => a(!0)
         }
       ),
-      e && /* @__PURE__ */ t(c, { gap: "9px", styles: { marginTop: p || "0" }, children: [
-        /* @__PURE__ */ r(
-          l,
+      r && /* @__PURE__ */ n(c, { gap: "9px", styles: { marginTop: h || "0" }, children: [
+        /* @__PURE__ */ o(
+          m,
           {
-            backgroundColor: o.colors.cherryBlossom,
-            color: o.colors.maroon,
-            icon: A,
+            backgroundColor: e.colors.cherryBlossom,
+            color: e.colors.maroon,
+            icon: z,
             onClick: () => {
-              i(!1), d && d();
+              a(!1), d && d();
             }
           }
         ),
-        /* @__PURE__ */ r(
-          l,
+        /* @__PURE__ */ o(
+          m,
           {
-            icon: _,
-            backgroundColor: o.colors.whiteGreenA,
-            color: o.colors.darkGreen,
+            icon: j,
+            backgroundColor: e.colors.whiteGreenA,
+            color: e.colors.darkGreen,
             onClick: () => {
-              i(!1), m && m();
+              a(!1), p && p();
             }
           }
         )
@@ -121,5 +106,5 @@ const j = [
   ] }) });
 };
 export {
-  H as default
+  O as default
 };

package/EditableInfoCard/EditableInfoCard.js

@@ -1,26 +1,27 @@
-import { jsx as o, jsxs as n, Fragment as k } from "react/jsx-runtime";
-import { useState as B, useEffect as N } from "react";
+import { jsx as o, jsxs as n, Fragment as P } from "react/jsx-runtime";
+import { useState as T, useEffect as O } from "react";
 import { n as l } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as m } from "../.chunks/emotion-react.browser.esm.js";
-import { c as j } from "../.chunks/createSvgIcon.js";
-import { X as O } from "../.chunks/Close.js";
-import d from "../theme.js";
-import { LabeledValue as Q } from "../LabeledValue/LabeledValue.js";
-import { LabeledInput as Z } from "../LabeledInput/LabeledInput.js";
+import { c as f } from "../.chunks/emotion-react.browser.esm.js";
+import { c as F } from "../.chunks/createSvgIcon.js";
+import { X as Q } from "../.chunks/Close.js";
+import C from "../theme.js";
+import { LabeledValue as Z } from "../LabeledValue/LabeledValue.js";
+import { LabeledInput as _ } from "../LabeledInput/LabeledInput.js";
 import L from "../Loading/Loading.js";
 import M from "../WithLoading/WithLoading.js";
-import { Flex as f } from "../Flex/Flex.js";
-import { Tooltip as x } from "../Tooltip/Tooltip.js";
-import { T as _ } from "../.chunks/TextField.js";
-import { B as oo } from "../.chunks/ButtonBase.js";
-const eo = j(/* @__PURE__ */ o("path", {
+import { Flex as h } from "../Flex/Flex.js";
+import { Tooltip as $ } from "../Tooltip/Tooltip.js";
+import { useThemeColors as oo } from "../ThemeContext.js";
+import { T as eo } from "../.chunks/TextField.js";
+import { B as to } from "../.chunks/ButtonBase.js";
+const ro = F(/* @__PURE__ */ o("path", {
   d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
-}), "Edit"), to = j(/* @__PURE__ */ o("path", {
+}), "Edit"), no = F(/* @__PURE__ */ o("path", {
   d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-}), "Check"), T = l("div")(
-  ({ width: t, padding: a, shadow: r, styles: u, isEditing: c }) => ({
-    ...m`
-      width: ${t};
+}), "Check"), V = l("div")(
+  ({ width: e, padding: a, shadow: r, styles: m, isEditing: d, customTheme: u }) => ({
+    ...f`
+      width: ${e};
       max-width: 100%;
       box-sizing: border-box;
       h3 {
@@ -32,19 +33,21 @@ const eo = j(/* @__PURE__ */ o("path", {
       padding: ${a};
       display: flex;
       flex-direction: column;
-      box-shadow: ${r};
+      box-shadow: ${r || u.themeShadowB};
       border-radius: 5px;
-      background-color: ${d.colors.white};
-      ${u};
-      z-index: ${c ? 0 : 1};
+      background-color: ${C.colors.white};
+      ${m};
+      z-index: ${d ? 0 : 1};
       position: relative;
-      transform: ${c ? "rotateY(-180deg)" : "rotateY(0deg)"};
+      transform: ${d ? "rotateY(-180deg)" : "rotateY(0deg)"};
       transition: 920ms all ease-in-out;
-      opacity: ${c ? "0" : "1"};
+      opacity: ${d ? "0" : "1"};
     `
   })
-), ro = l(_)({
-  backgroundColor: d.colors.white,
+), ao = l(eo, {
+  shouldForwardProp: (e) => !["customTheme"].includes(e)
+})(({ customTheme: e }) => ({
+  backgroundColor: C.colors.white,
   borderRadius: "0",
   input: {
     fontSize: "28px",
@@ -52,14 +55,14 @@ const eo = j(/* @__PURE__ */ o("path", {
     transition: "313ms all ease-out",
     padding: "0",
     borderRadius: "0",
-    borderBottom: `1px solid ${d.colors.gray}`,
+    borderBottom: `1px solid ${C.colors.gray}`,
     "&:focus-visible": {
-      boxShadow: `0 3px 2px -2px ${d.colors.darkGreen}`
+      boxShadow: `0 3px 2px -2px ${e.themeDark}`
     }
   },
   "&:hover, :focus-visible": {
     input: {
-      boxShadow: `0 3px 2px -2px ${d.colors.darkGreen}`
+      boxShadow: `0 3px 2px -2px ${e.themeDark}`
     }
   },
   fieldset: {
@@ -71,82 +74,82 @@ const eo = j(/* @__PURE__ */ o("path", {
       border: "none"
     }
   }
-}), no = l(T)(({ isEditing: t }) => ({
-  ...m`
+})), io = l(V)(({ isEditing: e }) => ({
+  ...f`
     position: absolute;
     top: 0;
-    z-index: ${t ? 1 : 0};
-    transform: ${t ? "rotateY(0deg)" : "rotateY(-180deg)"};
-    opacity: ${t ? "1" : "0"};
+    z-index: ${e ? 1 : 0};
+    transform: ${e ? "rotateY(0deg)" : "rotateY(-180deg)"};
+    opacity: ${e ? "1" : "0"};
     transition: 920ms all ease-in-out;
   `
-})), P = l("div")(
-  ({ spacing: t, columns: a, numRows: r }) => ({
-    ...m`
-      margin-top: calc(${t} * 0.75);
-      grid-row-gap: ${t};
-      grid-column-gap: calc(${t} * 1.5);
+})), R = l("div")(
+  ({ spacing: e, columns: a, numRows: r }) => ({
+    ...f`
+      margin-top: calc(${e} * 0.75);
+      grid-row-gap: ${e};
+      grid-column-gap: calc(${e} * 1.5);
       display: grid;
       grid-template-columns: repeat(${a}, 1fr);
       grid-template-rows: repeat(${r}, 1fr);
     `
   })
-), $ = l(oo)(() => ({
-  ...m`
+), w = l(to)(() => ({
+  ...f`
     width: 40px;
     height: 40px;
     border-radius: 50%;
   `
-})), ao = l("div")`
+})), lo = l("div")`
   position: relative;
   width: 100%;
-`, R = l("div")`
+`, j = l("div")`
   height: 19px;
-`, vo = ({
-  decorativeElement: t,
+`, yo = ({
+  decorativeElement: e,
   title: a,
   items: r = [],
-  padding: u = "1rem 2rem",
-  shadow: c = d.boxShadows.darkGreen,
-  spacing: V = "2rem",
-  titleSpacing: w = "1rem",
-  canEditTitle: C = !0,
-  columns: v = 3,
+  padding: m = "1rem 2rem",
+  shadow: d,
+  spacing: u = "2rem",
+  titleSpacing: v = "1rem",
+  canEditTitle: I = !0,
+  columns: z = 3,
   styles: Y,
   width: E = "100%",
-  loading: I = !1,
-  titleLoading: z = !1,
-  onSave: F = () => {
+  loading: y = !1,
+  titleLoading: S = !1,
+  onSave: D = () => {
   },
-  onCancel: G = () => {
+  onCancel: W = () => {
   },
-  onEdit: W = () => {
+  onEdit: X = () => {
   }
 }) => {
-  const b = r.reduce((e, i) => ({ ...e, [i.label]: i.value }), { titleValue: a }), [X, g] = B(!1), [p, h] = B(b);
-  N(() => {
-    h(b);
+  const b = r.reduce((t, i) => ({ ...t, [i.label]: i.value }), { titleValue: a }), [U, g] = T(!1), [c, p] = T(b);
+  O(() => {
+    p(b);
   }, [r]);
-  const U = () => {
-    W(), g(!0);
-  }, q = () => {
-    F(p), g(!1);
+  const q = () => {
+    X(), g(!0);
   }, A = () => {
-    G(), h(b), g(!1);
-  }, D = (e, i) => {
-    h((K) => ({ ...K, [e]: i }));
-  }, H = (e) => {
-    h((i) => ({ ...i, titleValue: e }));
-  }, J = Math.ceil(r.length / v), s = 50, y = { width: E, padding: u, shadow: c, styles: Y, isEditing: X }, S = { spacing: V, columns: v, numRows: J };
-  return /* @__PURE__ */ n(ao, { children: [
-    /* @__PURE__ */ n(T, { ...y, children: [
-      /* @__PURE__ */ n(f, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
-        /* @__PURE__ */ n(f, { width: "100%", gap: w, alignItems: "center", children: [
-          t && t,
-          /* @__PURE__ */ o(M, { size: 36, loading: C && z, children: /* @__PURE__ */ o("h3", { children: a }) })
+    D(c), g(!1);
+  }, G = () => {
+    W(), p(b), g(!1);
+  }, H = (t, i) => {
+    p((N) => ({ ...N, [t]: i }));
+  }, J = (t) => {
+    p((i) => ({ ...i, titleValue: t }));
+  }, K = Math.ceil(r.length / z), s = 50, k = { width: E, padding: m, shadow: d, styles: Y, isEditing: U }, B = { spacing: u, columns: z, numRows: K }, x = oo();
+  return /* @__PURE__ */ n(lo, { children: [
+    /* @__PURE__ */ n(V, { ...k, customTheme: x, children: [
+      /* @__PURE__ */ n(h, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
+        /* @__PURE__ */ n(h, { width: "100%", gap: v, alignItems: "center", children: [
+          e && e,
+          /* @__PURE__ */ o(M, { size: 36, loading: I && S, children: /* @__PURE__ */ o("h3", { children: a }) })
         ] }),
         /* @__PURE__ */ o(
-          x,
+          $,
           {
             title: "Edit",
             placement: "top",
@@ -162,12 +165,12 @@ const eo = j(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: U, children: /* @__PURE__ */ o(eo, {}) })
+            children: /* @__PURE__ */ o(w, { onClick: q, children: /* @__PURE__ */ o(ro, {}) })
           }
         )
       ] }),
-      /* @__PURE__ */ o(P, { ...S, children: I ? /* @__PURE__ */ n(k, { children: [
-        /* @__PURE__ */ o(R, {}),
+      /* @__PURE__ */ o(R, { ...B, children: y ? /* @__PURE__ */ n(P, { children: [
+        /* @__PURE__ */ o(j, {}),
         /* @__PURE__ */ o(
           L,
           {
@@ -179,22 +182,23 @@ const eo = j(/* @__PURE__ */ o("path", {
             }
           }
         )
-      ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(Q, { ...e }, e.label)) })
+      ] }) : r == null ? void 0 : r.map((t) => /* @__PURE__ */ o(Z, { ...t }, t.label)) })
     ] }),
-    /* @__PURE__ */ n(no, { ...y, children: [
-      /* @__PURE__ */ n(f, { width: "100%", justifyContent: "space-between", children: [
-        /* @__PURE__ */ n(f, { width: "100%", gap: w, alignItems: "center", children: [
-          t && t,
-          C ? /* @__PURE__ */ o(M, { size: 36, loading: z, children: /* @__PURE__ */ o(
-            ro,
+    /* @__PURE__ */ n(io, { ...k, customTheme: x, children: [
+      /* @__PURE__ */ n(h, { width: "100%", justifyContent: "space-between", children: [
+        /* @__PURE__ */ n(h, { width: "100%", gap: v, alignItems: "center", children: [
+          e && e,
+          I ? /* @__PURE__ */ o(M, { size: 36, loading: S, children: /* @__PURE__ */ o(
+            ao,
             {
-              onChange: (e) => H(e.target.value),
-              value: (p == null ? void 0 : p.titleValue) ?? a
+              onChange: (t) => J(t.target.value),
+              value: (c == null ? void 0 : c.titleValue) ?? a,
+              customTheme: x
             }
           ) }) : /* @__PURE__ */ o("h3", { children: a })
         ] }),
         /* @__PURE__ */ o(
-          x,
+          $,
           {
             title: "Cancel",
             placement: "top",
@@ -210,11 +214,11 @@ const eo = j(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: A, children: /* @__PURE__ */ o(O, {}) })
+            children: /* @__PURE__ */ o(w, { onClick: G, children: /* @__PURE__ */ o(Q, {}) })
           }
         ),
         /* @__PURE__ */ o(
-          x,
+          $,
           {
             title: "Save",
             placement: "top",
@@ -230,12 +234,12 @@ const eo = j(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: q, children: /* @__PURE__ */ o(to, {}) })
+            children: /* @__PURE__ */ o(w, { onClick: A, children: /* @__PURE__ */ o(no, {}) })
           }
         )
       ] }),
-      /* @__PURE__ */ o(P, { ...S, children: I ? /* @__PURE__ */ n(k, { children: [
-        /* @__PURE__ */ o(R, {}),
+      /* @__PURE__ */ o(R, { ...B, children: y ? /* @__PURE__ */ n(P, { children: [
+        /* @__PURE__ */ o(j, {}),
         /* @__PURE__ */ o(
           L,
           {
@@ -247,19 +251,19 @@ const eo = j(/* @__PURE__ */ o("path", {
             }
           }
         )
-      ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
-        Z,
+      ] }) : r == null ? void 0 : r.map((t) => /* @__PURE__ */ o(
+        _,
         {
-          label: e.label,
-          value: p[e.label],
-          onChange: (i) => D(e.label, i.target.value)
+          label: t.label,
+          value: c[t.label],
+          onChange: (i) => H(t.label, i.target.value)
         },
-        e.label
+        t.label
       )) })
     ] })
   ] });
 };
 export {
-  vo as EditableInfoCard,
-  vo as default
+  yo as EditableInfoCard,
+  yo as default
 };

package/FormComponents/FormComponents.d.ts

@@ -1,10 +1,16 @@
 import { SerializedStyles } from '@emotion/react';
-export declare const FormSection: import('@emotion/styled').StyledComponent<{
+import { CustomThemeProps } from '../../../../../../../../../src/components/theme';
+import { PropsWithChildren, HTMLAttributes } from 'react';
+interface WithCustomTheme {
+    customTheme: CustomThemeProps;
+}
+interface FormSectionProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare const FormSection: React.FC<PropsWithChildren<FormSectionProps>>;
+export declare const FormSectionStyles: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-} & {
-    boxShadow?: string;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & WithCustomTheme, import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FormFieldGrid: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
@@ -13,30 +19,31 @@ export declare const FormFieldGrid: import('@emotion/styled').StyledComponent<{
     columnsOverride?: string;
     gap?: number;
     customStyles?: SerializedStyles;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FormFieldCheckboxContainer: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FormSectionTitle: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 export declare const FormSubtitle: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 } & {
     underlined?: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 export declare const FormTextLine: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 } & {
     underlined?: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 export declare const FormSubsectionTitle: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 } & {
     underlined?: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export {};