@liner-fe/prism 3.5.3 → 3.6.0

package/lib/index.css

@@ -1239,37 +1239,78 @@
   text-overflow: ellipsis;
 }
 
+/* esbuild-sass-plugin:css-chunk:src/components/ListItem/primitive/style.module.scss */
+._root_1j4ne_2 {
+  display: flex;
+  gap: var(--lp-sys-gap-positive-150);
+  box-sizing: border-box;
+  width: 100%;
+  cursor: pointer;
+  outline: none;
+  padding-block: var(--lp-sys-padding-component-150);
+  padding-inline-start: var(--lp-sys-padding-component-200);
+  padding-inline-end: var(--lp-sys-padding-component-150);
+  border-radius: var(--lp-sys-radius-s);
+  background: var(--neutral-fill-overlay-lowest);
+}
+._root_1j4ne_2:hover {
+  background: var(--neutral-fill-overlay-lowest-hover);
+}
+._root_1j4ne_2[data-highlighted] {
+  background: var(--neutral-fill-overlay-lowest-hover);
+}
+._root_1j4ne_2:active {
+  background: var(--neutral-fill-overlay-lowest-hover);
+}
+._root_1j4ne_2 {
+}
+._root_1j4ne_2:focus-visible:not(:hover) {
+  background: var(--neutral-fill-overlay-lowest-hover);
+  box-shadow: inset 0 0 0 1px #006aff;
+}
+._root_1j4ne_2[data-state=checked] {
+  background: var(--neutral-fill-overlay-low);
+}
+._root_1j4ne_2[data-disabled] {
+  background: transparent;
+  cursor: not-allowed;
+}
+[data-zone=main] {
+  flex: 1;
+  min-width: 0;
+}
+
 /* esbuild-sass-plugin:css-chunk:src/components/Select/style.module.scss */
