@tosui/react 0.1.1 → 0.1.2

package/dist/components/Box/Box.js

@@ -0,0 +1,217 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { clsx } from "clsx";
+import { resetClass } from "./reset/reset.js";
+import { getMarginStyles } from "./margin/margin.js";
+import { getPaddingStyles } from "./padding/padding.js";
+import { getSizingStyles } from "./sizing/sizing.js";
+import { getInsetStyles } from "./inset/inset.js";
+import { getDisplayStyles } from "./display/display.js";
+import { getPositionStyles } from "./position/position.js";
+import { getOverflowStyles } from "./overflow/overflow.js";
+import { getZIndexStyles } from "./zIndex/zIndex.js";
+import { getShadowStyles } from "./shadows/shadows.js";
+import { getOpacityStyles } from "./opacity/opacity.js";
+import { getInteractionStyles } from "./interactions/interactions.js";
+import { getTextStyles } from "./text/text.js";
+import { getTypographyStyles } from "./typography/typography.js";
+import { getColorStyles } from "./colors/colors.js";
+import { getBorderStyles } from "./borders/borders.js";
+import { getRoundnessStyles } from "./roundness/roundness.js";
+import { getFlexboxStyles } from "./flexbox/flexbox.js";
+import { getGridStyles } from "./grid/grid.js";
+function combineStyles(...results) {
+  return {
+    className: clsx(...results.map((r) => r.className)),
+    style: Object.assign({}, ...results.map((r) => r.style))
+  };
+}
+function Box({
+  as,
+  children,
+  className,
+  style,
+  // Margin props
+  m,
+  mt,
+  mr,
+  mb,
+  ml,
+  mx,
+  my,
+  // Padding props
+  p,
+  pt,
+  pr,
+  pb,
+  pl,
+  px,
+  py,
+  // Sizing props
+  w,
+  h,
+  minW,
+  maxW,
+  minH,
+  maxH,
+  // Inset props
+  inset,
+  insetX,
+  insetY,
+  top,
+  right,
+  bottom,
+  left,
+  // Display props
+  display,
+  // Position props
+  position,
+  // Overflow props
+  overflow,
+  overflowX,
+  overflowY,
+  // ZIndex props
+  zIndex,
+  // Shadow props
+  shadow,
+  // Opacity props
+  opacity,
+  // Interaction props
+  cursor,
+  pointerEvents,
+  userSelect,
+  // Text style props
+  textAlign,
+  whiteSpace,
+  textDecoration,
+  // Typography props
+  fontSize,
+  fontFamily,
+  fontWeight,
+  lineHeight,
+  // Color props
+  color,
+  bg,
+  borderColor,
+  // Border props
+  border,
+  borderX,
+  borderY,
+  borderTop,
+  borderRight,
+  borderBottom,
+  borderLeft,
+  borderStyle,
+  // Roundness props
+  rounded,
+  roundedTop,
+  roundedBottom,
+  roundedLeft,
+  roundedRight,
+  roundedTopLeft,
+  roundedTopRight,
+  roundedBottomLeft,
+  roundedBottomRight,
+  // Flexbox props
+  flexDirection,
+  justifyContent,
+  alignItems,
+  alignSelf,
+  flexWrap,
+  gap,
+  gapRow,
+  gapColumn,
+  flex,
+  flexGrow,
+  flexShrink,
+  flexBasis,
+  // Grid props
+  justifySelf,
+  gridTemplateColumns,
+  gridTemplateRows,
+  // State props
+  _hover,
+  _focus,
+  _active,
+  _disabled,
+  ...rest
+}) {
+  const Component = as || "div";
+  const stateProps = { _hover, _focus, _active, _disabled };
+  const styles = combineStyles(
+    getMarginStyles({ m, mt, mr, mb, ml, mx, my, ...stateProps }),
+    getPaddingStyles({ p, pt, pr, pb, pl, px, py, ...stateProps }),
+    getSizingStyles({ w, h, minW, maxW, minH, maxH, ...stateProps }),
+    getInsetStyles({ inset, insetX, insetY, top, right, bottom, left, ...stateProps }),
+    getDisplayStyles({ display, ...stateProps }),
+    getPositionStyles({ position, ...stateProps }),
+    getOverflowStyles({ overflow, overflowX, overflowY, ...stateProps }),
+    getZIndexStyles({ zIndex, ...stateProps }),
+    getShadowStyles({ shadow, ...stateProps }),
+    getOpacityStyles({ opacity, ...stateProps }),
+    getInteractionStyles({ cursor, pointerEvents, userSelect, ...stateProps }),
+    getTextStyles({ textAlign, whiteSpace, textDecoration, ...stateProps }),
+    getTypographyStyles({ fontSize, fontFamily, fontWeight, lineHeight }),
+    getColorStyles({ color, bg, borderColor, ...stateProps }),
+    getBorderStyles({
+      border,
+      borderX,
+      borderY,
+      borderTop,
+      borderRight,
+      borderBottom,
+      borderLeft,
+      borderStyle,
+      ...stateProps
+    }),
+    getRoundnessStyles({
+      rounded,
+      roundedTop,
+      roundedBottom,
+      roundedLeft,
+      roundedRight,
+      roundedTopLeft,
+      roundedTopRight,
+      roundedBottomLeft,
+      roundedBottomRight,
+      ...stateProps
+    }),
+    getFlexboxStyles({
+      flexDirection,
+      justifyContent,
+      alignItems,
+      alignSelf,
+      flexWrap,
+      gap,
+      gapRow,
+      gapColumn,
+      flex,
+      flexGrow,
+      flexShrink,
+      flexBasis,
+      ...stateProps
+    }),
+    getGridStyles({
+      justifySelf,
+      gridTemplateColumns,
+      gridTemplateRows,
+      ...stateProps
+    })
+  );
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: clsx(resetClass, styles.className, className),
+      style: {
+        ...styles.style,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  Box
+};
+//# sourceMappingURL=Box.js.map

package/dist/components/Box/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import { type ElementType, type ReactNode, type CSSProperties } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { clsx } from \"clsx\";\nimport { resetClass } from \"./reset/reset\";\nimport { getMarginStyles, type MarginProps } from \"./margin/margin\";\nimport { getPaddingStyles, type PaddingProps } from \"./padding/padding\";\nimport { getSizingStyles, type SizingProps } from \"./sizing/sizing\";\nimport { getInsetStyles, type InsetProps } from \"./inset/inset\";\nimport { getDisplayStyles, type DisplayProps } from \"./display/display\";\nimport { getPositionStyles, type PositionProps } from \"./position/position\";\nimport { getOverflowStyles, type OverflowProps } from \"./overflow/overflow\";\nimport { getZIndexStyles, type ZIndexProps } from \"./zIndex/zIndex\";\nimport { getShadowStyles, type ShadowProps } from \"./shadows/shadows\";\nimport { getOpacityStyles, type OpacityProps } from \"./opacity/opacity\";\nimport {\n  getInteractionStyles,\n  type InteractionProps,\n} from \"./interactions/interactions\";\nimport { getTextStyles, type TextStyleProps } from \"./text/text\";\nimport {\n  getTypographyStyles,\n  type TypographyProps,\n} from \"./typography/typography\";\nimport { getColorStyles, type ColorProps } from \"./colors/colors\";\nimport { getBorderStyles, type BorderProps } from \"./borders/borders\";\nimport { getRoundnessStyles, type RoundnessProps } from \"./roundness/roundness\";\nimport { getFlexboxStyles, type FlexboxProps } from \"./flexbox/flexbox\";\nimport { getGridStyles, type GridProps } from \"./grid/grid\";\n\n// Combined state props for all style parts\ntype StateStyleProps = MarginProps &\n  PaddingProps &\n  SizingProps &\n  InsetProps &\n  DisplayProps &\n  PositionProps &\n  OverflowProps &\n  ZIndexProps &\n  ShadowProps &\n  OpacityProps &\n  InteractionProps &\n  TextStyleProps &\n  TypographyProps &\n  ColorProps &\n  BorderProps &\n  RoundnessProps &\n  FlexboxProps &\n  GridProps;\n\ntype StateProps = {\n  _hover?: StateStyleProps;\n  _focus?: StateStyleProps;\n  _active?: StateStyleProps;\n  _disabled?: StateStyleProps;\n};\n\nexport type BoxOwnProps = MarginProps &\n  PaddingProps &\n  SizingProps &\n  InsetProps &\n  DisplayProps &\n  PositionProps &\n  OverflowProps &\n  ZIndexProps &\n  ShadowProps &\n  OpacityProps &\n  InteractionProps &\n  TextStyleProps &\n  TypographyProps &\n  ColorProps &\n  BorderProps &\n  RoundnessProps &\n  FlexboxProps &\n  GridProps &\n  StateProps & {\n    className?: string;\n    children?: ReactNode;\n  };\n\nexport type BoxProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  BoxOwnProps\n>;\n\n// Helper to combine multiple style results\ntype StyleResult = {\n  className?: string;\n  style?: CSSProperties;\n};\n\nfunction combineStyles(...results: StyleResult[]): StyleResult {\n  return {\n    className: clsx(...results.map((r) => r.className)),\n    style: Object.assign({}, ...results.map((r) => r.style)),\n  };\n}\n\nexport function Box<T extends ElementType = \"div\">({\n  as,\n  children,\n  className,\n  style,\n  // Margin props\n  m,\n  mt,\n  mr,\n  mb,\n  ml,\n  mx,\n  my,\n  // Padding props\n  p,\n  pt,\n  pr,\n  pb,\n  pl,\n  px,\n  py,\n  // Sizing props\n  w,\n  h,\n  minW,\n  maxW,\n  minH,\n  maxH,\n  // Inset props\n  inset,\n  insetX,\n  insetY,\n  top,\n  right,\n  bottom,\n  left,\n  // Display props\n  display,\n  // Position props\n  position,\n  // Overflow props\n  overflow,\n  overflowX,\n  overflowY,\n  // ZIndex props\n  zIndex,\n  // Shadow props\n  shadow,\n  // Opacity props\n  opacity,\n  // Interaction props\n  cursor,\n  pointerEvents,\n  userSelect,\n  // Text style props\n  textAlign,\n  whiteSpace,\n  textDecoration,\n  // Typography props\n  fontSize,\n  fontFamily,\n  fontWeight,\n  lineHeight,\n  // Color props\n  color,\n  bg,\n  borderColor,\n  // Border props\n  border,\n  borderX,\n  borderY,\n  borderTop,\n  borderRight,\n  borderBottom,\n  borderLeft,\n  borderStyle,\n  // Roundness props\n  rounded,\n  roundedTop,\n  roundedBottom,\n  roundedLeft,\n  roundedRight,\n  roundedTopLeft,\n  roundedTopRight,\n  roundedBottomLeft,\n  roundedBottomRight,\n  // Flexbox props\n  flexDirection,\n  justifyContent,\n  alignItems,\n  alignSelf,\n  flexWrap,\n  gap,\n  gapRow,\n  gapColumn,\n  flex,\n  flexGrow,\n  flexShrink,\n  flexBasis,\n  // Grid props\n  justifySelf,\n  gridTemplateColumns,\n  gridTemplateRows,\n  // State props\n  _hover,\n  _focus,\n  _active,\n  _disabled,\n  ...rest\n}: BoxProps<T>) {\n  const Component = as || \"div\";\n\n  const stateProps = { _hover, _focus, _active, _disabled };\n\n  const styles = combineStyles(\n    getMarginStyles({ m, mt, mr, mb, ml, mx, my, ...stateProps }),\n    getPaddingStyles({ p, pt, pr, pb, pl, px, py, ...stateProps }),\n    getSizingStyles({ w, h, minW, maxW, minH, maxH, ...stateProps }),\n    getInsetStyles({ inset, insetX, insetY, top, right, bottom, left, ...stateProps }),\n    getDisplayStyles({ display, ...stateProps }),\n    getPositionStyles({ position, ...stateProps }),\n    getOverflowStyles({ overflow, overflowX, overflowY, ...stateProps }),\n    getZIndexStyles({ zIndex, ...stateProps }),\n    getShadowStyles({ shadow, ...stateProps }),\n    getOpacityStyles({ opacity, ...stateProps }),\n    getInteractionStyles({ cursor, pointerEvents, userSelect, ...stateProps }),\n    getTextStyles({ textAlign, whiteSpace, textDecoration, ...stateProps }),\n    getTypographyStyles({ fontSize, fontFamily, fontWeight, lineHeight }),\n    getColorStyles({ color, bg, borderColor, ...stateProps }),\n    getBorderStyles({\n      border,\n      borderX,\n      borderY,\n      borderTop,\n      borderRight,\n      borderBottom,\n      borderLeft,\n      borderStyle,\n      ...stateProps,\n    }),\n    getRoundnessStyles({\n      rounded,\n      roundedTop,\n      roundedBottom,\n      roundedLeft,\n      roundedRight,\n      roundedTopLeft,\n      roundedTopRight,\n      roundedBottomLeft,\n      roundedBottomRight,\n      ...stateProps,\n    }),\n    getFlexboxStyles({\n      flexDirection,\n      justifyContent,\n      alignItems,\n      alignSelf,\n      flexWrap,\n      gap,\n      gapRow,\n      gapColumn,\n      flex,\n      flexGrow,\n      flexShrink,\n      flexBasis,\n      ...stateProps,\n    }),\n    getGridStyles({\n      justifySelf,\n      gridTemplateColumns,\n      gridTemplateRows,\n      ...stateProps,\n    })\n  );\n\n  return (\n    <Component\n      className={clsx(resetClass, styles.className, className)}\n      style={{\n        ...styles.style,\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Box/borders/borders.js

@@ -0,0 +1,91 @@
+import { STATE_CLASS_SUFFIXES } from "../shared/constants.js";
+import styles from "./borders.module.css.js";
+import clsx from "clsx";
+function getBorderTopClass(value, state) {
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  return stateClassSuffix ? styles[`border-top-${value}${stateClassSuffix}`] : styles[`border-top-${value}`];
+}
+function getBorderRightClass(value, state) {
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  return stateClassSuffix ? styles[`border-right-${value}${stateClassSuffix}`] : styles[`border-right-${value}`];
+}
+function getBorderBottomClass(value, state) {
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  return stateClassSuffix ? styles[`border-bottom-${value}${stateClassSuffix}`] : styles[`border-bottom-${value}`];
+}
+function getBorderLeftClass(value, state) {
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  return stateClassSuffix ? styles[`border-left-${value}${stateClassSuffix}`] : styles[`border-left-${value}`];
+}
+function getBorderStyleClass(value, state) {
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  return stateClassSuffix ? styles[`border-style-${value}${stateClassSuffix}`] : styles[`border-style-${value}`];
+}
+function getBorderStylesForState(props, state) {
+  if (!props) return { className: "", style: {} };
+  const {
+    border,
+    borderX,
+    borderY,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    borderStyle
+  } = props;
+  const classes = [];
+  const topWidth = borderTop ?? borderY ?? border;
+  const rightWidth = borderRight ?? borderX ?? border;
+  const bottomWidth = borderBottom ?? borderY ?? border;
+  const leftWidth = borderLeft ?? borderX ?? border;
+  if (topWidth) {
+    const cls = getBorderTopClass(topWidth, state);
+    if (cls) classes.push(cls);
+  }
+  if (rightWidth) {
+    const cls = getBorderRightClass(rightWidth, state);
+    if (cls) classes.push(cls);
+  }
+  if (bottomWidth) {
+    const cls = getBorderBottomClass(bottomWidth, state);
+    if (cls) classes.push(cls);
+  }
+  if (leftWidth) {
+    const cls = getBorderLeftClass(leftWidth, state);
+    if (cls) classes.push(cls);
+  }
+  if (borderStyle) {
+    const cls = getBorderStyleClass(borderStyle, state);
+    if (cls) classes.push(cls);
+  } else if (topWidth || rightWidth || bottomWidth || leftWidth) {
+    const cls = getBorderStyleClass("solid", state);
+    if (cls) classes.push(cls);
+  }
+  return { className: clsx(...classes), style: {} };
+}
+function getBorderStyles(props) {
+  const {
+    border,
+    borderX,
+    borderY,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    borderStyle,
+    _hover
+  } = props;
+  const baseStyles = getBorderStylesForState(
+    { border, borderX, borderY, borderTop, borderRight, borderBottom, borderLeft, borderStyle },
+    "base"
+  );
+  const hoverStyles = getBorderStylesForState(_hover, "hover");
+  return {
+    className: clsx(baseStyles.className, hoverStyles.className),
+    style: {}
+  };
+}
+export {
+  getBorderStyles
+};
+//# sourceMappingURL=borders.js.map

package/dist/components/Box/borders/borders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"borders.js","sources":["../../../../src/components/Box/borders/borders.ts"],"sourcesContent":["import {\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./borders.module.css\";\nimport clsx from \"clsx\";\n\nexport type BorderWidthValue = \"none\" | \"thin\" | \"medium\" | \"thick\";\nexport type BorderStyleValue = \"none\" | \"solid\" | \"dashed\" | \"dotted\";\n\nexport type BorderProps = {\n  border?: BorderWidthValue;\n  borderX?: BorderWidthValue;\n  borderY?: BorderWidthValue;\n  borderTop?: BorderWidthValue;\n  borderRight?: BorderWidthValue;\n  borderBottom?: BorderWidthValue;\n  borderLeft?: BorderWidthValue;\n  borderStyle?: BorderStyleValue;\n};\n\nexport type BorderStateProps = {\n  _hover?: BorderProps;\n};\n\nfunction getBorderTopClass(value: BorderWidthValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-top-${value}${stateClassSuffix}`]\n    : styles[`border-top-${value}`];\n}\n\nfunction getBorderRightClass(value: BorderWidthValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-right-${value}${stateClassSuffix}`]\n    : styles[`border-right-${value}`];\n}\n\nfunction getBorderBottomClass(value: BorderWidthValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-bottom-${value}${stateClassSuffix}`]\n    : styles[`border-bottom-${value}`];\n}\n\nfunction getBorderLeftClass(value: BorderWidthValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-left-${value}${stateClassSuffix}`]\n    : styles[`border-left-${value}`];\n}\n\nfunction getBorderStyleClass(value: BorderStyleValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-style-${value}${stateClassSuffix}`]\n    : styles[`border-style-${value}`];\n}\n\nfunction getBorderStylesForState(\n  props: BorderProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const {\n    border,\n    borderX,\n    borderY,\n    borderTop,\n    borderRight,\n    borderBottom,\n    borderLeft,\n    borderStyle,\n  } = props;\n\n  const classes: string[] = [];\n\n  // Cascading specificity: individual > axis > all\n  const topWidth = borderTop ?? borderY ?? border;\n  const rightWidth = borderRight ?? borderX ?? border;\n  const bottomWidth = borderBottom ?? borderY ?? border;\n  const leftWidth = borderLeft ?? borderX ?? border;\n\n  if (topWidth) {\n    const cls = getBorderTopClass(topWidth, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (rightWidth) {\n    const cls = getBorderRightClass(rightWidth, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (bottomWidth) {\n    const cls = getBorderBottomClass(bottomWidth, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (leftWidth) {\n    const cls = getBorderLeftClass(leftWidth, state);\n    if (cls) classes.push(cls);\n  }\n\n  // Apply borderStyle, default to solid if any width is set\n  if (borderStyle) {\n    const cls = getBorderStyleClass(borderStyle, state);\n    if (cls) classes.push(cls);\n  } else if (topWidth || rightWidth || bottomWidth || leftWidth) {\n    const cls = getBorderStyleClass(\"solid\", state);\n    if (cls) classes.push(cls);\n  }\n\n  return { className: clsx(...classes), style: {} };\n}\n\nexport function getBorderStyles(\n  props: BorderProps & BorderStateProps\n): StyleResult {\n  const {\n    border,\n    borderX,\n    borderY,\n    borderTop,\n    borderRight,\n    borderBottom,\n    borderLeft,\n    borderStyle,\n    _hover,\n  } = props;\n\n  const baseStyles = getBorderStylesForState(\n    { border, borderX, borderY, borderTop, borderRight, borderBottom, borderLeft, borderStyle },\n    \"base\"\n  );\n  const hoverStyles = getBorderStylesForState(_hover, \"hover\");\n\n  return {\n    className: clsx(baseStyles.className, hoverStyles.className),\n    style: {},\n  };\n}\n"],"names":[],"mappings":";;;AA0BA,SAAS,kBAAkB,OAAyB,OAAqC;AACvF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,cAAc,KAAK,GAAG,gBAAgB,EAAE,IAC/C,OAAO,cAAc,KAAK,EAAE;AAClC;AAEA,SAAS,oBAAoB,OAAyB,OAAqC;AACzF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,gBAAgB,KAAK,GAAG,gBAAgB,EAAE,IACjD,OAAO,gBAAgB,KAAK,EAAE;AACpC;AAEA,SAAS,qBAAqB,OAAyB,OAAqC;AAC1F,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,iBAAiB,KAAK,GAAG,gBAAgB,EAAE,IAClD,OAAO,iBAAiB,KAAK,EAAE;AACrC;AAEA,SAAS,mBAAmB,OAAyB,OAAqC;AACxF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,eAAe,KAAK,GAAG,gBAAgB,EAAE,IAChD,OAAO,eAAe,KAAK,EAAE;AACnC;AAEA,SAAS,oBAAoB,OAAyB,OAAqC;AACzF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,gBAAgB,KAAK,GAAG,gBAAgB,EAAE,IACjD,OAAO,gBAAgB,KAAK,EAAE;AACpC;AAEA,SAAS,wBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,UAAoB,CAAA;AAG1B,QAAM,WAAW,aAAa,WAAW;AACzC,QAAM,aAAa,eAAe,WAAW;AAC7C,QAAM,cAAc,gBAAgB,WAAW;AAC/C,QAAM,YAAY,cAAc,WAAW;AAE3C,MAAI,UAAU;AACZ,UAAM,MAAM,kBAAkB,UAAU,KAAK;AAC7C,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,YAAY;AACd,UAAM,MAAM,oBAAoB,YAAY,KAAK;AACjD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,aAAa;AACf,UAAM,MAAM,qBAAqB,aAAa,KAAK;AACnD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,WAAW;AACb,UAAM,MAAM,mBAAmB,WAAW,KAAK;AAC/C,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAGA,MAAI,aAAa;AACf,UAAM,MAAM,oBAAoB,aAAa,KAAK;AAClD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B,WAAW,YAAY,cAAc,eAAe,WAAW;AAC7D,UAAM,MAAM,oBAAoB,SAAS,KAAK;AAC9C,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,SAAO,EAAE,WAAW,KAAK,GAAG,OAAO,GAAG,OAAO,GAAC;AAChD;AAEO,SAAS,gBACd,OACa;AACb,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,aAAa;AAAA,IACjB,EAAE,QAAQ,SAAS,SAAS,WAAW,aAAa,cAAc,YAAY,YAAA;AAAA,IAC9E;AAAA,EAAA;AAEF,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAE3D,SAAO;AAAA,IACL,WAAW,KAAK,WAAW,WAAW,YAAY,SAAS;AAAA,IAC3D,OAAO,CAAA;AAAA,EAAC;AAEZ;"}

