@sanity-labs/ui-poc 0.0.1-alpha.1 → 0.0.1-alpha.2

package/dist/components.css

@@ -1,9 +0,0 @@
-.sui-Box {
-  display: block;
-}
-.sui-Flex {
-  display: flex;
-}
-.sui-Grid {
-  display: grid;
-}

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 import {JSX} from 'react/jsx-runtime'
 import {default as React_2} from 'react'
 
+declare const ALIGN_ITEMS: readonly ['baseline', 'center', 'flex-end', 'flex-start', 'stretch']
+
+declare type AlignItems = (typeof ALIGN_ITEMS)[number]
+
 declare type BorderProps = {
   /** CSS **border** property */
   border?: Responsive<boolean>
@@ -17,9 +21,10 @@ declare type BorderProps = {
 }
 
 /** @public */
-export declare function Box<T extends React_2.ElementType = 'div'>(
-  props: BoxProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof BoxProps<T>>,
-): JSX.Element
+export declare function Box<T extends React_2.ElementType = 'div'>({
+  display,
+  ...props
+}: BoxProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof BoxProps<T>>): JSX.Element
 
 /** @public */
 export declare interface BoxProps<T extends React_2.ElementType> extends LayoutProps {
@@ -31,8 +36,29 @@ export declare interface BoxProps<T extends React_2.ElementType> extends LayoutP
 
 declare const DISPLAY_BLOCK: readonly ['block', 'inline-block', 'none']
 
+declare const DISPLAY_FLEX: readonly ['flex', 'inline-flex', 'none']
+
+declare const DISPLAY_GRID: readonly ['grid', 'inline-grid', 'none']
+
 declare type DisplayBlock = (typeof DISPLAY_BLOCK)[number]
 
+declare type DisplayFlex = (typeof DISPLAY_FLEX)[number]
+
+declare type DisplayGrid = (typeof DISPLAY_GRID)[number]
+
+/** @public */
+export declare function Divider(): JSX.Element
+
+/** @public */
+export declare function Flex<T extends React_2.ElementType = 'div'>({
+  display,
+  ...props
+}: FlexProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof FlexProps<T>>): JSX.Element
+
+declare const FLEX_DIRECTION: readonly ['row', 'row-reverse', 'column', 'column-reverse']
+
+declare const FLEX_WRAP: readonly ['wrap', 'wrap-reverse', 'nowrap']
+
 declare type FlexChildProps = {
   /** CSS **flex-basis** property */
   flexBasis?: Responsive<string>
@@ -42,6 +68,53 @@ declare type FlexChildProps = {
   flexShrink?: Responsive<number>
 }
 
+declare type FlexDirection = (typeof FLEX_DIRECTION)[number]
+
+declare type FlexParentProps = {
+  /** CSS **align-items** property */
+  alignItems?: Responsive<AlignItems>
+  /** CSS **justify-content** property */
+  justifyContent?: Responsive<JustifyContent>
+  /** CSS **flex-direction** property */
+  flexDirection?: Responsive<FlexDirection>
+  /** CSS **flex-wrap** property */
+  flexWrap?: Responsive<FlexWrap>
+}
+
+/** @public */
+export declare interface FlexProps<T extends React_2.ElementType>
+  extends FlexParentProps, GapProps, LayoutProps {
+  /** Element to render */
+  as?: T
+  /** CSS **display** property */
+  display?: Responsive<DisplayFlex>
+}
+
+declare type FlexWrap = (typeof FLEX_WRAP)[number]
+
+declare const FONT_WEIGHT: string[]
+
+declare type FontWeight = (typeof FONT_WEIGHT)[number]
+
+declare type GapProps = {
+  /** CSS **gap** property */
+  gap?: Responsive<Space>
+  /** CSS **row-gap** property */
+  rowGap?: Responsive<Space>
+  /** CSS **column-gap** property */
+  columnGap?: Responsive<Space>
+}
+
+/** @public */
+export declare function Grid<T extends React_2.ElementType = 'div'>({
+  display,
+  ...props
+}: GridProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof GridProps<T>>): JSX.Element
+
+declare const GRID_AUTO_FLOW: readonly ['row', 'column', 'row dense', 'column dense', 'dense']
+
+declare type GridAutoFlow = (typeof GRID_AUTO_FLOW)[number]
+
 declare type GridChildProps = {
   /** CSS **grid-column** property */
   gridColumn?: Responsive<string>
@@ -57,6 +130,28 @@ declare type GridChildProps = {
   gridRowEnd?: Responsive<string>
 }
 
+declare type GridParentProps = {
+  /** CSS **grid-auto-flow** property */
+  gridAutoFlow?: Responsive<GridAutoFlow>
+  /** CSS **grid-auto-columns** property */
+  gridAutoColumns?: Responsive<string>
+  /** CSS **grid-auto-row** property */
+  gridAutoRows?: Responsive<string>
+  /** CSS **grid-template-columns** property */
+  gridTemplateColumns?: Responsive<string>
+  /** CSS **grid-template-rows** property */
+  gridTemplateRows?: Responsive<string>
+}
+
+/** @public */
+export declare interface GridProps<T extends React_2.ElementType>
+  extends GridParentProps, GapProps, LayoutProps {
+  /** Element to render */
+  as?: T
+  /** CSS **display** property */
+  display?: Responsive<DisplayGrid>
+}
+
 declare type HeightProps = {
   /** CSS **height** property */
   height?: Responsive<string>
@@ -66,6 +161,17 @@ declare type HeightProps = {
   maxHeight?: Responsive<string>
 }
 
+declare const JUSTIFY_CONTENT: readonly [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+]
+
+declare type JustifyContent = (typeof JUSTIFY_CONTENT)[number]
+
 declare interface LayoutProps
   extends
     ToneProps,
@@ -143,6 +249,8 @@ declare type PositionProps = {
   bottom?: Responsive<SpaceAuto>
   /** CSS **left** property */
   left?: Responsive<SpaceAuto>
+  /** CSS **z-index** property */
+  zIndex?: Responsive<number>
 }
 
 declare const RADIUS: (string | number)[]
@@ -182,6 +290,29 @@ declare const SPACE_AUTO: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'auto']
 
 declare type SpaceAuto = (typeof SPACE_AUTO)[number]
 
+/** @public */
+declare function Text_2<T extends React_2.ElementType = 'p'>({
+  size,
+  ...props
+}: TextProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof TextProps<T>>): JSX.Element
+export {Text_2 as Text}
+
+declare const TEXT_ALIGN: string[]
+
+declare const TEXT_SIZE: number[]
+
+declare type TextAlign = (typeof TEXT_ALIGN)[number]
+
+/** @public */
+export declare interface TextProps<T extends React_2.ElementType> extends TypographyProps {
+  /** Element to render */
+  as?: T
+  /** CSS **font-size** property */
+  size?: TextSize
+}
+
+declare type TextSize = (typeof TEXT_SIZE)[number]
+
 declare const TONE: string[]
 
 declare type Tone = (typeof TONE)[number]
@@ -191,6 +322,19 @@ declare type ToneProps = {
   tone?: Responsive<Tone>
 }
 
+declare interface TypographyProps extends MarginProps {
+  /** CSS **text-align** property */
+  align?: TextAlign
+  /** CSS **-webkit-line-clamp** property */
+  lineClamp?: number
+  /** CSS **color** property */
+  muted?: boolean
+  /** CSS **text-box-trim** property */
+  trim?: boolean
+  /** CSS **font-weight** property */
+  weight?: FontWeight
+}
+
 declare type WidthProps = {
   /** CSS **width** property */
   width?: Responsive<string>

package/dist/index.js

@@ -212,6 +212,11 @@ const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
     type: "union",
     className: "left",
     values: SPACE_AUTO
+  },
+  zIndex: {
+    type: "number",
+    className: "z-index",
+    variable: "--z-index"
   }
 }, TONE = ["default", "neutral", "primary", "suggest", "positive", "caution", "critical"], toneProps = {
   tone: {
@@ -246,27 +251,29 @@ const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
   ...overflowProps,
   ...flexChildProps,
   ...gridChildProps
-}, DISPLAY_BLOCK = ["block", "inline-block", "none"], PREFIX = "sui", BREAKPOINTS_LENGTH = 7;
-function getProps(allProps, styleProps) {
-  let className = allProps?.className || "", style = allProps?.style || {};
-  for (const key in allProps)
-    if (!(!styleProps?.[key] || !styleProps?.[key].className))
-      if (Array.isArray(allProps[key]))
-        for (let i = 0, len = Math.min(allProps[key].length, BREAKPOINTS_LENGTH); i < len; i++)
-          className = classNames(className, getClassName(allProps[key][i], styleProps[key], i)), style = { ...style, ...getStyle(allProps[key][i], styleProps[key], i) };
-      else
-        className = classNames(className, getClassName(allProps[key], styleProps[key])), style = { ...style, ...getStyle(allProps[key], styleProps[key]) };
-  const propsWithoutStyleProps = {};
-  for (const key in allProps)
-    (!styleProps?.[key] || !styleProps[key].className) && (propsWithoutStyleProps[key] = allProps[key]);
-  return { ...propsWithoutStyleProps, className, style };
+}, DISPLAY_BLOCK = ["block", "inline-block", "none"], DISPLAY_FLEX = ["flex", "inline-flex", "none"], DISPLAY_GRID = ["grid", "inline-grid", "none"], PREFIX = "sui", BREAKPOINTS_LENGTH = 7;
+function getProps(componentProps, propDefs) {
+  let className = componentProps?.className || "", style = componentProps?.style || {};
+  const restProps = {};
+  for (const key in componentProps) {
+    if (!propDefs?.[key] || !propDefs?.[key].className) {
+      restProps[key] = componentProps[key];
+      continue;
+    }
+    if (Array.isArray(componentProps[key]))
+      for (let i = 0, len = Math.min(componentProps[key].length, BREAKPOINTS_LENGTH); i < len; i++)
+        className = classNames(className, getClassName(componentProps[key][i], propDefs[key], i)), style = { ...style, ...getStyle(componentProps[key][i], propDefs[key], i) };
+    else
+      className = classNames(className, getClassName(componentProps[key], propDefs[key])), style = { ...style, ...getStyle(componentProps[key], propDefs[key]) };
+  }
+  return { ...restProps, className, style };
 }
-function getClassName(prop, styleProp, bp) {
-  return styleProp.type === "union" && styleProp.values?.includes(prop) ? `${PREFIX}-${styleProp.className}${typeof prop == "string" ? `-${prop}` : prop}${bp ? `-bp-${bp}` : ""}` : styleProp.type === "string" || styleProp.type === "number" ? `${PREFIX}-${styleProp.className}${bp ? `-bp-${bp}` : ""}` : styleProp.type === "boolean" ? `${PREFIX}-${prop ? styleProp.className : styleProp.inverse}${bp ? `-bp-${bp}` : ""}` : "";
+function getClassName(prop, propDef, bp) {
+  return propDef.type === "union" && propDef.values?.includes(prop) ? `${PREFIX}-${propDef.className}${typeof prop == "string" ? `-${prop}` : prop}${bp ? `-bp-${bp}` : ""}` : propDef.type === "string" || propDef.type === "number" ? `${PREFIX}-${propDef.className}${bp ? `-bp-${bp}` : ""}` : propDef.type === "boolean" ? `${PREFIX}-${prop ? propDef.className : propDef.inverse}${bp ? `-bp-${bp}` : ""}` : "";
 }
-function getStyle(prop, styleProp, bp) {
-  return styleProp.type === "string" || styleProp.type === "number" ? {
-    [`${styleProp.variable}${bp ? `-bp-${bp}` : ""}`]: prop
+function getStyle(prop, propDef, bp) {
+  return propDef.type === "string" || propDef.type === "number" ? {
+    [`${propDef.variable}${bp ? `-bp-${bp}` : ""}`]: prop
   } : {};
 }
 const boxProps = {
@@ -280,11 +287,191 @@ const boxProps = {
   },
   ...layoutProps
 };
-function Box(props) {
-  const { as, children, className, style, ...rest } = getProps(props, boxProps);
+function Box({
+  display = "block",
+  ...props
+}) {
+  const { as, children, className, style, ...rest } = getProps({ display, ...props }, boxProps);
   return /* @__PURE__ */ jsx(as || "div", { className: classNames("sui-Box", className), style, "data-ui": "Box", ...rest, children });
 }
+function Divider() {
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      className: "sui-Divider sui-border-bottom-none sui-border-left-none sui-border-right-none sui-border-top",
+      "data-ui": "Divider"
+    }
+  );
+}
+const ALIGN_ITEMS = ["baseline", "center", "flex-end", "flex-start", "stretch"], JUSTIFY_CONTENT = [
+  "flex-start",
+  "flex-end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly"
+], FLEX_DIRECTION = ["row", "row-reverse", "column", "column-reverse"], FLEX_WRAP = ["wrap", "wrap-reverse", "nowrap"], flexParentProps = {
+  alignItems: {
+    type: "union",
+    className: "align-items",
+    values: ALIGN_ITEMS
+  },
+  justifyContent: {
+    type: "union",
+    className: "justify-content",
+    values: JUSTIFY_CONTENT
+  },
+  flexDirection: {
+    type: "union",
+    className: "flex-direction",
+    values: FLEX_DIRECTION
+  },
+  flexWrap: {
+    type: "union",
+    className: "flex-wrap",
+    values: FLEX_WRAP
+  }
+}, gapProps = {
+  gap: {
+    type: "union",
+    className: "gap",
+    values: SPACE
+  },
+  rowGap: {
+    type: "union",
+    className: "row-gap",
+    values: SPACE
+  },
+  columnGap: {
+    type: "union",
+    className: "column-gap",
+    values: SPACE
+  }
+}, flexProps = {
+  as: {
+    type: "string"
+  },
+  display: {
+    type: "union",
+    className: "display",
+    values: DISPLAY_FLEX
+  },
+  ...flexParentProps,
+  ...gapProps,
+  ...layoutProps
+};
+function Flex({
+  display = "flex",
+  ...props
+}) {
+  const { as, children, className, style, ...rest } = getProps({ display, ...props }, flexProps);
+  return /* @__PURE__ */ jsx(as || "div", { className: classNames("sui-Flex", className), style, "data-ui": "Flex", ...rest, children });
+}
+const GRID_AUTO_FLOW = ["row", "column", "row dense", "column dense", "dense"], gridParentProps = {
+  gridAutoFlow: {
+    type: "union",
+    className: "grid-auto-flow",
+    values: GRID_AUTO_FLOW
+  },
+  gridAutoColumns: {
+    type: "string",
+    className: "grid-auto-columns",
+    variable: "--grid-auto-columns"
+  },
+  gridAutoRows: {
+    type: "string",
+    className: "grid-auto-rows",
+    variable: "--grid-auto-rows"
+  },
+  gridTemplateColumns: {
+    type: "string",
+    className: "grid-template-columns",
+    variable: "--grid-template-columns"
+  },
+  gridTemplateRows: {
+    type: "string",
+    className: "grid-template-rows",
+    variable: "--grid-template-rows"
+  }
+}, gridProps = {
+  as: {
+    type: "string"
+  },
+  display: {
+    type: "union",
+    className: "display",
+    values: DISPLAY_GRID
+  },
+  ...gridParentProps,
+  ...gapProps,
+  ...layoutProps
+};
+function Grid({
+  display = "grid",
+  ...props
+}) {
+  const { as, children, className, style, ...rest } = getProps({ display, ...props }, gridProps);
+  return /* @__PURE__ */ jsx(as || "div", { className: classNames("sui-Grid", className), style, "data-ui": "Grid", ...rest, children });
+}
+const FONT_WEIGHT = ["regular", "medium", "semibold", "bold"], TEXT_ALIGN = ["left", "center", "right", "justify"], typographyProps = {
+  align: {
+    type: "union",
+    className: "text",
+    values: TEXT_ALIGN
+  },
+  lineClamp: {
+    type: "number",
+    className: "line-clamp",
+    variable: "--line-clamp"
+  },
+  muted: {
+    type: "boolean",
+    className: "text-muted",
+    inverse: "text-default"
+  },
+  trim: {
+    type: "boolean",
+    className: "text-trim",
+    inverse: "text-trim-none"
+  },
+  weight: {
+    type: "union",
+    className: "weight",
+    values: FONT_WEIGHT
+  },
+  ...marginProps
+}, TEXT_SIZE = [0, 1, 2, 3, 4], textProps = {
+  as: {
+    type: "string"
+  },
+  size: {
+    type: "union",
+    className: "text-body",
+    values: TEXT_SIZE
+  },
+  ...typographyProps
+};
+function Text({
+  size = 2,
+  ...props
+}) {
+  const { as, children, className, style, ...rest } = getProps({ size, ...props }, textProps), Component = as || "p";
+  return props.lineClamp && props.trim ? /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classNames("sui-Text", className?.replace("sui-line-clamp", "")),
+      style,
+      "data-ui": "Text",
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { className: "sui-line-clamp", children })
+    }
+  ) : /* @__PURE__ */ jsx(Component, { className: classNames("sui-Text", className), style, "data-ui": "Text", ...rest, children });
+}
 export {
-  Box
+  Box,
+  Divider,
+  Flex,
+  Grid,
+  Text
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/types/Radius.ts","../src/props/border.ts","../src/props/flexChild.ts","../src/props/gridChild.ts","../src/props/height.ts","../src/types/Space.ts","../src/props/margin.ts","../src/types/Overflow.ts","../src/props/overflow.ts","../src/props/padding.ts","../src/types/Position.ts","../src/props/position.ts","../src/types/Tone.ts","../src/props/tone.ts","../src/props/width.ts","../src/props/layout.ts","../src/types/Display.ts","../src/utils/getProps.ts","../src/components/box.props.ts","../src/components/Box.tsx"],"sourcesContent":["export const RADIUS = [0, 1, 2, 3, 4, 5, 6, 'full']\nexport type Radius = (typeof RADIUS)[number]\n","import {type StyleProp} from '../types/StyleProp'\nimport {RADIUS, type Radius} from '../types/Radius'\nimport {type Responsive} from '../types/Responsive'\n\nexport type BorderProps = {\n  /** CSS **border** property */\n  border?: Responsive<boolean>\n  /** CSS **border-top** property */\n  borderTop?: Responsive<boolean>\n  /** CSS **border-right** property */\n  borderRight?: Responsive<boolean>\n  /** CSS **border-bottom** property */\n  borderBottom?: Responsive<boolean>\n  /** CSS **border-left** property */\n  borderLeft?: Responsive<boolean>\n  /** CSS **border-radius** property */\n  radius?: Responsive<Radius>\n}\n\nexport const borderProps: Record<string, StyleProp> = {\n  border: {\n    type: 'boolean',\n    className: 'border',\n    inverse: 'border-none',\n  },\n  borderTop: {\n    type: 'boolean',\n    className: 'border-top',\n    inverse: 'border-top-none',\n  },\n  borderRight: {\n    type: 'boolean',\n    className: 'border-right',\n    inverse: 'border-right-none',\n  },\n  borderBottom: {\n    type: 'boolean',\n    className: 'border-bottom',\n    inverse: 'border-bottom-none',\n  },\n  borderLeft: {\n    type: 'boolean',\n    className: 'border-left',\n    inverse: 'border-left-none',\n  },\n  radius: {\n    type: 'union',\n    className: 'radius',\n    values: RADIUS,\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\n\nexport type FlexChildProps = {\n  /** CSS **flex-basis** property */\n  flexBasis?: Responsive<string>\n  /** CSS **flex-grow** property */\n  flexGrow?: Responsive<number>\n  /** CSS **flex-shrink** property */\n  flexShrink?: Responsive<number>\n}\n\nexport const flexChildProps: Record<string, StyleProp> = {\n  flexBasis: {\n    type: 'string',\n    className: 'flex-basis',\n    variable: '--flex-basis',\n  },\n  flexGrow: {\n    type: 'number',\n    className: 'flex-grow',\n    variable: '--flex-grow',\n  },\n  flexShrink: {\n    type: 'number',\n    className: 'flex-shrink',\n    variable: '--flex-shrink',\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\n\nexport type GridChildProps = {\n  /** CSS **grid-column** property */\n  gridColumn?: Responsive<string>\n  /** CSS **grid-column-start** property */\n  gridColumnStart?: Responsive<string>\n  /** CSS **grid-column-end** property */\n  gridColumnEnd?: Responsive<string>\n  /** CSS **grid-row** property */\n  gridRow?: Responsive<string>\n  /** CSS **grid-row-start** property */\n  gridRowStart?: Responsive<string>\n  /** CSS **grid-row-end** property */\n  gridRowEnd?: Responsive<string>\n}\n\nexport const gridChildProps: Record<string, StyleProp> = {\n  gridColumn: {\n    type: 'string',\n    className: 'grid-column',\n    variable: '--grid-column',\n  },\n  gridColumnStart: {\n    type: 'string',\n    className: 'grid-column-start',\n    variable: '--grid-column-start',\n  },\n  gridColumnEnd: {\n    type: 'string',\n    className: 'grid-column-end',\n    variable: '--grid-column-end',\n  },\n  gridRow: {\n    type: 'string',\n    className: 'grid-row',\n    variable: '--grid-row',\n  },\n  gridRowStart: {\n    type: 'string',\n    className: 'grid-row-start',\n    variable: '--grid-row-start',\n  },\n  gridRowEnd: {\n    type: 'string',\n    className: 'grid-row-end',\n    variable: '--grid-row-end',\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\n\nexport type HeightProps = {\n  /** CSS **height** property */\n  height?: Responsive<string>\n  /** CSS **min-height** property */\n  minHeight?: Responsive<string>\n  /** CSS **max-height** property */\n  maxHeight?: Responsive<string>\n}\n\nexport const heightProps: Record<string, StyleProp> = {\n  height: {\n    type: 'string',\n    className: 'height',\n    variable: '--height',\n  },\n  minHeight: {\n    type: 'string',\n    className: 'min-height',\n    variable: '--min-height',\n  },\n  maxHeight: {\n    type: 'string',\n    className: 'max-height',\n    variable: '--max-height',\n  },\n}\n","export const SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const\nexport type Space = (typeof SPACE)[number]\n\nexport const SPACE_AUTO = [...SPACE, 'auto'] as const\nexport type SpaceAuto = (typeof SPACE_AUTO)[number]\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\nimport {SPACE_AUTO, type SpaceAuto} from '../types/Space'\n\nexport type MarginProps = {\n  /** CSS **margin** property */\n  margin?: Responsive<SpaceAuto>\n  /** CSS **margin-left** and **margin-right** properties */\n  marginX?: Responsive<SpaceAuto>\n  /** CSS **margin-top** and **margin-bottom** properties */\n  marginY?: Responsive<SpaceAuto>\n  /** CSS **margin-top** property */\n  marginTop?: Responsive<SpaceAuto>\n  /** CSS **margin-right** property */\n  marginRight?: Responsive<SpaceAuto>\n  /** CSS **margin-bottom** property */\n  marginBottom?: Responsive<SpaceAuto>\n  /** CSS **margin-left** property */\n  marginLeft?: Responsive<SpaceAuto>\n}\n\nexport const marginProps: Record<string, StyleProp> = {\n  margin: {\n    type: 'union',\n    className: 'm',\n    values: SPACE_AUTO,\n  },\n  marginX: {\n    type: 'union',\n    className: 'mx',\n    values: SPACE_AUTO,\n  },\n  marginY: {\n    type: 'union',\n    className: 'my',\n    values: SPACE_AUTO,\n  },\n  marginTop: {\n    type: 'union',\n    className: 'mt',\n    values: SPACE_AUTO,\n  },\n  marginRight: {\n    type: 'union',\n    className: 'mr',\n    values: SPACE_AUTO,\n  },\n  marginBottom: {\n    type: 'union',\n    className: 'mb',\n    values: SPACE_AUTO,\n  },\n  marginLeft: {\n    type: 'union',\n    className: 'ml',\n    values: SPACE_AUTO,\n  },\n}\n","export const OVERFLOW = ['visible', 'hidden', 'auto', 'scroll', 'clip']\nexport type Overflow = (typeof OVERFLOW)[number]\n","import {OVERFLOW, type Overflow} from '../types/Overflow'\nimport {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\n\nexport type OverflowProps = {\n  /** CSS **overflow** property */\n  overflow?: Responsive<Overflow>\n  /** CSS **overflow-x** property */\n  overflowX?: Responsive<Overflow>\n  /** CSS **overflow-y** property */\n  overflowY?: Responsive<Overflow>\n}\n\nexport const overflowProps: Record<string, StyleProp> = {\n  overflow: {\n    type: 'union',\n    className: 'overflow',\n    values: OVERFLOW,\n  },\n  overflowX: {\n    type: 'union',\n    className: 'overflow-x',\n    values: OVERFLOW,\n  },\n  overflowY: {\n    type: 'union',\n    className: 'overflow-y',\n    values: OVERFLOW,\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\nimport {SPACE, type Space} from '../types/Space'\n\nexport interface PaddingProps {\n  /** CSS **padding** property */\n  padding?: Responsive<Space>\n  /** CSS **padding-left** and **padding-right** properties */\n  paddingX?: Responsive<Space>\n  /** CSS **padding-top** and **padding-bottom** properties */\n  paddingY?: Responsive<Space>\n  /** CSS **padding-top** property */\n  paddingTop?: Responsive<Space>\n  /** CSS **padding-right** property */\n  paddingRight?: Responsive<Space>\n  /** CSS **padding-bottom** property */\n  paddingBottom?: Responsive<Space>\n  /** CSS **padding-left** property */\n  paddingLeft?: Responsive<Space>\n}\n\nexport const paddingProps: Record<string, StyleProp> = {\n  padding: {\n    type: 'union',\n    className: 'p',\n    values: SPACE,\n  },\n  paddingX: {\n    type: 'union',\n    className: 'px',\n    values: SPACE,\n  },\n  paddingY: {\n    type: 'union',\n    className: 'py',\n    values: SPACE,\n  },\n  paddingTop: {\n    type: 'union',\n    className: 'pt',\n    values: SPACE,\n  },\n  paddingRight: {\n    type: 'union',\n    className: 'pr',\n    values: SPACE,\n  },\n  paddingBottom: {\n    type: 'union',\n    className: 'pb',\n    values: SPACE,\n  },\n  paddingLeft: {\n    type: 'union',\n    className: 'pl',\n    values: SPACE,\n  },\n}\n","export const POSITION = ['absolute', 'fixed', 'relative', 'static', 'sticky']\nexport type Position = (typeof POSITION)[number]\n","import {POSITION, type Position} from '../types/Position'\nimport {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\nimport {SPACE_AUTO, type SpaceAuto} from '../types/Space'\n\nexport type PositionProps = {\n  /** CSS **position** property */\n  position?: Responsive<Position>\n  /** CSS **inset** property */\n  inset?: Responsive<SpaceAuto>\n  /** CSS **top** property */\n  top?: Responsive<SpaceAuto>\n  /** CSS **right** property */\n  right?: Responsive<SpaceAuto>\n  /** CSS **bottom** property */\n  bottom?: Responsive<SpaceAuto>\n  /** CSS **left** property */\n  left?: Responsive<SpaceAuto>\n}\n\nexport const positionProps: Record<string, StyleProp> = {\n  position: {\n    type: 'union',\n    className: 'position',\n    values: POSITION,\n  },\n  inset: {\n    type: 'union',\n    className: 'inset',\n    values: SPACE_AUTO,\n  },\n  top: {\n    type: 'union',\n    className: 'top',\n    values: SPACE_AUTO,\n  },\n  right: {\n    type: 'union',\n    className: 'right',\n    values: SPACE_AUTO,\n  },\n  bottom: {\n    type: 'union',\n    className: 'bottom',\n    values: SPACE_AUTO,\n  },\n  left: {\n    type: 'union',\n    className: 'left',\n    values: SPACE_AUTO,\n  },\n}\n","export const TONE = ['default', 'neutral', 'primary', 'suggest', 'positive', 'caution', 'critical']\nexport type Tone = (typeof TONE)[number]\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\nimport {TONE, type Tone} from '../types/Tone'\n\nexport type ToneProps = {\n  /** CSS **background-color** property */\n  tone?: Responsive<Tone>\n}\n\nexport const toneProps: Record<string, StyleProp> = {\n  tone: {\n    type: 'union',\n    className: 'tone',\n    values: TONE,\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\n\nexport type WidthProps = {\n  /** CSS **width** property */\n  width?: Responsive<string>\n  /** CSS **min-width** property */\n  minWidth?: Responsive<string>\n  /** CSS **max-width** property */\n  maxWidth?: Responsive<string>\n}\n\nexport const widthProps: Record<string, StyleProp> = {\n  width: {\n    type: 'string',\n    className: 'width',\n    variable: '--width',\n  },\n  minWidth: {\n    type: 'string',\n    className: 'min-width',\n    variable: '--min-width',\n  },\n  maxWidth: {\n    type: 'string',\n    className: 'max-width',\n    variable: '--max-width',\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type BorderProps, borderProps} from './border'\nimport {type FlexChildProps, flexChildProps} from './flexChild'\nimport {type GridChildProps, gridChildProps} from './gridChild'\nimport {type HeightProps, heightProps} from './height'\nimport {type MarginProps, marginProps} from './margin'\nimport {type OverflowProps, overflowProps} from './overflow'\nimport {type PaddingProps, paddingProps} from './padding'\nimport {type PositionProps, positionProps} from './position'\nimport {type ToneProps, toneProps} from './tone'\nimport {type WidthProps, widthProps} from './width'\n\nexport interface LayoutProps\n  extends\n    ToneProps,\n    WidthProps,\n    HeightProps,\n    MarginProps,\n    BorderProps,\n    PaddingProps,\n    PositionProps,\n    OverflowProps,\n    FlexChildProps,\n    GridChildProps {}\n\nexport const layoutProps: Record<string, StyleProp> = {\n  ...toneProps,\n  ...widthProps,\n  ...heightProps,\n  ...marginProps,\n  ...borderProps,\n  ...paddingProps,\n  ...positionProps,\n  ...overflowProps,\n  ...flexChildProps,\n  ...gridChildProps,\n}\n","export const DISPLAY_BLOCK = ['block', 'inline-block', 'none'] as const\nexport type DisplayBlock = (typeof DISPLAY_BLOCK)[number]\n\nexport const DISPLAY_FLEX = ['flex', 'inline-flex', 'none'] as const\nexport type DisplayFlex = (typeof DISPLAY_FLEX)[number]\n\nexport const DISPLAY_GRID = ['grid', 'inline-grid', 'none'] as const\nexport type DisplayGrid = (typeof DISPLAY_GRID)[number]\n","import classNames from 'classnames'\n\nimport {type StyleProp} from '../types/StyleProp'\n\nconst PREFIX = 'sui'\nconst BREAKPOINTS_LENGTH = 7\n\ninterface AllProps {\n  className?: string\n  style?: React.CSSProperties\n  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n  [key: string]: any\n}\n\nexport function getProps<P extends AllProps, T extends Record<string, StyleProp>>(\n  allProps?: P,\n  styleProps?: T,\n): AllProps {\n  let className = allProps?.className || ''\n  let style = allProps?.style || {}\n\n  // Iterate through the keys of all props on the component\n  for (const key in allProps) {\n    // Bypass props that aren't style props\n    if (!styleProps?.[key] || !styleProps?.[key].className) {\n      continue\n    }\n\n    // Process style props\n    if (Array.isArray(allProps[key])) {\n      // Responsive array: generate a class name and style per breakpoint\n      for (let i = 0, len = Math.min(allProps[key].length, BREAKPOINTS_LENGTH); i < len; i++) {\n        className = classNames(className, getClassName(allProps[key][i], styleProps[key], i))\n        style = {...style, ...getStyle(allProps[key][i], styleProps[key], i)}\n      }\n    } else {\n      // Single value: generate one class name and style\n      className = classNames(className, getClassName(allProps[key], styleProps[key]))\n      style = {...style, ...getStyle(allProps[key], styleProps[key])}\n    }\n  }\n\n  // Return only the props not consumed by style props\n  const propsWithoutStyleProps: AllProps = {}\n  for (const key in allProps) {\n    if (!styleProps?.[key] || !styleProps[key].className) {\n      propsWithoutStyleProps[key] = allProps[key]\n    }\n  }\n\n  return {...propsWithoutStyleProps, className, style}\n}\n\n/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\nfunction getClassName(prop: any, styleProp: StyleProp, bp?: number) {\n  if (styleProp.type === 'union' && styleProp.values?.includes(prop)) {\n    /* Note: This may need updating depending on the final CSS classname formatting */\n    return `${PREFIX}-${styleProp.className}${typeof prop === 'string' ? `-${prop}` : prop}${bp ? `-bp-${bp}` : ''}`\n  }\n\n  if (styleProp.type === 'string' || styleProp.type === 'number') {\n    return `${PREFIX}-${styleProp.className}${bp ? `-bp-${bp}` : ''}`\n  }\n\n  if (styleProp.type === 'boolean') {\n    return `${PREFIX}-${prop ? styleProp.className : styleProp.inverse}${bp ? `-bp-${bp}` : ''}`\n  }\n\n  return ''\n}\n\n/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\nfunction getStyle(prop: any, styleProp: StyleProp, bp?: number) {\n  if (styleProp.type === 'string' || styleProp.type === 'number') {\n    return {\n      [`${styleProp.variable}${bp ? `-bp-${bp}` : ''}`]: prop,\n    }\n  }\n\n  return {}\n}\n","import {layoutProps} from '../props/layout'\nimport {DISPLAY_BLOCK} from '../types/Display'\nimport {type StyleProp} from '../types/StyleProp'\n\nexport const boxProps: Record<string, StyleProp> = {\n  as: {\n    type: 'string',\n  },\n  display: {\n    type: 'union',\n    className: 'display',\n    values: DISPLAY_BLOCK,\n  },\n  ...layoutProps,\n}\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport {type LayoutProps} from '../props/layout'\nimport {type DisplayBlock} from '../types/Display'\nimport {type Responsive} from '../types/Responsive'\nimport {getProps} from '../utils/getProps'\nimport {boxProps} from './box.props'\n\n/** @public */\nexport interface BoxProps<T extends React.ElementType> extends LayoutProps {\n  /** Element to render */\n  as?: T\n  /** CSS **display** property */\n  display?: Responsive<DisplayBlock>\n}\n\n/** @public */\nexport function Box<T extends React.ElementType = 'div'>(\n  props: BoxProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof BoxProps<T>>,\n) {\n  const {as, children, className, style, ...rest} = getProps(props, boxProps)\n  const Component = as || 'div'\n\n  return (\n    <Component className={classNames('sui-Box', className)} style={style} data-ui=\"Box\" {...rest}>\n      {children}\n    </Component>\n  )\n}\n"],"names":[],"mappings":";;AAAO,MAAM,SAAS,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,GCmBrC,cAAyC;AAAA,EACpD,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EAAA;AAAA,EAEX,aAAa;AAAA,IACX,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EAAA;AAAA,EAEX,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EAAA;AAAA,EAEX,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAEZ,GCtCa,iBAA4C;AAAA,EACvD,WAAW;AAAA,IACT,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAEd,GCVa,iBAA4C;AAAA,EACvD,YAAY;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,eAAe;AAAA,IACb,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,SAAS;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAEd,GCrCa,cAAyC;AAAA,EACpD,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,WAAW;AAAA,IACT,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,WAAW;AAAA,IACT,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAEd,GC5Ba,QAAQ,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,GAGrC,aAAa,CAAC,GAAG,OAAO,MAAM,GCkB9B,cAAyC;AAAA,EACpD,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,SAAS;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,SAAS;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,WAAW;AAAA,IACT,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,aAAa;AAAA,IACX,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,YAAY;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAEZ,GCzDa,WAAW,CAAC,WAAW,UAAU,QAAQ,UAAU,MAAM,GCazD,gBAA2C;AAAA,EACtD,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,WAAW;AAAA,IACT,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,WAAW;AAAA,IACT,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAEZ,GCRa,eAA0C;AAAA,EACrD,SAAS;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,YAAY;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,eAAe;AAAA,IACb,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,aAAa;AAAA,IACX,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAEZ,GCzDa,WAAW,CAAC,YAAY,SAAS,YAAY,UAAU,QAAQ,GCoB/D,gBAA2C;AAAA,EACtD,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,OAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,KAAK;AAAA,IACH,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,OAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAEZ,GCnDa,OAAO,CAAC,WAAW,WAAW,WAAW,WAAW,YAAY,WAAW,UAAU,GCSrF,YAAuC;AAAA,EAClD,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAEZ,GCHa,aAAwC;AAAA,EACnD,OAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAEd,GCHa,cAAyC;AAAA,EACpD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL,GCpCa,gBAAgB,CAAC,SAAS,gBAAgB,MAAM,GCIvD,SAAS,OACT,qBAAqB;AASpB,SAAS,SACd,UACA,YACU;AACV,MAAI,YAAY,UAAU,aAAa,IACnC,QAAQ,UAAU,SAAS,CAAA;AAG/B,aAAW,OAAO;AAEhB,QAAI,GAAC,aAAa,GAAG,KAAK,CAAC,aAAa,GAAG,EAAE;AAK7C,UAAI,MAAM,QAAQ,SAAS,GAAG,CAAC;AAE7B,iBAAS,IAAI,GAAG,MAAM,KAAK,IAAI,SAAS,GAAG,EAAE,QAAQ,kBAAkB,GAAG,IAAI,KAAK;AACjF,sBAAY,WAAW,WAAW,aAAa,SAAS,GAAG,EAAE,CAAC,GAAG,WAAW,GAAG,GAAG,CAAC,CAAC,GACpF,QAAQ,EAAC,GAAG,OAAO,GAAG,SAAS,SAAS,GAAG,EAAE,CAAC,GAAG,WAAW,GAAG,GAAG,CAAC,EAAA;AAAA;AAIrE,oBAAY,WAAW,WAAW,aAAa,SAAS,GAAG,GAAG,WAAW,GAAG,CAAC,CAAC,GAC9E,QAAQ,EAAC,GAAG,OAAO,GAAG,SAAS,SAAS,GAAG,GAAG,WAAW,GAAG,CAAC,EAAA;AAKjE,QAAM,yBAAmC,CAAA;AACzC,aAAW,OAAO;AAChB,KAAI,CAAC,aAAa,GAAG,KAAK,CAAC,WAAW,GAAG,EAAE,eACzC,uBAAuB,GAAG,IAAI,SAAS,GAAG;AAI9C,SAAO,EAAC,GAAG,wBAAwB,WAAW,MAAA;AAChD;AAGA,SAAS,aAAa,MAAW,WAAsB,IAAa;AAClE,SAAI,UAAU,SAAS,WAAW,UAAU,QAAQ,SAAS,IAAI,IAExD,GAAG,MAAM,IAAI,UAAU,SAAS,GAAG,OAAO,QAAS,WAAW,IAAI,IAAI,KAAK,IAAI,GAAG,KAAK,OAAO,EAAE,KAAK,EAAE,KAG5G,UAAU,SAAS,YAAY,UAAU,SAAS,WAC7C,GAAG,MAAM,IAAI,UAAU,SAAS,GAAG,KAAK,OAAO,EAAE,KAAK,EAAE,KAG7D,UAAU,SAAS,YACd,GAAG,MAAM,IAAI,OAAO,UAAU,YAAY,UAAU,OAAO,GAAG,KAAK,OAAO,EAAE,KAAK,EAAE,KAGrF;AACT;AAGA,SAAS,SAAS,MAAW,WAAsB,IAAa;AAC9D,SAAI,UAAU,SAAS,YAAY,UAAU,SAAS,WAC7C;AAAA,IACL,CAAC,GAAG,UAAU,QAAQ,GAAG,KAAK,OAAO,EAAE,KAAK,EAAE,EAAE,GAAG;AAAA,EAAA,IAIhD,CAAA;AACT;AC5EO,MAAM,WAAsC;AAAA,EACjD,IAAI;AAAA,IACF,MAAM;AAAA,EAAA;AAAA,EAER,SAAS;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,GAAG;AACL;ACIO,SAAS,IACd,OACA;AACA,QAAM,EAAC,IAAI,UAAU,WAAW,OAAO,GAAG,SAAQ,SAAS,OAAO,QAAQ;AAG1E,SACE,oBAHgB,MAAM,OAGrB,EAAU,WAAW,WAAW,WAAW,SAAS,GAAG,OAAc,WAAQ,OAAO,GAAG,MACrF,SAAA,CACH;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../src/types/Radius.ts","../src/props/border.ts","../src/props/flexChild.ts","../src/props/gridChild.ts","../src/props/height.ts","../src/types/Space.ts","../src/props/margin.ts","../src/types/Overflow.ts","../src/props/overflow.ts","../src/props/padding.ts","../src/types/Position.ts","../src/props/position.ts","../src/types/Tone.ts","../src/props/tone.ts","../src/props/width.ts","../src/props/layout.ts","../src/types/Display.ts","../src/utils/getProps.ts","../src/components/box/box.props.ts","../src/components/box/Box.tsx","../src/components/divider/Divider.tsx","../src/types/Flex.ts","../src/props/flexParent.ts","../src/props/gap.ts","../src/components/flex/flex.props.ts","../src/components/flex/Flex.tsx","../src/types/Grid.ts","../src/props/gridParent.ts","../src/components/grid/grid.props.ts","../src/components/grid/Grid.tsx","../src/types/FontWeight.ts","../src/types/TextAlign.ts","../src/props/typography.ts","../src/types/Text.ts","../src/components/text/text.props.ts","../src/components/text/Text.tsx"],"sourcesContent":["export const RADIUS = [0, 1, 2, 3, 4, 5, 6, 'full']\nexport type Radius = (typeof RADIUS)[number]\n","import {type PropDef} from '../types/PropDef'\nimport {RADIUS, type Radius} from '../types/Radius'\nimport {type Responsive} from '../types/Responsive'\n\nexport type BorderProps = {\n  /** CSS **border** property */\n  border?: Responsive<boolean>\n  /** CSS **border-top** property */\n  borderTop?: Responsive<boolean>\n  /** CSS **border-right** property */\n  borderRight?: Responsive<boolean>\n  /** CSS **border-bottom** property */\n  borderBottom?: Responsive<boolean>\n  /** CSS **border-left** property */\n  borderLeft?: Responsive<boolean>\n  /** CSS **border-radius** property */\n  radius?: Responsive<Radius>\n}\n\nexport const borderProps: Record<string, PropDef> = {\n  border: {\n    type: 'boolean',\n    className: 'border',\n    inverse: 'border-none',\n  },\n  borderTop: {\n    type: 'boolean',\n    className: 'border-top',\n    inverse: 'border-top-none',\n  },\n  borderRight: {\n    type: 'boolean',\n    className: 'border-right',\n    inverse: 'border-right-none',\n  },\n  borderBottom: {\n    type: 'boolean',\n    className: 'border-bottom',\n    inverse: 'border-bottom-none',\n  },\n  borderLeft: {\n    type: 'boolean',\n    className: 'border-left',\n    inverse: 'border-left-none',\n  },\n  radius: {\n    type: 'union',\n    className: 'radius',\n    values: RADIUS,\n  },\n}\n","import {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\n\nexport type FlexChildProps = {\n  /** CSS **flex-basis** property */\n  flexBasis?: Responsive<string>\n  /** CSS **flex-grow** property */\n  flexGrow?: Responsive<number>\n  /** CSS **flex-shrink** property */\n  flexShrink?: Responsive<number>\n}\n\nexport const flexChildProps: Record<string, PropDef> = {\n  flexBasis: {\n    type: 'string',\n    className: 'flex-basis',\n    variable: '--flex-basis',\n  },\n  flexGrow: {\n    type: 'number',\n    className: 'flex-grow',\n    variable: '--flex-grow',\n  },\n  flexShrink: {\n    type: 'number',\n    className: 'flex-shrink',\n    variable: '--flex-shrink',\n  },\n}\n","import {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\n\nexport type GridChildProps = {\n  /** CSS **grid-column** property */\n  gridColumn?: Responsive<string>\n  /** CSS **grid-column-start** property */\n  gridColumnStart?: Responsive<string>\n  /** CSS **grid-column-end** property */\n  gridColumnEnd?: Responsive<string>\n  /** CSS **grid-row** property */\n  gridRow?: Responsive<string>\n  /** CSS **grid-row-start** property */\n  gridRowStart?: Responsive<string>\n  /** CSS **grid-row-end** property */\n  gridRowEnd?: Responsive<string>\n}\n\nexport const gridChildProps: Record<string, PropDef> = {\n  gridColumn: {\n    type: 'string',\n    className: 'grid-column',\n    variable: '--grid-column',\n  },\n  gridColumnStart: {\n    type: 'string',\n    className: 'grid-column-start',\n    variable: '--grid-column-start',\n  },\n  gridColumnEnd: {\n    type: 'string',\n    className: 'grid-column-end',\n    variable: '--grid-column-end',\n  },\n  gridRow: {\n    type: 'string',\n    className: 'grid-row',\n    variable: '--grid-row',\n  },\n  gridRowStart: {\n    type: 'string',\n    className: 'grid-row-start',\n    variable: '--grid-row-start',\n  },\n  gridRowEnd: {\n    type: 'string',\n    className: 'grid-row-end',\n    variable: '--grid-row-end',\n  },\n}\n","import {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\n\nexport type HeightProps = {\n  /** CSS **height** property */\n  height?: Responsive<string>\n  /** CSS **min-height** property */\n  minHeight?: Responsive<string>\n  /** CSS **max-height** property */\n  maxHeight?: Responsive<string>\n}\n\nexport const heightProps: Record<string, PropDef> = {\n  height: {\n    type: 'string',\n    className: 'height',\n    variable: '--height',\n  },\n  minHeight: {\n    type: 'string',\n    className: 'min-height',\n    variable: '--min-height',\n  },\n  maxHeight: {\n    type: 'string',\n    className: 'max-height',\n    variable: '--max-height',\n  },\n}\n","export const SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const\nexport type Space = (typeof SPACE)[number]\n\nexport const SPACE_AUTO = [...SPACE, 'auto'] as const\nexport type SpaceAuto = (typeof SPACE_AUTO)[number]\n","import {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\nimport {SPACE_AUTO, type SpaceAuto} from '../types/Space'\n\nexport type MarginProps = {\n  /** CSS **margin** property */\n  margin?: Responsive<SpaceAuto>\n  /** CSS **margin-left** and **margin-right** properties */\n  marginX?: Responsive<SpaceAuto>\n  /** CSS **margin-top** and **margin-bottom** properties */\n  marginY?: Responsive<SpaceAuto>\n  /** CSS **margin-top** property */\n  marginTop?: Responsive<SpaceAuto>\n  /** CSS **margin-right** property */\n  marginRight?: Responsive<SpaceAuto>\n  /** CSS **margin-bottom** property */\n  marginBottom?: Responsive<SpaceAuto>\n  /** CSS **margin-left** property */\n  marginLeft?: Responsive<SpaceAuto>\n}\n\nexport const marginProps: Record<string, PropDef> = {\n  margin: {\n    type: 'union',\n    className: 'm',\n    values: SPACE_AUTO,\n  },\n  marginX: {\n    type: 'union',\n    className: 'mx',\n    values: SPACE_AUTO,\n  },\n  marginY: {\n    type: 'union',\n    className: 'my',\n    values: SPACE_AUTO,\n  },\n  marginTop: {\n    type: 'union',\n    className: 'mt',\n    values: SPACE_AUTO,\n  },\n  marginRight: {\n    type: 'union',\n    className: 'mr',\n    values: SPACE_AUTO,\n  },\n  marginBottom: {\n    type: 'union',\n    className: 'mb',\n    values: SPACE_AUTO,\n  },\n  marginLeft: {\n    type: 'union',\n    className: 'ml',\n    values: SPACE_AUTO,\n  },\n}\n","export const OVERFLOW = ['visible', 'hidden', 'auto', 'scroll', 'clip']\nexport type Overflow = (typeof OVERFLOW)[number]\n","import {OVERFLOW, type Overflow} from '../types/Overflow'\nimport {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\n\nexport type OverflowProps = {\n  /** CSS **overflow** property */\n  overflow?: Responsive<Overflow>\n  /** CSS **overflow-x** property */\n  overflowX?: Responsive<Overflow>\n  /** CSS **overflow-y** property */\n  overflowY?: Responsive<Overflow>\n}\n\nexport const overflowProps: Record<string, PropDef> = {\n  overflow: {\n    type: 'union',\n    className: 'overflow',\n    values: OVERFLOW,\n  },\n  overflowX: {\n    type: 'union',\n    className: 'overflow-x',\n    values: OVERFLOW,\n  },\n  overflowY: {\n    type: 'union',\n    className: 'overflow-y',\n    values: OVERFLOW,\n  },\n}\n","import {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\nimport {SPACE, type Space} from '../types/Space'\n\nexport interface PaddingProps {\n  /** CSS **padding** property */\n  padding?: Responsive<Space>\n  /** CSS **padding-left** and **padding-right** properties */\n  paddingX?: Responsive<Space>\n  /** CSS **padding-top** and **padding-bottom** properties */\n  paddingY?: Responsive<Space>\n  /** CSS **padding-top** property */\n  paddingTop?: Responsive<Space>\n  /** CSS **padding-right** property */\n  paddingRight?: Responsive<Space>\n  /** CSS **padding-bottom** property */\n  paddingBottom?: Responsive<Space>\n  /** CSS **padding-left** property */\n  paddingLeft?: Responsive<Space>\n}\n\nexport const paddingProps: Record<string, PropDef> = {\n  padding: {\n    type: 'union',\n    className: 'p',\n    values: SPACE,\n  },\n  paddingX: {\n    type: 'union',\n    className: 'px',\n    values: SPACE,\n  },\n  paddingY: {\n    type: 'union',\n    className: 'py',\n    values: SPACE,\n  },\n  paddingTop: {\n    type: 'union',\n    className: 'pt',\n    values: SPACE,\n  },\n  paddingRight: {\n    type: 'union',\n    className: 'pr',\n    values: SPACE,\n  },\n  paddingBottom: {\n    type: 'union',\n    className: 'pb',\n    values: SPACE,\n  },\n  paddingLeft: {\n    type: 'union',\n    className: 'pl',\n    values: SPACE,\n  },\n}\n","export const POSITION = ['absolute', 'fixed', 'relative', 'static', 'sticky']\nexport type Position = (typeof POSITION)[number]\n","import {POSITION, type Position} from '../types/Position'\nimport {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\nimport {SPACE_AUTO, type SpaceAuto} from '../types/Space'\n\nexport type PositionProps = {\n  /** CSS **position** property */\n  position?: Responsive<Position>\n  /** CSS **inset** property */\n  inset?: Responsive<SpaceAuto>\n  /** CSS **top** property */\n  top?: Responsive<SpaceAuto>\n  /** CSS **right** property */\n  right?: Responsive<SpaceAuto>\n  /** CSS **bottom** property */\n  bottom?: Responsive<SpaceAuto>\n  /** CSS **left** property */\n  left?: Responsive<SpaceAuto>\n  /** CSS **z-index** property */\n  zIndex?: Responsive<number>\n}\n\nexport const positionProps: Record<string, PropDef> = {\n  position: {\n    type: 'union',\n    className: 'position',\n    values: POSITION,\n  },\n  inset: {\n    type: 'union',\n    className: 'inset',\n    values: SPACE_AUTO,\n  },\n  top: {\n    type: 'union',\n    className: 'top',\n    values: SPACE_AUTO,\n  },\n  right: {\n    type: 'union',\n    className: 'right',\n    values: SPACE_AUTO,\n  },\n  bottom: {\n    type: 'union',\n    className: 'bottom',\n    values: SPACE_AUTO,\n  },\n  left: {\n    type: 'union',\n    className: 'left',\n    values: SPACE_AUTO,\n  },\n  zIndex: {\n    type: 'number',\n    className: 'z-index',\n    variable: '--z-index',\n  },\n}\n","export const TONE = ['default', 'neutral', 'primary', 'suggest', 'positive', 'caution', 'critical']\nexport type Tone = (typeof TONE)[number]\n","import {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\nimport {TONE, type Tone} from '../types/Tone'\n\nexport type ToneProps = {\n  /** CSS **background-color** property */\n  tone?: Responsive<Tone>\n}\n\nexport const toneProps: Record<string, PropDef> = {\n  tone: {\n    type: 'union',\n    className: 'tone',\n    values: TONE,\n  },\n}\n","import {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\n\nexport type WidthProps = {\n  /** CSS **width** property */\n  width?: Responsive<string>\n  /** CSS **min-width** property */\n  minWidth?: Responsive<string>\n  /** CSS **max-width** property */\n  maxWidth?: Responsive<string>\n}\n\nexport const widthProps: Record<string, PropDef> = {\n  width: {\n    type: 'string',\n    className: 'width',\n    variable: '--width',\n  },\n  minWidth: {\n    type: 'string',\n    className: 'min-width',\n    variable: '--min-width',\n  },\n  maxWidth: {\n    type: 'string',\n    className: 'max-width',\n    variable: '--max-width',\n  },\n}\n","import {type PropDef} from '../types/PropDef'\nimport {type BorderProps, borderProps} from './border'\nimport {type FlexChildProps, flexChildProps} from './flexChild'\nimport {type GridChildProps, gridChildProps} from './gridChild'\nimport {type HeightProps, heightProps} from './height'\nimport {type MarginProps, marginProps} from './margin'\nimport {type OverflowProps, overflowProps} from './overflow'\nimport {type PaddingProps, paddingProps} from './padding'\nimport {type PositionProps, positionProps} from './position'\nimport {type ToneProps, toneProps} from './tone'\nimport {type WidthProps, widthProps} from './width'\n\nexport interface LayoutProps\n  extends\n    ToneProps,\n    WidthProps,\n    HeightProps,\n    MarginProps,\n    BorderProps,\n    PaddingProps,\n    PositionProps,\n    OverflowProps,\n    FlexChildProps,\n    GridChildProps {}\n\nexport const layoutProps: Record<string, PropDef> = {\n  ...toneProps,\n  ...widthProps,\n  ...heightProps,\n  ...marginProps,\n  ...borderProps,\n  ...paddingProps,\n  ...positionProps,\n  ...overflowProps,\n  ...flexChildProps,\n  ...gridChildProps,\n}\n","export const DISPLAY_BLOCK = ['block', 'inline-block', 'none'] as const\nexport type DisplayBlock = (typeof DISPLAY_BLOCK)[number]\n\nexport const DISPLAY_FLEX = ['flex', 'inline-flex', 'none'] as const\nexport type DisplayFlex = (typeof DISPLAY_FLEX)[number]\n\nexport const DISPLAY_GRID = ['grid', 'inline-grid', 'none'] as const\nexport type DisplayGrid = (typeof DISPLAY_GRID)[number]\n","import classNames from 'classnames'\n\nimport {type PropDef} from '../types/PropDef'\n\nconst PREFIX = 'sui'\nconst BREAKPOINTS_LENGTH = 7\n\ninterface ComponentProps {\n  className?: string\n  style?: React.CSSProperties\n  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n  [key: string]: any\n}\n\nexport function getProps<P extends ComponentProps, T extends Record<string, PropDef>>(\n  componentProps?: P,\n  propDefs?: T,\n): ComponentProps {\n  let className = componentProps?.className || ''\n  let style = componentProps?.style || {}\n  const restProps: ComponentProps = {}\n\n  for (const key in componentProps) {\n    if (!propDefs?.[key] || !propDefs?.[key].className) {\n      restProps[key] = componentProps[key]\n      continue\n    }\n\n    if (Array.isArray(componentProps[key])) {\n      for (\n        let i = 0, len = Math.min(componentProps[key].length, BREAKPOINTS_LENGTH);\n        i < len;\n        i++\n      ) {\n        className = classNames(className, getClassName(componentProps[key][i], propDefs[key], i))\n        style = {...style, ...getStyle(componentProps[key][i], propDefs[key], i)}\n      }\n    } else {\n      className = classNames(className, getClassName(componentProps[key], propDefs[key]))\n      style = {...style, ...getStyle(componentProps[key], propDefs[key])}\n    }\n  }\n\n  return {...restProps, className, style}\n}\n\n/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\nfunction getClassName(prop: any, propDef: PropDef, bp?: number) {\n  if (propDef.type === 'union' && propDef.values?.includes(prop)) {\n    /* Note: This may need updating depending on the final CSS classname formatting */\n    return `${PREFIX}-${propDef.className}${typeof prop === 'string' ? `-${prop}` : prop}${bp ? `-bp-${bp}` : ''}`\n  }\n\n  if (propDef.type === 'string' || propDef.type === 'number') {\n    return `${PREFIX}-${propDef.className}${bp ? `-bp-${bp}` : ''}`\n  }\n\n  if (propDef.type === 'boolean') {\n    return `${PREFIX}-${prop ? propDef.className : propDef.inverse}${bp ? `-bp-${bp}` : ''}`\n  }\n\n  return ''\n}\n\n/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\nfunction getStyle(prop: any, propDef: PropDef, bp?: number) {\n  if (propDef.type === 'string' || propDef.type === 'number') {\n    return {\n      [`${propDef.variable}${bp ? `-bp-${bp}` : ''}`]: prop,\n    }\n  }\n\n  return {}\n}\n","import {layoutProps} from '../../props/layout'\nimport {DISPLAY_BLOCK} from '../../types/Display'\nimport {type PropDef} from '../../types/PropDef'\n\nexport const boxProps: Record<string, PropDef> = {\n  as: {\n    type: 'string',\n  },\n  display: {\n    type: 'union',\n    className: 'display',\n    values: DISPLAY_BLOCK,\n  },\n  ...layoutProps,\n}\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport {type LayoutProps} from '../../props/layout'\nimport {type DisplayBlock} from '../../types/Display'\nimport {type Responsive} from '../../types/Responsive'\nimport {getProps} from '../../utils/getProps'\nimport {boxProps} from './box.props'\n\n/** @public */\nexport interface BoxProps<T extends React.ElementType> extends LayoutProps {\n  /** Element to render */\n  as?: T\n  /** CSS **display** property */\n  display?: Responsive<DisplayBlock>\n}\n\n/** @public */\nexport function Box<T extends React.ElementType = 'div'>({\n  display = 'block',\n  ...props\n}: BoxProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof BoxProps<T>>) {\n  const {as, children, className, style, ...rest} = getProps({display, ...props}, boxProps)\n  const Component = as || 'div'\n\n  return (\n    <Component className={classNames('sui-Box', className)} style={style} data-ui=\"Box\" {...rest}>\n      {children}\n    </Component>\n  )\n}\n","import React from 'react'\n\n/** @public */\nexport function Divider() {\n  return (\n    <hr\n      className=\"sui-Divider sui-border-bottom-none sui-border-left-none sui-border-right-none sui-border-top\"\n      data-ui=\"Divider\"\n    />\n  )\n}\n","export const ALIGN_ITEMS = ['baseline', 'center', 'flex-end', 'flex-start', 'stretch'] as const\nexport type AlignItems = (typeof ALIGN_ITEMS)[number]\n\nexport const JUSTIFY_CONTENT = [\n  'flex-start',\n  'flex-end',\n  'center',\n  'space-between',\n  'space-around',\n  'space-evenly',\n] as const\nexport type JustifyContent = (typeof JUSTIFY_CONTENT)[number]\n\nexport const FLEX_DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'] as const\nexport type FlexDirection = (typeof FLEX_DIRECTION)[number]\n\nexport const FLEX_WRAP = ['wrap', 'wrap-reverse', 'nowrap'] as const\nexport type FlexWrap = (typeof FLEX_WRAP)[number]\n","import {\n  ALIGN_ITEMS,\n  type AlignItems,\n  FLEX_DIRECTION,\n  FLEX_WRAP,\n  type FlexDirection,\n  type FlexWrap,\n  JUSTIFY_CONTENT,\n  type JustifyContent,\n} from '../types/Flex'\nimport {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\n\nexport type FlexParentProps = {\n  /** CSS **align-items** property */\n  alignItems?: Responsive<AlignItems>\n  /** CSS **justify-content** property */\n  justifyContent?: Responsive<JustifyContent>\n  /** CSS **flex-direction** property */\n  flexDirection?: Responsive<FlexDirection>\n  /** CSS **flex-wrap** property */\n  flexWrap?: Responsive<FlexWrap>\n}\n\nexport const flexParentProps: Record<string, PropDef> = {\n  alignItems: {\n    type: 'union',\n    className: 'align-items',\n    values: ALIGN_ITEMS,\n  },\n  justifyContent: {\n    type: 'union',\n    className: 'justify-content',\n    values: JUSTIFY_CONTENT,\n  },\n  flexDirection: {\n    type: 'union',\n    className: 'flex-direction',\n    values: FLEX_DIRECTION,\n  },\n  flexWrap: {\n    type: 'union',\n    className: 'flex-wrap',\n    values: FLEX_WRAP,\n  },\n}\n","import {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\nimport {SPACE, type Space} from '../types/Space'\n\nexport type GapProps = {\n  /** CSS **gap** property */\n  gap?: Responsive<Space>\n  /** CSS **row-gap** property */\n  rowGap?: Responsive<Space>\n  /** CSS **column-gap** property */\n  columnGap?: Responsive<Space>\n}\n\nexport const gapProps: Record<string, PropDef> = {\n  gap: {\n    type: 'union',\n    className: 'gap',\n    values: SPACE,\n  },\n  rowGap: {\n    type: 'union',\n    className: 'row-gap',\n    values: SPACE,\n  },\n  columnGap: {\n    type: 'union',\n    className: 'column-gap',\n    values: SPACE,\n  },\n}\n","import {flexParentProps} from '../../props/flexParent'\nimport {gapProps} from '../../props/gap'\nimport {layoutProps} from '../../props/layout'\nimport {DISPLAY_FLEX} from '../../types/Display'\nimport {type PropDef} from '../../types/PropDef'\n\nexport const flexProps: Record<string, PropDef> = {\n  as: {\n    type: 'string',\n  },\n  display: {\n    type: 'union',\n    className: 'display',\n    values: DISPLAY_FLEX,\n  },\n  ...flexParentProps,\n  ...gapProps,\n  ...layoutProps,\n}\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport type {FlexParentProps} from '../../props/flexParent'\nimport type {GapProps} from '../../props/gap'\nimport {type LayoutProps} from '../../props/layout'\nimport {type DisplayFlex} from '../../types/Display'\nimport {type Responsive} from '../../types/Responsive'\nimport {getProps} from '../../utils/getProps'\nimport {flexProps} from './flex.props'\n\n/** @public */\nexport interface FlexProps<T extends React.ElementType>\n  extends FlexParentProps, GapProps, LayoutProps {\n  /** Element to render */\n  as?: T\n  /** CSS **display** property */\n  display?: Responsive<DisplayFlex>\n}\n\n/** @public */\nexport function Flex<T extends React.ElementType = 'div'>({\n  display = 'flex',\n  ...props\n}: FlexProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof FlexProps<T>>) {\n  const {as, children, className, style, ...rest} = getProps({display, ...props}, flexProps)\n  const Component = as || 'div'\n\n  return (\n    <Component className={classNames('sui-Flex', className)} style={style} data-ui=\"Flex\" {...rest}>\n      {children}\n    </Component>\n  )\n}\n","export const GRID_AUTO_FLOW = ['row', 'column', 'row dense', 'column dense', 'dense'] as const\nexport type GridAutoFlow = (typeof GRID_AUTO_FLOW)[number]\n","import {GRID_AUTO_FLOW, type GridAutoFlow} from '../types/Grid'\nimport {type PropDef} from '../types/PropDef'\nimport {type Responsive} from '../types/Responsive'\n\nexport type GridParentProps = {\n  /** CSS **grid-auto-flow** property */\n  gridAutoFlow?: Responsive<GridAutoFlow>\n  /** CSS **grid-auto-columns** property */\n  gridAutoColumns?: Responsive<string>\n  /** CSS **grid-auto-row** property */\n  gridAutoRows?: Responsive<string>\n  /** CSS **grid-template-columns** property */\n  gridTemplateColumns?: Responsive<string>\n  /** CSS **grid-template-rows** property */\n  gridTemplateRows?: Responsive<string>\n}\n\nexport const gridParentProps: Record<string, PropDef> = {\n  gridAutoFlow: {\n    type: 'union',\n    className: 'grid-auto-flow',\n    values: GRID_AUTO_FLOW,\n  },\n  gridAutoColumns: {\n    type: 'string',\n    className: 'grid-auto-columns',\n    variable: '--grid-auto-columns',\n  },\n  gridAutoRows: {\n    type: 'string',\n    className: 'grid-auto-rows',\n    variable: '--grid-auto-rows',\n  },\n  gridTemplateColumns: {\n    type: 'string',\n    className: 'grid-template-columns',\n    variable: '--grid-template-columns',\n  },\n  gridTemplateRows: {\n    type: 'string',\n    className: 'grid-template-rows',\n    variable: '--grid-template-rows',\n  },\n}\n","import {gapProps} from '../../props/gap'\nimport {gridParentProps} from '../../props/gridParent'\nimport {layoutProps} from '../../props/layout'\nimport {DISPLAY_GRID} from '../../types/Display'\nimport {type PropDef} from '../../types/PropDef'\n\nexport const gridProps: Record<string, PropDef> = {\n  as: {\n    type: 'string',\n  },\n  display: {\n    type: 'union',\n    className: 'display',\n    values: DISPLAY_GRID,\n  },\n  ...gridParentProps,\n  ...gapProps,\n  ...layoutProps,\n}\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport {type GapProps} from '../../props/gap'\nimport {type GridParentProps} from '../../props/gridParent'\nimport {type LayoutProps} from '../../props/layout'\nimport {type DisplayGrid} from '../../types/Display'\nimport {type Responsive} from '../../types/Responsive'\nimport {getProps} from '../../utils/getProps'\nimport {gridProps} from './grid.props'\n\n/** @public */\nexport interface GridProps<T extends React.ElementType>\n  extends GridParentProps, GapProps, LayoutProps {\n  /** Element to render */\n  as?: T\n  /** CSS **display** property */\n  display?: Responsive<DisplayGrid>\n}\n\n/** @public */\nexport function Grid<T extends React.ElementType = 'div'>({\n  display = 'grid',\n  ...props\n}: GridProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof GridProps<T>>) {\n  const {as, children, className, style, ...rest} = getProps({display, ...props}, gridProps)\n  const Component = as || 'div'\n\n  return (\n    <Component className={classNames('sui-Grid', className)} style={style} data-ui=\"Grid\" {...rest}>\n      {children}\n    </Component>\n  )\n}\n","export const FONT_WEIGHT = ['regular', 'medium', 'semibold', 'bold']\nexport type FontWeight = (typeof FONT_WEIGHT)[number]\n","export const TEXT_ALIGN = ['left', 'center', 'right', 'justify']\nexport type TextAlign = (typeof TEXT_ALIGN)[number]\n","import {FONT_WEIGHT, type FontWeight} from '../types/FontWeight'\nimport {type PropDef} from '../types/PropDef'\nimport {TEXT_ALIGN, type TextAlign} from '../types/TextAlign'\nimport {type MarginProps, marginProps} from './margin'\n\nexport interface TypographyProps extends MarginProps {\n  /** CSS **text-align** property */\n  align?: TextAlign\n  /** CSS **-webkit-line-clamp** property */\n  lineClamp?: number\n  /** CSS **color** property */\n  muted?: boolean\n  /** CSS **text-box-trim** property */\n  trim?: boolean\n  /** CSS **font-weight** property */\n  weight?: FontWeight\n}\n\nexport const typographyProps: Record<string, PropDef> = {\n  align: {\n    type: 'union',\n    className: 'text',\n    values: TEXT_ALIGN,\n  },\n  lineClamp: {\n    type: 'number',\n    className: 'line-clamp',\n    variable: '--line-clamp',\n  },\n  muted: {\n    type: 'boolean',\n    className: 'text-muted',\n    inverse: 'text-default',\n  },\n  trim: {\n    type: 'boolean',\n    className: 'text-trim',\n    inverse: 'text-trim-none',\n  },\n  weight: {\n    type: 'union',\n    className: 'weight',\n    values: FONT_WEIGHT,\n  },\n  ...marginProps,\n}\n","export const TEXT_SIZE = [0, 1, 2, 3, 4]\nexport type TextSize = (typeof TEXT_SIZE)[number]\n","import {typographyProps} from '../../props/typography'\nimport {type PropDef} from '../../types/PropDef'\nimport {TEXT_SIZE} from '../../types/Text'\n\nexport const textProps: Record<string, PropDef> = {\n  as: {\n    type: 'string',\n  },\n  size: {\n    type: 'union',\n    className: 'text-body',\n    values: TEXT_SIZE,\n  },\n  ...typographyProps,\n}\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport type {TypographyProps} from '../../props/typography'\nimport type {TextSize} from '../../types/Text'\nimport {getProps} from '../../utils/getProps'\nimport {textProps} from './text.props'\n\n/** @public */\nexport interface TextProps<T extends React.ElementType> extends TypographyProps {\n  /** Element to render */\n  as?: T\n  /** CSS **font-size** property */\n  size?: TextSize\n}\n\n/** @public */\nexport function Text<T extends React.ElementType = 'p'>({\n  size = 2,\n  ...props\n}: TextProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof TextProps<T>>) {\n  const {as, children, className, style, ...rest} = getProps({size, ...props}, textProps)\n  const Component = as || 'p'\n\n  if (props.lineClamp && props.trim) {\n    return (\n      <Component\n        className={classNames('sui-Text', className?.replace('sui-line-clamp', ''))}\n        style={style}\n        data-ui=\"Text\"\n        {...rest}\n      >\n        <span className=\"sui-line-clamp\">{children}</span>\n      </Component>\n    )\n  }\n\n  return (\n    <Component className={classNames('sui-Text', className)} style={style} data-ui=\"Text\" {...rest}>\n      {children}\n    </Component>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/styles.css

@@ -222,6 +222,110 @@
   --label-5: 400 15px/1.25 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Liberation Sans, sans-serif;
 }
 
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-ExtraBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-ExtraBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-BlackItalic.woff2') format('woff2');
+}
+
 .sui-flex-basis {
   flex-basis: var(--flex-basis);
 }
@@ -730,6 +834,53 @@
   }
 }
 
+.sui-line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--line-clamp);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.sui-z-index {
+  z-index: var(--z-index);
+}
+
+@media (min-width: 360px) {
+  .sui-z-index-bp-1 {
+    z-index: var(--z-index);
+  }
+}
+
+@media (min-width: 600px) {
+  .sui-z-index-bp-2 {
+    z-index: var(--z-index);
+  }
+}
+
+@media (min-width: 900px) {
+  .sui-z-index-bp-3 {
+    z-index: var(--z-index);
+  }
+}
+
+@media (min-width: 1200px) {
+  .sui-z-index-bp-4 {
+    z-index: var(--z-index);
+  }
+}
+
+@media (min-width: 1800px) {
+  .sui-z-index-bp-5 {
+    z-index: var(--z-index);
+  }
+}
+
+@media (min-width: 2400px) {
+  .sui-z-index-bp-6 {
+    z-index: var(--z-index);
+  }
+}
+
 .sui-border { border: 1px solid var(--border-color, var(--gray-200)) }
 
 .sui-border-top { border-top: 1px solid var(--border-color, var(--gray-200)) }
@@ -1508,12 +1659,6 @@
   }
 }
 
-.sui-leading-single { line-height: 1; }
-
-.sui-leading-compact { line-height: 1.25; }
-
-.sui-leading-body { line-height: 1.5; }
-
 .sui-overflow-visible {
   overflow: visible;
 }
@@ -2074,7 +2219,158 @@
   }
 }
 
-.sui-text-uppercase { text-transform: uppercase; }
+.sui-text-muted { color: var(--gray-600) }
+
+.sui-text-default { color: var(--gray-800) }
+
+.sui-text-trim:before,
+.sui-text-trim:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+}
+
+.sui-text-trim:before {
+  margin-bottom: var(--trim);
+}
+
+.sui-text-trim:after {
+  margin-top: var(--trim);
+}
+
+.sui-text-trim-none:before,
+.sui-text-trim-none:after {
+  content: none;
+}
+
+.sui-text-body0 {
+  --trim: -4px;
+}
+
+.sui-text-body1 {
+  --trim: -5px;
+}
+
+.sui-text-body2 {
+  --trim: -6px;
+}
+
+.sui-text-body3 {
+  --trim: -7px;
+}
+
+.sui-text-body4 {
+  --trim: -8px;
+}
+
+@media (min-width: 360px) {
+  .sui-text-body0-bp-1 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-1 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-1 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-1 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-1 {
+    --trim: -8px;
+  }
+}
+
+@media (min-width: 600px) {
+  .sui-text-body0-bp-2 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-2 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-2 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-2 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-2 {
+    --trim: -8px;
+  }
+}
+
+@media (min-width: 900px) {
+  .sui-text-body0-bp-3 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-3 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-3 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-3 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-3 {
+    --trim: -8px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .sui-text-body0-bp-4 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-4 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-4 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-4 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-4 {
+    --trim: -8px;
+  }
+}
+
+@media (min-width: 1800px) {
+  .sui-text-body0-bp-5 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-5 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-5 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-5 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-5 {
+    --trim: -8px;
+  }
+}
+
+@media (min-width: 2400px) {
+  .sui-text-body0-bp-6 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-6 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-6 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-6 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-6 {
+    --trim: -8px;
+  }
+}
 
 .sui-tone-default {
   background: var(--white);
@@ -2687,18 +2983,6 @@
   }
 }
 
-.sui-font-sans { font-family: var(--sans); }
-
-.sui-font-mono { font-family: var(--mono); }
-
-.sui-weight-bold { font-weight: var(--bold); }
-
-.sui-weight-medium { font-weight: var(--medium); }
-
-.sui-weight-regular { font-weight: var(--regular); }
-
-.sui-weight-semibold { font-weight: var(--semibold); }
-
 .sui-inset0 {
   inset: var(--space-0);
 }
@@ -8031,14 +8315,10 @@
   }
 }
 
-.sui-Box {
-  display: block;
-}
+.sui-weight-bold { font-weight: var(--bold); }
 
-.sui-Flex {
-  display: flex;
-}
+.sui-weight-medium { font-weight: var(--medium); }
 
-.sui-Grid {
-  display: grid;
-}
+.sui-weight-regular { font-weight: var(--regular); }
+
+.sui-weight-semibold { font-weight: var(--semibold); }

package/dist/utilities.css

@@ -222,6 +222,110 @@
   --label-5: 400 15px/1.25 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Liberation Sans, sans-serif;
 }
 
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-ExtraBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-ExtraBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-BlackItalic.woff2') format('woff2');
+}
+
 .sui-flex-basis {
   flex-basis: var(--flex-basis);
 }
@@ -730,6 +834,53 @@
   }
 }
 
+.sui-line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--line-clamp);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.sui-z-index {
+  z-index: var(--z-index);
+}
+
+@media (min-width: 360px) {
+  .sui-z-index-bp-1 {
+    z-index: var(--z-index);
+  }
+}
+
+@media (min-width: 600px) {
+  .sui-z-index-bp-2 {
+    z-index: var(--z-index);
+  }
+}
+
+@media (min-width: 900px) {
+  .sui-z-index-bp-3 {
+    z-index: var(--z-index);
+  }
+}
+
+@media (min-width: 1200px) {
+  .sui-z-index-bp-4 {
+    z-index: var(--z-index);
+  }
+}
+
+@media (min-width: 1800px) {
+  .sui-z-index-bp-5 {
+    z-index: var(--z-index);
+  }
+}
+
+@media (min-width: 2400px) {
+  .sui-z-index-bp-6 {
+    z-index: var(--z-index);
+  }
+}
+
 .sui-border { border: 1px solid var(--border-color, var(--gray-200)) }
 
 .sui-border-top { border-top: 1px solid var(--border-color, var(--gray-200)) }
@@ -1508,12 +1659,6 @@
   }
 }
 
