@liner-fe/prism 2.1.25 → 2.1.26

package/lib/index.mjs

@@ -8750,6 +8750,96 @@ var Display = forwardRef6(
   }
 );
 
+// src/components/Typography/Responsive/lib.ts
+import { createMedia } from "@artsy/fresnel";
+import { breakpointOrigin } from "@liner-fe/design-token";
+
+// src/components/Typography/Responsive/constant.ts
+var breakPointKeyArray = ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];
+
+// src/components/Typography/Responsive/lib.ts
+var removePx = /* @__PURE__ */ __name((breakPoint) => {
+  return +breakPoint.replace("px", "");
+}, "removePx");
+var AppMedia = createMedia({
+  breakpoints: breakPointKeyArray.reduce((acc, key) => {
+    acc[key] = removePx(breakpointOrigin[key]);
+    return acc;
+  }, {})
+});
+var rootMediaStyle = AppMedia.createMediaStyle();
+var { MediaContextProvider, Media } = AppMedia;
+
+// src/components/Typography/Responsive/index.tsx
+import { Fragment as Fragment4, jsx as jsx171 } from "react/jsx-runtime";
+import { createElement as createElement2 } from "react";
+var TypographyImpl = /* @__PURE__ */ __name(({ level, text, ...rest }) => {
+  const commonProps = {
+    ...rest,
+    children: text
+  };
+  switch (level) {
+    case "caption":
+      return /* @__PURE__ */ jsx171(Caption, { ...commonProps });
+    case "display":
+      return /* @__PURE__ */ jsx171(Display, { ...commonProps });
+    case "heading":
+      return /* @__PURE__ */ jsx171(Heading, { ...commonProps });
+    case "paragraph":
+      return /* @__PURE__ */ jsx171(Paragraph, { ...commonProps });
+    case "title":
+      return /* @__PURE__ */ jsx171(Title2, { ...commonProps });
+    default:
+      return null;
+  }
+}, "TypographyImpl");
+var Typography = /* @__PURE__ */ __name((props) => {
+  const { children } = props;
+  const createMediaProps = /* @__PURE__ */ __name((current) => {
+    let returnValue = {};
+    breakPointKeyArray.forEach((breakPointKey, idx, originArray) => {
+      const isFoundCurrentBreakPointKey = current === breakPointKey;
+      if (isFoundCurrentBreakPointKey) {
+        const lagerCurrentBreakPointKeyArray = originArray.slice(idx + 1);
+        const isEmptyLagerCurrentBreakPointKeyArray = lagerCurrentBreakPointKeyArray.length === 0;
+        if (isEmptyLagerCurrentBreakPointKeyArray) {
+          returnValue = { greaterThanOrEqual: current };
+        } else {
+          lagerCurrentBreakPointKeyArray.forEach((lagerCurrentBreakPointKey, idx2, originArray2) => {
+            const isExistReturnValue = !isEmptyObject(returnValue);
+            const isEarlyReturn = isExistReturnValue;
+            if (isEarlyReturn) {
+              return;
+            }
+            const isExistLagerCurrentBreakPoint = !!props[lagerCurrentBreakPointKey];
+            if (isExistLagerCurrentBreakPoint) {
+              returnValue = { between: [current, lagerCurrentBreakPointKey] };
+              return;
+            }
+            const isLast = idx2 === originArray2.length - 1;
+            if (isLast) {
+              returnValue = { greaterThanOrEqual: current };
+              return;
+            }
+          });
+        }
+      }
+    });
+    return returnValue;
+  }, "createMediaProps");
+  return (
+    // Fragment없이도 원래 동작해야하는데 liner-web에서 JSX.Element가 배열로 오면 에러 띄워서 임시로 Fragment로 래핑합니다.
+    /* @__PURE__ */ jsx171(Fragment4, { children: breakPointKeyArray.map((breakPointKey) => {
+      const variable = props[breakPointKey];
+      const isExistVariable = !!variable;
+      if (isExistVariable) {
+        return /* @__PURE__ */ createElement2(Media, { ...createMediaProps(breakPointKey), key: breakPointKey }, /* @__PURE__ */ jsx171(TypographyImpl, { ...variable, text: variable.text || children }));
+      }
+      return null;
+    }) })
+  );
+}, "Typography");
+
 // src/components/Popover/index.tsx
 import * as React3 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -8797,7 +8887,7 @@ var style_module_default7 = {
 // src/components/TextButton/index.tsx
 import { Children as Children2, cloneElement as cloneElement2, forwardRef as forwardRef7 } from "react";
 import clsx8 from "clsx";
-import { jsx as jsx171, jsxs as jsxs116 } from "react/jsx-runtime";
+import { jsx as jsx172, jsxs as jsxs116 } from "react/jsx-runtime";
 var textButtonLevelIconTypeMap = {
   primary: "brand-label-primary",
   secondary: "neutral-label-primary",
@@ -8855,9 +8945,9 @@ var TextButton = forwardRef7(
       ...icon
     }), "getIconProps");
     const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ jsxs116("span", { className: style_module_default7["text-children"], children: [
-      leftIcon && /* @__PURE__ */ jsx171(Icon, { ...getIconProps(leftIcon) }),
-      /* @__PURE__ */ jsx171("p", { children: children2 }),
-      rightIcon && /* @__PURE__ */ jsx171(Icon, { ...getIconProps(rightIcon) })
+      leftIcon && /* @__PURE__ */ jsx172(Icon, { ...getIconProps(leftIcon) }),
+      /* @__PURE__ */ jsx172("p", { children: children2 }),
+      rightIcon && /* @__PURE__ */ jsx172(Icon, { ...getIconProps(rightIcon) })
     ] }), "renderContent");
     if (asChild) {
       const parent = Children2.only(children);
@@ -8871,12 +8961,12 @@ var TextButton = forwardRef7(
         renderContent(parent.props.children)
       );
     }