package/dist/components/Box/borders/borders.module.css

@@ -0,0 +1,49 @@
+/* borderTopWidth */
+._border-top-none_1kh6f_2 { border-top-width: var(--t-border-width-none); }
+._border-top-none\:h_1kh6f_3:hover { border-top-width: var(--t-border-width-none); }
+._border-top-thin_1kh6f_4 { border-top-width: var(--t-border-width-thin); }
+._border-top-thin\:h_1kh6f_5:hover { border-top-width: var(--t-border-width-thin); }
+._border-top-medium_1kh6f_6 { border-top-width: var(--t-border-width-medium); }
+._border-top-medium\:h_1kh6f_7:hover { border-top-width: var(--t-border-width-medium); }
+._border-top-thick_1kh6f_8 { border-top-width: var(--t-border-width-thick); }
+._border-top-thick\:h_1kh6f_9:hover { border-top-width: var(--t-border-width-thick); }
+
+/* borderRightWidth */
+._border-right-none_1kh6f_12 { border-right-width: var(--t-border-width-none); }
+._border-right-none\:h_1kh6f_13:hover { border-right-width: var(--t-border-width-none); }
+._border-right-thin_1kh6f_14 { border-right-width: var(--t-border-width-thin); }
+._border-right-thin\:h_1kh6f_15:hover { border-right-width: var(--t-border-width-thin); }
+._border-right-medium_1kh6f_16 { border-right-width: var(--t-border-width-medium); }
+._border-right-medium\:h_1kh6f_17:hover { border-right-width: var(--t-border-width-medium); }
+._border-right-thick_1kh6f_18 { border-right-width: var(--t-border-width-thick); }
+._border-right-thick\:h_1kh6f_19:hover { border-right-width: var(--t-border-width-thick); }
+
+/* borderBottomWidth */
+._border-bottom-none_1kh6f_22 { border-bottom-width: var(--t-border-width-none); }
+._border-bottom-none\:h_1kh6f_23:hover { border-bottom-width: var(--t-border-width-none); }
+._border-bottom-thin_1kh6f_24 { border-bottom-width: var(--t-border-width-thin); }
+._border-bottom-thin\:h_1kh6f_25:hover { border-bottom-width: var(--t-border-width-thin); }
+._border-bottom-medium_1kh6f_26 { border-bottom-width: var(--t-border-width-medium); }
+._border-bottom-medium\:h_1kh6f_27:hover { border-bottom-width: var(--t-border-width-medium); }
+._border-bottom-thick_1kh6f_28 { border-bottom-width: var(--t-border-width-thick); }
+._border-bottom-thick\:h_1kh6f_29:hover { border-bottom-width: var(--t-border-width-thick); }
+
+/* borderLeftWidth */
+._border-left-none_1kh6f_32 { border-left-width: var(--t-border-width-none); }
+._border-left-none\:h_1kh6f_33:hover { border-left-width: var(--t-border-width-none); }
+._border-left-thin_1kh6f_34 { border-left-width: var(--t-border-width-thin); }
+._border-left-thin\:h_1kh6f_35:hover { border-left-width: var(--t-border-width-thin); }
+._border-left-medium_1kh6f_36 { border-left-width: var(--t-border-width-medium); }
+._border-left-medium\:h_1kh6f_37:hover { border-left-width: var(--t-border-width-medium); }
+._border-left-thick_1kh6f_38 { border-left-width: var(--t-border-width-thick); }
+._border-left-thick\:h_1kh6f_39:hover { border-left-width: var(--t-border-width-thick); }
+
+/* borderStyle */
+._border-style-none_1kh6f_42 { border-style: none; }
+._border-style-none\:h_1kh6f_43:hover { border-style: none; }
+._border-style-solid_1kh6f_44 { border-style: solid; }
+._border-style-solid\:h_1kh6f_45:hover { border-style: solid; }
+._border-style-dashed_1kh6f_46 { border-style: dashed; }
+._border-style-dashed\:h_1kh6f_47:hover { border-style: dashed; }
+._border-style-dotted_1kh6f_48 { border-style: dotted; }
+._border-style-dotted\:h_1kh6f_49:hover { border-style: dotted; }

