@ingamigo/ui 1.0.8 → 1.2.0

package/dist/components/button/button.d.ts

@@ -1,8 +1,8 @@
 import type { ButtonHTMLAttributes } from "react";
-import "./button.style.css";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary";
-    size?: "small" | "medium" | "large";
+    variant?: "primary" | "secondary" | "ghost";
+    size?: "small" | "medium" | "large" | "icon";
 }
-declare const Button: ({ variant, size, className, children, ...props }: ButtonProps) => import("react").JSX.Element;
+declare const Button: ({ variant, size, children, ...props }: ButtonProps) => import("react").JSX.Element;
 export default Button;
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIlD,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC5C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;CAC9C;AAED,QAAA,MAAM,MAAM,GAAI,uCAKb,WAAW,gCAUb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/button/button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledButton } from "./button.styles";
+const Button = ({ variant = "primary", size = "medium", children, ...props }) => {
+    return (_jsx(StyledButton, { variant: variant, size: size, ...props, children: children }));
+};
+export default Button;
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQ/C,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,GAAG,KAAK,EACI,EAAE,EAAE;IAChB,OAAO,CACL,KAAC,YAAY,IACX,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,KACN,KAAK,YAER,QAAQ,GACI,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/button/button.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const StyledButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    variant: "primary" | "secondary" | "ghost";
+    size: "small" | "medium" | "large" | "icon";
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+//# sourceMappingURL=button.styles.d.ts.map

package/dist/components/button/button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;aACd,SAAS,GAAG,WAAW,GAAG,OAAO;UACpC,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM;qHAwH5C,CAAC"}

package/dist/components/button/button.styles.js