-._root_1x709_3 {
+._root_1m2x2_3 {
   display: flex;
   flex-direction: column;
   gap: var(--lp-sys-padding-component-100);
   width: fit-content;
 }
-._root_1x709_3[data-trigger-type=select-button] {
+._root_1m2x2_3[data-trigger-type=select-button] {
   gap: 0;
 }
-._root_1x709_3[data-trigger-type=select-field][data-size=s] {
+._root_1m2x2_3[data-trigger-type=select-field][data-size=s] {
   width: 200px;
 }
-._root_1x709_3[data-trigger-type=select-field][data-size=l] {
+._root_1m2x2_3[data-trigger-type=select-field][data-size=l] {
   width: 240px;
 }
-._root_1x709_3[data-trigger-type=select-button][data-size=s] {
+._root_1m2x2_3[data-trigger-type=select-button][data-size=s] {
   width: 105px;
 }
-._root_1x709_3[data-trigger-type=select-button][data-size=m] {
+._root_1m2x2_3[data-trigger-type=select-button][data-size=m] {
   width: 123px;
 }
-._label_1x709_35 {
+._label_1m2x2_35 {
   padding-block-end: var(--lp-sys-padding-component-100);
   margin: 0;
 }
-._requiredMark_1x709_40 {
+._requiredMark_1m2x2_40 {
   color: var(--function-label-negative);
   margin-inline-start: 2px;
 }
-._srOnly_1x709_45 {
+._srOnly_1m2x2_45 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -1280,7 +1321,7 @@
   white-space: nowrap;
   border: 0;
 }
-._trigger_1x709_58 {
+._trigger_1m2x2_58 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1291,36 +1332,36 @@
   font: inherit;
   text-align: start;
 }
-._trigger_1x709_58:hover:not(:disabled),
-._trigger_1x709_58:active:not(:disabled) {
+._trigger_1m2x2_58:hover:not(:disabled),
+._trigger_1m2x2_58:active:not(:disabled) {
   background: var(--neutral-container-lowest-hover);
   border-color: var(--neutral-border-opaque-strong);
 }
-._trigger_1x709_58 {
+._trigger_1m2x2_58 {
 }
-._trigger_1x709_58:focus,
-._trigger_1x709_58:focus-visible {
+._trigger_1m2x2_58:focus,
+._trigger_1m2x2_58:focus-visible {
   outline: none;
 }
-._trigger_1x709_58 {
+._trigger_1m2x2_58 {
 }
-._trigger_1x709_58:disabled,
-._trigger_1x709_58[data-disabled] {
+._trigger_1m2x2_58:disabled,
+._trigger_1m2x2_58[data-disabled] {
   cursor: not-allowed;
   color: var(--neutral-label-tertiary);
 }
-._trigger_1x709_58 {
+._trigger_1m2x2_58 {
 }
-._trigger_1x709_58[data-state=open] ._icon_1x709_94 {
+._trigger_1m2x2_58[data-state=open] ._icon_1m2x2_94 {
   transform: rotate(180deg);
 }
-._trigger_1x709_58 ._icon_1x709_94 {
+._trigger_1m2x2_58 ._icon_1m2x2_94 {
   transition: transform 120ms ease;
   flex-shrink: 0;
   display: flex;
   align-items: center;
 }
-._trigger_1x709_58[data-trigger-type=select-field] {
+._trigger_1m2x2_58[data-trigger-type=select-field] {
   border-radius: var(--lp-sys-radius-m);
   background: var(--neutral-container-lowest);
   font-family:
@@ -1332,47 +1373,47 @@
   line-height: var(--lp-pri-font-lineheight-130);
   color: var(--neutral-label-primary);
 }
-._trigger_1x709_58[data-trigger-type=select-field][data-size=s] {
+._trigger_1m2x2_58[data-trigger-type=select-field][data-size=s] {
   height: 32px;
   padding-inline: var(--lp-sys-padding-component-200);
 }
-._trigger_1x709_58[data-trigger-type=select-field][data-size=m] {
+._trigger_1m2x2_58[data-trigger-type=select-field][data-size=m] {
   height: 40px;
   padding-inline: var(--lp-sys-padding-component-300);
 }
-._trigger_1x709_58[data-trigger-type=select-field][data-size=l] {
+._trigger_1m2x2_58[data-trigger-type=select-field][data-size=l] {
   height: 45px;
   padding-inline-start: var(--lp-sys-padding-component-400);
   padding-inline-end: var(--lp-sys-padding-component-300);
 }
-._trigger_1x709_58[data-trigger-type=select-field] {
+._trigger_1m2x2_58[data-trigger-type=select-field] {
 }
-._trigger_1x709_58[data-trigger-type=select-field][data-placeholder] {
+._trigger_1m2x2_58[data-trigger-type=select-field][data-placeholder] {
   color: var(--neutral-label-tertiary);
 }
-._trigger_1x709_58[data-trigger-type=select-field] {
+._trigger_1m2x2_58[data-trigger-type=select-field] {
 }
-._trigger_1x709_58[data-trigger-type=select-field]:disabled,
-._trigger_1x709_58[data-trigger-type=select-field][data-disabled] {
+._trigger_1m2x2_58[data-trigger-type=select-field]:disabled,
+._trigger_1m2x2_58[data-trigger-type=select-field][data-disabled] {
   background: var(--neutral-container-mid);
   border-color: var(--neutral-border-opaque-subtle);
 }
-._trigger_1x709_58 > span:not([class]) {
+._trigger_1m2x2_58 > span:not([class]) {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._triggerButton_1x709_159 {
+._triggerButton_1m2x2_159 {
 }
-._triggerButton_1x709_159 > span {
+._triggerButton_1m2x2_159 > span {
   width: 100%;
   justify-content: space-between !important;
 }
-._triggerButton_1x709_159 {
+._triggerButton_1m2x2_159 {
 }
-._triggerButton_1x709_159 span:not([class]) {
+._triggerButton_1m2x2_159 span:not([class]) {
   flex: 1;
   min-width: 0;
   text-align: start;
@@ -1380,33 +1421,33 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._triggerButton_1x709_159 {
+._triggerButton_1m2x2_159 {
 }
-._triggerButton_1x709_159[data-state=open] svg:last-child {
+._triggerButton_1m2x2_159[data-state=open] svg:last-child {
   transform: rotate(180deg);
 }
-._triggerButton_1x709_159 svg:last-child {
+._triggerButton_1m2x2_159 svg:last-child {
   transition: transform 120ms ease;
 }
-._root_1x709_3[data-error] ._trigger_1x709_58[data-trigger-type=select-field] {
+._root_1m2x2_3[data-error] ._trigger_1m2x2_58[data-trigger-type=select-field] {
   outline: 1px solid var(--function-label-negative);
   border-color: var(--function-label-negative);
 }
-._trigger_1x709_58 svg path,
-._triggerButton_1x709_159 svg path {
+._trigger_1m2x2_58 svg path,
+._triggerButton_1m2x2_159 svg path {
   fill: currentColor !important;
 }
-._errorMessage_1x709_203 {
+._errorMessage_1m2x2_203 {
   display: flex;
   align-items: center;
   gap: var(--lp-sys-gap-positive-100);
   padding-block-start: var(--lp-sys-padding-component-100);
 }
-._errorText_1x709_211 {
+._errorText_1m2x2_211 {
   margin: 0;
   line-height: 1;
 }
-._content_1x709_220 {
+._content_1m2x2_220 {
   max-width: var(--radix-select-content-available-width);
   max-height: var(--radix-select-content-available-height);
   transform-origin: var(--radix-select-content-transform-origin);
@@ -1418,35 +1459,35 @@
   overflow: hidden;
   z-index: 1000;
 }
-._content_1x709_220[data-state=open] {
-  animation: _fadeScaleIn_1x709_1 120ms ease-out;
+._content_1m2x2_220[data-state=open] {
+  animation: _fadeScaleIn_1m2x2_1 120ms ease-out;
 }
-._content_1x709_220[data-trigger-type=select-field] {
+._content_1m2x2_220[data-trigger-type=select-field] {
   width: var(--radix-select-trigger-width);
 }
-._content_1x709_220[data-trigger-type=select-button] {
+._content_1m2x2_220[data-trigger-type=select-button] {
   width: 320px;
 }
-._viewport_1x709_251 {
+._viewport_1m2x2_251 {
   max-height: 268px;
   overflow-y: auto !important;
   scrollbar-width: thin !important;
   scrollbar-color: var(--neutral-fill-overlay-mid) transparent;
 }
-._viewport_1x709_251::-webkit-scrollbar {
+._viewport_1m2x2_251::-webkit-scrollbar {
   display: block !important;
   width: 7px;
 }
-._viewport_1x709_251::-webkit-scrollbar-track {
+._viewport_1m2x2_251::-webkit-scrollbar-track {
   background-color: transparent;
 }
-._viewport_1x709_251::-webkit-scrollbar-thumb {
+._viewport_1m2x2_251::-webkit-scrollbar-thumb {
   background-color: var(--neutral-fill-overlay-mid);
   border: 2px solid transparent;
   background-clip: padding-box;
   border-radius: 7px;
 }
-@keyframes _fadeScaleIn_1x709_1 {
+@keyframes _fadeScaleIn_1m2x2_1 {
   from {
     opacity: 0;
     transform: scale(0.95);
@@ -1456,7 +1497,7 @@
     transform: scale(1);
   }
 }
-._selectItem_1x709_283 {
+._selectItem_1m2x2_283 {
   display: flex;
   align-items: center;
   gap: var(--lp-sys-gap-positive-150);
@@ -1467,60 +1508,63 @@
   cursor: pointer;
   outline: none;
 }
-._selectItem_1x709_283 span:not([class]) {
+._selectItem_1m2x2_283 span:not([class]) {
   display: none;
 }
-._selectItem_1x709_283[data-disabled] {
+._selectItem_1m2x2_283[data-disabled] {
   cursor: not-allowed;
   color: var(--neutral-label-tertiary);
 }
-._selectItem_1x709_283:hover:not([data-disabled]),
-._selectItem_1x709_283[data-highlighted] {
+._selectItem_1m2x2_283:hover:not([data-disabled]),
+._selectItem_1m2x2_283[data-highlighted] {
   background: var(--neutral-fill-overlay-low);
 }
-._selectItem_1x709_283:active:not([data-disabled]) {
+._selectItem_1m2x2_283:active:not([data-disabled]) {
   background: var(--neutral-fill-overlay-lowest-hover);
 }
-._selectItem_1x709_283 {
+._selectItem_1m2x2_283 {
 }
-._selectItem_1x709_283:focus-visible:not(:hover) {
+._selectItem_1m2x2_283:focus-visible:not(:hover) {
   background: var(--neutral-container-low);
   box-shadow: inset 0 0 0 1px #006aff;
 }
-._selectItem_1x709_283[data-state=checked] {
+._selectItem_1m2x2_283[data-state=checked] {
   padding-inline-end: var(--lp-sys-padding-component-200);
 }
-._selectItem_1x709_283 [data-zone=leading] {
+._selectItem_1m2x2_283 [data-zone=leading] {
   align-self: flex-start;
 }
-._selectItem_1x709_283[data-state=checked] ._itemLabel_1x709_335 {
+._primitiveItem_1m2x2_336 > span:not([class]) {
+  display: none;
+}
+._selectItem_1m2x2_283[data-state=checked] ._itemLabel_1m2x2_341 {
   color: var(--brand-label-primary) !important;
   font-weight: var(--lp-pri-font-weight-500);
 }
-._itemIndicator_1x709_340 {
+._itemIndicator_1m2x2_346 {
   flex-shrink: 0;
   display: flex;
   align-items: center;
 }
-._trailingSlot_1x709_348 p,
+._trailingSlot_1m2x2_354 p,
 [data-zone=leading] p {
   margin: 0;
 }
-._selectItem_1x709_283[data-state=checked] ._trailingSlot_1x709_348 {
+._selectItem_1m2x2_283[data-state=checked] ._trailingSlot_1m2x2_354 {
   display: none;
 }
-._group_1x709_361 {
+._group_1m2x2_367 {
   display: flex;
   flex-direction: column;
 }
-._group_1x709_361:not(:last-child) {
+._group_1m2x2_367:not(:last-child) {
   border-block-end: 1px solid var(--neutral-border-overlay-normal);
   padding-block-end: var(--lp-sys-padding-component-150);
 }
-._group_1x709_361 + ._group_1x709_361 {
+._group_1m2x2_367 + ._group_1m2x2_367 {
   padding-block-start: var(--lp-sys-padding-component-150);
 }
-._groupLabel_1x709_376 {
+._groupLabel_1m2x2_382 {
   display: block;
   margin: 0;
   padding-block: var(--lp-sys-padding-component-150);
@@ -1528,62 +1572,22 @@
   padding-inline-end: var(--lp-sys-padding-component-150);
 }
 @media (prefers-reduced-motion: reduce) {
-  ._trigger_1x709_58 ._icon_1x709_94 {
+  ._trigger_1m2x2_58 ._icon_1m2x2_94 {
     transition: none;
   }
-  ._content_1x709_220[data-state=open] {
+  ._content_1m2x2_220[data-state=open] {
     animation: none;
   }
 }
 @media (forced-colors: active) {
-  ._trigger_1x709_58 {
+  ._trigger_1m2x2_58 {
     border: 1px solid ButtonText;
   }
-  ._trigger_1x709_58:focus-visible {
+  ._trigger_1m2x2_58:focus-visible {
     outline: 2px solid Highlight;
   }
 }
 
-/* esbuild-sass-plugin:css-chunk:src/components/ListItem/primitive/style.module.scss */
-._root_1y0m7_2 {
-  display: flex;
-  gap: var(--lp-sys-gap-positive-150);
-  width: 100%;
-  cursor: pointer;
-  padding-block: var(--lp-sys-padding-component-150);
-  padding-inline-start: var(--lp-sys-padding-component-200);
-  padding-inline-end: var(--lp-sys-padding-component-150);
-  border-radius: var(--lp-sys-radius-s);
-  background: var(--neutral-fill-overlay-lowest);
-}
-._root_1y0m7_2:hover {
-  background: var(--neutral-fill-overlay-lowest-hover);
-}
-._root_1y0m7_2[data-highlighted] {
-  background: var(--neutral-fill-overlay-lowest-hover);
-}
-._root_1y0m7_2:active {
-  background: var(--neutral-fill-overlay-lowest-hover);
-}
-._root_1y0m7_2 {
-}
-._root_1y0m7_2:focus-visible:not(:hover) {
-  outline: none;
-  background: var(--neutral-fill-overlay-lowest-hover);
-  box-shadow: 0 0 0 1px #006aff;
-}
-._root_1y0m7_2[data-state=checked] {
-  background: var(--neutral-fill-overlay-low);
-}
-._root_1y0m7_2[data-disabled] {
-  background: transparent;
-  cursor: not-allowed;
-}
-[data-zone=main] {
-  flex: 1;
-  min-width: 0;
-}
-
 /* esbuild-sass-plugin:css-chunk:src/components/List/style.module.scss */
 ._root_x5fwq_2 {
   list-style: none;

package/lib/index.d.ts

@@ -1,12 +1,12 @@
 import { SystemKeys, TypographyCaptionPrefix, TypographyParagraphPrefix, TypographyHeadingPrefix, TypographyTitlePrefix, TypographyDisplayPrefix, BasicColorType } from '@liner-fe/design-token-primitive';
 import * as react from 'react';
-import react__default, { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, MouseEventHandler, ReactElement } from 'react';
+import react__default, { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, MouseEventHandler, ReactElement, CSSProperties, ElementType } from 'react';
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
 import { IconProps, IconComponentType } from '@liner-fe/icon';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _artsy_fresnel_dist_Media from '@artsy/fresnel/dist/Media';
-import { breakpointOrigin } from '@liner-fe/design-token';
+import { breakpointOrigin, vars } from '@liner-fe/design-token';
 import { Popover as Popover$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, RadioGroup, Select as Select$1, Label as Label$1, Avatar as Avatar$1, AlertDialog as AlertDialog$1, Dialog as Dialog$1 } from 'radix-ui';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { PopoverProps, PopoverPortalProps } from '@radix-ui/react-popover';
@@ -460,6 +460,30 @@ interface SelectItemProps extends Omit<ComponentPropsWithoutRef<typeof Select$1.
 interface SelectGroupProps extends ComponentPropsWithoutRef<typeof Select$1.Group> {
     label?: ReactNode;
 }
+/**
+ * @description Select.PrimitiveItem — `Select.Item`의 기본 스타일 외 완전 커스텀 visual을 원할 때 사용.
+ *
+ * PrimitiveListItem과 **동일 시각 base** (padding · hover bg · focus ring · disabled · checked)
+ * + Radix Select integration (selection · typeahead · keyboard nav · trigger value mirror)를 보장하되,
+ * 본문 visual은 consumer가 children으로 완전히 결정.
+ *
+ * 왜 literal-wrap이 아닌가: `PrimitiveListItem`은 자체 `CollectionContext`/click-keyboard handler를 가져
+ * RadixSelect.Item과 double-fire 위험 + provider 강제 throw. CSS class(`primitiveListItemStyle.root`)와
+ * data-zone 구조만 공유해 시각 base는 동등.
+ *
+ * 사용 예:
+ * ```tsx
+ * <Select.PrimitiveItem value="apple" textValue="Apple">
+ *   <ListItem label="Apple" leadingSlot={<IconStar/>} description="..." />
+ * </Select.PrimitiveItem>
+ * ```
+ */
+interface SelectPrimitiveItemProps extends Omit<ComponentPropsWithoutRef<typeof Select$1.Item>, 'value'> {
+    value: string;
+    /** typeahead(키보드 첫 글자 검색) + 선택 시 Trigger Value mirror 텍스트. visual은 children. */
+    textValue: string;
+    children?: ReactNode;
+}
 interface BaseSelectTriggerProps {
     label?: ReactNode;
     placeholder?: ReactNode;
@@ -490,6 +514,7 @@ declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAtt
     Trigger: react.ForwardRefExoticComponent<SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>;
     Content: react.ForwardRefExoticComponent<SelectContentProps & react.RefAttributes<HTMLDivElement>>;
     Item: react.ForwardRefExoticComponent<SelectItemProps & react.RefAttributes<HTMLDivElement>>;
+    PrimitiveItem: react.ForwardRefExoticComponent<SelectPrimitiveItemProps & react.RefAttributes<HTMLDivElement>>;
     Group: react.ForwardRefExoticComponent<SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
 };
 
@@ -1011,4 +1036,220 @@ interface RatioProps extends react.HTMLAttributes<HTMLDivElement> {
  */
 declare const Ratio: react.ForwardRefExoticComponent<RatioProps & react.RefAttributes<HTMLDivElement>>;
 
-export { AlertDialog, type AlertDialogAction, type AlertDialogConfirmAction, type AlertDialogContentProps, Avatar, type AvatarLoadingStatus, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, BottomSheet, type BottomSheetAction, type BottomSheetConfirmAction, type BottomSheetContentProps, type BottomSheetMode, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, type CompactCoachMarkContentProps, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Dialog, type DialogAction, type DialogConfirmAction, type DialogContentProps, Display, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, LOGOS, Label, List, type ListGroupProps, ListItem, type ListItemProps, type ListProps, Loading, type LoadingLevelType, Logo, type LogoCategory, type LogoName, type LogoProps, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, PrimitiveListItem, type PrimitiveListItemProps, type PromiseToastOptions, RATIO, Radio, Ratio, type RatioProps, Select, type SelectButtonSize, type SelectContentProps, type SelectFieldSize, type SelectGroupProps, type SelectItemProps, type SelectProps, type SelectTriggerProps, type SelectTriggerType, type SelectWidthOptions, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, toast };
+/** padding prop 스케일. `component-*`(컴포넌트 내부 여백) / `section-*`(섹션 여백) 계열. */
+type PaddingToken = keyof typeof vars.padding;
+/** gap prop 스케일. `positive-*` 계열(요소 사이 간격). */
+type GapToken = keyof typeof vars.gap;
+/** margin prop 스케일. 원시 size 스케일(`minus*`로 음수 마진 지원). */
+type MarginToken = keyof typeof vars.size;
+/** Section 세로 여백 스케일 — padding 토큰 중 `section-*` 계열만. */
+type SectionPaddingToken = Extract<PaddingToken, `section-${string}`>;
+type BoxDisplay = 'none' | 'inline' | 'inline-block' | 'block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'contents';
+interface PaddingProps {
+    /** 전체 padding */
+    p?: PaddingToken;
+    /** 좌우 padding (padding-inline) */
+    px?: PaddingToken;
+    /** 상하 padding (padding-block) */
+    py?: PaddingToken;
+    /** padding-top */
+    pt?: PaddingToken;
+    /** padding-right */
+    pr?: PaddingToken;
+    /** padding-bottom */
+    pb?: PaddingToken;
+    /** padding-left */
+    pl?: PaddingToken;
+}
+interface MarginProps {
+    /** 전체 margin */
+    m?: MarginToken;
+    /** 좌우 margin (margin-inline) */
+    mx?: MarginToken;
+    /** 상하 margin (margin-block) */
+    my?: MarginToken;
+    /** margin-top */
+    mt?: MarginToken;
+    /** margin-right */
+    mr?: MarginToken;
+    /** margin-bottom */
+    mb?: MarginToken;
+    /** margin-left */
+    ml?: MarginToken;
+}
+interface SizingProps {
+    /** raw CSS 값. 예: `'100%'`, `'320px'` */
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    minWidth?: CSSProperties['minWidth'];
+    maxWidth?: CSSProperties['maxWidth'];
+    minHeight?: CSSProperties['minHeight'];
+    maxHeight?: CSSProperties['maxHeight'];
+}
+interface PositionProps {
+    position?: CSSProperties['position'];
+    inset?: CSSProperties['inset'];
+    overflow?: CSSProperties['overflow'];
+}
+interface FlexItemProps {
+    flexBasis?: CSSProperties['flexBasis'];
+    flexGrow?: CSSProperties['flexGrow'];
+    flexShrink?: CSSProperties['flexShrink'];
+}
+interface GridItemProps {
+    gridColumn?: CSSProperties['gridColumn'];
+    gridRow?: CSSProperties['gridRow'];
+    gridArea?: CSSProperties['gridArea'];
+}
+/** Box가 소비하는 모든 레이아웃 prop의 합집합. Flex/Grid/Container/Section이 확장한다. */
+interface LayoutProps extends PaddingProps, MarginProps, SizingProps, PositionProps, FlexItemProps, GridItemProps {
+    display?: BoxDisplay;
+}
+interface BoxProps extends LayoutProps, Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    /** 렌더할 엘리먼트. 기본 `div`. */
+    as?: ElementType;
+    /** true면 자식 엘리먼트에 props를 병합(radix Slot). `as`보다 우선. */
+    asChild?: boolean;
+}
+declare const gapTok: (k?: GapToken) => string | undefined;
+/**
+ * Box 레이아웃 prop들을 inline style로 해석한다.
+ * 우선순위: 축약(p/px/py, m/mx/my) < 개별 변(pt/pr/pb/pl, mt/mr/mb/ml).
+ */
+declare function resolveLayoutStyle(props: LayoutProps): CSSProperties;
+/**
+ * LayoutProps를 소비하고 나머지(HTML 속성)만 남긴다.
+ * Flex/Grid/Container/Section이 Box에 위임할 때 자기 prop만 뽑고 나머지를 넘기기 위해 쓴다.
+ */
+declare function splitLayoutProps<T extends LayoutProps>(props: T): {
+    layout: LayoutProps;
+    rest: Omit<T, keyof LayoutProps>;
+};
+/** align/justify 문자열을 flexbox CSS 값으로 매핑. Flex에서 재사용. */
+declare const FLEX_ALIGN: {
+    readonly start: "flex-start";
+    readonly center: "center";
+    readonly end: "flex-end";
+    readonly baseline: "baseline";
+    readonly stretch: "stretch";
+};
+declare const FLEX_JUSTIFY: {
+    readonly start: "flex-start";
+    readonly center: "center";
+    readonly end: "flex-end";
+    readonly between: "space-between";
+    readonly around: "space-around";
+    readonly evenly: "space-evenly";
+};
+
+/**
+ * 토큰 세이프한 spacing(padding/margin)·display·sizing prop을 붙인 범용 레이아웃 블록.
+ * 너비 제약이나 정렬 의견이 없다(그건 Container/Flex의 역할). 기본 `div`로 렌더하며
+ * `as`로 시맨틱 엘리먼트, `asChild`로 자식에 병합할 수 있다.
+ *
+ * ```tsx
+ * <Box p="component-400" m="8" maxWidth="640px">…</Box>
+ * ```
+ */
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLElement>>;
+
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+type FlexAlign = keyof typeof FLEX_ALIGN;
+type FlexJustify = keyof typeof FLEX_JUSTIFY;
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+interface FlexProps extends BoxProps {
+    /** true면 `inline-flex`로 렌더. */
+    inline?: boolean;
+    /** flex-direction. 기본 `row`. */
+    direction?: FlexDirection;
+    /** align-items. `start | center | end | baseline | stretch`. */
+    align?: FlexAlign;
+    /** justify-content. `start | center | end | between | around | evenly`. */
+    justify?: FlexJustify;
+    /** flex-wrap. 기본 `nowrap`. */
+    wrap?: FlexWrap;
+    /** 요소 사이 간격(gap 토큰). */
+    gap?: GapToken;
+    /** 가로 간격(column-gap). `gap`보다 우선. */
+    gapX?: GapToken;
+    /** 세로 간격(row-gap). `gap`보다 우선. */
+    gapY?: GapToken;
+}
+/**
+ * flexbox 컨테이너. Box 위에 flex 배치 prop(direction/align/justify/wrap/gap)을 얹는다.
+ * 모든 Box prop(padding/margin/sizing/asChild 등)을 그대로 받는다.
+ *
+ * ```tsx
+ * <Flex direction="column" gap="positive-300" align="center" p="component-400">…</Flex>
+ * ```
+ */
+declare const Flex: react.ForwardRefExoticComponent<FlexProps & react.RefAttributes<HTMLElement>>;
+
+type GridAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+type GridJustify = 'start' | 'center' | 'end' | 'between';
+type GridFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
+interface GridProps extends BoxProps {
+    /** true면 `inline-grid`로 렌더. */
+    inline?: boolean;
+    /** grid-template-columns. 숫자 N → `repeat(N, minmax(0, 1fr))`, 문자열 → 그대로. */
+    columns?: number | string;
+    /** grid-template-rows. 숫자 N → `repeat(N, minmax(0, 1fr))`, 문자열 → 그대로. */
+    rows?: number | string;
+    /** grid-auto-flow. */
+    flow?: GridFlow;
+    /** align-items. `start | center | end | baseline | stretch`. */
+    align?: GridAlign;
+    /** justify-content. `start | center | end | between`. */
+    justify?: GridJustify;
+    /** 셀 사이 간격(gap 토큰). */
+    gap?: GapToken;
+    /** 가로 간격(column-gap). `gap`보다 우선. */
+    gapX?: GapToken;
+    /** 세로 간격(row-gap). `gap`보다 우선. */
+    gapY?: GapToken;
+}
+/**
+ * CSS grid 컨테이너. Box 위에 grid 배치 prop(columns/rows/flow/align/justify/gap)을 얹는다.
+ *
+ * ```tsx
+ * <Grid columns={3} gap="positive-200">…</Grid>
+ * <Grid columns="1fr 2fr" rows="auto 1fr">…</Grid>
+ * ```
+ */
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLElement>>;
+
+/** Container 최대 너비 프리셋 — breakpoint 토큰 값을 재사용한다. */
+type ContainerSize = 's' | 'm' | 'l' | 'xl';
+interface ContainerProps extends BoxProps {
+    /** 최대 너비 프리셋. 기본 `l`(1366px). `maxWidth`를 직접 주면 그 값이 우선한다. */
+    size?: ContainerSize;
+}
+/**
+ * 콘텐츠를 읽기 좋은 최대 너비로 제한하고 가로 중앙 정렬하는 페이지 레벨 래퍼다.
+ * 와이드 스크린에서 본문이 화면 끝까지 늘어나지 않게 감쌀 때 쓴다.
+ * (Box와 달리 `max-width` + 중앙정렬 의견을 가진 프리셋이다.)
+ *
+ * ```tsx
+ * <Container size="l" px="component-400">…</Container>
+ * ```
+ */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLElement>>;
+
+interface SectionProps extends BoxProps {
+    /**
+     * 세로 여백 프리셋(`section-*` 토큰). 기본 `section-400`.
+     * `py`를 직접 주면 그 값이 우선한다.
+     */
+    size?: SectionPaddingToken;
+}
+/**
+ * 페이지를 세로로 나누는 구획이다. `section-*` 여백 스케일로 위아래 리듬을 준다.
+ * 기본 시맨틱 엘리먼트는 `<section>`이며 `as`로 바꿀 수 있다.
+ *
+ * ```tsx
+ * <Section size="section-500">…</Section>
+ * ```
+ */
+declare const Section: react.ForwardRefExoticComponent<SectionProps & react.RefAttributes<HTMLElement>>;
+
+export { AlertDialog, type AlertDialogAction, type AlertDialogConfirmAction, type AlertDialogContentProps, Avatar, type AvatarLoadingStatus, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, BottomSheet, type BottomSheetAction, type BottomSheetConfirmAction, type BottomSheetContentProps, type BottomSheetMode, Box, type BoxDisplay, type BoxProps, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, type CompactCoachMarkContentProps, Container, type ContainerProps, type ContainerSize, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Dialog, type DialogAction, type DialogConfirmAction, type DialogContentProps, Display, FLEX_ALIGN, FLEX_JUSTIFY, Flex, type FlexAlign, type FlexDirection, type FlexItemProps, type FlexJustify, type FlexProps, type FlexWrap, type GapToken, Grid, type GridAlign, type GridFlow, type GridItemProps, type GridJustify, type GridProps, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, LOGOS, Label, type LayoutProps, List, type ListGroupProps, ListItem, type ListItemProps, type ListProps, Loading, type LoadingLevelType, Logo, type LogoCategory, type LogoName, type LogoProps, type MarginProps, type MarginToken, Media, MediaContextProvider, type PaddingProps, type PaddingToken, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, type PositionProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, PrimitiveListItem, type PrimitiveListItemProps, type PromiseToastOptions, RATIO, Radio, Ratio, type RatioProps, Section, type SectionPaddingToken, type SectionProps, Select, type SelectButtonSize, type SelectContentProps, type SelectFieldSize, type SelectGroupProps, type SelectItemProps, type SelectPrimitiveItemProps, type SelectProps, type SelectTriggerProps, type SelectTriggerType, type SelectWidthOptions, type SizingProps, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, gapTok as resolveGapToken, resolveLayoutStyle, rootMediaStyle, splitLayoutProps, toast };

package/lib/index.js

@@ -1455,7 +1455,7 @@ import {
   useMemo
 } from "react";
 import clsx14 from "clsx";
-import { IconInfo, IconArrowDownward, IconCheckMark as IconCheckMark2 } from "@liner-fe/icon";
+import { IconInfo, IconArrowChevronDown, IconCheckMark as IconCheckMark2 } from "@liner-fe/icon";
 
 // src/components/ListItem/style.module.scss
 var style_module_default12 = {
@@ -1467,26 +1467,32 @@ var style_module_default12 = {
   "description": "_description_mmjcv_6"
 };
 
-// src/components/Select/style.module.scss
+// src/components/ListItem/primitive/style.module.scss
 var style_module_default13 = {
-  "root": "_root_1x709_3",
-  "label": "_label_1x709_35",
-  "requiredMark": "_requiredMark_1x709_40",
-  "srOnly": "_srOnly_1x709_45",
-  "trigger": "_trigger_1x709_58",
-  "icon": "_icon_1x709_94",
-  "triggerButton": "_triggerButton_1x709_159",
-  "errorMessage": "_errorMessage_1x709_203",
-  "errorText": "_errorText_1x709_211",
-  "content": "_content_1x709_220",
-  "fadeScaleIn": "_fadeScaleIn_1x709_1",
-  "viewport": "_viewport_1x709_251",
-  "selectItem": "_selectItem_1x709_283",
-  "itemLabel": "_itemLabel_1x709_335",
-  "itemIndicator": "_itemIndicator_1x709_340",
-  "trailingSlot": "_trailingSlot_1x709_348",
-  "group": "_group_1x709_361",
-  "groupLabel": "_groupLabel_1x709_376"
+  "root": "_root_1j4ne_2"
+};
+
+// src/components/Select/style.module.scss
+var style_module_default14 = {
+  "root": "_root_1m2x2_3",
+  "label": "_label_1m2x2_35",
+  "requiredMark": "_requiredMark_1m2x2_40",
+  "srOnly": "_srOnly_1m2x2_45",
+  "trigger": "_trigger_1m2x2_58",
+  "icon": "_icon_1m2x2_94",
+  "triggerButton": "_triggerButton_1m2x2_159",
+  "errorMessage": "_errorMessage_1m2x2_203",
+  "errorText": "_errorText_1m2x2_211",
+  "content": "_content_1m2x2_220",
+  "fadeScaleIn": "_fadeScaleIn_1m2x2_1",
+  "viewport": "_viewport_1m2x2_251",
+  "selectItem": "_selectItem_1m2x2_283",
+  "primitiveItem": "_primitiveItem_1m2x2_336",
+  "itemLabel": "_itemLabel_1m2x2_341",
+  "itemIndicator": "_itemIndicator_1m2x2_346",
+  "trailingSlot": "_trailingSlot_1m2x2_354",
+  "group": "_group_1m2x2_367",
+  "groupLabel": "_groupLabel_1m2x2_382"
 };
 
 // src/components/Select/index.tsx
@@ -1529,7 +1535,7 @@ var SelectRoot = forwardRef14(
     return /* @__PURE__ */ jsx18(SelectInternalContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
       "div",
       {
-        className: clsx14(style_module_default13.root, className),
+        className: clsx14(style_module_default14.root, className),
         style: rootStyle,
         "data-size": resolvedSize,
         "data-trigger-type": triggerType,
@@ -1543,12 +1549,12 @@ var SelectRoot = forwardRef14(
               type: "normal",
               weight: "regular",
               color: labelColor,
-              className: style_module_default13.label,
+              className: style_module_default14.label,
               children: [
                 label,
                 required && /* @__PURE__ */ jsxs8(Fragment7, { children: [
-                  /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: style_module_default13.requiredMark, children: "*" }),
-                  /* @__PURE__ */ jsx18("span", { className: style_module_default13.srOnly, children: " (\uD544\uC218)" })
+                  /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: style_module_default14.requiredMark, children: "*" }),
+                  /* @__PURE__ */ jsx18("span", { className: style_module_default14.srOnly, children: " (\uD544\uC218)" })
                 ] })
               ]
             }
@@ -1573,8 +1579,8 @@ var SelectRoot = forwardRef14(
                       level: "tertiary",
                       size: resolvedSize,
                       width: "full",
-                      rightIcon: { icon: IconArrowDownward },
-                      className: style_module_default13.triggerButton,
+                      rightIcon: { icon: IconArrowChevronDown },
+                      className: style_module_default14.triggerButton,
                       children: triggerContent !== void 0 ? (
                         /* triggerContent 제공 시 RadixSelect.Value 완전 우회 — Radix의 hasChildren 경로는
                            useLayoutEffect → SelectImpl setState → context broadcast로 전체 트리 reconciliation을
@@ -1598,7 +1604,7 @@ var SelectRoot = forwardRef14(
                   "aria-labelledby": showLabel ? labelId : void 0,
                   "aria-describedby": showErrorMessage ? errorId : void 0,
                   "aria-invalid": hasError || void 0,
-                  className: style_module_default13.trigger,
+                  className: style_module_default14.trigger,
                   "data-size": resolvedSize,
                   "data-trigger-type": triggerType,
                   children: [
@@ -1608,14 +1614,14 @@ var SelectRoot = forwardRef14(
                          유발. consumer가 controlled value 기반으로 직접 렌더하므로 우회해도 무방. */
                       triggerContent
                     ) : /* @__PURE__ */ jsx18(RadixSelect.Value, { placeholder }),
-                    /* @__PURE__ */ jsx18(RadixSelect.Icon, { className: style_module_default13.icon, children: /* @__PURE__ */ jsx18(IconArrowDownward, { size: "s" }) })
+                    /* @__PURE__ */ jsx18(RadixSelect.Icon, { className: style_module_default14.icon, children: /* @__PURE__ */ jsx18(IconArrowChevronDown, { size: "s" }) })
                   ]
                 }
               )
             ),
             children
           ] }),
-          showErrorMessage && /* @__PURE__ */ jsxs8("span", { id: errorId, "aria-live": "polite", "aria-atomic": "true", className: style_module_default13.errorMessage, children: [
+          showErrorMessage && /* @__PURE__ */ jsxs8("span", { id: errorId, "aria-live": "polite", "aria-atomic": "true", className: style_module_default14.errorMessage, children: [
             /* @__PURE__ */ jsx18(IconInfo, { size: "xs", type: "function-label-negative" }),
             /* @__PURE__ */ jsx18(
               Caption,
@@ -1625,7 +1631,7 @@ var SelectRoot = forwardRef14(
                 type: "normal",
                 weight: "regular",
                 color: "function-label-negative",
-                className: style_module_default13.errorText,
+                className: style_module_default14.errorText,
                 children: error
               }
             )
@@ -1658,10 +1664,10 @@ var SelectContent = forwardRef14(
         ref,
         position,
         sideOffset,
-        className: clsx14(style_module_default13.content, className),
+        className: clsx14(style_module_default14.content, className),
         "data-trigger-type": triggerType,
         style: contentStyle,
-        children: /* @__PURE__ */ jsx18(RadixSelect.Viewport, { className: style_module_default13.viewport, children })
+        children: /* @__PURE__ */ jsx18(RadixSelect.Viewport, { className: style_module_default14.viewport, children })
       }
     ) });
   }
@@ -1707,7 +1713,7 @@ var SelectItem = forwardRef14(
         value,
         textValue: computedTextValue,
         disabled,
-        className: clsx14(style_module_default13.selectItem, className),
+        className: clsx14(style_module_default14.selectItem, className),
         "data-danger": danger ? "" : void 0,
         children: [
           leadingSlot != null && /* @__PURE__ */ jsx18("div", { "data-zone": "leading", children: leadingSlot }),
@@ -1722,7 +1728,7 @@ var SelectItem = forwardRef14(
                   type: "normal",
                   weight: "regular",
                   color: getItemLabelColor(disabled, danger),
-                  className: clsx14(style_module_default12.label, style_module_default13.itemLabel),
+                  className: clsx14(style_module_default12.label, style_module_default14.itemLabel),
                   children: label
                 }
               ),
@@ -1740,8 +1746,8 @@ var SelectItem = forwardRef14(
               }
             )
           ] }),
-          trailingSlot != null && /* @__PURE__ */ jsx18("div", { "data-zone": "trailing", className: style_module_default13.trailingSlot, children: trailingSlot }),
-          /* @__PURE__ */ jsx18(RadixSelect.ItemIndicator, { "data-zone": "trailing", className: style_module_default13.itemIndicator, children: /* @__PURE__ */ jsx18(IconCheckMark2, { size: "xs", type: "brand-label-primary" }) })
+          trailingSlot != null && /* @__PURE__ */ jsx18("div", { "data-zone": "trailing", className: style_module_default14.trailingSlot, children: trailingSlot }),
+          /* @__PURE__ */ jsx18(RadixSelect.ItemIndicator, { "data-zone": "trailing", className: style_module_default14.itemIndicator, children: /* @__PURE__ */ jsx18(IconCheckMark2, { size: "xs", type: "brand-label-primary" }) })
         ]
       }
     );
@@ -1749,7 +1755,7 @@ var SelectItem = forwardRef14(
 );
 SelectItem.displayName = "Select.Item";
 var SelectGroup = forwardRef14(
-  ({ label, children, className, ...rest }, ref) => /* @__PURE__ */ jsxs8(RadixSelect.Group, { ...rest, ref, className: clsx14(style_module_default13.group, className), children: [
+  ({ label, children, className, ...rest }, ref) => /* @__PURE__ */ jsxs8(RadixSelect.Group, { ...rest, ref, className: clsx14(style_module_default14.group, className), children: [
     label != null && /* @__PURE__ */ jsx18(RadixSelect.Label, { asChild: true, children: /* @__PURE__ */ jsx18(
       Caption,
       {
@@ -1758,7 +1764,7 @@ var SelectGroup = forwardRef14(
         type: "normal",
         weight: "regular",
         color: "neutral-label-secondary",
-        className: style_module_default13.groupLabel,
+        className: style_module_default14.groupLabel,
         children: label
       }
     ) }),
@@ -1766,6 +1772,23 @@ var SelectGroup = forwardRef14(
   ] })
 );
 SelectGroup.displayName = "Select.Group";
+var SelectPrimitiveItem = forwardRef14(
+  ({ value, textValue, children, className, ...rest }, ref) => /* @__PURE__ */ jsxs8(
+    RadixSelect.Item,
+    {
+      ...rest,
+      ref,
+      value,
+      textValue,
+      className: clsx14(style_module_default13.root, style_module_default14.primitiveItem, className),
+      children: [
+        /* @__PURE__ */ jsx18(RadixSelect.ItemText, { children: textValue }),
+        children
+      ]
+    }
+  )
+);
+SelectPrimitiveItem.displayName = "Select.PrimitiveItem";
 var SelectTrigger = forwardRef14((props, ref) => {
   const {
     label,
@@ -1810,7 +1833,7 @@ var SelectTrigger = forwardRef14((props, ref) => {
   return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: clsx14(style_module_default13.root, className),
+      className: clsx14(style_module_default14.root, className),
       style: rootStyle,
       "data-size": resolvedSize,
       "data-trigger-type": triggerType,
@@ -1824,12 +1847,12 @@ var SelectTrigger = forwardRef14((props, ref) => {
             type: "normal",
             weight: "regular",
             color: labelColor,
-            className: style_module_default13.label,
+            className: style_module_default14.label,
             children: [
               label,
               required && /* @__PURE__ */ jsxs8(Fragment7, { children: [
-                /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: style_module_default13.requiredMark, children: "*" }),
-                /* @__PURE__ */ jsx18("span", { className: style_module_default13.srOnly, children: " (\uD544\uC218)" })
+                /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: style_module_default14.requiredMark, children: "*" }),
+                /* @__PURE__ */ jsx18("span", { className: style_module_default14.srOnly, children: " (\uD544\uC218)" })
               ] })
             ]
           }
@@ -1841,8 +1864,8 @@ var SelectTrigger = forwardRef14((props, ref) => {
             level: "tertiary",
             size: resolvedSize,
             width: "full",
-            rightIcon: { icon: IconArrowDownward },
-            className: style_module_default13.triggerButton,
+            rightIcon: { icon: IconArrowChevronDown },
+            className: style_module_default14.triggerButton,
             disabled,
             onClick,
             type: "button",
@@ -1856,7 +1879,7 @@ var SelectTrigger = forwardRef14((props, ref) => {
             ref,
             type: "button",
             id,
-            className: style_module_default13.trigger,
+            className: style_module_default14.trigger,
             "data-size": resolvedSize,
             "data-trigger-type": triggerType,
             "data-placeholder": showingPlaceholder ? "" : void 0,
@@ -1865,11 +1888,11 @@ var SelectTrigger = forwardRef14((props, ref) => {
             ...commonAria,
             children: [
               display,
-              /* @__PURE__ */ jsx18("span", { className: style_module_default13.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx18(IconArrowDownward, { size: "s" }) })
+              /* @__PURE__ */ jsx18("span", { className: style_module_default14.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx18(IconArrowChevronDown, { size: "s" }) })
             ]
           }
         ),
-        showErrorMessage && /* @__PURE__ */ jsxs8("span", { id: errorId, "aria-live": "polite", "aria-atomic": "true", className: style_module_default13.errorMessage, children: [
+        showErrorMessage && /* @__PURE__ */ jsxs8("span", { id: errorId, "aria-live": "polite", "aria-atomic": "true", className: style_module_default14.errorMessage, children: [
           /* @__PURE__ */ jsx18(IconInfo, { size: "xs", type: "function-label-negative" }),
           /* @__PURE__ */ jsx18(
             Caption,
@@ -1879,7 +1902,7 @@ var SelectTrigger = forwardRef14((props, ref) => {
               type: "normal",
               weight: "regular",
               color: "function-label-negative",
-              className: style_module_default13.errorText,
+              className: style_module_default14.errorText,
               children: error
             }
           )
@@ -1893,6 +1916,7 @@ var Select = Object.assign(SelectRoot, {
   Trigger: SelectTrigger,
   Content: SelectContent,
   Item: SelectItem,
+  PrimitiveItem: SelectPrimitiveItem,
   Group: SelectGroup
 });
 
@@ -1931,13 +1955,6 @@ import clsx16 from "clsx";
 import { forwardRef as forwardRef15 } from "react";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import clsx15 from "clsx";
-
-// src/components/ListItem/primitive/style.module.scss
-var style_module_default14 = {
-  "root": "_root_1y0m7_2"
-};
-
-// src/components/ListItem/primitive/index.tsx
 import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var PrimitiveListItem = forwardRef15(
   ({ value, leadingSlot, children, trailingSlot, disabled, onClick, role, className, ...rest }, ref) => {
@@ -1969,7 +1986,7 @@ var PrimitiveListItem = forwardRef15(
         ...rest,
         ref,
         role,
-        className: clsx15(style_module_default14.root, className),
+        className: clsx15(style_module_default13.root, className),
         tabIndex: rest.tabIndex ?? -1,
         "data-state": isSelected ? "checked" : "unchecked",
         "data-disabled": disabled ? "" : void 0,
@@ -3614,21 +3631,296 @@ var Ratio = React5.forwardRef(
   ({ ratio = 1, children, ...props }, ref) => /* @__PURE__ */ jsx39(AspectRatioPrimitive.Root, { ref, ratio, ...props, children })
 );
 Ratio.displayName = "Ratio";
+
+// src/components/Box/index.tsx
+import { forwardRef as forwardRef26 } from "react";
+import { Slot as SlotPrimitive2 } from "radix-ui";
+import { vars as vars2 } from "@liner-fe/design-token";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var { Slot: Slot2 } = SlotPrimitive2;
+var padTok = /* @__PURE__ */ __name((k) => k ? vars2.padding[k] : void 0, "padTok");
+var gapTok = /* @__PURE__ */ __name((k) => k ? vars2.gap[k] : void 0, "gapTok");
+var marginTok = /* @__PURE__ */ __name((k) => k ? vars2.size[k] : void 0, "marginTok");
+function resolveLayoutStyle(props) {
+  const {
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    display,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    position,
+    inset,
+    overflow,
+    flexBasis,
+    flexGrow,
+    flexShrink,
+    gridColumn,
+    gridRow,
+    gridArea
+  } = props;
+  const style = {};
+  if (p) style.padding = padTok(p);
+  if (px) {
+    style.paddingLeft = padTok(px);
+    style.paddingRight = padTok(px);
+  }
+  if (py) {
+    style.paddingTop = padTok(py);
+    style.paddingBottom = padTok(py);
+  }
+  if (pt) style.paddingTop = padTok(pt);
+  if (pr) style.paddingRight = padTok(pr);
+  if (pb) style.paddingBottom = padTok(pb);
+  if (pl) style.paddingLeft = padTok(pl);
+  if (m) style.margin = marginTok(m);
+  if (mx) {
+    style.marginLeft = marginTok(mx);
+    style.marginRight = marginTok(mx);
+  }
+  if (my) {
+    style.marginTop = marginTok(my);
+    style.marginBottom = marginTok(my);
+  }
+  if (mt) style.marginTop = marginTok(mt);
+  if (mr) style.marginRight = marginTok(mr);
+  if (mb) style.marginBottom = marginTok(mb);
+  if (ml) style.marginLeft = marginTok(ml);
+  if (display) style.display = display;
+  if (width !== void 0) style.width = width;
+  if (height !== void 0) style.height = height;
+  if (minWidth !== void 0) style.minWidth = minWidth;
+  if (maxWidth !== void 0) style.maxWidth = maxWidth;
+  if (minHeight !== void 0) style.minHeight = minHeight;
+  if (maxHeight !== void 0) style.maxHeight = maxHeight;
+  if (position) style.position = position;
+  if (inset !== void 0) style.inset = inset;
+  if (overflow) style.overflow = overflow;
+  if (flexBasis !== void 0) style.flexBasis = flexBasis;
+  if (flexGrow !== void 0) style.flexGrow = flexGrow;
+  if (flexShrink !== void 0) style.flexShrink = flexShrink;
+  if (gridColumn !== void 0) style.gridColumn = gridColumn;
+  if (gridRow !== void 0) style.gridRow = gridRow;
+  if (gridArea !== void 0) style.gridArea = gridArea;
+  return style;
+}
+__name(resolveLayoutStyle, "resolveLayoutStyle");
+function splitLayoutProps(props) {
+  const {
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    display,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    position,
+    inset,
+    overflow,
+    flexBasis,
+    flexGrow,
+    flexShrink,
+    gridColumn,
+    gridRow,
+    gridArea,
+    ...rest
+  } = props;
+  return {
+    layout: {
+      p,
+      px,
+      py,
+      pt,
+      pr,
+      pb,
+      pl,
+      m,
+      mx,
+      my,
+      mt,
+      mr,
+      mb,
+      ml,
+      display,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      position,
+      inset,
+      overflow,
+      flexBasis,
+      flexGrow,
+      flexShrink,
+      gridColumn,
+      gridRow,
+      gridArea
+    },
+    rest
+  };
+}
+__name(splitLayoutProps, "splitLayoutProps");
+var FLEX_ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  baseline: "baseline",
+  stretch: "stretch"
+};
+var FLEX_JUSTIFY = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+};
+var Box = forwardRef26(/* @__PURE__ */ __name(function Box2({ as: Tag2 = "div", asChild, className, style, children, ...props }, ref) {
+  const { layout, rest } = splitLayoutProps(props);
+  const Comp = asChild ? Slot2 : Tag2;
+  return /* @__PURE__ */ jsx40(Comp, { ref, className, style: { ...resolveLayoutStyle(layout), ...style }, ...rest, children });
+}, "Box"));
+
+// src/components/Flex/index.tsx
+import { forwardRef as forwardRef27 } from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var Flex = forwardRef27(/* @__PURE__ */ __name(function Flex2({ inline, direction, align, justify, wrap, gap, gapX, gapY, style, ...boxProps }, ref) {
+  const flexStyle = {
+    display: inline ? "inline-flex" : "flex",
+    flexDirection: direction,
+    alignItems: align ? FLEX_ALIGN[align] : void 0,
+    justifyContent: justify ? FLEX_JUSTIFY[justify] : void 0,
+    flexWrap: wrap,
+    gap: gapTok(gap),
+    columnGap: gapTok(gapX),
+    rowGap: gapTok(gapY)
+  };
+  return /* @__PURE__ */ jsx41(Box, { ref, style: { ...flexStyle, ...style }, ...boxProps });
+}, "Flex"));
+
+// src/components/Grid/index.tsx
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var GRID_JUSTIFY = {
+  start: "start",
+  center: "center",
+  end: "end",
+  between: "space-between"
+};
+var GRID_FLOW = {
+  row: "row",
+  column: "column",
+  dense: "dense",
+  "row-dense": "row dense",
+  "column-dense": "column dense"
+};
+var track = /* @__PURE__ */ __name((v) => {
+  if (v === void 0) return void 0;
+  return typeof v === "number" ? `repeat(${v}, minmax(0, 1fr))` : v;
+}, "track");
+var Grid = forwardRef28(/* @__PURE__ */ __name(function Grid2({ inline, columns, rows, flow, align, justify, gap, gapX, gapY, style, ...boxProps }, ref) {
+  const gridStyle = {
+    display: inline ? "inline-grid" : "grid",
+    gridTemplateColumns: track(columns),
+    gridTemplateRows: track(rows),
+    gridAutoFlow: flow ? GRID_FLOW[flow] : void 0,
+    alignItems: align,
+    justifyContent: justify ? GRID_JUSTIFY[justify] : void 0,
+    gap: gapTok(gap),
+    columnGap: gapTok(gapX),
+    rowGap: gapTok(gapY)
+  };
+  return /* @__PURE__ */ jsx42(Box, { ref, style: { ...gridStyle, ...style }, ...boxProps });
+}, "Grid"));
+
+// src/components/Container/index.tsx
+import { forwardRef as forwardRef29 } from "react";
+import { breakpointOrigin as breakpointOrigin2 } from "@liner-fe/design-token";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var SIZE_MAX_WIDTH = {
+  s: breakpointOrigin2.s,
+  // 600px
+  m: breakpointOrigin2.m,
+  // 1024px
+  l: breakpointOrigin2.l,
+  // 1366px
+  xl: breakpointOrigin2.xl
+  // 1536px
+};
+var Container = forwardRef29(/* @__PURE__ */ __name(function Container2({ size = "l", style, maxWidth, ...boxProps }, ref) {
+  const containerStyle = {
+    width: "100%",
+    marginInline: "auto"
+  };
+  return /* @__PURE__ */ jsx43(
+    Box,
+    {
+      ref,
+      maxWidth: maxWidth ?? SIZE_MAX_WIDTH[size],
+      style: { ...containerStyle, ...style },
+      ...boxProps
+    }
+  );
+}, "Container"));
+
+// src/components/Section/index.tsx
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var Section = forwardRef30(/* @__PURE__ */ __name(function Section2({ size = "section-400", py, as = "section", ...boxProps }, ref) {
+  return /* @__PURE__ */ jsx44(Box, { ref, as, py: py ?? size, ...boxProps });
+}, "Section"));
 export {
   AlertDialog,
   Avatar,
   Badge,
   BottomSheet,
+  Box,
   Button,
   Caption,
   Checkbox,
   CoachMark,
   CompactCoachMark,
+  Container,
   DEFAULT_LEVEL_OPTIONS,
   DEFAULT_SIZE_OPTIONS,
   DefaultButton,
   Dialog,
   Display,
+  FLEX_ALIGN,
+  FLEX_JUSTIFY,
+  Flex,
+  Grid,
   Heading,
   ICON_LEVEL_OPTIONS,
   ICON_SIZE_OPTIONS,
@@ -3648,6 +3940,7 @@ export {
   RATIO,
   Radio,
   Ratio,
+  Section,
   Select,
   TEXT_LEVEL_OPTIONS,
   TEXT_SIZE_OPTIONS,
@@ -3661,6 +3954,9 @@ export {
   arrayToStyleObject,
   isEmptyObject,
   objectToArray,
+  gapTok as resolveGapToken,
+  resolveLayoutStyle,
   rootMediaStyle,
+  splitLayoutProps,
   toast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "3.5.3",
+  "version": "3.6.0",
   "type": "module",
   "sideEffects": false,
   "dependencies": {
@@ -22,7 +22,7 @@
     "vaul": "1.1.2",
     "@liner-fe/design-token": "^3.0.5",
     "@liner-fe/design-token-primitive": "^0.2.50",
-    "@liner-fe/icon": "^2.0.23",
+    "@liner-fe/icon": "^2.0.24",
     "@liner-fe/illust": "^1.0.1"
   },
   "devDependencies": {