@usefragments/ui 1.0.2 → 1.2.0

package/dist/components/Header/index.cjs

@@ -65,16 +65,33 @@ function HeaderRoot({
   children,
   height = "56px",
   position = "static",
+  elevatedOnScroll = false,
+  navAlign = "start",
+  container = "full",
   icons,
   className,
   style: styleProp,
   ...htmlProps
 }) {
   const [mobileOpen, setMobileOpen] = React__namespace.useState(false);
+  const [scrolled, setScrolled] = React__namespace.useState(false);
+  const shouldElevateOnScroll = Boolean(elevatedOnScroll);
+  const scrollThreshold = typeof elevatedOnScroll === "object" ? elevatedOnScroll.threshold ?? 16 : 16;
+  React__namespace.useEffect(() => {
+    if (!shouldElevateOnScroll) return;
+    const updateScrolled = () => setScrolled(window.scrollY > scrollThreshold);
+    updateScrolled();
+    window.addEventListener("scroll", updateScrolled, { passive: true });
+    return () => window.removeEventListener("scroll", updateScrolled);
+  }, [scrollThreshold, shouldElevateOnScroll]);
   const classes = [
     Header_module.default.header,
     position === "fixed" && Header_module.default.fixed,
     position === "sticky" && Header_module.default.sticky,
+    shouldElevateOnScroll && Header_module.default.elevatedOnScroll,
+    shouldElevateOnScroll && scrolled && Header_module.default.scrolled,
+    navAlign === "center" && Header_module.default.navCentered,
+    container === "page" && Header_module.default.containerPage,
     className
   ].filter(Boolean).join(" ");
   const style = {
@@ -85,10 +102,36 @@ function HeaderRoot({
     () => ({ mobileOpen, setMobileOpen, icons }),
     [mobileOpen, icons]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(HeaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(HeaderIconContext.Provider, { value: icons, children: /* @__PURE__ */ jsxRuntime.jsx("header", { ...htmlProps, className: classes, style, "data-position": position, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Header_module.default.container, children }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(HeaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(HeaderIconContext.Provider, { value: icons, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      ...htmlProps,
+      className: classes,
+      style,
+      "data-position": position,
+      "data-scrolled": shouldElevateOnScroll ? scrolled : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Header_module.default.container, children })
+    }
+  ) }) });
 }
-function HeaderBrand({ children, href, className, ...htmlProps }) {
+function HeaderBrand({
+  children,
+  href,
+  asChild = false,
+  className,
+  ...htmlProps
+}) {
   const classes = [Header_module.default.brand, className].filter(Boolean).join(" ");
+  if (asChild && React__namespace.isValidElement(children)) {
+    const childProps = children.props;
+    const { onClick, ...restHtmlProps } = htmlProps;
+    return React__namespace.cloneElement(children, {
+      ...restHtmlProps,
+      ...href ? { href } : {},
+      className: [classes, childProps.className].filter(Boolean).join(" "),
+      onClick: onClick ? composeEventHandlers(childProps.onClick, onClick) : childProps.onClick
+    });
+  }
   if (href) {
     return /* @__PURE__ */ jsxRuntime.jsx("a", { ...htmlProps, href, className: classes, children });
   }
@@ -340,6 +383,14 @@ function HeaderMobileNavLink({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("button", { ...htmlProps, type: "button", className: classes, onClick: handleClick, children });
 }
+function HeaderMobileNavActions({
+  children,
+  className,
+  ...htmlProps
+}) {
+  const classes = [Header_module.default.mobileNavActions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
+}
 function HeaderSkipLink({
   children = "Skip to main content",
   href = "#main-content",
@@ -360,12 +411,14 @@ const Header = Object.assign(HeaderRoot, {
   Spacer: HeaderSpacer,
   SkipLink: HeaderSkipLink,
   MobileNav: HeaderMobileNav,
-  MobileNavLink: HeaderMobileNavLink
+  MobileNavLink: HeaderMobileNavLink,
+  MobileNavActions: HeaderMobileNavActions
 });
 exports.Header = Header;
 exports.HeaderActions = HeaderActions;
 exports.HeaderBrand = HeaderBrand;
 exports.HeaderMobileNav = HeaderMobileNav;
+exports.HeaderMobileNavActions = HeaderMobileNavActions;
 exports.HeaderMobileNavLink = HeaderMobileNavLink;
 exports.HeaderNav = HeaderNav;
 exports.HeaderNavItem = HeaderNavItem;

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

@@ -6,12 +6,24 @@ export interface HeaderIconRenderState {
 }
 export type HeaderIconSlot = React.ReactNode | ((state: HeaderIconRenderState) => React.ReactNode);
 export type HeaderIcons = Partial<Record<HeaderIconRenderState['slot'], HeaderIconSlot>>;
+export type HeaderNavAlign = 'start' | 'center';
+export type HeaderContainer = 'full' | 'page';
+export interface HeaderElevatedOnScrollOptions {
+    /** Scroll offset before the elevated surface is applied */
+    threshold?: number;
+}
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
     /** Header height (default: '56px') */
     height?: string;
     /** Position behavior */
     position?: 'static' | 'fixed' | 'sticky';
+    /** Apply the elevated header surface after scroll */
+    elevatedOnScroll?: boolean | HeaderElevatedOnScrollOptions;
+    /** Navigation alignment inside the header */
+    navAlign?: HeaderNavAlign;
+    /** Header content width */
+    container?: HeaderContainer;
     /** Optional icon overrides for internal header controls (mobile trigger + nav menu chevron) */
     icons?: HeaderIcons;
 }
@@ -19,6 +31,8 @@ export interface HeaderBrandProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
     /** Link destination */
     href?: string;
+    /** Render as child element (polymorphic) */
+    asChild?: boolean;
 }
 export interface HeaderNavProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
@@ -72,14 +86,17 @@ export interface HeaderMobileNavProps {
     /** Optional className for the drawer panel */
     className?: string;
 }
+export interface HeaderMobileNavActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
 /**
  * Header - Root header element
  */
-declare function HeaderRoot({ children, height, position, icons, className, style: styleProp, ...htmlProps }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function HeaderRoot({ children, height, position, elevatedOnScroll, navAlign, container, icons, className, style: styleProp, ...htmlProps }: HeaderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Header.Brand - Logo/brand slot
  */
-declare function HeaderBrand({ children, href, className, ...htmlProps }: HeaderBrandProps): import("react/jsx-runtime").JSX.Element;
+declare function HeaderBrand({ children, href, asChild, className, ...htmlProps }: HeaderBrandProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Header.Nav - Navigation container (hidden on mobile)
  */
@@ -129,6 +146,10 @@ declare function HeaderMobileNav({ children, className }: HeaderMobileNavProps):
  * Header.MobileNavLink - A link inside the mobile drawer
  */
 declare function HeaderMobileNavLink({ children, href, active, asChild, onClick, className, ...htmlProps }: HeaderNavItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header.MobileNavActions - Action row inside the mobile drawer
+ */
+declare function HeaderMobileNavActions({ children, className, ...htmlProps }: HeaderMobileNavActionsProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Header.SkipLink - Skip to main content link (accessibility)
  */
@@ -150,6 +171,7 @@ export declare const Header: typeof HeaderRoot & {
     SkipLink: typeof HeaderSkipLink;
     MobileNav: typeof HeaderMobileNav;
     MobileNavLink: typeof HeaderMobileNavLink;
+    MobileNavActions: typeof HeaderMobileNavActions;
 };
-export { HeaderRoot, HeaderBrand, HeaderNav, HeaderNavItem, HeaderNavMenu, HeaderNavMenuItem, HeaderSearch, HeaderActions, HeaderTrigger, HeaderSpacer, HeaderSkipLink, HeaderMobileNav, HeaderMobileNavLink, };
+export { HeaderRoot, HeaderBrand, HeaderNav, HeaderNavItem, HeaderNavMenu, HeaderNavMenuItem, HeaderSearch, HeaderActions, HeaderTrigger, HeaderSpacer, HeaderSkipLink, HeaderMobileNav, HeaderMobileNavLink, HeaderMobileNavActions, };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Header/index.js

@@ -46,16 +46,33 @@ function HeaderRoot({
   children,
   height = "56px",
   position = "static",
+  elevatedOnScroll = false,
+  navAlign = "start",
+  container = "full",
   icons,
   className,
   style: styleProp,
   ...htmlProps
 }) {
   const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [scrolled, setScrolled] = React.useState(false);
+  const shouldElevateOnScroll = Boolean(elevatedOnScroll);
+  const scrollThreshold = typeof elevatedOnScroll === "object" ? elevatedOnScroll.threshold ?? 16 : 16;
+  React.useEffect(() => {
+    if (!shouldElevateOnScroll) return;
+    const updateScrolled = () => setScrolled(window.scrollY > scrollThreshold);
+    updateScrolled();
+    window.addEventListener("scroll", updateScrolled, { passive: true });
+    return () => window.removeEventListener("scroll", updateScrolled);
+  }, [scrollThreshold, shouldElevateOnScroll]);
   const classes = [
     styles.header,
     position === "fixed" && styles.fixed,
     position === "sticky" && styles.sticky,
+    shouldElevateOnScroll && styles.elevatedOnScroll,
+    shouldElevateOnScroll && scrolled && styles.scrolled,
+    navAlign === "center" && styles.navCentered,
+    container === "page" && styles.containerPage,
     className
   ].filter(Boolean).join(" ");
   const style = {
@@ -66,10 +83,36 @@ function HeaderRoot({
     () => ({ mobileOpen, setMobileOpen, icons }),
     [mobileOpen, icons]
   );
-  return /* @__PURE__ */ jsx(HeaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(HeaderIconContext.Provider, { value: icons, children: /* @__PURE__ */ jsx("header", { ...htmlProps, className: classes, style, "data-position": position, children: /* @__PURE__ */ jsx("div", { className: styles.container, children }) }) }) });
+  return /* @__PURE__ */ jsx(HeaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(HeaderIconContext.Provider, { value: icons, children: /* @__PURE__ */ jsx(
+    "header",
+    {
+      ...htmlProps,
+      className: classes,
+      style,
+      "data-position": position,
+      "data-scrolled": shouldElevateOnScroll ? scrolled : void 0,
+      children: /* @__PURE__ */ jsx("div", { className: styles.container, children })
+    }
+  ) }) });
 }
-function HeaderBrand({ children, href, className, ...htmlProps }) {
+function HeaderBrand({
+  children,
+  href,
+  asChild = false,
+  className,
+  ...htmlProps
+}) {
   const classes = [styles.brand, className].filter(Boolean).join(" ");
+  if (asChild && React.isValidElement(children)) {
+    const childProps = children.props;
+    const { onClick, ...restHtmlProps } = htmlProps;
+    return React.cloneElement(children, {
+      ...restHtmlProps,
+      ...href ? { href } : {},
+      className: [classes, childProps.className].filter(Boolean).join(" "),
+      onClick: onClick ? composeEventHandlers(childProps.onClick, onClick) : childProps.onClick
+    });
+  }
   if (href) {
     return /* @__PURE__ */ jsx("a", { ...htmlProps, href, className: classes, children });
   }
@@ -321,6 +364,14 @@ function HeaderMobileNavLink({
   }
   return /* @__PURE__ */ jsx("button", { ...htmlProps, type: "button", className: classes, onClick: handleClick, children });
 }
+function HeaderMobileNavActions({
+  children,
+  className,
+  ...htmlProps
+}) {
+  const classes = [styles.mobileNavActions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
 function HeaderSkipLink({
   children = "Skip to main content",
   href = "#main-content",
@@ -341,13 +392,15 @@ const Header = Object.assign(HeaderRoot, {
   Spacer: HeaderSpacer,
   SkipLink: HeaderSkipLink,
   MobileNav: HeaderMobileNav,
-  MobileNavLink: HeaderMobileNavLink
+  MobileNavLink: HeaderMobileNavLink,
+  MobileNavActions: HeaderMobileNavActions
 });
 export {
   Header,
   HeaderActions,
   HeaderBrand,
   HeaderMobileNav,
+  HeaderMobileNavActions,
   HeaderMobileNavLink,
   HeaderNav,
   HeaderNavItem,

package/dist/components/Icon/Icon.module.scss.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const icon = "_icon_p4ine_1";
-const primary = "_primary_p4ine_9";
-const secondary = "_secondary_p4ine_13";
-const tertiary = "_tertiary_p4ine_17";
-const accent = "_accent_p4ine_21";
-const success = "_success_p4ine_25";
-const warning = "_warning_p4ine_29";
-const error = "_error_p4ine_33";
+const icon = "_icon_gw1xu_1";
+const primary = "_primary_gw1xu_9";
+const secondary = "_secondary_gw1xu_13";
+const tertiary = "_tertiary_gw1xu_17";
+const accent = "_accent_gw1xu_21";
+const success = "_success_gw1xu_25";
+const warning = "_warning_gw1xu_29";
+const error = "_error_gw1xu_33";
 const styles = {
   icon,
   primary,

package/dist/components/Icon/Icon.module.scss.js

@@ -1,11 +1,11 @@
-const icon = "_icon_p4ine_1";
-const primary = "_primary_p4ine_9";
-const secondary = "_secondary_p4ine_13";
-const tertiary = "_tertiary_p4ine_17";
-const accent = "_accent_p4ine_21";
-const success = "_success_p4ine_25";
-const warning = "_warning_p4ine_29";
-const error = "_error_p4ine_33";
+const icon = "_icon_gw1xu_1";
+const primary = "_primary_gw1xu_9";
+const secondary = "_secondary_gw1xu_13";
+const tertiary = "_tertiary_gw1xu_17";
+const accent = "_accent_gw1xu_21";
+const success = "_success_gw1xu_25";
+const warning = "_warning_gw1xu_29";
+const error = "_error_gw1xu_33";
 const styles = {
   icon,
   primary,

package/dist/components/IconButton/IconButton.module.scss.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const iconButton = "_iconButton_6xdyn_1";
-const sm = "_sm_6xdyn_43";
-const md = "_md_6xdyn_52";
-const lg = "_lg_6xdyn_61";
-const ghost = "_ghost_6xdyn_70";
-const subtle = "_subtle_6xdyn_77";
-const outlined = "_outlined_6xdyn_87";
-const pressed = "_pressed_6xdyn_98";
+const iconButton = "_iconButton_19n51_1";
+const sm = "_sm_19n51_43";
+const md = "_md_19n51_52";
+const lg = "_lg_19n51_61";
+const ghost = "_ghost_19n51_70";
+const subtle = "_subtle_19n51_77";
+const outlined = "_outlined_19n51_87";
+const pressed = "_pressed_19n51_98";
 const styles = {
   iconButton,
   sm,

package/dist/components/IconButton/IconButton.module.scss.js

@@ -1,11 +1,11 @@
-const iconButton = "_iconButton_6xdyn_1";
-const sm = "_sm_6xdyn_43";
-const md = "_md_6xdyn_52";
-const lg = "_lg_6xdyn_61";
-const ghost = "_ghost_6xdyn_70";
-const subtle = "_subtle_6xdyn_77";
-const outlined = "_outlined_6xdyn_87";
-const pressed = "_pressed_6xdyn_98";
+const iconButton = "_iconButton_19n51_1";
+const sm = "_sm_19n51_43";
+const md = "_md_19n51_52";
+const lg = "_lg_19n51_61";
+const ghost = "_ghost_19n51_70";
+const subtle = "_subtle_19n51_77";
+const outlined = "_outlined_19n51_87";
+const pressed = "_pressed_19n51_98";
 const styles = {
   iconButton,
   sm,

package/dist/components/Image/Image.module.scss.cjs

@@ -1,46 +1,46 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const imageContainer = "_imageContainer_zs3im_1";
-const image = "_image_zs3im_1";
-const fitCover = "_fit-cover_zs3im_15";
-const fitContain = "_fit-contain_zs3im_19";
-const fitFill = "_fit-fill_zs3im_23";
-const fitNone = "_fit-none_zs3im_27";
-const aspect11 = "_aspect-1-1_zs3im_31";
-const aspect43 = "_aspect-4-3_zs3im_35";
-const aspect169 = "_aspect-16-9_zs3im_39";
-const aspect219 = "_aspect-21-9_zs3im_43";
-const roundedSm = "_rounded-sm_zs3im_47";
-const roundedMd = "_rounded-md_zs3im_51";
-const roundedLg = "_rounded-lg_zs3im_55";
-const roundedFull = "_rounded-full_zs3im_59";
-const fallback = "_fallback_zs3im_63";
+const imageContainer = "_imageContainer_slsaf_1";
+const image = "_image_slsaf_1";
+const fitCover = "_fit-cover_slsaf_15";
+const fitContain = "_fit-contain_slsaf_19";
+const fitFill = "_fit-fill_slsaf_23";
+const fitNone = "_fit-none_slsaf_27";
+const aspect11 = "_aspect-1-1_slsaf_31";
+const aspect43 = "_aspect-4-3_slsaf_35";
+const aspect169 = "_aspect-16-9_slsaf_39";
+const aspect219 = "_aspect-21-9_slsaf_43";
+const roundedSm = "_rounded-sm_slsaf_47";
+const roundedMd = "_rounded-md_slsaf_51";
+const roundedLg = "_rounded-lg_slsaf_55";
+const roundedFull = "_rounded-full_slsaf_59";
+const fallback = "_fallback_slsaf_63";
 const styles = {
   imageContainer,
   image,
-  "fit-cover": "_fit-cover_zs3im_15",
+  "fit-cover": "_fit-cover_slsaf_15",
   fitCover,
-  "fit-contain": "_fit-contain_zs3im_19",
+  "fit-contain": "_fit-contain_slsaf_19",
   fitContain,
-  "fit-fill": "_fit-fill_zs3im_23",
+  "fit-fill": "_fit-fill_slsaf_23",
   fitFill,
-  "fit-none": "_fit-none_zs3im_27",
+  "fit-none": "_fit-none_slsaf_27",
   fitNone,
-  "aspect-1-1": "_aspect-1-1_zs3im_31",
+  "aspect-1-1": "_aspect-1-1_slsaf_31",
   aspect11,
-  "aspect-4-3": "_aspect-4-3_zs3im_35",
+  "aspect-4-3": "_aspect-4-3_slsaf_35",
   aspect43,
-  "aspect-16-9": "_aspect-16-9_zs3im_39",
+  "aspect-16-9": "_aspect-16-9_slsaf_39",
   aspect169,
-  "aspect-21-9": "_aspect-21-9_zs3im_43",
+  "aspect-21-9": "_aspect-21-9_slsaf_43",
   aspect219,
-  "rounded-sm": "_rounded-sm_zs3im_47",
+  "rounded-sm": "_rounded-sm_slsaf_47",
   roundedSm,
-  "rounded-md": "_rounded-md_zs3im_51",
+  "rounded-md": "_rounded-md_slsaf_51",
   roundedMd,
-  "rounded-lg": "_rounded-lg_zs3im_55",
+  "rounded-lg": "_rounded-lg_slsaf_55",
   roundedLg,
-  "rounded-full": "_rounded-full_zs3im_59",
+  "rounded-full": "_rounded-full_slsaf_59",
   roundedFull,
   fallback
 };

package/dist/components/Image/Image.module.scss.js

@@ -1,44 +1,44 @@
-const imageContainer = "_imageContainer_zs3im_1";
-const image = "_image_zs3im_1";
-const fitCover = "_fit-cover_zs3im_15";
-const fitContain = "_fit-contain_zs3im_19";
-const fitFill = "_fit-fill_zs3im_23";
-const fitNone = "_fit-none_zs3im_27";
-const aspect11 = "_aspect-1-1_zs3im_31";
-const aspect43 = "_aspect-4-3_zs3im_35";
-const aspect169 = "_aspect-16-9_zs3im_39";
-const aspect219 = "_aspect-21-9_zs3im_43";
-const roundedSm = "_rounded-sm_zs3im_47";
-const roundedMd = "_rounded-md_zs3im_51";
-const roundedLg = "_rounded-lg_zs3im_55";
-const roundedFull = "_rounded-full_zs3im_59";
-const fallback = "_fallback_zs3im_63";
+const imageContainer = "_imageContainer_slsaf_1";
+const image = "_image_slsaf_1";
+const fitCover = "_fit-cover_slsaf_15";
+const fitContain = "_fit-contain_slsaf_19";
+const fitFill = "_fit-fill_slsaf_23";
+const fitNone = "_fit-none_slsaf_27";
+const aspect11 = "_aspect-1-1_slsaf_31";
+const aspect43 = "_aspect-4-3_slsaf_35";
+const aspect169 = "_aspect-16-9_slsaf_39";
+const aspect219 = "_aspect-21-9_slsaf_43";
+const roundedSm = "_rounded-sm_slsaf_47";
+const roundedMd = "_rounded-md_slsaf_51";
+const roundedLg = "_rounded-lg_slsaf_55";
+const roundedFull = "_rounded-full_slsaf_59";
+const fallback = "_fallback_slsaf_63";
 const styles = {
   imageContainer,
   image,
-  "fit-cover": "_fit-cover_zs3im_15",
+  "fit-cover": "_fit-cover_slsaf_15",
   fitCover,
-  "fit-contain": "_fit-contain_zs3im_19",
+  "fit-contain": "_fit-contain_slsaf_19",
   fitContain,
-  "fit-fill": "_fit-fill_zs3im_23",
+  "fit-fill": "_fit-fill_slsaf_23",
   fitFill,
-  "fit-none": "_fit-none_zs3im_27",
+  "fit-none": "_fit-none_slsaf_27",
   fitNone,
-  "aspect-1-1": "_aspect-1-1_zs3im_31",
+  "aspect-1-1": "_aspect-1-1_slsaf_31",
   aspect11,
-  "aspect-4-3": "_aspect-4-3_zs3im_35",
+  "aspect-4-3": "_aspect-4-3_slsaf_35",
   aspect43,
-  "aspect-16-9": "_aspect-16-9_zs3im_39",
+  "aspect-16-9": "_aspect-16-9_slsaf_39",
   aspect169,
-  "aspect-21-9": "_aspect-21-9_zs3im_43",
+  "aspect-21-9": "_aspect-21-9_slsaf_43",
   aspect219,
-  "rounded-sm": "_rounded-sm_zs3im_47",
+  "rounded-sm": "_rounded-sm_slsaf_47",
   roundedSm,
-  "rounded-md": "_rounded-md_zs3im_51",
+  "rounded-md": "_rounded-md_slsaf_51",
   roundedMd,
-  "rounded-lg": "_rounded-lg_zs3im_55",
+  "rounded-lg": "_rounded-lg_slsaf_55",
   roundedLg,
-  "rounded-full": "_rounded-full_zs3im_59",
+  "rounded-full": "_rounded-full_slsaf_59",
   roundedFull,
   fallback
 };

package/dist/components/Input/Input.module.scss.cjs

@@ -1,24 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_mwvwo_1";
-const label = "_label_mwvwo_6";
-const required = "_required_mwvwo_14";
-const helper = "_helper_mwvwo_19";
-const helperError = "_helperError_mwvwo_26";
-const errorMessage = "_errorMessage_mwvwo_30";
-const input = "_input_mwvwo_36";
-const sm = "_sm_mwvwo_82";
-const md = "_md_mwvwo_89";
-const lg = "_lg_mwvwo_96";
-const labelSm = "_labelSm_mwvwo_103";
-const error = "_error_mwvwo_30";
-const success = "_success_mwvwo_118";
-const helperSuccess = "_helperSuccess_mwvwo_132";
-const inputContainer = "_inputContainer_mwvwo_136";
-const shortcut = "_shortcut_mwvwo_141";
-const hasAdornment = "_hasAdornment_mwvwo_141";
-const adornment = "_adornment_mwvwo_212";
-const hasShortcut = "_hasShortcut_mwvwo_223";
+const wrapper = "_wrapper_1vwgf_1";
+const label = "_label_1vwgf_6";
+const required = "_required_1vwgf_14";
+const helper = "_helper_1vwgf_19";
+const helperError = "_helperError_1vwgf_26";
+const errorMessage = "_errorMessage_1vwgf_30";
+const input = "_input_1vwgf_36";
+const sm = "_sm_1vwgf_82";
+const md = "_md_1vwgf_89";
+const lg = "_lg_1vwgf_96";
+const labelSm = "_labelSm_1vwgf_103";
+const error = "_error_1vwgf_30";
+const success = "_success_1vwgf_118";
+const helperSuccess = "_helperSuccess_1vwgf_132";
+const inputContainer = "_inputContainer_1vwgf_136";
+const shortcut = "_shortcut_1vwgf_141";
+const hasAdornment = "_hasAdornment_1vwgf_141";
+const adornment = "_adornment_1vwgf_212";
+const hasShortcut = "_hasShortcut_1vwgf_223";
 const styles = {
   wrapper,
   label,

package/dist/components/Input/Input.module.scss.js

@@ -1,22 +1,22 @@
-const wrapper = "_wrapper_mwvwo_1";
-const label = "_label_mwvwo_6";
-const required = "_required_mwvwo_14";
-const helper = "_helper_mwvwo_19";
-const helperError = "_helperError_mwvwo_26";
-const errorMessage = "_errorMessage_mwvwo_30";
-const input = "_input_mwvwo_36";
-const sm = "_sm_mwvwo_82";
-const md = "_md_mwvwo_89";
-const lg = "_lg_mwvwo_96";
-const labelSm = "_labelSm_mwvwo_103";
-const error = "_error_mwvwo_30";
-const success = "_success_mwvwo_118";
-const helperSuccess = "_helperSuccess_mwvwo_132";
-const inputContainer = "_inputContainer_mwvwo_136";
-const shortcut = "_shortcut_mwvwo_141";
-const hasAdornment = "_hasAdornment_mwvwo_141";
-const adornment = "_adornment_mwvwo_212";
-const hasShortcut = "_hasShortcut_mwvwo_223";
+const wrapper = "_wrapper_1vwgf_1";
+const label = "_label_1vwgf_6";
+const required = "_required_1vwgf_14";
+const helper = "_helper_1vwgf_19";
+const helperError = "_helperError_1vwgf_26";
+const errorMessage = "_errorMessage_1vwgf_30";
+const input = "_input_1vwgf_36";
+const sm = "_sm_1vwgf_82";
+const md = "_md_1vwgf_89";
+const lg = "_lg_1vwgf_96";
+const labelSm = "_labelSm_1vwgf_103";
+const error = "_error_1vwgf_30";
+const success = "_success_1vwgf_118";
+const helperSuccess = "_helperSuccess_1vwgf_132";
+const inputContainer = "_inputContainer_1vwgf_136";
+const shortcut = "_shortcut_1vwgf_141";
+const hasAdornment = "_hasAdornment_1vwgf_141";
+const adornment = "_adornment_1vwgf_212";
+const hasShortcut = "_hasShortcut_1vwgf_223";
 const styles = {
   wrapper,
   label,