@@ -0,0 +1,117 @@
+import styled from "@emotion/styled";
+export const StyledButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing[2]};
+
+  border: 1px solid transparent;
+  border-radius: ${({ theme }) => theme.radiusSemantic.control};
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-weight: ${({ theme }) => theme.semanticTypography.fontWeight.label};
+
+  line-height: 1;
+  white-space: nowrap;
+
+  cursor: pointer;
+  user-select: none;
+
+  transition:
+    background-color ${({ theme }) => theme.motionSemantic.interaction}
+      ${({ theme }) => theme.motionSemantic.transition},
+    color ${({ theme }) => theme.motionSemantic.interaction}
+      ${({ theme }) => theme.motionSemantic.transition},
+    border-color ${({ theme }) => theme.motionSemantic.interaction}
+      ${({ theme }) => theme.motionSemantic.transition},
+    box-shadow ${({ theme }) => theme.motionSemantic.interaction}
+      ${({ theme }) => theme.motionSemantic.transition};
+
+  ${({ theme, size }) => {
+    switch (size) {
+        case "small":
+            return `
+          min-height: 32px;
+          padding: 0 ${theme.spacing[3]};
+          font-size: ${theme.semanticTypography.fontSize.bodySm};
+        `;
+        case "large":
+            return `
+          min-height: 44px;
+          padding: 0 ${theme.spacing[5]};
+          font-size: ${theme.semanticTypography.fontSize.bodyLg};
+        `;
+        case "icon":
+            return `
+            min-width: 36px;
+            min-height: 36px;
+            padding: ${theme.spacing[2]};
+            aspect-ratio: 1 / 1;
+          `;
+        case "medium":
+        default:
+            return `
+          min-height: 36px;
+          padding: 0 ${theme.spacing[4]};
+          font-size: ${theme.semanticTypography.fontSize.body};
+        `;
+    }
+}}
+
+  ${({ theme, variant }) => {
+    switch (variant) {
+        case "primary":
+            return `
+          background: ${theme.action.primary};
+          color: ${theme.text.inverse};
+          border-color: ${theme.action.primary};
+
+          &:hover:not(:disabled) {
+            background: ${theme.action.primaryHover};
+            border-color: ${theme.action.primaryHover};
+          }
+        `;
+        case "secondary":
+            return `
+          background: ${theme.surface.secondary};
+          color: ${theme.text.primary};
+          border-color: ${theme.border.default};
+
+          &:hover:not(:disabled) {
+            background: ${theme.surface.tertiary};
+            border-color: ${theme.border.strong};
+          }
+        `;
+        case "ghost":
+            return `
+          background: transparent;
+          color: ${theme.text.secondary};
+          border-color: transparent;
+
+          &:hover:not(:disabled) {
+            background: ${theme.surface.tertiary};
+            color: ${theme.text.primary};
+          }
+
+          &:active:not(:disabled) {
+            background: ${theme.surface.tertiary};
+          }
+        `;
+    }
+}}
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.border.focus};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[aria-busy="true"] {
+    cursor: wait;
+  }
+`;
+//# sourceMappingURL=button.styles.js.map

package/dist/components/button/button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAGvC;;;;SAIO,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;;mBAGrB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO;;iBAE7C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU;iBAC1C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK;;;;;;;;;uBASlD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW;QAC9D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;YAC1C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW;QACnD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;mBACnC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW;QAC1D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;iBACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW;QACxD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;;IAElD,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACpB,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,OAAO;;uBAEQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;uBAChB,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,MAAM;SACtD,CAAC;QAEJ,KAAK,OAAO;YACV,OAAO;;uBAEQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;uBAChB,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,MAAM;SACtD,CAAC;QAEJ,KAAK,MAAM;YACT,OAAO;;;uBAGQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;WAE5B,CAAC;QAEN,KAAK,QAAQ,CAAC;QACd;YACE,OAAO;;uBAEQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;uBAChB,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,IAAI;SACpD,CAAC;IACN,CAAC;AACH,CAAC;;IAEC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACvB,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,SAAS;YACZ,OAAO;wBACS,KAAK,CAAC,MAAM,CAAC,OAAO;mBACzB,KAAK,CAAC,IAAI,CAAC,OAAO;0BACX,KAAK,CAAC,MAAM,CAAC,OAAO;;;0BAGpB,KAAK,CAAC,MAAM,CAAC,YAAY;4BACvB,KAAK,CAAC,MAAM,CAAC,YAAY;;SAE5C,CAAC;QAEJ,KAAK,WAAW;YACd,OAAO;wBACS,KAAK,CAAC,OAAO,CAAC,SAAS;mBAC5B,KAAK,CAAC,IAAI,CAAC,OAAO;0BACX,KAAK,CAAC,MAAM,CAAC,OAAO;;;0BAGpB,KAAK,CAAC,OAAO,CAAC,QAAQ;4BACpB,KAAK,CAAC,MAAM,CAAC,MAAM;;SAEtC,CAAC;QAEJ,KAAK,OAAO;YACV,OAAO;;mBAEI,KAAK,CAAC,IAAI,CAAC,SAAS;;;;0BAIb,KAAK,CAAC,OAAO,CAAC,QAAQ;qBAC3B,KAAK,CAAC,IAAI,CAAC,OAAO;;;;0BAIb,KAAK,CAAC,OAAO,CAAC,QAAQ;;SAEvC,CAAC;IACN,CAAC;AACH,CAAC;;;yBAGsB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;CAYzD,CAAC"}

package/dist/components/input/input.d.ts

@@ -1,7 +1,7 @@
 import type { InputHTMLAttributes } from "react";
-import "./input.style.css";
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     inputSize?: "small" | "medium" | "large";
 }
-declare const Input: ({ inputSize, className, ...props }: InputProps) => import("react").JSX.Element;
+declare const Input: ({ inputSize, ...props }: InputProps) => import("react").JSX.Element;
 export default Input;
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,UACf,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAC7C,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC1C;AAED,QAAA,MAAM,KAAK,GAAI,yBAGZ,UAAU,gCAOZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/input/input.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledInput } from "./input.styles";
+const Input = ({ inputSize = "medium", ...props }) => {
+    return (_jsx(StyledInput, { inputSize: inputSize, ...props }));
+};
+export default Input;
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,KAAK,GAAG,CAAC,EACb,SAAS,GAAG,QAAQ,EACpB,GAAG,KAAK,EACG,EAAE,EAAE;IACf,OAAO,CACL,KAAC,WAAW,IACV,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/input/input.styles.d.ts

@@ -0,0 +1,9 @@
+interface StyledInputProps {
+    inputSize: "small" | "medium" | "large";
+}
+export declare const StyledInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & StyledInputProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export {};
+//# sourceMappingURL=input.styles.d.ts.map

package/dist/components/input/input.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.styles.ts"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACzC;AAED,eAAO,MAAM,WAAW;;;qIAmFvB,CAAC"}

package/dist/components/input/input.styles.js

@@ -0,0 +1,83 @@
+import styled from "@emotion/styled";
+export const StyledInput = styled.input `
+  display: block;
+  width: 100%;
+
+  border: 1px solid ${({ theme }) => theme.border.default};
+  border-radius: ${({ theme }) => theme.radius.md};
+
+  background: ${({ theme }) => theme.surface.primary};
+  color: ${({ theme }) => theme.text.primary};
+
+  font-family:
+    Inter,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-weight: ${({ theme }) => theme.typography.fontWeight.regular};
+  line-height: 1;
+
+  outline: none;
+
+  transition:
+    background-color ${({ theme }) => theme.motion.duration.normal}
+      ${({ theme }) => theme.motion.ease.standard},
+    border-color ${({ theme }) => theme.motion.duration.normal}
+      ${({ theme }) => theme.motion.ease.standard},
+    box-shadow ${({ theme }) => theme.motion.duration.normal}
+      ${({ theme }) => theme.motion.ease.standard},
+    color ${({ theme }) => theme.motion.duration.normal}
+      ${({ theme }) => theme.motion.ease.standard};
+
+  &::placeholder {
+    color: ${({ theme }) => theme.text.tertiary};
+  }
+
+  &:hover:not(:disabled) {
+    border-color: ${({ theme }) => theme.border.strong};
+  }
+
+  &:focus {
+    border-color: ${({ theme }) => theme.border.focus};
+
+    box-shadow: 0 0 0 3px
+      color-mix(
+        in srgb,
+        ${({ theme }) => theme.border.focus} 18%,
+        transparent
+      );
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background: ${({ theme }) => theme.surface.secondary};
+  }
+
+  ${({ theme, inputSize }) => inputSize === "small" &&
+    `
+      min-height: 32px;
+      padding: 0 ${theme.spacing[3]};
+      font-size: ${theme.typography.fontSize.sm};
+    `}
+
+  ${({ theme, inputSize }) => inputSize === "medium" &&
+    `
+      min-height: 40px;
+      padding: 0 ${theme.spacing[4]};
+      font-size: ${theme.typography.fontSize.md};
+    `}
+
+  ${({ theme, inputSize }) => inputSize === "large" &&
+    `
+      min-height: 48px;
+      padding: 0 ${theme.spacing[4]};
+      font-size: ${theme.typography.fontSize.lg};
+    `}
+`;
+//# sourceMappingURL=input.styles.js.map

package/dist/components/input/input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.js","sourceRoot":"","sources":["../../../src/components/input/input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAkB;;;;sBAInC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;mBACtC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;;gBAEjC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO;WACzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;;iBAY3B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,OAAO;;;;;;uBAM5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM;QAC1D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;mBAC9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM;QACtD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;iBAChC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM;QACpD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;YACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM;QAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;;;aAGpC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ;;;;oBAI3B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;oBAIlC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;UAK3C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;kBAQzB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;;;IAGpD,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CACzB,SAAS,KAAK,OAAO;IACrB;;mBAEe,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;mBAChB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;KAC1C;;IAED,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CACzB,SAAS,KAAK,QAAQ;IACtB;;mBAEe,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;mBAChB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;KAC1C;;IAED,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CACzB,SAAS,KAAK,OAAO;IACrB;;mBAEe,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;mBAChB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;KAC1C;CACJ,CAAC"}

package/dist/components/segmented-control/segmented-control.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export interface SegmentedControlOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps<T extends string> {
+    options: SegmentedControlOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    size?: "small" | "medium" | "large";
+    disabled?: boolean;
+}
+declare const SegmentedControl: <T extends string>({ options, value, onChange, size, disabled, }: SegmentedControlProps<T>) => import("react").JSX.Element;
+export default SegmentedControl;
+//# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/segmented-control/segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAOtD,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM;IACtD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM;IACrD,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,EAAE,+CAMzC,qBAAqB,CAAC,CAAC,CAAC,gCA2F1B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/segmented-control/segmented-control.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { StyledSegment, StyledSegmentedControl, } from "./segmented-control.styles";
+const SegmentedControl = ({ options, value, onChange, size = "medium", disabled = false, }) => {
+    const refs = useRef([]);
+    const enabledOptions = options.filter((option) => !option.disabled);
+    const handleKeyDown = (event, currentIndex) => {
+        if (disabled || currentIndex === -1) {
+            return;
+        }
+        let nextIndex;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                nextIndex = (currentIndex + 1) % enabledOptions.length;
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                nextIndex =
+                    (currentIndex - 1 + enabledOptions.length) %
+                        enabledOptions.length;
+                break;
+            case "Home":
+                nextIndex = 0;
+                break;
+            case "End":
+                nextIndex = enabledOptions.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const nextOption = enabledOptions[nextIndex];
+        const originalIndex = options.findIndex((option) => option.value === nextOption.value);
+        refs.current[originalIndex]?.focus();
+        onChange(nextOption.value);
+    };
+    return (_jsx(StyledSegmentedControl, { role: "radiogroup", "aria-disabled": disabled, children: options.map((option, index) => {
+            const checked = option.value === value;
+            const optionDisabled = disabled || option.disabled;
+            const enabledIndex = enabledOptions.findIndex((item) => item.value === option.value);
+            return (_jsx(StyledSegment, { ref: (element) => {
+                    refs.current[index] = element;
+                }, size: size, type: "button", role: "radio", "aria-checked": checked, tabIndex: checked && !optionDisabled ? 0 : -1, disabled: optionDisabled, onClick: () => onChange(option.value), onKeyDown: (event) => {
+                    handleKeyDown(event, enabledIndex);
+                }, children: option.label }, option.value));
+        }) }));
+};
+export default SegmentedControl;
+//# sourceMappingURL=segmented-control.js.map

package/dist/components/segmented-control/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"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"}

package/dist/components/segmented-control/segmented-control.stories .d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: <T extends string>({ options, value, onChange, size, disabled, }: import("./segmented-control").SegmentedControlProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        value: {
+            control: false;
+        };
+        onChange: {
+            action: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const WithDisabledOption: Story;
+export declare const Disabled: Story;
+export declare const ThreeOptions: Story;
+//# sourceMappingURL=segmented-control.stories%20.d.ts.map

package/dist/components/segmented-control/segmented-control.stories .d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.stories .d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.stories .tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAc+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AA4BtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAwBF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAkBtB,CAAC;AA2BF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC"}

package/dist/components/segmented-control/segmented-control.stories .js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import SegmentedControl from "./segmented-control";
+const meta = {
+    title: "Components/SegmentedControl",
+    component: SegmentedControl,
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        value: {
+            control: false,
+        },
+        onChange: {
+            action: "changed",
+        },
+    },
+};
+export default meta;
+function CustomerExecutorControl({ size, }) {
+    const [value, setValue] = useState("customer");
+    return (_jsx(SegmentedControl, { size: size, options: [
+            {
+                value: "customer",
+                label: "Заказчик",
+            },
+            {
+                value: "executor",
+                label: "Исполнитель",
+            },
+        ], value: value, onChange: setValue }));
+}
+export const Default = {
+    render: () => _jsx(CustomerExecutorControl, {}),
+};
+export const Small = {
+    render: () => _jsx(CustomerExecutorControl, { size: "small" }),
+};
+export const Large = {
+    render: () => _jsx(CustomerExecutorControl, { size: "large" }),
+};
+function DisabledOptionControl() {
+    const [value, setValue] = useState("customer");
+    return (_jsx(SegmentedControl, { options: [
+            {
+                value: "customer",
+                label: "Заказчик",
+            },
+            {
+                value: "executor",
+                label: "Исполнитель",
+                disabled: true,
+            },
+        ], value: value, onChange: setValue }));
+}
+export const WithDisabledOption = {
+    render: () => _jsx(DisabledOptionControl, {}),
+};
+export const Disabled = {
+    render: () => (_jsx(SegmentedControl, { options: [
+            {
+                value: "customer",
+                label: "Заказчик",
+            },
+            {
+                value: "executor",
+                label: "Исполнитель",
+            },
+        ], value: "customer", onChange: () => { }, disabled: true })),
+};
+function ThreeOptionsControl() {
+    const [value, setValue] = useState("all");
+    return (_jsx(SegmentedControl, { options: [
+            {
+                value: "all",
+                label: "Все",
+            },
+            {
+                value: "active",
+                label: "Активные",
+            },
+            {
+                value: "completed",
+                label: "Завершённые",
+            },
+        ], value: value, onChange: setValue }));
+}
+export const ThreeOptions = {
+    render: () => _jsx(ThreeOptionsControl, {}),
+};
+//# sourceMappingURL=segmented-control.stories%20.js.map

package/dist/components/segmented-control/segmented-control.stories .js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.stories .js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.stories .tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AAEnD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,gBAAgB;IAC3B,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,KAAK;SACf;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,SAAS;SAClB;KACF;CACsC,CAAC;AAE1C,eAAe,IAAI,CAAC;AAIpB,SAAS,uBAAuB,CAAC,EAC/B,IAAI,GAGL;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE/C,OAAO,CACL,KAAC,gBAAgB,IACf,IAAI,EAAE,IAAI,EACV,OAAO,EAAE;YACP;gBACE,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,UAAU;aAClB;YACD;gBACE,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,aAAa;aACrB;SACF,EACD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,uBAAuB,KAAG;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,uBAAuB,IAAC,IAAI,EAAC,OAAO,GAAG;CACvD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,uBAAuB,IAAC,IAAI,EAAC,OAAO,GAAG;CACvD,CAAC;AAEF,SAAS,qBAAqB;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE/C,OAAO,CACL,KAAC,gBAAgB,IACf,OAAO,EAAE;YACP;gBACE,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,UAAU;aAClB;YACD;gBACE,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,aAAa;gBACpB,QAAQ,EAAE,IAAI;aACf;SACF,EACD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,qBAAqB,KAAG;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,KAAC,gBAAgB,IACf,OAAO,EAAE;YACP;gBACE,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,UAAU;aAClB;YACD;gBACE,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,aAAa;aACrB;SACF,EACD,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAClB,QAAQ,SACR,CACH;CACF,CAAC;AAEF,SAAS,mBAAmB;IAC1B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,gBAAgB,IACf,OAAO,EAAE;YACP;gBACE,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,KAAK;aACb;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,UAAU;aAClB;YACD;gBACE,KAAK,EAAE,WAAW;gBAClB,KAAK,EAAE,aAAa;aACrB;SACF,EACD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,mBAAmB,KAAG;CACtC,CAAC"}

package/dist/components/segmented-control/segmented-control.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const StyledSegmentedControl: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSegment: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size: "small" | "medium" | "large";
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+//# sourceMappingURL=segmented-control.styles.d.ts.map

package/dist/components/segmented-control/segmented-control.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;;yGAUlC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;UAClB,OAAO,GAAG,QAAQ,GAAG,OAAO;qHA4EnC,CAAC"}

package/dist/components/segmented-control/segmented-control.styles.js

@@ -0,0 +1,83 @@
+import styled from "@emotion/styled";
+export const StyledSegmentedControl = styled.div `
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+
+  padding: ${({ theme }) => theme.spacing[1]};
+
+  background: ${({ theme }) => theme.surface.secondary};
+  border: 1px solid ${({ theme }) => theme.border.default};
+  border-radius: ${({ theme }) => theme.radius.full};
+`;
+export const StyledSegment = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  border: 0;
+  border-radius: ${({ theme }) => theme.radius.full};
+
+  background: transparent;
+  color: ${({ theme }) => theme.text.secondary};
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-weight: ${({ theme }) => theme.semanticTypography.fontWeight.label};
+  line-height: 1;
+
+  cursor: pointer;
+  user-select: none;
+
+  transition:
+    background-color ${({ theme }) => theme.motionSemantic.interaction}
+      ${({ theme }) => theme.motionSemantic.transition},
+    color ${({ theme }) => theme.motionSemantic.interaction}
+      ${({ theme }) => theme.motionSemantic.transition},
+    box-shadow ${({ theme }) => theme.motionSemantic.interaction}
+      ${({ theme }) => theme.motionSemantic.transition};
+
+  ${({ theme, size }) => {
+    switch (size) {
+        case "small":
+            return `
+          min-height: 32px;
+          padding: 0 ${theme.spacing[3]};
+          font-size: ${theme.semanticTypography.fontSize.bodySm};
+        `;
+        case "large":
+            return `
+          min-height: 44px;
+          padding: 0 ${theme.spacing[5]};
+          font-size: ${theme.semanticTypography.fontSize.bodyLg};
+        `;
+        case "medium":
+        default:
+            return `
+          min-height: 36px;
+          padding: 0 ${theme.spacing[4]};
+          font-size: ${theme.semanticTypography.fontSize.body};
+        `;
+    }
+}}
+
+  &:hover:not(:disabled) {
+    color: ${({ theme }) => theme.text.primary};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.border.focus};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[aria-checked="true"] {
+    background: ${({ theme }) => theme.surface.primary};
+    color: ${({ theme }) => theme.text.primary};
+    box-shadow: ${({ theme }) => theme.elevation.surface};
+  }
+`;
+//# sourceMappingURL=segmented-control.styles.js.map