package/dist/components/Box/borders/borders.module.css.js

@@ -0,0 +1,46 @@
+const styles = {
+  "border-top-none": "_border-top-none_1kh6f_2",
+  "border-top-none:h": "_border-top-none:h_1kh6f_3",
+  "border-top-thin": "_border-top-thin_1kh6f_4",
+  "border-top-thin:h": "_border-top-thin:h_1kh6f_5",
+  "border-top-medium": "_border-top-medium_1kh6f_6",
+  "border-top-medium:h": "_border-top-medium:h_1kh6f_7",
+  "border-top-thick": "_border-top-thick_1kh6f_8",
+  "border-top-thick:h": "_border-top-thick:h_1kh6f_9",
+  "border-right-none": "_border-right-none_1kh6f_12",
+  "border-right-none:h": "_border-right-none:h_1kh6f_13",
+  "border-right-thin": "_border-right-thin_1kh6f_14",
+  "border-right-thin:h": "_border-right-thin:h_1kh6f_15",
+  "border-right-medium": "_border-right-medium_1kh6f_16",
+  "border-right-medium:h": "_border-right-medium:h_1kh6f_17",
+  "border-right-thick": "_border-right-thick_1kh6f_18",
+  "border-right-thick:h": "_border-right-thick:h_1kh6f_19",
+  "border-bottom-none": "_border-bottom-none_1kh6f_22",
+  "border-bottom-none:h": "_border-bottom-none:h_1kh6f_23",
+  "border-bottom-thin": "_border-bottom-thin_1kh6f_24",
+  "border-bottom-thin:h": "_border-bottom-thin:h_1kh6f_25",
+  "border-bottom-medium": "_border-bottom-medium_1kh6f_26",
+  "border-bottom-medium:h": "_border-bottom-medium:h_1kh6f_27",
+  "border-bottom-thick": "_border-bottom-thick_1kh6f_28",
+  "border-bottom-thick:h": "_border-bottom-thick:h_1kh6f_29",
+  "border-left-none": "_border-left-none_1kh6f_32",
+  "border-left-none:h": "_border-left-none:h_1kh6f_33",
+  "border-left-thin": "_border-left-thin_1kh6f_34",
+  "border-left-thin:h": "_border-left-thin:h_1kh6f_35",
+  "border-left-medium": "_border-left-medium_1kh6f_36",
+  "border-left-medium:h": "_border-left-medium:h_1kh6f_37",
+  "border-left-thick": "_border-left-thick_1kh6f_38",
+  "border-left-thick:h": "_border-left-thick:h_1kh6f_39",
+  "border-style-none": "_border-style-none_1kh6f_42",
+  "border-style-none:h": "_border-style-none:h_1kh6f_43",
+  "border-style-solid": "_border-style-solid_1kh6f_44",
+  "border-style-solid:h": "_border-style-solid:h_1kh6f_45",
+  "border-style-dashed": "_border-style-dashed_1kh6f_46",
+  "border-style-dashed:h": "_border-style-dashed:h_1kh6f_47",
+  "border-style-dotted": "_border-style-dotted_1kh6f_48",
+  "border-style-dotted:h": "_border-style-dotted:h_1kh6f_49"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=borders.module.css.js.map

package/dist/components/Box/borders/borders.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"borders.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Box/colors/colors.js

@@ -0,0 +1,45 @@
+import { STATE_CLASS_SUFFIXES } from "../shared/constants.js";
+import styles from "./colors.module.css.js";
+import clsx from "clsx";
+function getColorClass(value, state) {
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  return stateClassSuffix ? styles[`color-${value}${stateClassSuffix}`] : styles[`color-${value}`];
+}
+function getBgClass(value, state) {
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  return stateClassSuffix ? styles[`bg-${value}${stateClassSuffix}`] : styles[`bg-${value}`];
+}
+function getBorderColorClass(value, state) {
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  return stateClassSuffix ? styles[`border-color-${value}${stateClassSuffix}`] : styles[`border-color-${value}`];
+}
+function getColorStylesForState(props, state) {
+  if (!props) return { className: "", style: {} };
+  const classes = [];
+  if (props.color) {
+    const cls = getColorClass(props.color, state);
+    if (cls) classes.push(cls);
+  }
+  if (props.bg) {
+    const cls = getBgClass(props.bg, state);
+    if (cls) classes.push(cls);
+  }
+  if (props.borderColor) {
+    const cls = getBorderColorClass(props.borderColor, state);
+    if (cls) classes.push(cls);
+  }
+  return { className: clsx(...classes), style: {} };
+}
+function getColorStyles(props) {
+  const { color, bg, borderColor, _hover } = props;
+  const baseStyles = getColorStylesForState({ color, bg, borderColor }, "base");
+  const hoverStyles = getColorStylesForState(_hover, "hover");
+  return {
+    className: clsx(baseStyles.className, hoverStyles.className),
+    style: {}
+  };
+}
+export {
+  getColorStyles
+};
+//# sourceMappingURL=colors.js.map

package/dist/components/Box/colors/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../../../src/components/Box/colors/colors.ts"],"sourcesContent":["import {\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./colors.module.css\";\nimport clsx from \"clsx\";\n\nexport type ColorValue =\n  | \"accent-emphasis\"\n  | \"accent\"\n  | \"error-emphasis\"\n  | \"error\"\n  | \"foreground-inverted-muted\"\n  | \"foreground-inverted-subtle\"\n  | \"foreground-inverted\"\n  | \"foreground-muted\"\n  | \"foreground-subtle\"\n  | \"foreground\"\n  | \"info-emphasis\"\n  | \"info\"\n  | \"primary-emphasis\"\n  | \"primary\"\n  | \"success-emphasis\"\n  | \"success\"\n  | \"warning-emphasis\"\n  | \"warning\";\n\nexport type BackgroundColorValue =\n  | \"accent-default\"\n  | \"accent-emphasis\"\n  | \"accent-subtle\"\n  | \"background\"\n  | \"error-default\"\n  | \"error-emphasis\"\n  | \"error-subtle\"\n  | \"foreground\"\n  | \"info-default\"\n  | \"info-emphasis\"\n  | \"info-subtle\"\n  | \"primary-default\"\n  | \"primary-emphasis\"\n  | \"primary-subtle\"\n  | \"success-default\"\n  | \"success-emphasis\"\n  | \"success-subtle\"\n  | \"surface\"\n  | \"transparent\"\n  | \"warning-default\"\n  | \"warning-emphasis\"\n  | \"warning-subtle\";\n\nexport type BorderColorValue =\n  | \"accent-emphasis\"\n  | \"accent\"\n  | \"border-muted\"\n  | \"border\"\n  | \"error-emphasis\"\n  | \"error\"\n  | \"info-emphasis\"\n  | \"info\"\n  | \"primary-emphasis\"\n  | \"primary\"\n  | \"success-emphasis\"\n  | \"success\"\n  | \"warning-emphasis\"\n  | \"warning\";\n\nexport type ColorProps = {\n  color?: ColorValue;\n  bg?: BackgroundColorValue;\n  borderColor?: BorderColorValue;\n};\n\nexport type ColorStateProps = {\n  _hover?: ColorProps;\n};\n\nfunction getColorClass(value: ColorValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`color-${value}${stateClassSuffix}`]\n    : styles[`color-${value}`];\n}\n\nfunction getBgClass(value: BackgroundColorValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`bg-${value}${stateClassSuffix}`]\n    : styles[`bg-${value}`];\n}\n\nfunction getBorderColorClass(value: BorderColorValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-color-${value}${stateClassSuffix}`]\n    : styles[`border-color-${value}`];\n}\n\nfunction getColorStylesForState(\n  props: ColorProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const classes: string[] = [];\n\n  if (props.color) {\n    const cls = getColorClass(props.color, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (props.bg) {\n    const cls = getBgClass(props.bg, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (props.borderColor) {\n    const cls = getBorderColorClass(props.borderColor, state);\n    if (cls) classes.push(cls);\n  }\n\n  return { className: clsx(...classes), style: {} };\n}\n\nexport function getColorStyles(\n  props: ColorProps & ColorStateProps\n): StyleResult {\n  const { color, bg, borderColor, _hover } = props;\n\n  const baseStyles = getColorStylesForState({ color, bg, borderColor }, \"base\");\n  const hoverStyles = getColorStylesForState(_hover, \"hover\");\n\n  return {\n    className: clsx(baseStyles.className, hoverStyles.className),\n    style: {},\n  };\n}\n"],"names":[],"mappings":";;;AA8EA,SAAS,cAAc,OAAmB,OAAqC;AAC7E,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,SAAS,KAAK,GAAG,gBAAgB,EAAE,IAC1C,OAAO,SAAS,KAAK,EAAE;AAC7B;AAEA,SAAS,WAAW,OAA6B,OAAqC;AACpF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,MAAM,KAAK,GAAG,gBAAgB,EAAE,IACvC,OAAO,MAAM,KAAK,EAAE;AAC1B;AAEA,SAAS,oBAAoB,OAAyB,OAAqC;AACzF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,gBAAgB,KAAK,GAAG,gBAAgB,EAAE,IACjD,OAAO,gBAAgB,KAAK,EAAE;AACpC;AAEA,SAAS,uBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,UAAoB,CAAA;AAE1B,MAAI,MAAM,OAAO;AACf,UAAM,MAAM,cAAc,MAAM,OAAO,KAAK;AAC5C,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,MAAM,IAAI;AACZ,UAAM,MAAM,WAAW,MAAM,IAAI,KAAK;AACtC,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,MAAM,aAAa;AACrB,UAAM,MAAM,oBAAoB,MAAM,aAAa,KAAK;AACxD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,SAAO,EAAE,WAAW,KAAK,GAAG,OAAO,GAAG,OAAO,GAAC;AAChD;AAEO,SAAS,eACd,OACa;AACb,QAAM,EAAE,OAAO,IAAI,aAAa,WAAW;AAE3C,QAAM,aAAa,uBAAuB,EAAE,OAAO,IAAI,YAAA,GAAe,MAAM;AAC5E,QAAM,cAAc,uBAAuB,QAAQ,OAAO;AAE1D,SAAO;AAAA,IACL,WAAW,KAAK,WAAW,WAAW,YAAY,SAAS;AAAA,IAC3D,OAAO,CAAA;AAAA,EAAC;AAEZ;"}