-    return /* @__PURE__ */ jsx171("button", { className: clsx8(textButtonVariants({ level, thick, underline, size }), className), ref, ...rest, children: renderContent(children) });
+    return /* @__PURE__ */ jsx172("button", { className: clsx8(textButtonVariants({ level, thick, underline, size }), className), ref, ...rest, children: renderContent(children) });
   }
 );
 
 // src/components/Popover/index.tsx
-import { Fragment as Fragment4, jsx as jsx172, jsxs as jsxs117 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx173, jsxs as jsxs117 } from "react/jsx-runtime";
 var DEFAULT_OFFSET = -6;
 var popoverVariants = cva6({
   base: style_module_default6.content,
@@ -8900,9 +8990,9 @@ var popoverTagVariants = cva6({ base: [style_module_default6.tag, "lp-sys-typo-c
 var popoverTitleVariants = cva6({ base: [style_module_default6.title, "lp-sys-typo-paragraph3-normal-bold"] });
 var popoverDescriptionVariants = cva6({ base: [style_module_default6.description, "lp-sys-typo-caption1-normal-regular"] });
 var popoverFooterVariants = cva6({ base: [style_module_default6.footer, "lp-sys-typo-caption1-normal-medium"] });
-var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ jsx172(PopoverPrimitive.Root, { open: isOpen, onOpenChange: onChange, children }), "PopoverRoot");
-var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx172(PopoverPrimitive.Trigger, { asChild: true, children: by }), "PopoverTrigger");
-var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ jsx172("svg", { className, xmlns: "http://www.w3.org/2000/svg", width: "30", height: "10", viewBox: "0 0 30 10", fill: "none", children: /* @__PURE__ */ jsx172(
+var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ jsx173(PopoverPrimitive.Root, { open: isOpen, onOpenChange: onChange, children }), "PopoverRoot");
+var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx173(PopoverPrimitive.Trigger, { asChild: true, children: by }), "PopoverTrigger");
+var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ jsx173("svg", { className, xmlns: "http://www.w3.org/2000/svg", width: "30", height: "10", viewBox: "0 0 30 10", fill: "none", children: /* @__PURE__ */ jsx173(
   "path",
   {
     fillRule: "evenodd",
@@ -8929,7 +9019,7 @@ var PopoverContent = React3.forwardRef(
     children,
     container,
     ...props
-  }, ref) => /* @__PURE__ */ jsx172(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsxs117(Fragment4, { children: [
+  }, ref) => /* @__PURE__ */ jsx173(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsxs117(Fragment5, { children: [
     /* @__PURE__ */ jsxs117(
       PopoverPrimitive.Content,
       {
@@ -8943,22 +9033,22 @@ var PopoverContent = React3.forwardRef(
         children: [
           /* @__PURE__ */ jsxs117("div", { className: style_module_default6.contentContainer, children: [
             (tag || icon || onClose) && /* @__PURE__ */ jsxs117("div", { className: style_module_default6.heading, children: [
-              tag && /* @__PURE__ */ jsx172("span", { className: popoverTagVariants(), children: tag }),
-              icon && /* @__PURE__ */ jsx172(Icon, { name: icon.name, size: "xs", thick: icon.thick, fill: icon.fill }),
-              /* @__PURE__ */ jsx172("p", { className: popoverTitleVariants(), children: title }),
-              onClose && /* @__PURE__ */ jsx172(
+              tag && /* @__PURE__ */ jsx173("span", { className: popoverTagVariants(), children: tag }),
+              icon && /* @__PURE__ */ jsx173(Icon, { name: icon.name, size: "xs", thick: icon.thick, fill: icon.fill }),
+              /* @__PURE__ */ jsx173("p", { className: popoverTitleVariants(), children: title }),
+              onClose && /* @__PURE__ */ jsx173(
                 PopoverPrimitive.PopoverClose,
                 {
                   className: style_module_default6.closeButton,
                   onClick: () => {
                     onClose();
                   },
-                  children: /* @__PURE__ */ jsx172(Icon, { name: "close-fill", size: "s", fill: true, thick: true, type: "neutral-label-static-primary" })
+                  children: /* @__PURE__ */ jsx173(Icon, { name: "close-fill", size: "s", fill: true, thick: true, type: "neutral-label-static-primary" })
                 }
               )
             ] }),
-            description && /* @__PURE__ */ jsx172("p", { className: popoverDescriptionVariants(), children: description }),
-            onConfirm && /* @__PURE__ */ jsx172("div", { className: popoverFooterVariants(), children: /* @__PURE__ */ jsx172(
+            description && /* @__PURE__ */ jsx173("p", { className: popoverDescriptionVariants(), children: description }),
+            onConfirm && /* @__PURE__ */ jsx173("div", { className: popoverFooterVariants(), children: /* @__PURE__ */ jsx173(
               TextButton,
               {
                 level: "inverse-static",
@@ -8970,11 +9060,11 @@ var PopoverContent = React3.forwardRef(
             ) }),
             children
           ] }),
-          /* @__PURE__ */ jsx172(PopoverPrimitive.Arrow, { asChild: true, children: /* @__PURE__ */ jsx172(PopoverAnchor, { className: clsx9(popoverAnchorVariants({ level })) }) })
+          /* @__PURE__ */ jsx173(PopoverPrimitive.Arrow, { asChild: true, children: /* @__PURE__ */ jsx173(PopoverAnchor, { className: clsx9(popoverAnchorVariants({ level })) }) })
         ]
       }
     ),
-    isOverlay && /* @__PURE__ */ jsx172("div", { "data-radix-popper-overlay": true, className: style_module_default6.overlay })
+    isOverlay && /* @__PURE__ */ jsx173("div", { "data-radix-popper-overlay": true, className: style_module_default6.overlay })
   ] }) })
 );
 var Popover = Object.assign(PopoverRoot, {
@@ -8997,14 +9087,14 @@ var style_module_default8 = {
 // src/components/Tooltip/index.tsx
 import { cva as cva7 } from "cva";
 import clsx10 from "clsx";
-import { jsx as jsx173 } from "react/jsx-runtime";
+import { jsx as jsx174 } from "react/jsx-runtime";
 var DEFAULT_OFFSET2 = "medium";
 var tooltipVariants = cva7({ base: [style_module_default8.tooltip, "lp-sys-typo-caption1-normal-medium"] });
 var TooltipProvider = TooltipPrimitive.Provider;
-var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ jsx173(TooltipPrimitive.Root, { delayDuration: 0, ...props, children }), "TooltipRoot");
-var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx173(TooltipPrimitive.Trigger, { asChild: true, children: by }), "TooltipTrigger");
+var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ jsx174(TooltipPrimitive.Root, { delayDuration: 0, ...props, children }), "TooltipRoot");
+var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx174(TooltipPrimitive.Trigger, { asChild: true, children: by }), "TooltipTrigger");
 var TooltipContent = forwardRef9(
-  ({ description, position = "top", className, offset = DEFAULT_OFFSET2, collisionPadding, ...props }, ref) => /* @__PURE__ */ jsx173(
+  ({ description, position = "top", className, offset = DEFAULT_OFFSET2, collisionPadding, ...props }, ref) => /* @__PURE__ */ jsx174(
     TooltipPrimitive.Content,
     {
       ref,
@@ -9013,7 +9103,7 @@ var TooltipContent = forwardRef9(
       collisionPadding,
       className: clsx10(tooltipVariants(), className),
       ...props,
-      children: /* @__PURE__ */ jsx173("p", { className: style_module_default8.tooltipContent, children: description })
+      children: /* @__PURE__ */ jsx174("p", { className: style_module_default8.tooltipContent, children: description })
     }
   )
 );
@@ -9048,7 +9138,7 @@ var style_module_default9 = {
 
 // src/components/IconButton/index.tsx
 import { Slot } from "@radix-ui/react-slot";
-import { jsx as jsx174 } from "react/jsx-runtime";
+import { jsx as jsx175 } from "react/jsx-runtime";
 var iconButtonSizeIconSizeMap = {
   l: "m",
   m: "s",
@@ -9122,14 +9212,14 @@ var IconButton = forwardRef10(
     ...rest
   }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx174(
+    return /* @__PURE__ */ jsx175(
       Comp,
       {
         ...rest,
         className: clsx11(iconButtonVariants({ level, size, fill }), className),
         ref,
         disabled: disabled && !isLoading,
-        children: isLoading ? /* @__PURE__ */ jsx174(ButtonLoading, { size: iconButtonLoadingSizeMap[size], level }) : /* @__PURE__ */ jsx174(
+        children: isLoading ? /* @__PURE__ */ jsx175(ButtonLoading, { size: iconButtonLoadingSizeMap[size], level }) : /* @__PURE__ */ jsx175(
           Icon,
           {
             size: iconButtonSizeIconSizeMap[size],
@@ -9181,7 +9271,7 @@ var style_module_default11 = {
 
 // src/components/Label/index.tsx
 import { cva as cva9 } from "cva";
-import { jsx as jsx175 } from "react/jsx-runtime";
+import { jsx as jsx176 } from "react/jsx-runtime";
 var defaultLabelVariants = cva9({
   base: ["lp-sys-typo-paragraph2-normal-medium", style_module_default11.label],
   variants: {
@@ -9222,7 +9312,7 @@ var Label = forwardRef11(
     error = false,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx175(
+    return /* @__PURE__ */ jsx176(
       LabelPrimitive.Root,
       {
         ref,
@@ -9234,17 +9324,17 @@ var Label = forwardRef11(
 );
 
 // src/components/CheckBox/index.tsx
-import { Fragment as Fragment5, jsx as jsx176, jsxs as jsxs118 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx177, jsxs as jsxs118 } from "react/jsx-runtime";
 var Checkbox = forwardRef12(
   ({ className, label, description, ...props }, ref) => {
     const CheckboxWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ jsxs118(Label, { position: "right", htmlFor: props.id, children: [
       /* @__PURE__ */ jsxs118("div", { className: style_module_default10["label-wrapper"], children: [
         label,
-        /* @__PURE__ */ jsx176(Paragraph, { className: style_module_default10.description, size: 3, type: "normal", weight: "regular", children: description })
+        /* @__PURE__ */ jsx177(Paragraph, { className: style_module_default10.description, size: 3, type: "normal", weight: "regular", children: description })
       ] }),
       children
-    ] }) : /* @__PURE__ */ jsx176(Fragment5, { children }), "CheckboxWrapper");
-    return /* @__PURE__ */ jsx176(CheckboxWrapper, { children: /* @__PURE__ */ jsx176(CheckboxPrimitive.Root, { className: clsx13(style_module_default10.checkbox, className), ref, ...props, children: /* @__PURE__ */ jsx176(CheckboxPrimitive.Indicator, { className: style_module_default10["checkbox-indicator"], children: /* @__PURE__ */ jsx176(Icon, { name: "check-mark", thick: true, size: "xs", type: "inverse-label-primary" }) }) }) });
+    ] }) : /* @__PURE__ */ jsx177(Fragment6, { children }), "CheckboxWrapper");
+    return /* @__PURE__ */ jsx177(CheckboxWrapper, { children: /* @__PURE__ */ jsx177(CheckboxPrimitive.Root, { className: clsx13(style_module_default10.checkbox, className), ref, ...props, children: /* @__PURE__ */ jsx177(CheckboxPrimitive.Indicator, { className: style_module_default10["checkbox-indicator"], children: /* @__PURE__ */ jsx177(Icon, { name: "check-mark", thick: true, size: "xs", type: "inverse-label-primary" }) }) }) });
   }
 );
 
@@ -9263,19 +9353,19 @@ var style_module_default12 = {
 };
 
 // src/components/Radio/index.tsx
-import { Fragment as Fragment6, jsx as jsx177, jsxs as jsxs119 } from "react/jsx-runtime";
-var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx177("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx177("circle", { cx: "5", cy: "5", r: "5", fill: "#313133" }) }), "RadioIndicator");
-var RadioRoot = forwardRef13(({ className, ...props }, ref) => /* @__PURE__ */ jsx177(RadioGroupPrimitive.Root, { className: clsx14(style_module_default12.radio, className), ...props }));
+import { Fragment as Fragment7, jsx as jsx178, jsxs as jsxs119 } from "react/jsx-runtime";
+var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx178("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx178("circle", { cx: "5", cy: "5", r: "5", fill: "#313133" }) }), "RadioIndicator");
+var RadioRoot = forwardRef13(({ className, ...props }, ref) => /* @__PURE__ */ jsx178(RadioGroupPrimitive.Root, { className: clsx14(style_module_default12.radio, className), ...props }));
 var RadioItem = forwardRef13(
   ({ className, label, description, ...props }, ref) => {
     const RadioItemWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ jsxs119(Label, { position: "right", htmlFor: props.id, children: [
       /* @__PURE__ */ jsxs119("div", { className: style_module_default12["label-wrapper"], children: [
         label,
-        /* @__PURE__ */ jsx177(Paragraph, { className: style_module_default12.description, size: 3, type: "normal", weight: "regular", children: description })
+        /* @__PURE__ */ jsx178(Paragraph, { className: style_module_default12.description, size: 3, type: "normal", weight: "regular", children: description })
       ] }),
       children
-    ] }) : /* @__PURE__ */ jsx177(Fragment6, { children }), "RadioItemWrapper");
-    return /* @__PURE__ */ jsx177(RadioItemWrapper, { children: /* @__PURE__ */ jsx177(RadioGroupPrimitive.Item, { ref, className: clsx14(style_module_default12["radio-item"], className), ...props, children: /* @__PURE__ */ jsx177(RadioGroupPrimitive.Indicator, { className: style_module_default12.indicator, children: /* @__PURE__ */ jsx177(RadioIndicator, {}) }) }) });
+    ] }) : /* @__PURE__ */ jsx178(Fragment7, { children }), "RadioItemWrapper");
+    return /* @__PURE__ */ jsx178(RadioItemWrapper, { children: /* @__PURE__ */ jsx178(RadioGroupPrimitive.Item, { ref, className: clsx14(style_module_default12["radio-item"], className), ...props, children: /* @__PURE__ */ jsx178(RadioGroupPrimitive.Indicator, { className: style_module_default12.indicator, children: /* @__PURE__ */ jsx178(RadioIndicator, {}) }) }) });
   }
 );
 var Radio = Object.assign(RadioRoot, {
@@ -9317,7 +9407,7 @@ var style_module_default13 = {
 import { cva as cva10 } from "cva";
 import clsx15 from "clsx";
 import { flushSync } from "react-dom";
-import { Fragment as Fragment7, jsx as jsx178, jsxs as jsxs120 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx179, jsxs as jsxs120 } from "react/jsx-runtime";
 var defaultTextfieldVariants = cva10({
   base: style_module_default13.textfield,
   variants: {
@@ -9387,7 +9477,7 @@ var Textfield = forwardRef14((props, ref) => {
   }, "handleDeidentify");
   useImperativeHandle(ref, () => inputRef.current);
   return /* @__PURE__ */ jsxs120("div", { className: style_module_default13["textfield-container"], children: [
-    /* @__PURE__ */ jsx178(
+    /* @__PURE__ */ jsx179(
       "div",
       {
         className: clsx15(defaultTextfieldVariants({ color }), {
@@ -9396,7 +9486,7 @@ var Textfield = forwardRef14((props, ref) => {
         }),
         onClick: handleTextfieldClick,
         children: /* @__PURE__ */ jsxs120("div", { className: style_module_default13["input-wrapper"], children: [
-          /* @__PURE__ */ jsx178(
+          /* @__PURE__ */ jsx179(
             "input",
             {
               className: clsx15(style_module_default13.input, {
@@ -9411,7 +9501,7 @@ var Textfield = forwardRef14((props, ref) => {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx178(
+          /* @__PURE__ */ jsx179(
             Label,
             {
               className: clsx15(style_module_default13.label, {
@@ -9424,7 +9514,7 @@ var Textfield = forwardRef14((props, ref) => {
             }
           ),
           /* @__PURE__ */ jsxs120("div", { className: style_module_default13["input-action-buttons"], children: [
-            textfieldValue && !disabled && /* @__PURE__ */ jsx178(
+            textfieldValue && !disabled && /* @__PURE__ */ jsx179(
               IconButton,
               {
                 tabIndex: -1,
@@ -9442,7 +9532,7 @@ var Textfield = forwardRef14((props, ref) => {
                 }
               }
             ),
-            isPassword && !disabled && /* @__PURE__ */ jsx178(
+            isPassword && !disabled && /* @__PURE__ */ jsx179(
               IconButton,
               {
                 tabIndex: -1,
@@ -9460,15 +9550,15 @@ var Textfield = forwardRef14((props, ref) => {
                 }
               }
             ),
-            buttonProps && /* @__PURE__ */ jsx178(Button, { ...buttonProps, size: "m", type: "button" })
+            buttonProps && /* @__PURE__ */ jsx179(Button, { ...buttonProps, size: "m", type: "button" })
           ] })
         ] })
       }
     ),
     displayFooter && /* @__PURE__ */ jsxs120("div", { className: style_module_default13.footer, children: [
-      /* @__PURE__ */ jsx178("div", { className: style_module_default13["error-wrapper"], children: error && /* @__PURE__ */ jsxs120(Fragment7, { children: [
-        /* @__PURE__ */ jsx178(Icon, { name: "exclamationmark-fill", fill: true, thick: true, size: "xs", type: "function-label-negative" }),
-        /* @__PURE__ */ jsx178(Caption, { size: 3, type: "normal", weight: "regular", className: style_module_default13["error-message"], children: error })
+      /* @__PURE__ */ jsx179("div", { className: style_module_default13["error-wrapper"], children: error && /* @__PURE__ */ jsxs120(Fragment8, { children: [
+        /* @__PURE__ */ jsx179(Icon, { name: "exclamationmark-fill", fill: true, thick: true, size: "xs", type: "function-label-negative" }),
+        /* @__PURE__ */ jsx179(Caption, { size: 3, type: "normal", weight: "regular", className: style_module_default13["error-message"], children: error })
       ] }) }),
       maxCharacter && /* @__PURE__ */ jsxs120(Caption, { className: style_module_default13.character, size: 3, type: "normal", weight: "regular", children: [
         isControlled ? controlledValue.length : value.length,
@@ -9497,29 +9587,29 @@ var style_module_default14 = {
 
 // src/components/Slider/index.tsx
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { Fragment as Fragment8, jsx as jsx179, jsxs as jsxs121 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx180, jsxs as jsxs121 } from "react/jsx-runtime";
 var SliderRoot = forwardRef15((props, ref) => {
   const { label, tooltip, rangeLeft, rangeRight, min, max, step = 50, ...rest } = props;
-  return /* @__PURE__ */ jsx179(Fragment8, { children: /* @__PURE__ */ jsxs121(Tooltip.Provider, { children: [
-    /* @__PURE__ */ jsx179(Label, { level: "secondary", size: "m", offset: "high", className: style_module_default14.label, children: label }),
+  return /* @__PURE__ */ jsx180(Fragment9, { children: /* @__PURE__ */ jsxs121(Tooltip.Provider, { children: [
+    /* @__PURE__ */ jsx180(Label, { level: "secondary", size: "m", offset: "high", className: style_module_default14.label, children: label }),
     /* @__PURE__ */ jsxs121("div", { className: style_module_default14["slider-wrapper"], children: [
       /* @__PURE__ */ jsxs121("div", { className: style_module_default14["slider-option-wrapper"], children: [
-        /* @__PURE__ */ jsx179(Icon, { name: rangeLeft.icon, size: "xs" }),
-        /* @__PURE__ */ jsx179(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default14.optionText, children: rangeLeft.text })
+        /* @__PURE__ */ jsx180(Icon, { name: rangeLeft.icon, size: "xs" }),
+        /* @__PURE__ */ jsx180(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default14.optionText, children: rangeLeft.text })
       ] }),
       /* @__PURE__ */ jsxs121(SliderPrimitive.Root, { ...rest, step, className: style_module_default14["slider-root"], ref, children: [
         /* @__PURE__ */ jsxs121(SliderPrimitive.Track, { className: style_module_default14["slider-track"], children: [
-          Array.from({ length: 100 / step + 1 }).map((_, index) => /* @__PURE__ */ jsx179("span", { className: style_module_default14["slider-step"] }, index)),
-          /* @__PURE__ */ jsx179(SliderPrimitive.Range, { className: style_module_default14["slider-range"] })
+          Array.from({ length: 100 / step + 1 }).map((_, index) => /* @__PURE__ */ jsx180("span", { className: style_module_default14["slider-step"] }, index)),
+          /* @__PURE__ */ jsx180(SliderPrimitive.Range, { className: style_module_default14["slider-range"] })
         ] }),
         /* @__PURE__ */ jsxs121(Tooltip, { children: [
-          /* @__PURE__ */ jsx179(Tooltip.Trigger, { by: /* @__PURE__ */ jsx179(SliderPrimitive.Thumb, { className: style_module_default14["slider-thumb"] }) }),
-          /* @__PURE__ */ jsx179(Tooltip.Content, { description: tooltip })
+          /* @__PURE__ */ jsx180(Tooltip.Trigger, { by: /* @__PURE__ */ jsx180(SliderPrimitive.Thumb, { className: style_module_default14["slider-thumb"] }) }),
+          /* @__PURE__ */ jsx180(Tooltip.Content, { description: tooltip })
         ] })
       ] }),
       /* @__PURE__ */ jsxs121("div", { className: style_module_default14["slider-option-wrapper"], children: [
-        /* @__PURE__ */ jsx179(Icon, { name: rangeRight.icon, size: "xs" }),
-        /* @__PURE__ */ jsx179(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default14.optionText, children: rangeRight.text })
+        /* @__PURE__ */ jsx180(Icon, { name: rangeRight.icon, size: "xs" }),
+        /* @__PURE__ */ jsx180(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default14.optionText, children: rangeRight.text })
       ] })
     ] })
   ] }) });
@@ -9563,11 +9653,11 @@ import {
   useState as useState4
 } from "react";
 import clsx16 from "clsx";
-import { jsx as jsx180, jsxs as jsxs122 } from "react/jsx-runtime";
-var Badge = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx180("div", { className: style_module_default15.badgeContainer, children: /* @__PURE__ */ jsx180(Caption, { className: style_module_default15.badge, size: 2, type: "normal", weight: "medium", children }) }), "Badge");
+import { jsx as jsx181, jsxs as jsxs122 } from "react/jsx-runtime";
+var Badge = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx181("div", { className: style_module_default15.badgeContainer, children: /* @__PURE__ */ jsx181(Caption, { className: style_module_default15.badge, size: 2, type: "normal", weight: "medium", children }) }), "Badge");
 var SelectContent = forwardRef16((props, ref) => {
   const { id, isResponsive, popSide, sideOffset, listLabel, children, container } = props;
-  return /* @__PURE__ */ jsx180(SelectPrimitive.Portal, { container, children: /* @__PURE__ */ jsx180(
+  return /* @__PURE__ */ jsx181(SelectPrimitive.Portal, { container, children: /* @__PURE__ */ jsx181(
     SelectPrimitive.Content,
     {
       id: `select-content-${id}`,
@@ -9590,11 +9680,11 @@ var SelectContent = forwardRef16((props, ref) => {
       sideOffset,
       avoidCollisions: false,
       children: /* @__PURE__ */ jsxs122(ScrollArea.Root, { className: style_module_default15.scrollAreaRoot, type: "always", children: [
-        /* @__PURE__ */ jsx180(SelectPrimitive.Viewport, { asChild: true, children: /* @__PURE__ */ jsx180(ScrollArea.Viewport, { className: style_module_default15.scrollAreaViewport, style: { maxHeight: "268px", overflowY: "auto" }, children: /* @__PURE__ */ jsxs122(SelectPrimitive.Group, { children: [
-          listLabel && /* @__PURE__ */ jsx180(SelectPrimitive.Label, { asChild: true, children: /* @__PURE__ */ jsx180(Label, { className: style_module_default15["desktop-label"], level: "secondary", size: "m", offset: "low", children: listLabel }) }),
+        /* @__PURE__ */ jsx181(SelectPrimitive.Viewport, { asChild: true, children: /* @__PURE__ */ jsx181(ScrollArea.Viewport, { className: style_module_default15.scrollAreaViewport, style: { maxHeight: "268px", overflowY: "auto" }, children: /* @__PURE__ */ jsxs122(SelectPrimitive.Group, { children: [
+          listLabel && /* @__PURE__ */ jsx181(SelectPrimitive.Label, { asChild: true, children: /* @__PURE__ */ jsx181(Label, { className: style_module_default15["desktop-label"], level: "secondary", size: "m", offset: "low", children: listLabel }) }),
           children
         ] }) }) }),
-        /* @__PURE__ */ jsx180(ScrollArea.Scrollbar, { className: style_module_default15.scrollAreaScrollbar, orientation: "vertical", children: /* @__PURE__ */ jsx180(ScrollArea.Thumb, { className: style_module_default15.scrollAreaThumb }) })
+        /* @__PURE__ */ jsx181(ScrollArea.Scrollbar, { className: style_module_default15.scrollAreaScrollbar, orientation: "vertical", children: /* @__PURE__ */ jsx181(ScrollArea.Thumb, { className: style_module_default15.scrollAreaThumb }) })
       ] })
     }
   ) });
@@ -9624,8 +9714,8 @@ var SelectRoot = forwardRef16((props, ref) => {
   }, [open]);
   return /* @__PURE__ */ jsxs122("div", { children: [
     /* @__PURE__ */ jsxs122("div", { className: style_module_default15["label-container"], children: [
-      /* @__PURE__ */ jsx180(Label, { className: style_module_default15["select-label"], level: "secondary", size: "m", offset: "low", htmlFor: id, children: label }),
-      badge && /* @__PURE__ */ jsx180(Badge, { children: badge })
+      /* @__PURE__ */ jsx181(Label, { className: style_module_default15["select-label"], level: "secondary", size: "m", offset: "low", htmlFor: id, children: label }),
+      badge && /* @__PURE__ */ jsx181(Badge, { children: badge })
     ] }),
     /* @__PURE__ */ jsxs122(
       SelectPrimitive.Root,
@@ -9638,10 +9728,10 @@ var SelectRoot = forwardRef16((props, ref) => {
         },
         children: [
           /* @__PURE__ */ jsxs122(SelectPrimitive.Trigger, { className: style_module_default15.trigger, ref, id, children: [
-            /* @__PURE__ */ jsx180(SelectPrimitive.Value, { className: style_module_default15.placeholder, placeholder }),
-            /* @__PURE__ */ jsx180(SelectPrimitive.Icon, { className: style_module_default15.openIcon, children: /* @__PURE__ */ jsx180(Icon, { name: "arrow-drop-down", fill: true, thick: true, size: "xs" }) })
+            /* @__PURE__ */ jsx181(SelectPrimitive.Value, { className: style_module_default15.placeholder, placeholder }),
+            /* @__PURE__ */ jsx181(SelectPrimitive.Icon, { className: style_module_default15.openIcon, children: /* @__PURE__ */ jsx181(Icon, { name: "arrow-drop-down", fill: true, thick: true, size: "xs" }) })
           ] }),
-          /* @__PURE__ */ jsx180(SelectContent, { ...contentProps })
+          /* @__PURE__ */ jsx181(SelectContent, { ...contentProps })
         ]
       }
     )
@@ -9658,9 +9748,9 @@ var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick
       onClick?.();
     },
     children: [
-      /* @__PURE__ */ jsx180(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx180(Paragraph, { size: 3, type: "normal", weight: "medium", children: text ?? value }) }),
-      icon && /* @__PURE__ */ jsx180(SelectPrimitive.Icon, { className: style_module_default15.icon, children: /* @__PURE__ */ jsx180(Icon, { size: "xs", ...icon }) }),
-      /* @__PURE__ */ jsx180(SelectPrimitive.ItemIndicator, { className: style_module_default15.itemIndicator, children: /* @__PURE__ */ jsx180(Icon, { fill: false, thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
+      /* @__PURE__ */ jsx181(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx181(Paragraph, { size: 3, type: "normal", weight: "medium", children: text ?? value }) }),
+      icon && /* @__PURE__ */ jsx181(SelectPrimitive.Icon, { className: style_module_default15.icon, children: /* @__PURE__ */ jsx181(Icon, { size: "xs", ...icon }) }),
+      /* @__PURE__ */ jsx181(SelectPrimitive.ItemIndicator, { className: style_module_default15.itemIndicator, children: /* @__PURE__ */ jsx181(Icon, { fill: false, thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
     ]
   }
 ), "SelectItem");
@@ -9680,11 +9770,11 @@ import { useState as useState5 } from "react";
 
 // src/hooks/collection.tsx
 import { createContext, useContext, useMemo } from "react";
-import { jsx as jsx181 } from "react/jsx-runtime";
+import { jsx as jsx182 } from "react/jsx-runtime";
 var CollectionContext = createContext(void 0);
 var CollectionProvider = /* @__PURE__ */ __name(({ value, onChangeValue, children }) => {
   const contextValue = useMemo(() => ({ value, onChangeValue }), [value, onChangeValue]);
-  return /* @__PURE__ */ jsx181(CollectionContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx182(CollectionContext.Provider, { value: contextValue, children });
 }, "CollectionProvider");
 var useCollectionContext = /* @__PURE__ */ __name(() => {
   const context = useContext(CollectionContext);
@@ -9696,9 +9786,9 @@ var useCollectionContext = /* @__PURE__ */ __name(() => {
 
 // src/components/List/index.tsx
 import clsx17 from "clsx";
-import { jsx as jsx182, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx183, jsxs as jsxs123 } from "react/jsx-runtime";
 var ListRoot = /* @__PURE__ */ __name(({ children, className, ...props }) => {
-  return /* @__PURE__ */ jsx182(CollectionProvider, { ...props, children: /* @__PURE__ */ jsx182("ul", { className: clsx17(style_module_default16.list, className), children }) });
+  return /* @__PURE__ */ jsx183(CollectionProvider, { ...props, children: /* @__PURE__ */ jsx183("ul", { className: clsx17(style_module_default16.list, className), children }) });
 }, "ListRoot");
 var Item3 = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => {
   const [isFocused, setIsFocused] = useState5(false);
@@ -9723,8 +9813,8 @@ var Item3 = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
         onChangeValue?.(value);
       },
       children: [
-        /* @__PURE__ */ jsx182(Paragraph, { size: 3, type: "normal", weight: "medium", children: text }),
-        (icon || isSelected) && /* @__PURE__ */ jsx182(Icon, { className: style_module_default16.icon, size: "xs", ...iconProps })
+        /* @__PURE__ */ jsx183(Paragraph, { size: 3, type: "normal", weight: "medium", children: text }),
+        (icon || isSelected) && /* @__PURE__ */ jsx183(Icon, { className: style_module_default16.icon, size: "xs", ...iconProps })
       ]
     }
   );
@@ -9741,6 +9831,8 @@ export {
   IconButton,
   Label,
   List,
+  Media,
+  MediaContextProvider,
   Paragraph,
   Popover,
   Radio,
@@ -9751,6 +9843,7 @@ export {
   Title2 as Title,
   Toaster,
   Tooltip,
+  Typography,
   arrayToStyleObject,
   colorKeys,
   getIconComponent,
@@ -9758,6 +9851,7 @@ export {
   iconMap,
   isEmptyObject,
   objectToArray,
+  rootMediaStyle,
   useToast
 };
 //# sourceMappingURL=index.mjs.map