@liner-fe/prism 2.6.3 → 2.6.5

package/lib/index.css

@@ -1372,19 +1372,25 @@
 }
 
 /* esbuild-sass-plugin:css-chunk:src/components/Textfield/style.module.scss */
-._textfield-container_15lqz_1 {
+._textfield-container_ogykf_1 {
   display: flex;
   flex-direction: column;
   gap: var(--lp-sys-gap-positive-200);
   width: 100%;
 }
-._textfield-container_15lqz_1:has(:disabled) {
-  cursor: not-allowed;
+._textfield-container_ogykf_1:hover > ._textfield_ogykf_1 {
+  outline: 1px solid var(--neutral-border-opaque-strong);
 }
-._textfield-container_15lqz_1:has(:disabled) * {
+._textfield-container_ogykf_1[data-disabled=true] {
   cursor: not-allowed;
 }
-._textfield_15lqz_1 {
+._textfield-container_ogykf_1[data-disabled=true] > * {
+  cursor: not-allowed !important;
+}
+._textfield-container_ogykf_1[data-disabled=true] > ._textfield_ogykf_1 {
+  outline: 1px solid var(--neutral-border-opaque-normal) !important;
+}
+._textfield_ogykf_1 {
   box-sizing: border-box;
   position: relative;
   width: 100%;
@@ -1395,46 +1401,53 @@
   cursor: text;
   transition: ease-out all 0.1s;
 }
-._textfield_15lqz_1:hover {
-  outline: 1px solid var(--neutral-border-opaque-strong);
-}
-._textfield_15lqz_1:focus-within {
+._textfield_ogykf_1:focus-within {
   outline: 2px solid var(--neutral-border-opaque-strong);
 }
-._textfield_15lqz_1:has(:disabled) {
+._textfield_ogykf_1:disabled {
   outline: 1px solid var(--neutral-border-opaque-subtle);
   cursor: not-allowed;
 }
-._textfield_15lqz_1:has(:disabled) > ._label_15lqz_35 {
+._textfield_ogykf_1:disabled > ._label_ogykf_38 {
   color: var(--neutral-label-tertiary);
   cursor: not-allowed;
 }
-._textfield_15lqz_1._label-out-textfield_15lqz_39 {
+._textfield_ogykf_1._label-out-textfield_ogykf_42 {
   height: 52px;
   margin-top: 24px;
 }
-._textfield_15lqz_1._white_15lqz_43 {
+._textfield_ogykf_1._white_ogykf_46 {
   background: var(--neutral-container-lowest);
 }
-._textfield_15lqz_1._gray_15lqz_46 {
+._textfield_ogykf_1._gray_ogykf_49 {
   background: var(--neutral-container-mid);
 }
-._label_15lqz_35 {
+._label_ogykf_38 {
   position: absolute;
   left: 0;
   top: 0;
   color: var(--neutral-label-secondary);
   cursor: text;
 }
-._label-in_15lqz_58 {
+._label-in_ogykf_61 {
   transform-origin: left top;
   transform: translate(var(--lp-sys-padding-component-400), 100%) scale(1);
   transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
 }
-._label-out_15lqz_39 {
+._label-out_ogykf_42 {
   transform: translateY(-150%);
 }
-._input-wrapper_15lqz_68 {
+._label-visually-hidden_ogykf_71 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  margin: -1px;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+._input-wrapper_ogykf_82 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1442,7 +1455,7 @@
   height: 100%;
   gap: var(--lp-sys-gap-positive-300);
 }
-._input_15lqz_68 {
+._input_ogykf_82 {
   background: transparent;
   border: none;
   outline: none;
@@ -1456,68 +1469,68 @@
   font-weight: var(--lp-pri-font-weight-400);
   line-height: 130%;
 }
-._input_15lqz_68:focus + ._label-in_15lqz_58,
-._input_15lqz_68:not(:placeholder-shown) + ._label-in_15lqz_58 {
+._input_ogykf_82:focus + ._label-in_ogykf_61,
+._input_ogykf_82:not(:placeholder-shown) + ._label-in_ogykf_61 {
   transform: translate(var(--lp-sys-padding-component-400), 60%) scale(0.8);
   font-weight: var(--lp-pri-font-weight-500);
   color: var(--neutral-label-primary);
 }
-._input_15lqz_68::placeholder {
+._input_ogykf_82::placeholder {
   color: var(--neutral-label-tertiary);
   font-size: var(--lp-pri-font-size-15);
   font-style: normal;
   font-weight: var(--lp-pri-font-weight-400);
   line-height: 130%;
 }
-._label-out-input_15lqz_104 {
+._label-out-input_ogykf_118 {
   transform: translateY(0);
 }
-._input-action-buttons_15lqz_108 {
+._input-action-buttons_ogykf_122 {
   display: flex;
   align-items: center;
   gap: var(--lp-sys-gap-positive-50);
 }
-._action-button_15lqz_114 {
+._action-button_ogykf_128 {
   margin-right: var(--lp-sys-padding-component-100);
 }
-._action-button_15lqz_114 > svg > circle {
+._action-button_ogykf_128 > svg > circle {
   fill: var(--neutral-label-secondary);
 }
-._error_15lqz_121 {
+._error_ogykf_135 {
   display: block;
   outline: 2px solid var(--function-label-negative);
 }
-._error_15lqz_121 > ._input_15lqz_68 + ._label_15lqz_35 {
+._error_ogykf_135 > ._input_ogykf_82 + ._label_ogykf_38 {
   color: var(--function-label-negative);
 }
-._error_15lqz_121:hover {
+._error_ogykf_135:hover {
   outline: 2px solid var(--function-label-negative);
 }
-._error_15lqz_121:focus-within {
+._error_ogykf_135:focus-within {
   outline: 2px solid var(--function-label-negative);
 }
-._error_15lqz_121:focus-within > ._label_15lqz_35 {
+._error_ogykf_135:focus-within > ._label_ogykf_38 {
   color: var(--function-label-negative);
 }
-._error_15lqz_121 > div > ._error-message_15lqz_137 {
+._error_ogykf_135 > div > ._error-message_ogykf_151 {
   color: var(--function-label-negative);
 }
-._error-wrapper_15lqz_141 {
+._error-wrapper_ogykf_155 {
   display: flex;
   align-items: flex-end;
   gap: 4px;
 }
-._error-wrapper_15lqz_141 > ._error-message_15lqz_137 {
+._error-wrapper_ogykf_155 > ._error-message_ogykf_151 {
   color: var(--function-label-negative);
 }
-._footer_15lqz_150 {
+._footer_ogykf_164 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
   min-height: var(--lp-sys-icon-size-xs);
 }
-._character_15lqz_158 {
+._character_ogykf_172 {
   color: var(--neutral-label-secondary);
 }
 

package/lib/index.d.ts

@@ -1,6 +1,6 @@
-import { SystemKeys, TypographyCaptionPrefix, TypographyParagraphPrefix, TypographyHeadingPrefix, TypographyTitlePrefix, TypographyDisplayPrefix } from '@liner-fe/design-token-primitive';
 import * as react from 'react';
-import react__default, { SVGProps, ButtonHTMLAttributes, RefAttributes, HTMLAttributes, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, ComponentProps, LiHTMLAttributes, MouseEventHandler } from 'react';
+import react__default, { ComponentType, ForwardRefExoticComponent, RefAttributes, SVGProps, ButtonHTMLAttributes, HTMLAttributes, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, ComponentProps, LiHTMLAttributes, MouseEventHandler } from 'react';
+import { SystemKeys, TypographyCaptionPrefix, TypographyParagraphPrefix, TypographyHeadingPrefix, TypographyTitlePrefix, TypographyDisplayPrefix } from '@liner-fe/design-token-primitive';
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -20,7 +20,7 @@ interface IconComponentProps {
     thick?: boolean;
     size?: 16 | 20 | 24 | 32 | 40;
 }
-type IconComponent = (props: IconComponentProps) => JSX.Element | undefined;
+type IconComponent = ComponentType<IconComponentProps> | ForwardRefExoticComponent<IconComponentProps & RefAttributes<SVGSVGElement>>;
 type IconMapType = typeof iconMap;
 type IconKey = 'close-fill' | 'more' | 'liner' | 'liner-variation' | 'person-fill' | 'list' | 'history' | 'start' | 'end' | 'paperclip' | 'share' | 'sign-out' | 'check-mark-fill' | 'exclamationmark-fill' | 'plus' | 'minus' | 'new-thread' | 'move' | 'search' | 'globe' | 'graduationcap' | 'palette' | 'download' | 'regenerate' | 'credit' | 'feedback' | 'tune' | 'arrow-back' | 'arrow-forward' | 'arrow-up' | 'arrow-down' | 'menu' | 'document-warning' | 'arrow-right' | 'arrow-left' | 'step' | 'arrow-turn' | 'power' | 'desktop' | 'desktop-on-cursor' | 'view-list' | 'chart-bar' | 'chart-line-uptrend' | 'folder' | 'person' | 'trash' | 'pencil' | 'copy' | 'book' | 'description' | 'bookmark' | 'photo' | 'camera' | 'bolt' | 'question-message' | 'books' | 'balance' | 'folder-add' | 'document' | 'person-add' | 'send' | 'check-mark' | 'exclamationmark' | 'close' | 'lock' | 'ai' | 'stack' | 'summarize' | 'memo' | 'highlighter' | 'creditcard' | 'speaker' | 'light' | 'document-add' | 'thumb-up' | 'thumb-down' | 'shield' | 'home' | 'visibility' | 'visibility-off' | 'magic-wand' | 'magic-pencil' | 'bulb-exclamtionmark' | 'bulb' | 'paraphase' | 'make-easy' | 'translate' | 'Info' | 'folder-open' | 'highlight-edit' | 'apple' | 'android' | 'twitter' | 'facebook' | 'google' | 'paraphrase' | 'car' | 'airplane' | 'rocket' | 'source' | 'setting' | 'extend' | 'shorten' | 'sun' | 'moon' | 'fire' | 'arrow-upward' | 'arrow-downward' | 'light-mode' | 'dark-mode' | 'target' | 'question-box' | 'new-tab' | 'example' | 'quote' | 'document-check' | 'block' | 'bookmark-cancel' | 'arrow-up-right' | 'arrow-down-left' | 'arrow-up-left' | 'email' | 'filter' | 'timer' | 'play-button' | 'text-select' | 'arrow-drop-down' | 'bell' | 'secret-mode' | 'add-clock' | 'clock' | 'arrow-backward' | 'link' | 'sheet-export' | 'shield-usage' | 'essay' | 'spinner' | 'drop-down' | 'drop-up' | 'arrow-drop-right' | 'arrow-up-down' | 'google-export' | 'shield-person' | 'formal-bag' | 'casual-shoe' | 'undo' | 'redo' | 'expand' | 'verification-badge' | 'volume-up' | 'volume' | 'folder-open-share' | 'folder-share' | 'report' | 'mindmap' | 'flowchart' | 'show-all' | 'hide-all' | 'brain' | 'zoom-in' | 'zoom-out' | 'focus' | 'help' | 'paragraph' | 'retry' | 'add-to-folder' | 'remove-from-folder' | 'move-to-folder' | 'new-thread-folder' | 'chrome' | 'new-chrome-extension' | 'mobile' | 'google-color' | 'stop' | 'microscope' | 'members' | 'teams' | 'literature-review' | 'expand-close';
 
@@ -65,7 +65,7 @@ interface IconProps extends VariantProps<typeof iconVariants>, Omit<SVGProps<SVG
     fill?: boolean;
     className?: string;
 }
-declare const Icon: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const Icon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
 
 declare const defaultButtonVariants: (props?: ({
     level?: "primary" | "secondary" | "tertiary" | "quaternary" | "quinary" | "negative" | "static" | "inverse-static" | undefined;
@@ -396,7 +396,7 @@ declare const defaultTextfieldVariants: (props?: ({
     className?: cva.ClassValue;
 })) | undefined) => string;
 type TextfieldButtonProps = Omit<DefaultButtonProps<FillType>, 'size'>;
-type TextfieldLabelType = 'in' | 'out';
+type TextfieldLabelType = 'in' | 'out' | 'visually-hidden';
 interface TextfieldLabelProps {
     text: string;
     type?: TextfieldLabelType;

package/lib/index.js

@@ -13687,7 +13687,7 @@ var arrayToStyleObject = /* @__PURE__ */ __name((colorKeys, style, prefix) => co
 var isEmptyObject = /* @__PURE__ */ __name((obj) => Object.getOwnPropertyNames(obj).length === 0, "isEmptyObject");
 
 // src/components/Button/index.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/components/Button/style.module.scss
 var style_module_default = {
@@ -13725,6 +13725,7 @@ var import_clsx2 = __toESM(require("clsx"));
 // src/components/Icon/index.tsx
 var import_cva = require("cva");
 var import_clsx = __toESM(require("clsx"));
+var import_react = require("react");
 
 // src/components/Icon/style.module.scss
 var style_module_default2 = {
@@ -13903,7 +13904,7 @@ var iconVariants = (0, import_cva.cva)({
   }
 });
 var getIconComponent = /* @__PURE__ */ __name((iconKey, map) => map[iconKey], "getIconComponent");
-var Icon = /* @__PURE__ */ __name((props) => {
+var Icon = (0, import_react.forwardRef)((props, ref) => {
   const {
     name,
     type = "neutral-label-primary",
@@ -13916,17 +13917,19 @@ var Icon = /* @__PURE__ */ __name((props) => {
   } = props;
   const IconComponent = getIconComponent(name, iconMap);
   const iconSize = iconSizeMap[size4];
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
-    IconComponent,
-    {
-      ...rest,
-      className: (0, import_clsx.default)(iconVariants({ type, fillType }), className),
-      size: iconSize,
-      thick,
-      fill
-    }
-  );
-}, "Icon");
+  const iconProps = {
+    ...rest,
+    className: (0, import_clsx.default)(iconVariants({ type, fillType }), className),
+    size: iconSize,
+    thick,
+    fill
+  };
+  const isForwardRef = "$$typeof" in IconComponent && IconComponent.$$typeof === Symbol.for("react.forward_ref");
+  if (isForwardRef && ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(IconComponent, { ...iconProps, ref });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(IconComponent, { ...iconProps });
+});
 
 // src/components/Loading/style.module.scss
 var style_module_default3 = {
@@ -14125,7 +14128,7 @@ var defaultButtonChildrenVariants = (0, import_cva3.cva)({
     }
   }
 });
-var DefaultButton = (0, import_react.forwardRef)(
+var DefaultButton = (0, import_react2.forwardRef)(
   ({
     asChild = false,
     level = "primary",
@@ -14155,9 +14158,9 @@ var DefaultButton = (0, import_react.forwardRef)(
       !!rightIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Icon, { ...iconProps, ...rightIcon })
     ] }), "renderContent");
     if (asChild) {
-      const parent = import_react.Children.only(children);
+      const parent = import_react2.Children.only(children);
       const newChildren = parent.props.children;
-      const ParentClone = (0, import_react.cloneElement)(
+      const ParentClone = (0, import_react2.cloneElement)(
         parent,
         {
           ...rest,
@@ -14183,7 +14186,7 @@ var DefaultButton = (0, import_react.forwardRef)(
   }
 );
 DefaultButton.displayName = "DefaultButton";
-var Button = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(DefaultButton, { ...props, ref }));
+var Button = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(DefaultButton, { ...props, ref }));
 Button.displayName = "Button";
 
 // src/hooks/useToast.ts
@@ -14274,7 +14277,7 @@ function useComposedRefs(...refs) {
 __name(useComposedRefs, "useComposedRefs");
 
 // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
-var import_react2 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 
 // ../../node_modules/@radix-ui/react-context/dist/index.mjs
 var React2 = __toESM(require("react"), 1);
@@ -14435,7 +14438,7 @@ __name(getElementRef, "getElementRef");
 
 // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
 var import_jsx_runtime185 = require("react/jsx-runtime");
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 var import_jsx_runtime186 = require("react/jsx-runtime");
 function createCollection(name) {
   const PROVIDER_NAME2 = name + "CollectionProvider";
@@ -14446,14 +14449,14 @@ function createCollection(name) {
   );
   const CollectionProvider2 = /* @__PURE__ */ __name((props) => {
     const { scope, children } = props;
-    const ref = import_react2.default.useRef(null);
-    const itemMap = import_react2.default.useRef(/* @__PURE__ */ new Map()).current;
+    const ref = import_react3.default.useRef(null);
+    const itemMap = import_react3.default.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   }, "CollectionProvider");
   CollectionProvider2.displayName = PROVIDER_NAME2;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
-  const CollectionSlot = import_react2.default.forwardRef(
+  const CollectionSlot = import_react3.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext2(COLLECTION_SLOT_NAME, scope);
@@ -14465,13 +14468,13 @@ function createCollection(name) {
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
-  const CollectionItemSlot = import_react2.default.forwardRef(
+  const CollectionItemSlot = import_react3.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = import_react2.default.useRef(null);
+      const ref = import_react3.default.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext2(ITEM_SLOT_NAME, scope);
-      import_react2.default.useEffect(() => {
+      import_react3.default.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
@@ -14481,7 +14484,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext2(name + "CollectionConsumer", scope);
-    const getItems = import_react2.default.useCallback(() => {
+    const getItems = import_react3.default.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -15671,11 +15674,11 @@ var style_module_default4 = {
 };
 
 // src/components/Toast/index.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/Typography/Set/Paragraph.tsx
 var import_clsx3 = __toESM(require("clsx"));
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/Typography/utils.ts
 var import_cva4 = require("cva");
@@ -15718,7 +15721,7 @@ var colorVariants = (0, import_cva4.cva)({
 
 // src/components/Typography/Set/Paragraph.tsx
 var import_jsx_runtime192 = require("react/jsx-runtime");
-var Paragraph = (0, import_react4.forwardRef)(
+var Paragraph = (0, import_react5.forwardRef)(
   ({
     size: size4,
     type,
@@ -16225,26 +16228,26 @@ var loading_default = {
 // src/components/Toast/index.tsx
 var import_constants2 = require("date-fns/constants");
 var import_jsx_runtime193 = require("react/jsx-runtime");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var Toaster = /* @__PURE__ */ __name(() => {
   const list = (0, import_recoil2.useRecoilValue)(toastAtom);
   return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(Provider, { children: [
-    list.map((props) => /* @__PURE__ */ (0, import_react6.createElement)(SingleToast, { ...props, key: props.toastId })),
+    list.map((props) => /* @__PURE__ */ (0, import_react7.createElement)(SingleToast, { ...props, key: props.toastId })),
     /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Viewport, { className: style_module_default4.ToastViewport })
   ] });
 }, "Toaster");
 var SingleToast = /* @__PURE__ */ __name((props) => {
   const setToast = (0, import_recoil2.useSetRecoilState)(toastAtom);
-  const timerRef = (0, import_react5.useRef)();
+  const timerRef = (0, import_react6.useRef)();
   const { message, icon, button, timer, toastId, isLoading } = props;
-  const [isOpen, setIsOpen] = (0, import_react5.useState)(true);
-  const lottieRef = (0, import_react5.useRef)(null);
-  const toastSuccess = (0, import_react5.useRef)(false);
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(true);
+  const lottieRef = (0, import_react6.useRef)(null);
+  const toastSuccess = (0, import_react6.useRef)(false);
   const removeToast = /* @__PURE__ */ __name(() => {
     setToast((prev) => prev.filter((toast) => toast.toastId !== toastId));
     timerRef.current && clearTimeout(timerRef.current);
   }, "removeToast");
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (isLoading && !toastSuccess.current) {
       if (lottieRef.current) {
         import_lottie_web.default.loadAnimation({
@@ -16310,10 +16313,10 @@ var SingleToast = /* @__PURE__ */ __name((props) => {
 }, "SingleToast");
 
 // src/components/Typography/Set/Heading.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_clsx4 = __toESM(require("clsx"));
 var import_jsx_runtime194 = require("react/jsx-runtime");
-var Heading = (0, import_react7.forwardRef)(
+var Heading = (0, import_react8.forwardRef)(
   ({ size: size4, children, type, className, color = "neutral-label-primary", as, ...rest }, ref) => {
     const Element2 = as || `h${size4}`;
     return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
@@ -16334,9 +16337,9 @@ var Heading = (0, import_react7.forwardRef)(
 
 // src/components/Typography/Set/Caption.tsx
 var import_clsx5 = __toESM(require("clsx"));
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime195 = require("react/jsx-runtime");
-var Caption = (0, import_react8.forwardRef)(
+var Caption = (0, import_react9.forwardRef)(
   ({
     children,
     size: size4,
@@ -16366,10 +16369,10 @@ var Caption = (0, import_react8.forwardRef)(
 Caption.displayName = "Caption";
 
 // src/components/Typography/Set/Title.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_clsx6 = __toESM(require("clsx"));
 var import_jsx_runtime196 = require("react/jsx-runtime");
-var Title2 = (0, import_react9.forwardRef)(
+var Title2 = (0, import_react10.forwardRef)(
   ({
     weight,
     size: size4,
@@ -16398,9 +16401,9 @@ var Title2 = (0, import_react9.forwardRef)(
 
 // src/components/Typography/Set/Display.tsx
 var import_clsx7 = __toESM(require("clsx"));
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime197 = require("react/jsx-runtime");
-var Display = (0, import_react10.forwardRef)(
+var Display = (0, import_react11.forwardRef)(
   ({
     size: size4,
     type,
@@ -16449,7 +16452,7 @@ var { MediaContextProvider, Media } = AppMedia;
 
 // src/components/Typography/Responsive/index.tsx
 var import_jsx_runtime198 = require("react/jsx-runtime");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var TypographyImpl = /* @__PURE__ */ __name(({ level, text, ...rest }) => {
   const commonProps = {
     ...rest,
@@ -16510,7 +16513,7 @@ var Typography = /* @__PURE__ */ __name((props) => {
       const variable = props[breakPointKey];
       const isExistVariable = !!variable;
       if (isExistVariable) {
-        return /* @__PURE__ */ (0, import_react11.createElement)(Media, { ...createMediaProps(breakPointKey), key: breakPointKey }, /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(TypographyImpl, { ...variable, text: variable.text || children }));
+        return /* @__PURE__ */ (0, import_react12.createElement)(Media, { ...createMediaProps(breakPointKey), key: breakPointKey }, /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(TypographyImpl, { ...variable, text: variable.text || children }));
       }
       return null;
     }) })
@@ -16562,7 +16565,7 @@ var style_module_default7 = {
 };
 
 // src/components/TextButton/index.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_clsx8 = __toESM(require("clsx"));
 var import_jsx_runtime199 = require("react/jsx-runtime");
 var textButtonLevelIconTypeMap = {
@@ -16601,7 +16604,7 @@ var textButtonVariants = (0, import_cva5.cva)({
     }
   }
 });
-var TextButton = (0, import_react12.forwardRef)(
+var TextButton = (0, import_react13.forwardRef)(
   ({
     level = "primary",
     thick = false,
@@ -16627,8 +16630,8 @@ var TextButton = (0, import_react12.forwardRef)(
       rightIcon && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(Icon, { ...getIconProps(rightIcon) })
     ] }), "renderContent");
     if (asChild) {
-      const parent = import_react12.Children.only(children);
-      return (0, import_react12.cloneElement)(
+      const parent = import_react13.Children.only(children);
+      return (0, import_react13.cloneElement)(
         parent,
         {
           ...rest,
@@ -16784,7 +16787,7 @@ var Popover = Object.assign(PopoverRoot, {
 
 // src/components/Tooltip/index.tsx
 var import_radix_ui2 = require("radix-ui");
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/Tooltip/style.module.scss
 var style_module_default8 = {
@@ -16801,7 +16804,7 @@ var tooltipVariants = (0, import_cva7.cva)({ base: [style_module_default8.toolti
 var TooltipProvider = import_radix_ui2.Tooltip.Provider;
 var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(import_radix_ui2.Tooltip.Root, { delayDuration: 0, ...props, children }), "TooltipRoot");
 var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(import_radix_ui2.Tooltip.Trigger, { asChild: true, children: by }), "TooltipTrigger");
-var TooltipContent = (0, import_react13.forwardRef)(
+var TooltipContent = (0, import_react14.forwardRef)(
   ({
     description,
     position = "top",
@@ -16830,7 +16833,7 @@ var Tooltip = Object.assign(TooltipRoot, {
 
 // src/components/IconButton/index.tsx
 var import_cva8 = require("cva");
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_clsx11 = __toESM(require("clsx"));
 
 // src/components/IconButton/style.module.scss
@@ -16925,7 +16928,7 @@ var iconButtonVariants = (0, import_cva8.cva)({
     }
   }
 });
-var IconButton = (0, import_react14.forwardRef)(
+var IconButton = (0, import_react15.forwardRef)(
   ({
     asChild,
     level = "primary",
@@ -16973,11 +16976,11 @@ var style_module_default10 = {
 };
 
 // src/components/CheckBox/index.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_clsx13 = __toESM(require("clsx"));
 
 // src/components/Label/index.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_radix_ui4 = require("radix-ui");
 var import_clsx12 = __toESM(require("clsx"));
 
@@ -17030,7 +17033,7 @@ var defaultLabelVariants = (0, import_cva9.cva)({
     }
   }
 });
-var Label = (0, import_react15.forwardRef)(
+var Label = (0, import_react16.forwardRef)(
   ({
     className,
     level = "primary",
@@ -17058,7 +17061,7 @@ Label.displayName = "Label";
 
 // src/components/CheckBox/index.tsx
 var import_jsx_runtime204 = require("react/jsx-runtime");
-var Checkbox = (0, import_react16.forwardRef)(
+var Checkbox = (0, import_react17.forwardRef)(
   ({ className, label, description, ...props }, ref) => {
     const CheckboxWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(Label, { position: "right", htmlFor: props.id, children: [
       /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("div", { className: style_module_default10["label-wrapper"], children: [
@@ -17074,7 +17077,7 @@ var Checkbox = (0, import_react16.forwardRef)(
 // src/components/Radio/index.tsx
 var import_radix_ui6 = require("radix-ui");
 var import_clsx14 = __toESM(require("clsx"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/Radio/style.module.scss
 var style_module_default12 = {
@@ -17087,9 +17090,9 @@ var style_module_default12 = {
 // src/components/Radio/index.tsx
 var import_jsx_runtime205 = require("react/jsx-runtime");
 var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("circle", { cx: "5", cy: "5", r: "5", fill: "#313133" }) }), "RadioIndicator");
-var RadioRoot = (0, import_react17.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(import_radix_ui6.RadioGroup.Root, { ref, className, ...props }));
+var RadioRoot = (0, import_react18.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(import_radix_ui6.RadioGroup.Root, { ref, className, ...props }));
 RadioRoot.displayName = "RadioRoot";
-var RadioItem = (0, import_react17.forwardRef)(
+var RadioItem = (0, import_react18.forwardRef)(
   ({ className, label, description, ...props }, ref) => {
     const RadioItemWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(Label, { position: "right", children: [
       /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { className: style_module_default12["label-wrapper"], children: [
@@ -17116,28 +17119,29 @@ var Radio = Object.assign(RadioRoot, {
 });
 
 // src/components/Textfield/index.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/Textfield/style.module.scss
 var style_module_default13 = {
-  "textfield-container": "_textfield-container_15lqz_1",
-  "textfield": "_textfield_15lqz_1",
-  "label": "_label_15lqz_35",
-  "label-out-textfield": "_label-out-textfield_15lqz_39",
-  "white": "_white_15lqz_43",
-  "gray": "_gray_15lqz_46",
-  "label-in": "_label-in_15lqz_58",
-  "label-out": "_label-out_15lqz_39",
-  "input-wrapper": "_input-wrapper_15lqz_68",
-  "input": "_input_15lqz_68",
-  "label-out-input": "_label-out-input_15lqz_104",
-  "input-action-buttons": "_input-action-buttons_15lqz_108",
-  "action-button": "_action-button_15lqz_114",
-  "error": "_error_15lqz_121",
-  "error-message": "_error-message_15lqz_137",
-  "error-wrapper": "_error-wrapper_15lqz_141",
-  "footer": "_footer_15lqz_150",
-  "character": "_character_15lqz_158"
+  "textfield-container": "_textfield-container_ogykf_1",
+  "textfield": "_textfield_ogykf_1",
+  "label": "_label_ogykf_38",
+  "label-out-textfield": "_label-out-textfield_ogykf_42",
+  "white": "_white_ogykf_46",
+  "gray": "_gray_ogykf_49",
+  "label-in": "_label-in_ogykf_61",
+  "label-out": "_label-out_ogykf_42",
+  "label-visually-hidden": "_label-visually-hidden_ogykf_71",
+  "input-wrapper": "_input-wrapper_ogykf_82",
+  "input": "_input_ogykf_82",
+  "label-out-input": "_label-out-input_ogykf_118",
+  "input-action-buttons": "_input-action-buttons_ogykf_122",
+  "action-button": "_action-button_ogykf_128",
+  "error": "_error_ogykf_135",
+  "error-message": "_error-message_ogykf_151",
+  "error-wrapper": "_error-wrapper_ogykf_155",
+  "footer": "_footer_ogykf_164",
+  "character": "_character_ogykf_172"
 };
 
 // src/components/Textfield/index.tsx
@@ -17154,9 +17158,9 @@ var defaultTextfieldVariants = (0, import_cva10.cva)({
     }
   }
 });
-var Textfield = (0, import_react18.forwardRef)((props, ref) => {
+var Textfield = (0, import_react19.forwardRef)((props, ref) => {
   const {
-    id = (0, import_react18.useId)(),
+    id = (0, import_react19.useId)(),
     type,
     label,
     value: controlledValue,
@@ -17170,9 +17174,9 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
     onClear,
     ...rest
   } = props;
-  const inputRef = (0, import_react18.useRef)(null);
-  const [value, setValue] = (0, import_react18.useState)("");
-  const [deidentifiy, setDeidentifiy] = (0, import_react18.useState)(true);
+  const inputRef = (0, import_react19.useRef)(null);
+  const [value, setValue] = (0, import_react19.useState)("");
+  const [deidentifiy, setDeidentifiy] = (0, import_react19.useState)(true);
   const isControlled = controlledValue !== void 0;
   const isPassword = type === "password";
   const isDeidentified = isPassword && deidentifiy;
@@ -17212,8 +17216,8 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
       inputRef.current.setSelectionRange(length, length);
     }
   }, "handleDeidentify");
-  (0, import_react18.useImperativeHandle)(ref, () => inputRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { className: style_module_default13["textfield-container"], children: [
+  (0, import_react19.useImperativeHandle)(ref, () => inputRef.current);
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { className: style_module_default13["textfield-container"], "data-disabled": disabled, children: [
     /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
       "div",
       {
@@ -17227,7 +17231,7 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
             "input",
             {
               className: (0, import_clsx15.default)(style_module_default13.input, {
-                [style_module_default13["label-out-input"]]: !label || labelType === "out"
+                [style_module_default13["label-out-input"]]: !label || labelType === "out" || labelType === "visually-hidden"
               }),
               type: isDeidentified ? "password" : "text",
               placeholder,
@@ -17243,7 +17247,8 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
             {
               className: (0, import_clsx15.default)(style_module_default13.label, {
                 [style_module_default13["label-in"]]: labelType === "in",
-                [style_module_default13["label-out"]]: !label || labelType === "out"
+                [style_module_default13["label-out"]]: !label || labelType === "out",
+                [style_module_default13["label-visually-hidden"]]: labelType === "visually-hidden"
               }),
               size: label?.type === "out" ? "s" : void 0,
               htmlFor: id,
@@ -17317,7 +17322,7 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
 Textfield.displayName = "Textfield";
 
 // src/components/Slider/index.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/Slider/style.module.scss
 var style_module_default14 = {
@@ -17335,7 +17340,7 @@ var style_module_default14 = {
 // src/components/Slider/index.tsx
 var import_radix_ui7 = require("radix-ui");
 var import_jsx_runtime207 = require("react/jsx-runtime");
-var SliderRoot = (0, import_react19.forwardRef)(
+var SliderRoot = (0, import_react20.forwardRef)(
   (props, ref) => {
     const { label, tooltip, rangeLeft, rangeRight, min: min2, max: max2, step = 50, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_jsx_runtime207.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(Tooltip.Provider, { children: [
@@ -17396,11 +17401,11 @@ var style_module_default15 = {
 };
 
 // src/components/Select/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_clsx16 = __toESM(require("clsx"));
 var import_jsx_runtime208 = require("react/jsx-runtime");
 var Badge = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { className: style_module_default15.badgeContainer, children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Caption, { className: style_module_default15.badge, size: 2, type: "normal", weight: "medium", children }) }), "Badge");
-var SelectContent = (0, import_react20.forwardRef)(
+var SelectContent = (0, import_react21.forwardRef)(
   (props, ref) => {
     const { id, isResponsive, popSide, sideOffset, listLabel, children, container } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_radix_ui8.Select.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
@@ -17452,7 +17457,7 @@ var SelectContent = (0, import_react20.forwardRef)(
     ) });
   }
 );
-var SelectRoot = (0, import_react20.forwardRef)(
+var SelectRoot = (0, import_react21.forwardRef)(
   (props, ref) => {
     const {
       id,
@@ -17472,8 +17477,8 @@ var SelectRoot = (0, import_react20.forwardRef)(
       ...rest
     } = props;
     const contentProps = { id, isResponsive, popSide, sideOffset, listLabel, children, container };
-    const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
-    (0, import_react20.useEffect)(() => {
+    const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+    (0, import_react21.useEffect)(() => {
       setIsOpen(open);
     }, [open]);
     return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)("div", { children: [
@@ -17541,18 +17546,18 @@ var style_module_default16 = {
 };
 
 // src/components/List/index.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/hooks/collection.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime209 = require("react/jsx-runtime");
-var CollectionContext = (0, import_react21.createContext)(void 0);
+var CollectionContext = (0, import_react22.createContext)(void 0);
 var CollectionProvider = /* @__PURE__ */ __name(({ value, onChangeValue, children }) => {
-  const contextValue = (0, import_react21.useMemo)(() => ({ value, onChangeValue }), [value, onChangeValue]);
+  const contextValue = (0, import_react22.useMemo)(() => ({ value, onChangeValue }), [value, onChangeValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(CollectionContext.Provider, { value: contextValue, children });
 }, "CollectionProvider");
 var useCollectionContext = /* @__PURE__ */ __name(() => {
-  const context = (0, import_react21.useContext)(CollectionContext);
+  const context = (0, import_react22.useContext)(CollectionContext);
   if (!context) {
     throw new Error("useCollectionContext must be used within a CollectionProvider");
   }
@@ -17566,7 +17571,7 @@ var ListRoot = /* @__PURE__ */ __name(({ children, className, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(CollectionProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("ul", { className: (0, import_clsx17.default)(style_module_default16.list, className), children }) });
 }, "ListRoot");
 var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => {
-  const [isFocused, setIsFocused] = (0, import_react22.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react23.useState)(false);
   const { value: contextValue, onChangeValue } = useCollectionContext();
   const isSelected = contextValue === value;
   const iconProps = isSelected ? { name: "check-mark", type: "brand-label-primary", thick: true } : icon ? icon : {};
@@ -19577,9 +19582,9 @@ var computePosition2 = /* @__PURE__ */ __name((reference, floating, options) =>
 
 // ../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
 var React21 = __toESM(require("react"), 1);
-var import_react23 = require("react");
+var import_react24 = require("react");
 var ReactDOM4 = __toESM(require("react-dom"), 1);
-var index = typeof document !== "undefined" ? import_react23.useLayoutEffect : import_react23.useEffect;
+var index = typeof document !== "undefined" ? import_react24.useLayoutEffect : import_react24.useEffect;
 function deepEqual(a, b) {
   if (a === b) {
     return true;
@@ -20365,9 +20370,9 @@ function assignRef(ref, value) {
 __name(assignRef, "assignRef");
 
 // ../../node_modules/use-callback-ref/dist/es2015/useRef.js
-var import_react24 = require("react");
+var import_react25 = require("react");
 function useCallbackRef2(initialValue, callback) {
-  var ref = (0, import_react24.useState)(function() {
+  var ref = (0, import_react25.useState)(function() {
     return {
       // value
       value: initialValue,
@@ -21322,7 +21327,7 @@ var Arrow22 = PopoverArrow;
 // src/components/coach-mark/primitive/index.tsx
 var import_cva11 = require("cva");
 var import_clsx18 = __toESM(require("clsx"));
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/components/coach-mark/primitive/style.module.scss
 var style_module_default17 = {
@@ -21364,7 +21369,7 @@ var PrimitiveCoachMarkAnchor = /* @__PURE__ */ __name(({ className }) => /* @__P
     )
   }
 ), "PrimitiveCoachMarkAnchor");
-var PrimitiveCoachMarkContent = (0, import_react25.forwardRef)(({ children, className, container, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(Portal2, { container, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)(
+var PrimitiveCoachMarkContent = (0, import_react26.forwardRef)(({ children, className, container, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(Portal2, { container, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)(
   Content2,
   {
     ref,
@@ -21383,7 +21388,7 @@ var PrimitiveCoachMark = Object.assign(PrimitiveCoachMarkRoot, {
 });
 
 // src/components/coach-mark/compact/index.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/coach-mark/compact/style.module.scss
 var style_module_default18 = {
@@ -21400,7 +21405,7 @@ var import_clsx19 = __toESM(require("clsx"));
 var import_cva13 = require("cva");
 
 // src/components/Tag/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/Tag/style.module.scss
 var style_module_default19 = {
@@ -21647,7 +21652,7 @@ var tagVariants = (0, import_cva12.cva)({
     }
   }
 });
-var Tag = (0, import_react26.forwardRef)(
+var Tag = (0, import_react27.forwardRef)(
   ({
     children,
     color = "neutral-label-static-primary",
@@ -21689,7 +21694,7 @@ var compactCoachMarkVariants = (0, import_cva13.cva)({
 var CompactCoachMarkRoot = /* @__PURE__ */ __name((props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(PrimitiveCoachMark, { ...props });
 }, "CompactCoachMarkRoot");
-var CompactCoachMarkContent = (0, import_react27.forwardRef)(({ tag, title, level = "brand", className, side = "top", sideOffset = -15, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
+var CompactCoachMarkContent = (0, import_react28.forwardRef)(({ tag, title, level = "brand", className, side = "top", sideOffset = -15, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
   PrimitiveCoachMark.Content,
   {
     ref,
@@ -21734,7 +21739,7 @@ var style_module_default20 = {
 };
 
 // src/components/coach-mark/main/index.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_cva14 = require("cva");
 var import_clsx20 = __toESM(require("clsx"));
 
@@ -21843,8 +21848,8 @@ var coachMarkLevelButtonLevelMap = {
 };
 var CoachMarkRoot = /* @__PURE__ */ __name((props) => {
   const { children } = props;
-  (0, import_react28.useEffect)(() => {
-    if ((0, import_react28.isValidElement)(children) && "image" in children.props) {
+  (0, import_react29.useEffect)(() => {
+    if ((0, import_react29.isValidElement)(children) && "image" in children.props) {
       const imageProps = children.props.image;
       if (imageProps?.src) {
         const img = new Image();
@@ -21854,7 +21859,7 @@ var CoachMarkRoot = /* @__PURE__ */ __name((props) => {
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(PrimitiveCoachMark, { ...props });
 }, "CoachMarkRoot");
-var CoachMarkContent = (0, import_react28.forwardRef)(
+var CoachMarkContent = (0, import_react29.forwardRef)(
   ({
     level = "brand",
     width,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "2.6.3",
+  "version": "2.6.5",
   "scripts": {
     "dev": "next dev",
     "start": "next start",