@liner-fe/prism 3.5.4 → 3.6.0

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';
@@ -1036,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 SelectPrimitiveItemProps, 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

@@ -3631,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,
@@ -3665,6 +3940,7 @@ export {
   RATIO,
   Radio,
   Ratio,
+  Section,
   Select,
   TEXT_LEVEL_OPTIONS,
   TEXT_SIZE_OPTIONS,
@@ -3678,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.4",
+  "version": "3.6.0",
   "type": "module",
   "sideEffects": false,
   "dependencies": {
@@ -20,10 +20,10 @@
     "react-dom": "^19.1.0",
     "jotai": "2.18.0",
     "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/illust": "^1.0.1",
-    "@liner-fe/design-token": "^3.0.5"
+    "@liner-fe/icon": "^2.0.24",
+    "@liner-fe/illust": "^1.0.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",