property-practice-ui 0.1.2 → 0.1.3

package/dist/atoms.js

@@ -1,9 +1,6 @@
-import { HiArrowUpRight } from 'react-icons/hi2';
-import styled6, { keyframes } from 'styled-components';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { FaCheckCircle } from 'react-icons/fa';
-
 // src/atoms/ArrowButton/ArrowButton.tsx
+import { HiArrowUpRight } from "react-icons/hi2";
+import styled from "styled-components";
 
 // src/tokens/colors.ts
 var colors = {
@@ -19,8 +16,14 @@ var colors = {
     light: "#cacbcc"
   },
   border: {
+    primary: "#669999",
+    secondary: "rgba(30, 67, 132, 0.2)",
     hover: "#cacbcc",
-    active: "#828282"},
+    active: "#828282",
+    error: "#F87171",
+    focus: "#3B82F6",
+    brand: "#1D3C77"
+  },
   text: {
     brand: "#1D3C77",
     primary: "#262626",
@@ -38,8 +41,11 @@ var colors = {
     secondary: "rgba(30, 67, 132, 1)"
   }
 };
+
+// src/atoms/ArrowButton/ArrowButton.tsx
+import { jsx } from "react/jsx-runtime";
 var variants = ["brand", "teal", "blue"];
-var StyledContainer = styled6.button`
+var StyledContainer = styled.button`
   padding: 0.75rem;
   ${(props) => props.as === "button" ? `
     width: 2.5rem;
@@ -69,7 +75,7 @@ var StyledContainer = styled6.button`
     transform: rotate(45deg);
   }
 `;
-var StyledIcon = styled6(HiArrowUpRight)`
+var StyledIcon = styled(HiArrowUpRight)`
   width: 1rem;
   height: 1rem;
   color: ${colors.text.secondary};
@@ -92,10 +98,16 @@ var ArrowButton = ({
 };
 ArrowButton.variants = variants;
 
+// src/atoms/Button/Button.tsx
+import styled3 from "styled-components";
+
 // src/tokens/radii.ts
 var radii = {
+  sm: "4px",
   md: "8px",
-  lg: "10px"};
+  lg: "10px",
+  xl: "16px"
+};
 
 // src/tokens/spaces.ts
 var spaces = {
@@ -119,10 +131,14 @@ var spaces = {
   9: "56px",
   20: "150px"
 };
+
+// src/atoms/Loader/Loader.tsx
+import styled2, { keyframes } from "styled-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var spin = keyframes`
   to { transform: rotate(360deg); }
 `;
-var Ring = styled6.span`
+var Ring = styled2.span`
   display: inline-block;
   width: ${({ size }) => typeof size === "number" ? `${size}px` : size};
   height: ${({ size }) => typeof size === "number" ? `${size}px` : size};
@@ -145,7 +161,7 @@ var Loader = ({
   thickness = 3,
   speed = "0.8s"
 }) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Ring,
     {
       role: "status",
@@ -156,8 +172,11 @@ var Loader = ({
     }
   );
 };
+
+// src/atoms/Button/Button.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var ButtonTypes = ["submit", "reset", "button"];
-var StyledButton = styled6.button`
+var StyledButton = styled3.button`
   padding: ${spaces[2]} ${spaces[4]};
   background-color: ${(props) => props.variant === "light" ? colors.button.primary : colors.button.secondary};
   border-radius: ${radii.lg};
@@ -184,7 +203,7 @@ var StyledButton = styled6.button`
     color: ${colors.text.primary};
   }
 `;
-var ButtonText = styled6.span`
+var ButtonText = styled3.span`
   font-size: 12px;
   font-weight: 700;
 `;