package/dist/components/segmented-control/segmented-control.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.styles.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;aAKnC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;gBAE5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;sBAChC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;mBACtC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAExC;;;;;;mBAMiB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;;WAGxC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;;iBAE7B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU;iBAC1C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC3B,KAAK,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK;;;;;;;uBAOtB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC/B,KAAK,CAAC,cAAc,CAAC,WAAW;QAC9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;YAC1C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACpB,KAAK,CAAC,cAAc,CAAC,WAAW;QAC9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;iBACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACzB,KAAK,CAAC,cAAc,CAAC,WAAW;QAC9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;;IAElD,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACpB,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,OAAO;;uBAEQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;uBAChB,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,MAAM;SACtD,CAAC;QAEJ,KAAK,OAAO;YACV,OAAO;;uBAEQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;uBAChB,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,MAAM;SACtD,CAAC;QAEJ,KAAK,QAAQ,CAAC;QACd;YACE,OAAO;;uBAEQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;uBAChB,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,IAAI;SACpD,CAAC;IACN,CAAC;AACH,CAAC;;;aAGU,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;yBAIrB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;kBAUxC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO;aACzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;kBAC5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO;;CAEvD,CAAC"}

package/dist/components/typography/typography.d.ts

@@ -1,9 +1,9 @@
 import type { HTMLAttributes, ReactNode } from "react";