package/dist/components/Box/colors/colors.module.css

@@ -0,0 +1,113 @@
+/* color (text) */
+._color-accent-emphasis_1poz8_2 { color: var(--t-color-accent-emphasis); }
+._color-accent-emphasis\:h_1poz8_3:hover { color: var(--t-color-accent-emphasis); }
+._color-accent_1poz8_2 { color: var(--t-color-accent-default); }
+._color-accent\:h_1poz8_5:hover { color: var(--t-color-accent-default); }
+._color-error-emphasis_1poz8_6 { color: var(--t-color-error-emphasis); }
+._color-error-emphasis\:h_1poz8_7:hover { color: var(--t-color-error-emphasis); }
+._color-error_1poz8_6 { color: var(--t-color-error-default); }
+._color-error\:h_1poz8_9:hover { color: var(--t-color-error-default); }
+._color-foreground-inverted-muted_1poz8_10 { color: var(--t-color-foreground-inverted-muted); }
+._color-foreground-inverted-muted\:h_1poz8_11:hover { color: var(--t-color-foreground-inverted-muted); }
+._color-foreground-inverted-subtle_1poz8_12 { color: var(--t-color-foreground-inverted-subtle); }
+._color-foreground-inverted-subtle\:h_1poz8_13:hover { color: var(--t-color-foreground-inverted-subtle); }
+._color-foreground-inverted_1poz8_10 { color: var(--t-color-foreground-inverted); }
+._color-foreground-inverted\:h_1poz8_15:hover { color: var(--t-color-foreground-inverted); }
+._color-foreground-muted_1poz8_16 { color: var(--t-color-foreground-muted); }
+._color-foreground-muted\:h_1poz8_17:hover { color: var(--t-color-foreground-muted); }
+._color-foreground-subtle_1poz8_18 { color: var(--t-color-foreground-subtle); }
+._color-foreground-subtle\:h_1poz8_19:hover { color: var(--t-color-foreground-subtle); }
+._color-foreground_1poz8_10 { color: var(--t-color-foreground); }
+._color-foreground\:h_1poz8_21:hover { color: var(--t-color-foreground); }
+._color-info-emphasis_1poz8_22 { color: var(--t-color-info-emphasis); }
+._color-info-emphasis\:h_1poz8_23:hover { color: var(--t-color-info-emphasis); }
+._color-info_1poz8_22 { color: var(--t-color-info-default); }
+._color-info\:h_1poz8_25:hover { color: var(--t-color-info-default); }
+._color-primary-emphasis_1poz8_26 { color: var(--t-color-primary-emphasis); }
+._color-primary-emphasis\:h_1poz8_27:hover { color: var(--t-color-primary-emphasis); }
+._color-primary_1poz8_26 { color: var(--t-color-primary-default); }
+._color-primary\:h_1poz8_29:hover { color: var(--t-color-primary-default); }
+._color-success-emphasis_1poz8_30 { color: var(--t-color-success-emphasis); }
+._color-success-emphasis\:h_1poz8_31:hover { color: var(--t-color-success-emphasis); }
+._color-success_1poz8_30 { color: var(--t-color-success-default); }
+._color-success\:h_1poz8_33:hover { color: var(--t-color-success-default); }
+._color-warning-emphasis_1poz8_34 { color: var(--t-color-warning-emphasis); }
+._color-warning-emphasis\:h_1poz8_35:hover { color: var(--t-color-warning-emphasis); }
+._color-warning_1poz8_34 { color: var(--t-color-warning-default); }
+._color-warning\:h_1poz8_37:hover { color: var(--t-color-warning-default); }
+
+/* bg (background) */
+._bg-accent-default_1poz8_40 { background-color: var(--t-color-accent-default); }
+._bg-accent-default\:h_1poz8_41:hover { background-color: var(--t-color-accent-default); }
+._bg-accent-emphasis_1poz8_42 { background-color: var(--t-color-accent-emphasis); }
+._bg-accent-emphasis\:h_1poz8_43:hover { background-color: var(--t-color-accent-emphasis); }
+._bg-accent-subtle_1poz8_44 { background-color: var(--t-color-accent-subtle); }
+._bg-accent-subtle\:h_1poz8_45:hover { background-color: var(--t-color-accent-subtle); }
+._bg-background_1poz8_46 { background-color: var(--t-color-background); }
+._bg-background\:h_1poz8_47:hover { background-color: var(--t-color-background); }
+._bg-error-default_1poz8_48 { background-color: var(--t-color-error-default); }
+._bg-error-default\:h_1poz8_49:hover { background-color: var(--t-color-error-default); }
+._bg-error-emphasis_1poz8_50 { background-color: var(--t-color-error-emphasis); }
+._bg-error-emphasis\:h_1poz8_51:hover { background-color: var(--t-color-error-emphasis); }
+._bg-error-subtle_1poz8_52 { background-color: var(--t-color-error-subtle); }
+._bg-error-subtle\:h_1poz8_53:hover { background-color: var(--t-color-error-subtle); }
+._bg-foreground_1poz8_54 { background-color: var(--t-color-foreground); }
+._bg-foreground\:h_1poz8_55:hover { background-color: var(--t-color-foreground); }
+._bg-info-default_1poz8_56 { background-color: var(--t-color-info-default); }
+._bg-info-default\:h_1poz8_57:hover { background-color: var(--t-color-info-default); }
+._bg-info-emphasis_1poz8_58 { background-color: var(--t-color-info-emphasis); }
+._bg-info-emphasis\:h_1poz8_59:hover { background-color: var(--t-color-info-emphasis); }
+._bg-info-subtle_1poz8_60 { background-color: var(--t-color-info-subtle); }
+._bg-info-subtle\:h_1poz8_61:hover { background-color: var(--t-color-info-subtle); }
+._bg-primary-default_1poz8_62 { background-color: var(--t-color-primary-default); }
+._bg-primary-default\:h_1poz8_63:hover { background-color: var(--t-color-primary-default); }
+._bg-primary-emphasis_1poz8_64 { background-color: var(--t-color-primary-emphasis); }
+._bg-primary-emphasis\:h_1poz8_65:hover { background-color: var(--t-color-primary-emphasis); }
+._bg-primary-subtle_1poz8_66 { background-color: var(--t-color-primary-subtle); }
+._bg-primary-subtle\:h_1poz8_67:hover { background-color: var(--t-color-primary-subtle); }
+._bg-success-default_1poz8_68 { background-color: var(--t-color-success-default); }
+._bg-success-default\:h_1poz8_69:hover { background-color: var(--t-color-success-default); }
+._bg-success-emphasis_1poz8_70 { background-color: var(--t-color-success-emphasis); }
+._bg-success-emphasis\:h_1poz8_71:hover { background-color: var(--t-color-success-emphasis); }
+._bg-success-subtle_1poz8_72 { background-color: var(--t-color-success-subtle); }
+._bg-success-subtle\:h_1poz8_73:hover { background-color: var(--t-color-success-subtle); }
+._bg-surface_1poz8_74 { background-color: var(--t-color-surface); }
+._bg-surface\:h_1poz8_75:hover { background-color: var(--t-color-surface); }
+._bg-transparent_1poz8_76 { background-color: transparent; }
+._bg-transparent\:h_1poz8_77:hover { background-color: transparent; }
+._bg-warning-default_1poz8_78 { background-color: var(--t-color-warning-default); }
+._bg-warning-default\:h_1poz8_79:hover { background-color: var(--t-color-warning-default); }
+._bg-warning-emphasis_1poz8_80 { background-color: var(--t-color-warning-emphasis); }
+._bg-warning-emphasis\:h_1poz8_81:hover { background-color: var(--t-color-warning-emphasis); }
+._bg-warning-subtle_1poz8_82 { background-color: var(--t-color-warning-subtle); }
+._bg-warning-subtle\:h_1poz8_83:hover { background-color: var(--t-color-warning-subtle); }
+
+/* borderColor */
+._border-color-accent-emphasis_1poz8_86 { border-color: var(--t-color-accent-emphasis); }
+._border-color-accent-emphasis\:h_1poz8_87:hover { border-color: var(--t-color-accent-emphasis); }
+._border-color-accent_1poz8_86 { border-color: var(--t-color-accent-default); }
+._border-color-accent\:h_1poz8_89:hover { border-color: var(--t-color-accent-default); }
+._border-color-border-muted_1poz8_90 { border-color: var(--t-color-border-muted); }
+._border-color-border-muted\:h_1poz8_91:hover { border-color: var(--t-color-border-muted); }
+._border-color-border_1poz8_90 { border-color: var(--t-color-border); }
+._border-color-border\:h_1poz8_93:hover { border-color: var(--t-color-border); }
+._border-color-error-emphasis_1poz8_94 { border-color: var(--t-color-error-emphasis); }
+._border-color-error-emphasis\:h_1poz8_95:hover { border-color: var(--t-color-error-emphasis); }
+._border-color-error_1poz8_94 { border-color: var(--t-color-error-default); }
+._border-color-error\:h_1poz8_97:hover { border-color: var(--t-color-error-default); }
+._border-color-info-emphasis_1poz8_98 { border-color: var(--t-color-info-emphasis); }
+._border-color-info-emphasis\:h_1poz8_99:hover { border-color: var(--t-color-info-emphasis); }
+._border-color-info_1poz8_98 { border-color: var(--t-color-info-default); }
+._border-color-info\:h_1poz8_101:hover { border-color: var(--t-color-info-default); }
+._border-color-primary-emphasis_1poz8_102 { border-color: var(--t-color-primary-emphasis); }
+._border-color-primary-emphasis\:h_1poz8_103:hover { border-color: var(--t-color-primary-emphasis); }
+._border-color-primary_1poz8_102 { border-color: var(--t-color-primary-default); }
+._border-color-primary\:h_1poz8_105:hover { border-color: var(--t-color-primary-default); }
+._border-color-success-emphasis_1poz8_106 { border-color: var(--t-color-success-emphasis); }
+._border-color-success-emphasis\:h_1poz8_107:hover { border-color: var(--t-color-success-emphasis); }
+._border-color-success_1poz8_106 { border-color: var(--t-color-success-default); }
+._border-color-success\:h_1poz8_109:hover { border-color: var(--t-color-success-default); }
+._border-color-warning-emphasis_1poz8_110 { border-color: var(--t-color-warning-emphasis); }
+._border-color-warning-emphasis\:h_1poz8_111:hover { border-color: var(--t-color-warning-emphasis); }
+._border-color-warning_1poz8_110 { border-color: var(--t-color-warning-default); }
+._border-color-warning\:h_1poz8_113:hover { border-color: var(--t-color-warning-default); }