@@ -197,7 +216,7 @@ var Button = ({
   variant = "light",
   isLoading
 }) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     StyledButton,
     {
       type,
@@ -206,14 +225,18 @@ var Button = ({
       variant,
       children: !isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
         typeof icon !== "undefined" && icon,
-        /* @__PURE__ */ jsx(ButtonText, { children: text })
-      ] }) : /* @__PURE__ */ jsx(Loader, { size: "20px" })
+        /* @__PURE__ */ jsx3(ButtonText, { children: text })
+      ] }) : /* @__PURE__ */ jsx3(Loader, { size: "20px" })
     }
   );
 };
 Button.types = ButtonTypes;
+
+// src/atoms/Description/Description.tsx
+import styled4 from "styled-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var variants2 = ["primary", "secondary", "subtle", "error"];
-var StyledDescription = styled6.p`
+var StyledDescription = styled4.p`
   margin: 0;
   font-size: 1rem;
   line-height: 1.6;
@@ -236,10 +259,14 @@ var Description = ({
   children,
   variant = "primary"
 }) => {
-  return /* @__PURE__ */ jsx(StyledDescription, { variant, children });
+  return /* @__PURE__ */ jsx4(StyledDescription, { variant, children });
 };
 Description.variants = variants2;
-var StyledButton2 = styled6.button`
+
+// src/atoms/ExtendedButton/ExtendedButton.tsx
+import styled5 from "styled-components";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var StyledButton2 = styled5.button`
   display: flex;
   align-items: center;
   height: 2.5rem;