-import "./typography.style.css";
 export type TypographyVariant = "heading-1" | "heading-2" | "heading-3" | "body-lg" | "body" | "body-sm" | "label";
 export interface TypographyProps extends HTMLAttributes<HTMLElement> {
     variant?: TypographyVariant;
     children: ReactNode;
 }
-declare const Typography: ({ variant, className, children, ...props }: TypographyProps) => import("react").JSX.Element;
+declare const Typography: ({ variant, children, ...props }: TypographyProps) => import("react").JSX.Element;
 export default Typography;
+//# sourceMappingURL=typography.d.ts.map

package/dist/components/typography/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AAEZ,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAClE,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAeD,QAAA,MAAM,UAAU,GAAI,iCAIjB,eAAe,gCAYjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/typography/typography.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledTypography } from "./typography.styles";
+const variantElements = {
+    "heading-1": "h1",
+    "heading-2": "h2",
+    "heading-3": "h3",
+    "body-lg": "p",
+    body: "p",
+    "body-sm": "p",
+    label: "span",
+};
+const Typography = ({ variant = "body", children, ...props }) => {
+    const Component = variantElements[variant];
+    return (_jsx(StyledTypography, { as: Component, "data-variant": variant, ...props, children: children }));
+};
+export default Typography;
+//# sourceMappingURL=typography.js.map