@liner-fe/prism 1.12.17 → 1.12.19

package/lib/index.mjs

@@ -7385,24 +7385,26 @@ import clsx11 from "clsx";
 
 // src/components/_Label/style.module.scss
 var style_module_default9 = {
-  "label": "_label_tblhc_1",
-  "error": "_error_tblhc_14",
-  "primary": "_primary_tblhc_18",
-  "secondary": "_secondary_tblhc_29",
-  "top": "_top_tblhc_40",
-  "l": "_l_tblhc_1",
-  "offset-high": "_offset-high_tblhc_43",
-  "offset-medium": "_offset-medium_tblhc_46",
-  "offset-low": "_offset-low_tblhc_49",
-  "m": "_m_tblhc_52",
-  "s": "_s_tblhc_29",
-  "right": "_right_tblhc_71",
-  "disabled": "_disabled_tblhc_93"
+  "label-wrapper": "_label-wrapper_ayib1_1",
+  "label": "_label_ayib1_1",
+  "error": "_error_ayib1_21",
+  "primary": "_primary_ayib1_25",
+  "secondary": "_secondary_ayib1_36",
+  "top": "_top_ayib1_47",
+  "l": "_l_ayib1_1",
+  "offset-high": "_offset-high_ayib1_50",
+  "offset-medium": "_offset-medium_ayib1_53",
+  "offset-low": "_offset-low_ayib1_56",
+  "m": "_m_ayib1_59",
+  "s": "_s_ayib1_36",
+  "right": "_right_ayib1_78",
+  "disabled": "_disabled_ayib1_100",
+  "label-chip": "_label-chip_ayib1_105"
 };
 
 // src/components/_Label/index.tsx
 import { cva as cva7 } from "class-variance-authority";