@@ -260,11 +287,15 @@ var ExtendedButton = ({
   textBgVariant = "brand",
   textVariant = "secondary"
 }) => {
-  return /* @__PURE__ */ jsxs(StyledButton2, { onClick, children: [
-    /* @__PURE__ */ jsx(ArrowButton, { asChild: true, variant: arrowVariant }),
-    /* @__PURE__ */ jsx(TextButton, { asChild: true, text, bgVariant: textBgVariant, textVariant, uppercase: false })
+  return /* @__PURE__ */ jsxs2(StyledButton2, { onClick, children: [
+    /* @__PURE__ */ jsx5(ArrowButton, { asChild: true, variant: arrowVariant }),
+    /* @__PURE__ */ jsx5(TextButton, { asChild: true, text, bgVariant: textBgVariant, textVariant, uppercase: false })
   ] });
 };
+
+// src/atoms/FeatureItem/FeatureItem.tsx
+import styled6 from "styled-components";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var Container = styled6.div`
   display: flex;
   gap: 1rem;
@@ -320,24 +351,35 @@ var FeatureItem = ({
         return "subtle";
     }
   };
-  return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsx(ThumbnailWrapper, { $size: thumbnailSize, thumbnailBgColor, children: thumbnail }),
-    /* @__PURE__ */ jsxs(Content, { children: [
-      /* @__PURE__ */ jsx(Title, { titleColor, children: title }),
-      /* @__PURE__ */ jsx(Description2, { descriptionColor: getDescriptionColor(), children: description })
+  return /* @__PURE__ */ jsxs3(Container, { children: [
+    /* @__PURE__ */ jsx6(ThumbnailWrapper, { $size: thumbnailSize, thumbnailBgColor, children: thumbnail }),
+    /* @__PURE__ */ jsxs3(Content, { children: [
+      /* @__PURE__ */ jsx6(Title, { titleColor, children: title }),
+      /* @__PURE__ */ jsx6(Description2, { descriptionColor: getDescriptionColor(), children: description })
     ] })
   ] });
 };
 
+// src/atoms/FormContainer/FormContainer.tsx
+import styled7 from "styled-components";
+
 // src/tokens/breakpoints.ts
 var breakpoints = {
-  lg: "1024px"};
-var Container2 = styled6.div`
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+};
+
+// src/atoms/FormContainer/FormContainer.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Container2 = styled7.div`
   width: 100%;
   display: flex;
   justify-content: center;
 `;
-var InnerContainer = styled6.div`
+var InnerContainer = styled7.div`
   display: flex;
   flex-direction: column;
   padding: ${spaces[4]};
@@ -346,8 +388,12 @@ var InnerContainer = styled6.div`
   gap: ${(props) => spaces[props.space]};
 `;
 var FormContainer = ({ children, space = 4 }) => {
-  return /* @__PURE__ */ jsx(Container2, { children: /* @__PURE__ */ jsx(InnerContainer, { space, children }) });
+  return /* @__PURE__ */ jsx7(Container2, { children: /* @__PURE__ */ jsx7(InnerContainer, { space, children }) });
 };
+
+// src/atoms/Header/Header.tsx
+import styled8 from "styled-components";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var variants3 = {
   h1: {
     fontSize: "24px",
@@ -368,7 +414,7 @@ var variants3 = {
     letterSpacing: "0.2px"
   }
 };
-var StyledText = styled6.h1`
+var StyledText = styled8.h1`
   color: ${(props) => colors.text[props?.color]};
   font-size: ${(props) => variants3[props.variant].fontSize};
   font-weight: ${(props) => variants3[props.variant].fontWeight};
@@ -380,12 +426,18 @@ var Header = ({
   variant = "h1",
   color = "primary"
 }) => {
-  return /* @__PURE__ */ jsx(StyledText, { variant, color, children });
+  return /* @__PURE__ */ jsx8(StyledText, { variant, color, children });
 };
 
+// src/atoms/Input/Input.tsx
+import styled9 from "styled-components";
+
 // src/types.ts
 var InputTypes = ["number", "text", "email", "date"];
-var StyledInput = styled6.input`
+
+// src/atoms/Input/Input.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var StyledInput = styled9.input`
   display: block;
   height: 100%;
   width: 100%;
@@ -395,19 +447,31 @@ var StyledInput = styled6.input`
   font-weight: 600;
 `;
 var Input = ({ name, onChange, ...rest }) => {
-  return /* @__PURE__ */ jsx(StyledInput, { name, onChange, ...rest });
+  return /* @__PURE__ */ jsx9(StyledInput, { name, onChange, ...rest });
 };
 Input.types = InputTypes;
 
+// src/atoms/Label/Label.tsx
+import styled10 from "styled-components";
+
 // src/tokens/sizes.ts
 var sizes = {
-  sm: "12px"};
-var StyledLabel = styled6.span`
+  sm: "12px",
+  md: "14px",
+  lg: "18px",
+  xl: "24px",
+  0: "1px",
+  0.5: "1.5px"
+};
+
+// src/atoms/Label/Label.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var StyledLabel = styled10.span`
   color: ${(props) => colors.text[props?.color]};
   font-size: ${sizes.sm};
   font-weight: ${(props) => props.fontWeight};
 `;
-styled6(StyledLabel)`
+var StyledFloatingLabel = styled10(StyledLabel)`
   position: absolute;
   left: 0;
   bottom: 100%;
@@ -422,10 +486,14 @@ var Label = ({
   color = "subtle",
   fontWeight = "500"
 }) => {
-  return /* @__PURE__ */ jsx(StyledLabel, { color, fontWeight, children: value });
+  return /* @__PURE__ */ jsx10(StyledLabel, { color, fontWeight, children: value });
 };
+
+// src/atoms/Pill/Pill.tsx
+import styled11 from "styled-components";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var variants4 = ["primary", "secondary", "subtle", "error"];
-var StyledPill = styled6.span`
+var StyledPill = styled11.span`
   display: inline-block;
   padding: 0.5rem 1rem;
   border-radius: 9999px;
@@ -484,10 +552,15 @@ var Pill = ({
   variant = "primary",
   inverse = false
 }) => {
-  return /* @__PURE__ */ jsx(StyledPill, { variant, $inverse: inverse, children });
+  return /* @__PURE__ */ jsx11(StyledPill, { variant, $inverse: inverse, children });
 };
 Pill.variants = variants4;
-var Container3 = styled6.div`
+
+// src/atoms/RadioItem/RadioItem.tsx
+import { FaCheckCircle } from "react-icons/fa";
+import styled12 from "styled-components";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var Container3 = styled12.div`
   border-radius: ${radii.md};
   padding: ${spaces["3"]};
   display: flex;
@@ -513,21 +586,25 @@ var Container3 = styled6.div`
     background-color: rgba(255, 255, 255, 0.92);
   }
 `;
-var Label2 = styled6.span`
+var Label2 = styled12.span`
   font-size: 16px;
   font-weight: ${(props) => props.isSelected ? "800" : "400"};
   text-align: center;
 `;
 var RadioItem = ({ label, isSelected, onClick }) => {
-  return /* @__PURE__ */ jsxs(Container3, { onClick, children: [
-    isSelected && /* @__PURE__ */ jsx(FaCheckCircle, { color: colors.background.blue }),
-    /* @__PURE__ */ jsx(Label2, { isSelected, children: label })
+  return /* @__PURE__ */ jsxs4(Container3, { onClick, children: [
+    isSelected && /* @__PURE__ */ jsx12(FaCheckCircle, { color: colors.background.blue }),
+    /* @__PURE__ */ jsx12(Label2, { isSelected, children: label })
   ] });
 };
-var Container4 = styled6.div`
+
+// src/atoms/SecondaryInput/SecondaryInput.tsx
+import styled13 from "styled-components";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var Container4 = styled13.div`
   width: 100%;
 `;
-var Label3 = styled6.label`
+var Label3 = styled13.label`
   display: block;
   font-size: 13px;
   font-weight: 600;
@@ -535,12 +612,12 @@ var Label3 = styled6.label`
   opacity: 0.8;
   margin-bottom: 0.5rem;
 `;
-var StyledInput2 = styled6.input`
+var StyledInput2 = styled13.input`
   height: 2.75rem;
   width: 100%;
   border-radius: 6px;
   border: 1px solid ${(props) => props.$borderColor || "#d1d5db"};
-  background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.light};
+  background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.light || "#f9fafb"};
   padding: 0 0.75rem;
   font-size: 15px;
   color: ${(props) => props.$textColor ? colors.text[props.$textColor] : colors.text.primary};
@@ -557,11 +634,11 @@ var StyledInput2 = styled6.input`
 }};
   }
 `;
-var StyledTextArea = styled6.textarea`
+var StyledTextArea = styled13.textarea`
   width: 100%;
   border-radius: 6px;
   border: 1px solid ${(props) => props.$borderColor || "#d1d5db"};
-  background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.light};
+  background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.light || "#f9fafb"};
   padding: 0.75rem;
   font-size: 15px;
   color: ${(props) => props.$textColor ? colors.text[props.$textColor] : colors.text.primary};
@@ -589,9 +666,9 @@ var SecondaryInput = ({
   focusRingColor = "brand",
   ...rest
 }) => {
-  return /* @__PURE__ */ jsxs(Container4, { children: [
-    typeof label === "string" && /* @__PURE__ */ jsx(Label3, { $color: labelColor, children: label }),
-    isTextArea ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs5(Container4, { children: [
+    typeof label === "string" && /* @__PURE__ */ jsx13(Label3, { $color: labelColor, children: label }),
+    isTextArea ? /* @__PURE__ */ jsx13(
       StyledTextArea,
       {
         ...rest,
@@ -602,7 +679,7 @@ var SecondaryInput = ({
         $borderColor: borderColor,
         $focusRingColor: focusRingColor
       }
-    ) : /* @__PURE__ */ jsx(
+    ) : /* @__PURE__ */ jsx13(
       StyledInput2,
       {
         ...rest,
@@ -615,8 +692,12 @@ var SecondaryInput = ({
     )
   ] });
 };
+
+// src/atoms/SocialButton/SocialButton.tsx
+import styled14 from "styled-components";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var variants5 = ["primary", "secondary", "inverse", "filled"];
-var StyledButton3 = styled6.button`
+var StyledButton3 = styled14.button`
   width: 2.5rem;
   height: 2.5rem;
   display: flex;
@@ -680,7 +761,7 @@ var SocialButton = ({
   variant = "primary",
   ariaLabel
 }) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx14(
     StyledButton3,
     {
       onClick,
@@ -691,8 +772,12 @@ var SocialButton = ({
   );
 };
 SocialButton.variants = variants5;
+
+// src/atoms/TermsCheckbox/TermsCheckbox.tsx
+import styled15 from "styled-components";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var variants6 = ["primary", "secondary", "subtle"];
-var CheckboxContainer = styled6.label`
+var CheckboxContainer = styled15.label`
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
@@ -700,12 +785,12 @@ var CheckboxContainer = styled6.label`
   font-size: 0.875rem;
   line-height: 1.5;
 `;
-var HiddenCheckbox = styled6.input.attrs({ type: "checkbox" })`
+var HiddenCheckbox = styled15.input.attrs({ type: "checkbox" })`
   position: absolute;
   opacity: 0;
   cursor: pointer;
 `;
-var StyledCheckbox = styled6.div`
+var StyledCheckbox = styled15.div`
   width: 1.25rem;
   height: 1.25rem;
   border: 2px solid ${(props) => {
@@ -753,7 +838,7 @@ var StyledCheckbox = styled6.div`
     display: ${(props) => props.$checked ? "block" : "none"};
   }
 `;
-var Text = styled6.span`
+var Text = styled15.span`
   color: ${(props) => {
   switch (props.variant) {
     case "primary":
@@ -767,7 +852,7 @@ var Text = styled6.span`
   }
 }};
 `;
-var Link = styled6.a`
+var Link = styled15.a`
   color: ${(props) => {
   switch (props.variant) {
     case "primary":
@@ -798,27 +883,31 @@ var TermsCheckbox = ({
   cookieUrl = "/cookie-policy",
   variant = "primary"
 }) => {
-  return /* @__PURE__ */ jsxs(CheckboxContainer, { children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs6(CheckboxContainer, { children: [
+    /* @__PURE__ */ jsx15(
       HiddenCheckbox,
       {
         checked,
         onChange: (e) => onChange(e.target.checked)
       }
     ),
-    /* @__PURE__ */ jsx(StyledCheckbox, { $checked: checked, variant }),
-    /* @__PURE__ */ jsxs(Text, { variant, children: [
+    /* @__PURE__ */ jsx15(StyledCheckbox, { $checked: checked, variant }),
+    /* @__PURE__ */ jsxs6(Text, { variant, children: [
       text,
       " ",
-      /* @__PURE__ */ jsx(Link, { href: termsUrl, variant, target: "_blank", rel: "noopener noreferrer", children: termsText }),
+      /* @__PURE__ */ jsx15(Link, { href: termsUrl, variant, target: "_blank", rel: "noopener noreferrer", children: termsText }),
       " ",
       "and",
       " ",
-      /* @__PURE__ */ jsx(Link, { href: cookieUrl, variant, target: "_blank", rel: "noopener noreferrer", children: cookieText })
+      /* @__PURE__ */ jsx15(Link, { href: cookieUrl, variant, target: "_blank", rel: "noopener noreferrer", children: cookieText })
     ] })
   ] });
 };
 TermsCheckbox.variants = variants6;
+
+// src/atoms/Text/Text.tsx
+import styled16 from "styled-components";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var sizes2 = ["sm", "md", "lg"];
 var variants7 = {
   sm: {
@@ -834,7 +923,7 @@ var variants7 = {
     fontWeight: 500
   }
 };
-var StyledText2 = styled6.h1`
+var StyledText2 = styled16.h1`
   color: ${(props) => colors.text[props?.color]};
   font-size: ${(props) => variants7[props.variant].fontSize};
   font-weight: ${(props) => variants7[props.variant].fontWeight};
@@ -844,10 +933,14 @@ var Text2 = ({
   color = "primary",
   variant = "md"
 }) => {
-  return /* @__PURE__ */ jsx(StyledText2, { color, variant, children });
+  return /* @__PURE__ */ jsx16(StyledText2, { color, variant, children });
 };
 Text2.variants = sizes2;
-var StyledTextarea = styled6.textarea`
+
+// src/atoms/Textarea/Textarea.tsx
+import styled17 from "styled-components";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var StyledTextarea = styled17.textarea`
   display: block;
   width: 100%;
   height: 100%;
@@ -863,12 +956,16 @@ var Textarea = ({
   rows = 3,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx(StyledTextarea, { name, onChange, rows, ...rest });
+  return /* @__PURE__ */ jsx17(StyledTextarea, { name, onChange, rows, ...rest });
 };
 Textarea.types = InputTypes;
+
+// src/atoms/TextButton/TextButton.tsx
+import styled18 from "styled-components";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var bgVariants = ["primary", "secondary", "tertiary", "subtle", "blue", "brand", "light", "transparent"];
 var textVariants = ["brand", "primary", "secondary", "tertiary", "subtle", "light", "error", "blue"];
-var StyledContainer2 = styled6.button`
+var StyledContainer2 = styled18.button`
   padding: 0 1rem;
   height: 2.5rem;
   display: flex;
@@ -887,7 +984,7 @@ var StyledContainer2 = styled6.button`
     opacity: 0.9;
   }
 `;
-var StyledText3 = styled6.span`
+var StyledText3 = styled18.span`
   color: ${(props) => colors.text[props.textVariant]};
   font-size: 0.75rem;
   letter-spacing: 0.05em;
@@ -903,20 +1000,24 @@ var TextButton = ({
   uppercase = true,
   bold = false
 }) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx18(
     StyledContainer2,
     {
       as: asChild ? "div" : "button",
       onClick,
       bgVariant,
-      children: /* @__PURE__ */ jsx(StyledText3, { textVariant, $uppercase: uppercase, $bold: bold, children: text })
+      children: /* @__PURE__ */ jsx18(StyledText3, { textVariant, $uppercase: uppercase, $bold: bold, children: text })
     }
   );
 };
 TextButton.bgVariants = bgVariants;
 TextButton.textVariants = textVariants;
+
+// src/atoms/ToggleButton/ToggleButton.tsx
+import styled19 from "styled-components";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var variants8 = ["primary", "secondary", "subtle"];
-var ToggleContainer = styled6.div`
+var ToggleContainer = styled19.div`
   display: inline-flex;
   background-color: ${(props) => {
   switch (props.variant) {
@@ -934,7 +1035,7 @@ var ToggleContainer = styled6.div`
   padding: 0.25rem;
   gap: 0.25rem;
 `;
-var ToggleOption = styled6.button`
+var ToggleOption = styled19.button`
   padding: 0.5rem 1.5rem;
   border-radius: 9999px;
   border: none;
@@ -985,7 +1086,7 @@ var ToggleButton = ({
   onChange,
   variant = "primary"
 }) => {
-  return /* @__PURE__ */ jsx(ToggleContainer, { variant, children: options.map((option) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx19(ToggleContainer, { variant, children: options.map((option) => /* @__PURE__ */ jsx19(
     ToggleOption,
     {
       $isActive: activeOption === option,
@@ -997,7 +1098,25 @@ var ToggleButton = ({
   )) });
 };
 ToggleButton.variants = variants8;
-
-export { ArrowButton, Button, Description, ExtendedButton, FeatureItem, FormContainer, Header, Input, Label, Loader, Pill, RadioItem, SecondaryInput, SocialButton, TermsCheckbox, Text2 as Text, TextButton, Textarea, ToggleButton };
-//# sourceMappingURL=atoms.js.map
+export {
+  ArrowButton,
+  Button,
+  Description,
+  ExtendedButton,
+  FeatureItem,
+  FormContainer,
+  Header,
+  Input,
+  Label,
+  Loader,
+  Pill,
+  RadioItem,
+  SecondaryInput,
+  SocialButton,
+  TermsCheckbox,
+  Text2 as Text,
+  TextButton,
+  Textarea,
+  ToggleButton
+};
 //# sourceMappingURL=atoms.js.map