-.sui-leading-single { line-height: 1; }
-
-.sui-leading-compact { line-height: 1.25; }
-
-.sui-leading-body { line-height: 1.5; }
-
 .sui-overflow-visible {
   overflow: visible;
 }
@@ -2074,7 +2219,158 @@
   }
 }
 
-.sui-text-uppercase { text-transform: uppercase; }
+.sui-text-muted { color: var(--gray-600) }
+
+.sui-text-default { color: var(--gray-800) }
+
+.sui-text-trim:before,
+.sui-text-trim:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+}
+
+.sui-text-trim:before {
+  margin-bottom: var(--trim);
+}
+
+.sui-text-trim:after {
+  margin-top: var(--trim);
+}
+
+.sui-text-trim-none:before,
+.sui-text-trim-none:after {
+  content: none;
+}
+
+.sui-text-body0 {
+  --trim: -4px;
+}
+
+.sui-text-body1 {
+  --trim: -5px;
+}
+
+.sui-text-body2 {
+  --trim: -6px;
+}
+
+.sui-text-body3 {
+  --trim: -7px;
+}
+
+.sui-text-body4 {
+  --trim: -8px;
+}
+
+@media (min-width: 360px) {
+  .sui-text-body0-bp-1 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-1 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-1 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-1 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-1 {
+    --trim: -8px;
+  }
+}
+
+@media (min-width: 600px) {
+  .sui-text-body0-bp-2 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-2 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-2 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-2 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-2 {
+    --trim: -8px;
+  }
+}
+
+@media (min-width: 900px) {
+  .sui-text-body0-bp-3 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-3 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-3 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-3 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-3 {
+    --trim: -8px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .sui-text-body0-bp-4 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-4 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-4 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-4 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-4 {
+    --trim: -8px;
+  }
+}
+
+@media (min-width: 1800px) {
+  .sui-text-body0-bp-5 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-5 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-5 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-5 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-5 {
+    --trim: -8px;
+  }
+}
+
+@media (min-width: 2400px) {
+  .sui-text-body0-bp-6 {
+    --trim: -4px;
+  }
+  .sui-text-body1-bp-6 {
+    --trim: -5px;
+  }
+  .sui-text-body2-bp-6 {
+    --trim: -6px;
+  }
+  .sui-text-body3-bp-6 {
+    --trim: -7px;
+  }
+  .sui-text-body4-bp-6 {
+    --trim: -8px;
+  }
+}
 
 .sui-tone-default {
   background: var(--white);
@@ -2687,18 +2983,6 @@
   }
 }
 
-.sui-font-sans { font-family: var(--sans); }
-
-.sui-font-mono { font-family: var(--mono); }
-
-.sui-weight-bold { font-weight: var(--bold); }
-
-.sui-weight-medium { font-weight: var(--medium); }
-
-.sui-weight-regular { font-weight: var(--regular); }
-
-.sui-weight-semibold { font-weight: var(--semibold); }
-
 .sui-inset0 {
   inset: var(--space-0);
 }
@@ -8030,3 +8314,11 @@
     font: var(--label-5);
   }
 }
+
+.sui-weight-bold { font-weight: var(--bold); }
+
+.sui-weight-medium { font-weight: var(--medium); }
+
+.sui-weight-regular { font-weight: var(--regular); }
+
+.sui-weight-semibold { font-weight: var(--semibold); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity-labs/ui-poc",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.2",
   "description": "Sanity UI POC",
   "keywords": [],
   "homepage": "https://github.com/sanity-labs/ui-poc#readme",