@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/tabs/tabs/tabs.js

@@ -0,0 +1,62 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useRef, useMemo } from "react";
+import { getTabsProps, TabsContext } from "./helpers.js";
+import { useControllableState } from "../../../hooks/use-controllable-state.js";
+import { mediaQuery } from "../../../theme/screens.js";
+import "../../../theme/palette.js";
+const Tabs = forwardRef((_props, ref) => {
+  const {
+    defaultActiveIndex,
+    xs,
+    sm,
+    md,
+    lg,
+    activeIndex,
+    children,
+    onTabChange,
+    tabProps,
+    tabIndicatorProps,
+    tabPanelProps,
+    preventActiveTabChange = true,
+    ...rest
+  } = getTabsProps(_props);
+  const [activeTabIndex, setActiveTabIndex] = useControllableState({
+    defaultValue: defaultActiveIndex ?? 0,
+    value: activeIndex
+  });
+  const onTabChangeRef = useRef(onTabChange);
+  onTabChangeRef.current = onTabChange;
+  const contextValue = useMemo(() => {
+    return {
+      activeIndex: activeTabIndex,
+      focusTab: (tabIndex) => {
+        var _a;
+        setActiveTabIndex(tabIndex);
+        (_a = onTabChangeRef.current) == null ? void 0 : _a.call(onTabChangeRef, tabIndex);
+      },
+      tabProps,
+      tabIndicatorProps,
+      tabPanelProps,
+      preventActiveTabChange
+    };
+  }, [activeTabIndex, tabProps, tabIndicatorProps, tabPanelProps, preventActiveTabChange, setActiveTabIndex]);
+  const css = [
+    {
+      display: "flex",
+      flexDirection: "column"
+    },
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md),
+      [mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { css, ...rest, ref, children }) });
+});
+const createStyle = ({ css } = {}) => {
+  return [css];
+};
+export {
+  Tabs
+};

package/dist/lib/tabs/tabs/types.d.ts

@@ -1,8 +1,8 @@
-import { JSX } from "react";
-import { TabProps } from "../tab";
-import { TabIndicatorProps } from "../tab-indicator";
-import { TabPanelProps } from "../tab-panel";
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from "../../../types";
+import { JSX } from 'react';
+import { TabProps } from '../tab';
+import { TabIndicatorProps } from '../tab-indicator';
+import { TabPanelProps } from '../tab-panel';
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
 export type TabsResponsiveProps = PropsWithCSS;
 export interface TabsExtendedProps extends ResponsiveDesign<TabsResponsiveProps> {
     activeIndex?: number;
@@ -14,3 +14,4 @@ export interface TabsExtendedProps extends ResponsiveDesign<TabsResponsiveProps>
     preventActiveTabChange?: boolean;
 }
 export type TabsProps = ShallowMerge<JSX.IntrinsicElements["div"], TabsExtendedProps>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/tabs/tabs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC;AAC/C,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB,CAAC,mBAAmB,CAAC;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,MAAM,SAAS,GAAG,YAAY,CAClC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,iBAAiB,CAClB,CAAC"}

package/dist/lib/text/helpers.d.ts

@@ -3,3 +3,4 @@ import { Screen } from '../../theme';
 import { CSSObject } from '@emotion/react';
 export declare const getTextCssByVariant: (variant?: TextVariant) => Partial<Record<Screen, CSSObject>>;
 export declare const getTextProps: (extended: TextProps) => TextProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/text/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/text/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEjD,OAAO,EAAoB,MAAM,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,eAAO,MAAM,mBAAmB,aAAc,WAAW,KAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CA2H5F,CAAC;AAEF,eAAO,MAAM,YAAY,aAAc,SAAS,cAO/C,CAAC"}

package/dist/lib/text/helpers.js