-import { jsx as jsx147 } from "react/jsx-runtime";
+import { jsx as jsx147, jsxs as jsxs102 } from "react/jsx-runtime";
 var defaultLabelVariants = cva7(["lp-sys-typo-paragraph2-normal-medium", style_module_default9.label], {
   variants: {
     level: {
@@ -7440,25 +7442,29 @@ var Label = forwardRef5(
     offset = "medium",
     disabled = false,
     error = false,
+    chip,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx147(
-      LabelPrimitive.Root,
-      {
-        ref,
-        className: clsx11(defaultLabelVariants({ level, position, size, offset, disabled, error }), className),
-        ...props
-      }
-    );
+    return /* @__PURE__ */ jsxs102("div", { className: style_module_default9["label-wrapper"], children: [
+      /* @__PURE__ */ jsx147(
+        LabelPrimitive.Root,
+        {
+          ref,
+          className: clsx11(defaultLabelVariants({ level, position, size, offset, disabled, error }), className),
+          ...props
+        }
+      ),
+      chip && /* @__PURE__ */ jsx147(Caption, { size: 2, type: "normal", weight: "medium", className: style_module_default9["label-chip"], children: chip })
+    ] });
   }
 );
 
 // src/components/CheckBox/index.tsx
-import { Fragment as Fragment3, jsx as jsx148, jsxs as jsxs102 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx148, jsxs as jsxs103 } from "react/jsx-runtime";
 var Checkbox = forwardRef6(
   ({ className, label, description, ...props }, ref) => {
-    const CheckboxWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ jsxs102(Label, { position: "right", htmlFor: props.id, children: [
-      /* @__PURE__ */ jsxs102("div", { className: style_module_default8["label-wrapper"], children: [
+    const CheckboxWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ jsxs103(Label, { position: "right", htmlFor: props.id, children: [
+      /* @__PURE__ */ jsxs103("div", { className: style_module_default8["label-wrapper"], children: [
         label,
         /* @__PURE__ */ jsx148(Paragraph, { className: style_module_default8.description, size: 3, type: "normal", weight: "regular", children: description })
       ] }),
@@ -7483,13 +7489,13 @@ var style_module_default10 = {
 };
 
 // src/components/Radio/index.tsx
-import { Fragment as Fragment4, jsx as jsx149, jsxs as jsxs103 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx149, jsxs as jsxs104 } from "react/jsx-runtime";
 var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx149("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx149("circle", { cx: "5", cy: "5", r: "5", fill: "#313133" }) }), "RadioIndicator");
 var RadioRoot = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx149(RadioGroupPrimitive.Root, { className: clsx13(style_module_default10.radio, className), ...props }));
 var RadioItem = forwardRef7(
   ({ className, label, description, ...props }, ref) => {
-    const RadioItemWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ jsxs103(Label, { position: "right", htmlFor: props.id, children: [
-      /* @__PURE__ */ jsxs103("div", { className: style_module_default10["label-wrapper"], children: [
+    const RadioItemWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ jsxs104(Label, { position: "right", htmlFor: props.id, children: [
+      /* @__PURE__ */ jsxs104("div", { className: style_module_default10["label-wrapper"], children: [
         label,
         /* @__PURE__ */ jsx149(Paragraph, { className: style_module_default10.description, size: 3, type: "normal", weight: "regular", children: description })
       ] }),
@@ -7536,7 +7542,7 @@ var style_module_default11 = {
 // src/components/Textfield/index.tsx
 import { cva as cva8 } from "class-variance-authority";
 import clsx14 from "clsx";
-import { Fragment as Fragment5, jsx as jsx150, jsxs as jsxs104 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx150, jsxs as jsxs105 } from "react/jsx-runtime";
 var defaultTextfieldVariants = cva8(style_module_default11.textfield, {
   variants: {
     color: {
@@ -7595,7 +7601,7 @@ var Textfield = forwardRef8((props, ref) => {
     }
   }, "handleDeidentify");
   useImperativeHandle(ref, () => inputRef.current);
-  return /* @__PURE__ */ jsxs104("div", { className: style_module_default11["textfield-container"], children: [
+  return /* @__PURE__ */ jsxs105("div", { className: style_module_default11["textfield-container"], children: [
     /* @__PURE__ */ jsx150(
       "div",
       {
@@ -7604,7 +7610,7 @@ var Textfield = forwardRef8((props, ref) => {
           [style_module_default11["label-out-textfield"]]: labelType === "out"
         }),
         onClick: handleTextfieldClick,
-        children: /* @__PURE__ */ jsxs104("div", { className: style_module_default11["input-wrapper"], children: [
+        children: /* @__PURE__ */ jsxs105("div", { className: style_module_default11["input-wrapper"], children: [
           /* @__PURE__ */ jsx150(
             "input",
             {
@@ -7632,7 +7638,7 @@ var Textfield = forwardRef8((props, ref) => {
               children: labelText
             }
           ),
-          /* @__PURE__ */ jsxs104("div", { className: style_module_default11["input-action-buttons"], children: [
+          /* @__PURE__ */ jsxs105("div", { className: style_module_default11["input-action-buttons"], children: [
             textfieldValue && !disabled && /* @__PURE__ */ jsx150(
               IconButton,
               {
@@ -7664,12 +7670,12 @@ var Textfield = forwardRef8((props, ref) => {
         ] })
       }
     ),
-    displayFooter && /* @__PURE__ */ jsxs104("div", { className: style_module_default11.footer, children: [
-      /* @__PURE__ */ jsx150("div", { className: style_module_default11["error-wrapper"], children: error && /* @__PURE__ */ jsxs104(Fragment5, { children: [
+    displayFooter && /* @__PURE__ */ jsxs105("div", { className: style_module_default11.footer, children: [
+      /* @__PURE__ */ jsx150("div", { className: style_module_default11["error-wrapper"], children: error && /* @__PURE__ */ jsxs105(Fragment5, { children: [
         /* @__PURE__ */ jsx150(Icon, { name: "exclamationmark-fill", fill: true, thick: true, size: "xs", type: "function-label-negative" }),
         /* @__PURE__ */ jsx150(Caption, { size: 3, type: "normal", weight: "regular", className: style_module_default11["error-message"], children: error })
       ] }) }),
-      maxCharacter && /* @__PURE__ */ jsxs104(Caption, { className: style_module_default11.character, size: 3, type: "normal", weight: "regular", children: [
+      maxCharacter && /* @__PURE__ */ jsxs105(Caption, { className: style_module_default11.character, size: 3, type: "normal", weight: "regular", children: [
         isControlled ? controlledValue.length : value.length,
         "/",
         maxCharacter
@@ -7677,6 +7683,223 @@ var Textfield = forwardRef8((props, ref) => {
     ] })
   ] });
 });
+
+// src/components/Slider/index.tsx
+import { forwardRef as forwardRef9 } from "react";
+
+// src/components/Slider/style.module.scss
+var style_module_default12 = {
+  "label": "_label_b1fp2_1",
+  "optionText": "_optionText_b1fp2_6",
+  "slider-wrapper": "_slider-wrapper_b1fp2_10",
+  "slider-option-wrapper": "_slider-option-wrapper_b1fp2_16",
+  "slider-root": "_slider-root_b1fp2_22",
+  "slider-track": "_slider-track_b1fp2_33",
+  "slider-range": "_slider-range_b1fp2_46",
+  "slider-thumb": "_slider-thumb_b1fp2_53",
+  "slider-step": "_slider-step_b1fp2_71"
+};
+
+// src/components/Slider/index.tsx
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { Fragment as Fragment6, jsx as jsx151, jsxs as jsxs106 } from "react/jsx-runtime";
+var SliderRoot = forwardRef9((props, ref) => {
+  const { label, tooltip, rangeLeft, rangeRight, min, max, step = 50, ...rest } = props;
+  return /* @__PURE__ */ jsx151(Fragment6, { children: /* @__PURE__ */ jsxs106(Tooltip.Provider, { children: [
+    /* @__PURE__ */ jsx151(Label, { level: "secondary", size: "m", offset: "high", className: style_module_default12.label, children: label }),
+    /* @__PURE__ */ jsxs106("div", { className: style_module_default12["slider-wrapper"], children: [
+      /* @__PURE__ */ jsxs106("div", { className: style_module_default12["slider-option-wrapper"], children: [
+        /* @__PURE__ */ jsx151(Icon, { name: rangeLeft.icon, size: "xs" }),
+        /* @__PURE__ */ jsx151(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default12.optionText, children: rangeLeft.text })
+      ] }),
+      /* @__PURE__ */ jsxs106(SliderPrimitive.Root, { ...rest, step, className: style_module_default12["slider-root"], ref, children: [
+        /* @__PURE__ */ jsxs106(SliderPrimitive.Track, { className: style_module_default12["slider-track"], children: [
+          Array.from({ length: 100 / step + 1 }).map((_, index) => /* @__PURE__ */ jsx151("span", { className: style_module_default12["slider-step"] }, index)),
+          /* @__PURE__ */ jsx151(SliderPrimitive.Range, { className: style_module_default12["slider-range"] })
+        ] }),
+        /* @__PURE__ */ jsxs106(Tooltip, { children: [
+          /* @__PURE__ */ jsx151(Tooltip.Trigger, { by: /* @__PURE__ */ jsx151(SliderPrimitive.Thumb, { className: style_module_default12["slider-thumb"] }) }),
+          /* @__PURE__ */ jsx151(Tooltip.Content, { description: tooltip })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs106("div", { className: style_module_default12["slider-option-wrapper"], children: [
+        /* @__PURE__ */ jsx151(Icon, { name: rangeRight.icon, size: "xs" }),
+        /* @__PURE__ */ jsx151(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default12.optionText, children: rangeRight.text })
+      ] })
+    ] })
+  ] }) });
+});
+var Slider = Object.assign(SliderRoot, {});
+
+// src/components/Select/index.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+
+// src/components/Select/style.module.scss
+var style_module_default13 = {
+  "select-label": "_select-label_105lv_101",
+  "trigger": "_trigger_105lv_105",
+  "placeholder": "_placeholder_105lv_137",
+  "openIcon": "_openIcon_105lv_141",
+  "desktop-content": "_desktop-content_105lv_157",
+  "slide-up": "_slide-up_105lv_218",
+  "header": "_header_105lv_177",
+  "mobile-overlay": "_mobile-overlay_105lv_185",
+  "mobile-content": "_mobile-content_105lv_201",
+  "slide-down": "_slide-down_105lv_222",
+  "slide-in-right": "_slide-in-right_105lv_226",
+  "slide-out-right": "_slide-out-right_105lv_230",
+  "mobile-viewport": "_mobile-viewport_105lv_235",
+  "scrollAreaRoot": "_scrollAreaRoot_105lv_239",
+  "scrollAreaViewport": "_scrollAreaViewport_105lv_244",
+  "scrollAreaScrollbar": "_scrollAreaScrollbar_105lv_251",
+  "scrollAreaThumb": "_scrollAreaThumb_105lv_256",
+  "desktop-label": "_desktop-label_105lv_261",
+  "mobile-label": "_mobile-label_105lv_266",
+  "item": "_item_105lv_274",
+  "icon": "_icon_105lv_302",
+  "itemIndicator": "_itemIndicator_105lv_308"
+};
+
+// src/components/Select/index.tsx
+import { forwardRef as forwardRef10, useEffect as useEffect3, useState as useState5 } from "react";
+import clsx15 from "clsx";
+
+// src/hooks/media.ts
+import { useEffect as useEffect2, useState as useState4 } from "react";
+var useMediaQuery = /* @__PURE__ */ __name((query) => {
+  const [matches, setMatches] = useState4();
+  useEffect2(() => {
+    const mediaQuery = window.matchMedia(query);
+    const handleChange = /* @__PURE__ */ __name(() => setMatches(mediaQuery.matches), "handleChange");
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [query]);
+  return matches;
+}, "useMediaQuery");
+
+// src/components/Select/index.tsx
+import { Fragment as Fragment7, jsx as jsx152, jsxs as jsxs107 } from "react/jsx-runtime";
+var SelectRoot = forwardRef10((props, ref) => {
+  const {
+    id,
+    placeholder,
+    label,
+    labelChip,
+    listLabel,
+    popSide = "top",
+    sideOffset = 6,
+    children,
+    open = false,
+    onOpenChange,
+    isOverlay = false,
+    openDirection = "slide-right",
+    ...rest
+  } = props;
+  const [isOpen, setIsOpen] = useState5(true);
+  const [isClosing, setIsClosing] = useState5(false);
+  const [isBack, setIsBack] = useState5(false);
+  const isMobile = useMediaQuery("(max-width: 600px)");
+  useEffect3(() => {
+    setIsOpen(open);
+  }, [open]);
+  return /* @__PURE__ */ jsxs107(Fragment7, { children: [
+    /* @__PURE__ */ jsx152(Label, { className: style_module_default13["select-label"], level: "secondary", size: "m", offset: "low", htmlFor: id, chip: labelChip, children: label }),
+    /* @__PURE__ */ jsxs107(
+      SelectPrimitive.Root,
+      {
+        ...rest,
+        open: isOpen,
+        onOpenChange: (open2) => {
+          onOpenChange?.(open2);
+          setIsOpen(open2);
+        },
+        children: [
+          /* @__PURE__ */ jsxs107(SelectPrimitive.Trigger, { className: style_module_default13.trigger, ref, id, children: [
+            /* @__PURE__ */ jsx152(SelectPrimitive.Value, { className: style_module_default13.placeholder, placeholder }),
+            /* @__PURE__ */ jsx152(SelectPrimitive.Icon, { className: style_module_default13.openIcon, children: /* @__PURE__ */ jsx152(Icon, { name: "arrow-drop-down", fill: true, thick: true, size: "xs" }) })
+          ] }),
+          /* @__PURE__ */ jsx152(SelectPrimitive.Portal, { children: isMobile ? /* @__PURE__ */ jsxs107(Fragment7, { children: [
+            /* @__PURE__ */ jsx152(
+              SelectPrimitive.Content,
+              {
+                className: clsx15(style_module_default13["mobile-content"], {
+                  [style_module_default13["slide-in-right"]]: openDirection === "slide-right",
+                  [style_module_default13["slide-up"]]: openDirection === "slide-up",
+                  [style_module_default13["slide-out-right"]]: isBack,
+                  [style_module_default13["slide-down"]]: isClosing
+                }),
+                avoidCollisions: false,
+                children: /* @__PURE__ */ jsxs107(ScrollArea.Root, { className: style_module_default13.scrollAreaRoot, type: "scroll", children: [
+                  /* @__PURE__ */ jsx152(SelectPrimitive.Viewport, { asChild: true, children: /* @__PURE__ */ jsxs107(SelectPrimitive.Group, { children: [
+                    /* @__PURE__ */ jsxs107("div", { className: style_module_default13.header, children: [
+                      /* @__PURE__ */ jsx152(
+                        IconButton,
+                        {
+                          name: "arrow-back",
+                          level: "tertiary",
+                          onClick: () => {
+                            setIsBack(true);
+                            setTimeout(() => {
+                              setIsOpen(false);
+                              setIsBack(false);
+                            }, 250);
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx152(SelectPrimitive.Label, { asChild: true, children: /* @__PURE__ */ jsx152(Label, { className: style_module_default13["mobile-label"], level: "primary", size: "m", offset: "low", children: listLabel }) }),
+                      /* @__PURE__ */ jsx152(
+                        IconButton,
+                        {
+                          name: "close",
+                          level: "tertiary",
+                          onClick: () => {
+                            setIsClosing(true);
+                            setTimeout(() => {
+                              setIsOpen(false);
+                              setIsClosing(false);
+                            }, 250);
+                          }
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx152(ScrollArea.Viewport, { className: style_module_default13["mobile-viewport"], children })
+                  ] }) }),
+                  /* @__PURE__ */ jsx152(ScrollArea.Scrollbar, { className: style_module_default13.scrollAreaScrollbar, orientation: "vertical", children: /* @__PURE__ */ jsx152(ScrollArea.Thumb, { className: style_module_default13.scrollAreaThumb }) })
+                ] })
+              }
+            ),
+            isOverlay && /* @__PURE__ */ jsx152("div", { className: style_module_default13["mobile-overlay"] })
+          ] }) : /* @__PURE__ */ jsx152(
+            SelectPrimitive.Content,
+            {
+              className: style_module_default13["desktop-content"],
+              position: "popper",
+              side: popSide,
+              sideOffset,
+              avoidCollisions: false,
+              children: /* @__PURE__ */ jsxs107(ScrollArea.Root, { className: style_module_default13.scrollAreaRoot, type: "scroll", children: [
+                /* @__PURE__ */ jsx152(SelectPrimitive.Viewport, { asChild: true, children: /* @__PURE__ */ jsx152(ScrollArea.Viewport, { className: style_module_default13.scrollAreaViewport, children: /* @__PURE__ */ jsxs107(SelectPrimitive.Group, { children: [
+                  /* @__PURE__ */ jsx152(SelectPrimitive.Label, { asChild: true, children: /* @__PURE__ */ jsx152(Label, { className: style_module_default13["desktop-label"], level: "secondary", size: "m", offset: "low", children: listLabel }) }),
+                  children
+                ] }) }) }),
+                /* @__PURE__ */ jsx152(ScrollArea.Scrollbar, { className: style_module_default13.scrollAreaScrollbar, orientation: "vertical", children: /* @__PURE__ */ jsx152(ScrollArea.Thumb, { className: style_module_default13.scrollAreaThumb }) })
+              ] })
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+});
+var SelectItem = /* @__PURE__ */ __name(({ value, disabled, icon }) => /* @__PURE__ */ jsxs107(SelectPrimitive.Item, { className: style_module_default13.item, value, disabled, children: [
+  /* @__PURE__ */ jsx152(SelectPrimitive.ItemText, { className: "item", children: /* @__PURE__ */ jsx152(Paragraph, { size: 3, type: "normal", weight: "medium", children: value }) }),
+  icon && /* @__PURE__ */ jsx152(SelectPrimitive.Icon, { className: style_module_default13.icon, children: /* @__PURE__ */ jsx152(Icon, { size: "xs", ...icon }) }),
+  /* @__PURE__ */ jsx152(SelectPrimitive.ItemIndicator, { className: style_module_default13.itemIndicator, children: /* @__PURE__ */ jsx152(Icon, { fill: false, thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
+] }), "SelectItem");
+var Select = Object.assign(SelectRoot, {
+  Item: SelectItem
+});
 export {
   Button,
   Caption,
@@ -7691,6 +7914,8 @@ export {
   Paragraph,
   Popover,
   Radio,
+  Select,
+  Slider,
   TextButton,
   Textfield,
   Title2 as Title,