@@ -1,131 +1,140 @@
-import { getTypographyVar } from '../../theme';
-import { mergeComponentProps } from '../../utils';
-export const getTextCssByVariant = (variant) => {
-    switch (variant) {
-        case 'heading-1':
-            return {
-                xs: {
-                    fontSize: getTypographyVar('4xl').fontSize,
-                    lineHeight: getTypographyVar('4xl').lineHeight,
-                },
-                sm: {
-                    fontSize: getTypographyVar('5xl').fontSize,
-                    lineHeight: getTypographyVar('5xl').lineHeight,
-                },
-                md: {
-                    fontSize: getTypographyVar('6xl').fontSize,
-                    lineHeight: getTypographyVar('6xl').lineHeight,
-                },
-            };
-        case 'heading-2':
-            return {
-                xs: {
-                    fontSize: getTypographyVar('3xl').fontSize,
-                    lineHeight: getTypographyVar('3xl').lineHeight,
-                },
-                sm: {
-                    fontSize: getTypographyVar('4xl').fontSize,
-                    lineHeight: getTypographyVar('4xl').lineHeight,
-                },
-                md: {
-                    fontSize: getTypographyVar('5xl').fontSize,
-                    lineHeight: getTypographyVar('5xl').lineHeight,
-                },
-            };
-        case 'heading-3':
-            return {
-                xs: {
-                    fontSize: getTypographyVar('2xl').fontSize,
-                    lineHeight: getTypographyVar('2xl').lineHeight,
-                },
-                sm: {
-                    fontSize: getTypographyVar('3xl').fontSize,
-                    lineHeight: getTypographyVar('3xl').lineHeight,
-                },
-                md: {
-                    fontSize: getTypographyVar('4xl').fontSize,
-                    lineHeight: getTypographyVar('4xl').lineHeight,
-                },
-            };
-        case 'heading-4':
-            return {
-                xs: {
-                    fontSize: getTypographyVar('xl').fontSize,
-                    lineHeight: getTypographyVar('xl').lineHeight,
-                },
-                sm: {
-                    fontSize: getTypographyVar('2xl').fontSize,
-                    lineHeight: getTypographyVar('2xl').lineHeight,
-                },
-                md: {
-                    fontSize: getTypographyVar('3xl').fontSize,
-                    lineHeight: getTypographyVar('3xl').lineHeight,
-                },
-            };
-        case 'heading-5':
-            return {
-                xs: {
-                    fontSize: getTypographyVar('lg').fontSize,
-                    lineHeight: getTypographyVar('lg').lineHeight,
-                },
-                sm: {
-                    fontSize: getTypographyVar('xl').fontSize,
-                    lineHeight: getTypographyVar('xl').lineHeight,
-                },
-                md: {
-                    fontSize: getTypographyVar('2xl').fontSize,
-                    lineHeight: getTypographyVar('2xl').lineHeight,
-                },
-            };
-        case 'heading-6':
-            return {
-                xs: {
-                    fontSize: getTypographyVar('base').fontSize,
-                    lineHeight: getTypographyVar('base').lineHeight,
-                },
-                sm: {
-                    fontSize: getTypographyVar('lg').fontSize,
-                    lineHeight: getTypographyVar('lg').lineHeight,
-                },
-                md: {
-                    fontSize: getTypographyVar('xl').fontSize,
-                    lineHeight: getTypographyVar('xl').lineHeight,
-                },
-            };
-        case 'large':
-            return {
-                xs: {
-                    fontSize: getTypographyVar('lg').fontSize,
-                    lineHeight: getTypographyVar('lg').lineHeight,
-                },
-            };
-        case 'base':
-            return {
-                xs: {
-                    fontSize: getTypographyVar('base').fontSize,
-                    lineHeight: getTypographyVar('base').lineHeight,
-                },
-            };
-        case 'small':
-            return {
-                xs: {
-                    fontSize: getTypographyVar('sm').fontSize,
-                    lineHeight: getTypographyVar('sm').lineHeight,
-                },
-            };
-        case 'extra-small':
-            return {
-                xs: {
-                    fontSize: getTypographyVar('xs').fontSize,
-                    lineHeight: getTypographyVar('xs').lineHeight,
-                },
-            };
-        default:
-            return {};
-    }
+import "lodash-es";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { mergeComponentProps } from "../../utils/index.js";
+const getTextCssByVariant = (variant) => {
+  switch (variant) {
+    case "heading-1":
+      return {
+        xs: {
+          fontSize: getTypographyVar("4xl").fontSize,
+          lineHeight: getTypographyVar("4xl").lineHeight
+        },
+        sm: {
+          fontSize: getTypographyVar("5xl").fontSize,
+          lineHeight: getTypographyVar("5xl").lineHeight
+        },
+        md: {
+          fontSize: getTypographyVar("6xl").fontSize,
+          lineHeight: getTypographyVar("6xl").lineHeight
+        }
+      };
+    case "heading-2":
+      return {
+        xs: {
+          fontSize: getTypographyVar("3xl").fontSize,
+          lineHeight: getTypographyVar("3xl").lineHeight
+        },
+        sm: {
+          fontSize: getTypographyVar("4xl").fontSize,
+          lineHeight: getTypographyVar("4xl").lineHeight
+        },
+        md: {
+          fontSize: getTypographyVar("5xl").fontSize,
+          lineHeight: getTypographyVar("5xl").lineHeight
+        }
+      };
+    case "heading-3":
+      return {
+        xs: {
+          fontSize: getTypographyVar("2xl").fontSize,
+          lineHeight: getTypographyVar("2xl").lineHeight
+        },
+        sm: {
+          fontSize: getTypographyVar("3xl").fontSize,
+          lineHeight: getTypographyVar("3xl").lineHeight
+        },
+        md: {
+          fontSize: getTypographyVar("4xl").fontSize,
+          lineHeight: getTypographyVar("4xl").lineHeight
+        }
+      };
+    case "heading-4":
+      return {
+        xs: {
+          fontSize: getTypographyVar("xl").fontSize,
+          lineHeight: getTypographyVar("xl").lineHeight
+        },
+        sm: {
+          fontSize: getTypographyVar("2xl").fontSize,
+          lineHeight: getTypographyVar("2xl").lineHeight
+        },
+        md: {
+          fontSize: getTypographyVar("3xl").fontSize,
+          lineHeight: getTypographyVar("3xl").lineHeight
+        }
+      };
+    case "heading-5":
+      return {
+        xs: {
+          fontSize: getTypographyVar("lg").fontSize,
+          lineHeight: getTypographyVar("lg").lineHeight
+        },
+        sm: {
+          fontSize: getTypographyVar("xl").fontSize,
+          lineHeight: getTypographyVar("xl").lineHeight
+        },
+        md: {
+          fontSize: getTypographyVar("2xl").fontSize,
+          lineHeight: getTypographyVar("2xl").lineHeight
+        }
+      };
+    case "heading-6":
+      return {
+        xs: {
+          fontSize: getTypographyVar("base").fontSize,
+          lineHeight: getTypographyVar("base").lineHeight
+        },
+        sm: {
+          fontSize: getTypographyVar("lg").fontSize,
+          lineHeight: getTypographyVar("lg").lineHeight
+        },
+        md: {
+          fontSize: getTypographyVar("xl").fontSize,
+          lineHeight: getTypographyVar("xl").lineHeight
+        }
+      };
+    case "large":
+      return {
+        xs: {
+          fontSize: getTypographyVar("lg").fontSize,
+          lineHeight: getTypographyVar("lg").lineHeight
+        }
+      };
+    case "base":
+      return {
+        xs: {
+          fontSize: getTypographyVar("base").fontSize,
+          lineHeight: getTypographyVar("base").lineHeight
+        }
+      };
+    case "small":
+      return {
+        xs: {
+          fontSize: getTypographyVar("sm").fontSize,
+          lineHeight: getTypographyVar("sm").lineHeight
+        }
+      };
+    case "extra-small":
+      return {
+        xs: {
+          fontSize: getTypographyVar("xs").fontSize,
+          lineHeight: getTypographyVar("xs").lineHeight
+        }
+      };
+    default:
+      return {};
+  }
 };
-export const getTextProps = (extended) => {
-    return mergeComponentProps({
-        element: 'p',
-    }, extended);
+const getTextProps = (extended) => {
+  return mergeComponentProps(
+    {
+      element: "p"
+    },
+    extended
+  );
+};
+export {
+  getTextCssByVariant,
+  getTextProps
 };

package/dist/lib/text/index.d.ts

@@ -1,3 +1,4 @@
 export * from './text';
 export * from './types';
 export * from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/lib/text/text.d.ts

@@ -1,2 +1,3 @@
 import { TextProps } from './types';
 export declare const Text: ({ children, ref, ..._props }: TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=text.d.ts.map

package/dist/lib/text/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/lib/text/text.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAKzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDAuB3D,CAAC"}

package/dist/lib/text/text.js

@@ -0,0 +1,41 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { isNil } from "lodash-es";
+import { getTextProps } from "./helpers.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { Primitive } from "../primitive/primitive.js";
+const Text = ({ children, ref, ..._props }) => {
+  const { xs, sm, md, lg, element = "p", dangerouslySetInnerHTML, ...rest } = getTextProps(_props);
+  const css = [
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md),
+      [mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  return /* @__PURE__ */ jsx(
+    Primitive,
+    {
+      as: element,
+      css,
+      dangerouslySetInnerHTML: isNil(children) ? dangerouslySetInnerHTML : void 0,
+      ...rest,
+      ref,
+      children: isNil(dangerouslySetInnerHTML) ? children : null
+    }
+  );
+};
+const createStyle = ({ css, sizeVariant } = {}) => {
+  return [
+    sizeVariant && {
+      fontSize: getTypographyVar(sizeVariant).fontSize,
+      lineHeight: getTypographyVar(sizeVariant).lineHeight
+    },
+    css
+  ];
+};
+export {
+  Text
+};

package/dist/lib/text/types.d.ts

@@ -11,3 +11,4 @@ type TextExtendedProps = ResponsiveDesign<TextResponsiveProps> & {
 };
 export type TextProps = ShallowMerge<HTMLAttributes<HTMLElement>, TextExtendedProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/text/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,WAAW,GACnB,aAAa,GACb,OAAO,GACP,MAAM,GACN,OAAO,GACP,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAED,KAAK,iBAAiB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,GAAG;IAC/D,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/lib/textarea/helpers.d.ts

@@ -1,2 +1,3 @@
 import { TextareaProps } from './types';
 export declare const getTextareaProps: (extended: TextareaProps) => TextareaProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/textarea/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAUxC,eAAO,MAAM,gBAAgB,aAAc,aAAa,kBAEvD,CAAC"}

package/dist/lib/textarea/helpers.js

@@ -1,9 +1,12 @@
-import { mergeComponentProps } from '../../utils';
+import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-    xs: {
-        size: 'md',
-    },
+  xs: {
+    size: "md"
+  }
 };
-export const getTextareaProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getTextareaProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getTextareaProps
 };

package/dist/lib/textarea/index.d.ts

@@ -1,3 +1,4 @@
 export * from './textarea';
 export * from './types';
 export * from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/lib/textarea/textarea.d.ts

@@ -1,2 +1,3 @@
 import { TextareaProps } from './types';
 export declare const Textarea: ({ ref, ..._props }: TextareaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/lib/textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAA2B,MAAM,SAAS,CAAC;AAQjE,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDA2GzD,CAAC"}

package/dist/lib/textarea/textarea.js

@@ -0,0 +1,122 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import { isString } from "lodash-es";
+import { getTextareaProps } from "./helpers.js";
+import classes from "./textarea.module.scss.js";
+import { getSizeVariantState } from "../../utils/index.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { cn } from "../../utils/stylesheet.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+const Textarea = ({ ref, ..._props }) => {
+  const {
+    xs,
+    sm,
+    md,
+    lg,
+    containerProps,
+    className,
+    helperText,
+    error,
+    onChange: onChangeProp,
+    debounce = 0,
+    mode = "onChange",
+    value,
+    ...rest
+  } = getTextareaProps(_props);
+  const textareaRef = useRef(null);
+  const [typingValue, setTypingValue] = useState();
+  const timeoutFn = useRef(null);
+  const beforeChangeValue = useRef("");
+  const mergedRefs = useMergeRefs([ref, textareaRef]);
+  const onChange = (e, force = false) => {
+    if (timeoutFn.current) {
+      clearTimeout(timeoutFn.current);
+    }
+    if (force) {
+      onChangeProp == null ? void 0 : onChangeProp(e);
+      return;
+    }
+    if (mode === "onBlur") {
+      if (isString(value)) {
+        setTypingValue(e.target.value);
+      }
+      return;
+    }
+    if (debounce > 0) {
+      if (isString(value)) {
+        setTypingValue(e.target.value);
+      }
+      timeoutFn.current = setTimeout(() => {
+        onChangeProp == null ? void 0 : onChangeProp(e);
+      }, debounce);
+      return;
+    }
+    onChangeProp == null ? void 0 : onChangeProp(e);
+  };
+  const onFocus = (e) => {
+    var _a;
+    beforeChangeValue.current = e.target.value;
+    (_a = rest.onFocus) == null ? void 0 : _a.call(rest, e);
+  };
+  const onBlur = (e) => {
+    var _a;
+    if (beforeChangeValue.current !== e.target.value) {
+      if (mode === "onBlur" || debounce > 0) {
+        onChange(e, true);
+      }
+    }
+    (_a = rest.onBlur) == null ? void 0 : _a.call(rest, e);
+    setTimeout(() => {
+      setTypingValue(void 0);
+    }, debounce);
+  };
+  const css = [
+    {
+      paddingTop: 8,
+      paddingBottom: 8
+    },
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md),
+      [mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { ...containerProps, className: cn(classes.textarea__container, containerProps == null ? void 0 : containerProps.className), children: [
+    /* @__PURE__ */ jsx("div", { css, className: classes.textarea__main, children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        "aria-invalid": error,
+        className: cn(
+          classes.textarea__control,
+          className
+        ),
+        ...rest,
+        value: typingValue ?? value,
+        ref: mergedRefs,
+        onChange,
+        onBlur,
+        onFocus
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+  ] });
+};
+const createStyle = ({ css, size } = {}) => {
+  const { inputPaddingX, textVariant } = getSizeVariantState(size);
+  return [
+    {
+      paddingLeft: inputPaddingX,
+      paddingRight: inputPaddingX,
+      fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
+      lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
+    },
+    css
+  ];
+};
+export {
+  Textarea
+};

package/dist/lib/textarea/textarea.module.scss.js

@@ -0,0 +1,14 @@
+const textarea__container = "_textarea__container_bs49u_1";
+const textarea__main = "_textarea__main_bs49u_6";
+const textarea__control = "_textarea__control_bs49u_34";
+const classes = {
+  textarea__container,
+  textarea__main,
+  textarea__control
+};
+export {
+  classes as default,
+  textarea__container,
+  textarea__control,
+  textarea__main
+};

package/dist/lib/textarea/types.d.ts

@@ -16,3 +16,4 @@ interface TextareaExtendedProps extends ResponsiveDesign<TextareaResponsiveProps
 }
 export type TextareaProps = ShallowMerge<JSX.IntrinsicElements['textarea'], TextareaExtendedProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/textarea/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY;IAC3D,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,UAAU,qBAAsB,SAAQ,gBAAgB,CAAC,uBAAuB,CAAC;IAC/E,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC,CAAC"}

package/dist/lib/time-picker/index.d.ts

@@ -1,2 +1,3 @@
 export * from './time-picker';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/time-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/dist/lib/time-picker/time-picker.d.ts

@@ -1,2 +1,3 @@
 import { TimePickerProps } from './types';
 export declare const TimePicker: ({ placeholder, onChange, defaultValue, value, clearable, onClear, containerProps, placement, open, onOpenChange, disabled, ...rest }: TimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=time-picker.d.ts.map