design-zystem 1.0.285 → 1.0.286

package/dist/index.d.mts

@@ -36,6 +36,22 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     borderColor?: string;
     /** Colored halo around the box, for transient states (unsaved, selected, in error). */
     shadowColor?: string;
+    /** Explicit width, wins over `fullWidth`. The box stays in `content-box`, so a border adds to it. */
+    width?: string;
+    /** Explicit min-width, wins over `fullWidth`. Pair with `width` for a column that must not shrink. */
+    minWidth?: string;
+    /** Floor height of a flex child; `minHeight="0"` lets it shrink below its content so an inner area can scroll. */
+    minHeight?: string;
+    /** `flex` shorthand when the box is itself a flex child (e.g. `0 0 250px`, `1 1 auto`). */
+    flex?: string;
+    /** Stacking direction of the box's own children — the box is a `row` by default. */
+    flexDirection?: string;
+    /** Clips or scrolls the content (`hidden`, `auto`…); the box shows overflowing content by default. */
+    overflow?: string;
+    /** Positioning scheme; the box is `relative` by default, so children can already be absolute against it. */
+    position?: string;
+    /** `inset` shorthand, meaningful with `position="absolute"` (e.g. `0` to fill the positioned ancestor). */
+    inset?: string;
     style?: CSSProperties;
 }
 declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -70,6 +86,18 @@ interface RowProps extends HTMLAttributes<HTMLDivElement> {
     width?: string;
     wrap?: string;
     backgroundColor?: string;
+    /** `flex` shorthand when the row is itself a flex child (e.g. `1 1 auto` to absorb the leftover height). */
+    flex?: string;
+    /** Floor height of a flex child; `minHeight="0"` lets it shrink below its content so an inner area can scroll. */
+    minHeight?: string;
+    /** Ceiling height — the row is capped at `100%` of its parent by default; `none` releases that cap. */
+    maxHeight?: string;
+    /** Horizontal overflow, e.g. `auto` for a horizontally scrollable board. */
+    overflowX?: string;
+    /** Vertical overflow, e.g. `auto` to make the row own its scroll region. */
+    overflowY?: string;
+    /** Positioning scheme; `relative` makes the row the anchor of an absolutely positioned child. */
+    position?: string;
     style?: CSSProperties;
     className?: string;
 }
@@ -86,6 +114,28 @@ interface ColProps extends HTMLAttributes<HTMLDivElement> {
     fullHeight?: boolean;
     fullWidth?: boolean;
     flex?: string;
+    /** Explicit width, wins over `fullWidth` and `size` (e.g. a 12px gutter column). */
+    width?: string;
+    /** Explicit min-width. `minWidth="0"` lets a flex column shrink below its content, like a `minmax(0, 1fr)` grid track. */
+    minWidth?: string;
+    /** Explicit height, wins over `fullHeight`. `height="auto"` beats the default `fit-content` so the column can stretch. */
+    height?: string;
+    /** Floor height of a flex child; `minHeight="0"` lets it shrink below its content so an inner area can scroll. */
+    minHeight?: string;
+    /** Cross-axis alignment of the column itself, e.g. `stretch` to match the height of its siblings. */
+    alignSelf?: string;
+    /** Horizontal overflow; the column shows overflowing content by default. */
+    overflowX?: string;
+    /** Vertical overflow; `overflowY="auto"` makes the column own its scroll region. */
+    overflowY?: string;
+    /** `scrollbar-gutter`, e.g. `stable` so the content keeps the same width whether or not a scrollbar shows. */
+    scrollbarGutter?: string;
+    /** Hides the scrollbar chrome while keeping the column scrollable. */
+    hideScrollbar?: boolean;
+    /** `overflow-wrap` — inherited, so `anywhere` also protects the whole subtree from an unbreakable token. */
+    overflowWrap?: string;
+    /** Positioning scheme; `relative` makes the column the anchor of an absolutely positioned child. */
+    position?: string;
     style?: CSSProperties;
     className?: string;
 }
@@ -112,10 +162,12 @@ interface DividerProps {
     color?: string;
     thickness?: string;
     ySpacing?: string;
+    /** `flex-shrink` when the divider is a flex child — `0` stops a column flex box from crushing its 1px to nothing. */
+    flexShrink?: string | number;
     className?: string;
     style?: CSSProperties;
 }
-declare const Divider: ({ orientation, color, thickness, ySpacing, className, ...rest }: DividerProps) => react_jsx_runtime.JSX.Element;
+declare const Divider: ({ orientation, color, thickness, ySpacing, flexShrink, className, ...rest }: DividerProps) => react_jsx_runtime.JSX.Element;
 
 interface CollapseProps {
     open: boolean;
@@ -198,8 +250,10 @@ interface DrawerProps {
     leftOutline?: boolean;
     rightOutline?: boolean;
     footer?: ReactNode;
+    /** Stretches the content wrapper to the full height of the scrollable area. Off by default: the wrapper is `fit-content`, so a panel that must pin something to its bottom needs this. */
+    stretchContent?: boolean;
 }
-declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, leftButtonDisabled, rightButtonLabel, rightButtonAction, rightButtonDisabled, isLoading, leftVariant, variant, leftOutline, rightOutline, footer, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
+declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, leftButtonDisabled, rightButtonLabel, rightButtonAction, rightButtonDisabled, isLoading, leftVariant, variant, leftOutline, rightOutline, footer, stretchContent, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
 
 declare const Toaster: () => react.ReactPortal | null;
 
@@ -254,6 +308,8 @@ interface BubbleProps {
     width?: string;
     /** Looping pulse to draw the eye to a critical bubble. Ring colour follows `backgroundColor`, content is centred on the cross axis, and the animation is dropped under `prefers-reduced-motion`. Spacing between children stays the caller's job. */
     pulse?: boolean;
+    /** Shows the hand cursor. Pair it with `onClick` so an actionable bubble (a tag that opens a file) looks actionable. */
+    pointer?: boolean;
     style?: CSSProperties;
     onClick?: () => void;
 }
@@ -295,6 +351,7 @@ interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
     max?: number | string;
     wrap?: string;
     lineClamp?: number;
+    overflowWrap?: string;
     onClick?: (e: MouseEvent) => void;
     style?: CSSProperties;
     className?: string;
@@ -352,10 +409,12 @@ interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
     onClick?: () => void;
     disabled?: boolean;
     noHover?: boolean;
+    /** Square side of an icon-only button (no `label`). Defaults to 36px, the historical hardcoded size. */
+    iconOnlySize?: string;
     style?: CSSProperties;
     className?: string;
 }
-declare const Button: ({ label, children, iconLeft, iconRight, iconColor, variant, outline, size, width, isLoading, fontWeight, onClick, disabled, noHover, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ label, children, iconLeft, iconRight, iconColor, variant, outline, size, width, isLoading, fontWeight, onClick, disabled, noHover, iconOnlySize, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface SelectOption<T> {
     value: T;
@@ -409,6 +468,8 @@ interface InputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | '
     borderRadius?: string;
     gap?: string;
     marginTop?: string;
+    /** Type scale of the field and of its placeholder (the placeholder stays at 12px when unset). */
+    fontSize?: string;
     style?: CSSProperties;
     className?: string;
     isSearch?: boolean;
@@ -916,8 +977,10 @@ interface CardProps {
     backgroundColor?: string;
     padding?: string;
     borderRadius?: string;
+    /** `flex-shrink` when the card is a flex child — `0` keeps its natural height inside a scrolling column instead of being squashed. */
+    flexShrink?: string | number;
 }
-declare const Card: ({ children, onClick, accentColor, backgroundColor, padding, borderRadius, }: CardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: ({ children, onClick, accentColor, backgroundColor, padding, borderRadius, flexShrink, }: CardProps) => react_jsx_runtime.JSX.Element;
 
 interface BannerAction {
     label: string;

package/dist/index.d.ts

@@ -36,6 +36,22 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     borderColor?: string;
     /** Colored halo around the box, for transient states (unsaved, selected, in error). */
     shadowColor?: string;
+    /** Explicit width, wins over `fullWidth`. The box stays in `content-box`, so a border adds to it. */
+    width?: string;
+    /** Explicit min-width, wins over `fullWidth`. Pair with `width` for a column that must not shrink. */
+    minWidth?: string;
+    /** Floor height of a flex child; `minHeight="0"` lets it shrink below its content so an inner area can scroll. */
+    minHeight?: string;
+    /** `flex` shorthand when the box is itself a flex child (e.g. `0 0 250px`, `1 1 auto`). */
+    flex?: string;
+    /** Stacking direction of the box's own children — the box is a `row` by default. */
+    flexDirection?: string;
+    /** Clips or scrolls the content (`hidden`, `auto`…); the box shows overflowing content by default. */
+    overflow?: string;
+    /** Positioning scheme; the box is `relative` by default, so children can already be absolute against it. */
+    position?: string;
+    /** `inset` shorthand, meaningful with `position="absolute"` (e.g. `0` to fill the positioned ancestor). */
+    inset?: string;
     style?: CSSProperties;
 }
 declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -70,6 +86,18 @@ interface RowProps extends HTMLAttributes<HTMLDivElement> {
     width?: string;
     wrap?: string;
     backgroundColor?: string;
+    /** `flex` shorthand when the row is itself a flex child (e.g. `1 1 auto` to absorb the leftover height). */
+    flex?: string;
+    /** Floor height of a flex child; `minHeight="0"` lets it shrink below its content so an inner area can scroll. */
+    minHeight?: string;
+    /** Ceiling height — the row is capped at `100%` of its parent by default; `none` releases that cap. */
+    maxHeight?: string;
+    /** Horizontal overflow, e.g. `auto` for a horizontally scrollable board. */
+    overflowX?: string;
+    /** Vertical overflow, e.g. `auto` to make the row own its scroll region. */
+    overflowY?: string;
+    /** Positioning scheme; `relative` makes the row the anchor of an absolutely positioned child. */
+    position?: string;
     style?: CSSProperties;
     className?: string;
 }
@@ -86,6 +114,28 @@ interface ColProps extends HTMLAttributes<HTMLDivElement> {
     fullHeight?: boolean;
     fullWidth?: boolean;
     flex?: string;
+    /** Explicit width, wins over `fullWidth` and `size` (e.g. a 12px gutter column). */
+    width?: string;
+    /** Explicit min-width. `minWidth="0"` lets a flex column shrink below its content, like a `minmax(0, 1fr)` grid track. */
+    minWidth?: string;
+    /** Explicit height, wins over `fullHeight`. `height="auto"` beats the default `fit-content` so the column can stretch. */
+    height?: string;
+    /** Floor height of a flex child; `minHeight="0"` lets it shrink below its content so an inner area can scroll. */
+    minHeight?: string;
+    /** Cross-axis alignment of the column itself, e.g. `stretch` to match the height of its siblings. */
+    alignSelf?: string;
+    /** Horizontal overflow; the column shows overflowing content by default. */
+    overflowX?: string;
+    /** Vertical overflow; `overflowY="auto"` makes the column own its scroll region. */
+    overflowY?: string;
+    /** `scrollbar-gutter`, e.g. `stable` so the content keeps the same width whether or not a scrollbar shows. */
+    scrollbarGutter?: string;
+    /** Hides the scrollbar chrome while keeping the column scrollable. */
+    hideScrollbar?: boolean;
+    /** `overflow-wrap` — inherited, so `anywhere` also protects the whole subtree from an unbreakable token. */
+    overflowWrap?: string;
+    /** Positioning scheme; `relative` makes the column the anchor of an absolutely positioned child. */
+    position?: string;
     style?: CSSProperties;
     className?: string;
 }
@@ -112,10 +162,12 @@ interface DividerProps {
     color?: string;
     thickness?: string;
     ySpacing?: string;
+    /** `flex-shrink` when the divider is a flex child — `0` stops a column flex box from crushing its 1px to nothing. */
+    flexShrink?: string | number;
     className?: string;
     style?: CSSProperties;
 }
-declare const Divider: ({ orientation, color, thickness, ySpacing, className, ...rest }: DividerProps) => react_jsx_runtime.JSX.Element;
+declare const Divider: ({ orientation, color, thickness, ySpacing, flexShrink, className, ...rest }: DividerProps) => react_jsx_runtime.JSX.Element;
 
 interface CollapseProps {
     open: boolean;
@@ -198,8 +250,10 @@ interface DrawerProps {
     leftOutline?: boolean;
     rightOutline?: boolean;
     footer?: ReactNode;
+    /** Stretches the content wrapper to the full height of the scrollable area. Off by default: the wrapper is `fit-content`, so a panel that must pin something to its bottom needs this. */
+    stretchContent?: boolean;
 }
-declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, leftButtonDisabled, rightButtonLabel, rightButtonAction, rightButtonDisabled, isLoading, leftVariant, variant, leftOutline, rightOutline, footer, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
+declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, leftButtonDisabled, rightButtonLabel, rightButtonAction, rightButtonDisabled, isLoading, leftVariant, variant, leftOutline, rightOutline, footer, stretchContent, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
 
 declare const Toaster: () => react.ReactPortal | null;
 
@@ -254,6 +308,8 @@ interface BubbleProps {
     width?: string;
     /** Looping pulse to draw the eye to a critical bubble. Ring colour follows `backgroundColor`, content is centred on the cross axis, and the animation is dropped under `prefers-reduced-motion`. Spacing between children stays the caller's job. */
     pulse?: boolean;
+    /** Shows the hand cursor. Pair it with `onClick` so an actionable bubble (a tag that opens a file) looks actionable. */
+    pointer?: boolean;
     style?: CSSProperties;
     onClick?: () => void;
 }
@@ -295,6 +351,7 @@ interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
     max?: number | string;
     wrap?: string;
     lineClamp?: number;
+    overflowWrap?: string;
     onClick?: (e: MouseEvent) => void;
     style?: CSSProperties;
     className?: string;
@@ -352,10 +409,12 @@ interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
     onClick?: () => void;
     disabled?: boolean;
     noHover?: boolean;
+    /** Square side of an icon-only button (no `label`). Defaults to 36px, the historical hardcoded size. */
+    iconOnlySize?: string;
     style?: CSSProperties;
     className?: string;
 }
-declare const Button: ({ label, children, iconLeft, iconRight, iconColor, variant, outline, size, width, isLoading, fontWeight, onClick, disabled, noHover, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ label, children, iconLeft, iconRight, iconColor, variant, outline, size, width, isLoading, fontWeight, onClick, disabled, noHover, iconOnlySize, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface SelectOption<T> {
     value: T;
@@ -409,6 +468,8 @@ interface InputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | '
     borderRadius?: string;
     gap?: string;
     marginTop?: string;
+    /** Type scale of the field and of its placeholder (the placeholder stays at 12px when unset). */
+    fontSize?: string;
     style?: CSSProperties;
     className?: string;
     isSearch?: boolean;
@@ -916,8 +977,10 @@ interface CardProps {
     backgroundColor?: string;
     padding?: string;
     borderRadius?: string;
+    /** `flex-shrink` when the card is a flex child — `0` keeps its natural height inside a scrolling column instead of being squashed. */
+    flexShrink?: string | number;
 }
-declare const Card: ({ children, onClick, accentColor, backgroundColor, padding, borderRadius, }: CardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: ({ children, onClick, accentColor, backgroundColor, padding, borderRadius, flexShrink, }: CardProps) => react_jsx_runtime.JSX.Element;
 
 interface BannerAction {
     label: string;

package/dist/index.js

@@ -376,11 +376,23 @@ var shouldForwardProp2 = (prop) => ![
   "border",
   "borderColor",
   "shadowColor",
-  "height"
+  "height",
+  "width",
+  "minWidth",
+  "minHeight",
+  "flex",
+  "flexDirection",
+  "overflow",
+  "position",
+  "inset"
 ].includes(prop);
 var StyledBox = import_styled_components2.default.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
-  position: relative;
+  position: ${(props) => props.position || "relative"};
+  ${(props) => props.inset ? `inset: ${props.inset};` : ""}
   display: flex;
+  ${(props) => props.flexDirection ? `flex-direction: ${props.flexDirection};` : ""}
+  ${(props) => props.flex ? `flex: ${props.flex};` : ""}
+  ${(props) => props.overflow ? `overflow: ${props.overflow};` : ""}
   border: ${(props) => {
   var _a;
   return (_a = props.border) != null ? _a : `1px solid ${colors.grey_300}`;
@@ -396,9 +408,10 @@ var StyledBox = import_styled_components2.default.div.withConfig({ shouldForward
   return base ? `${halo}, ${base}` : halo;
 }};
 
-  width: ${(props) => props.fullWidth ? "100%" : "auto"};
-  min-width: ${(props) => props.fullWidth ? "100%" : "auto"};
+  width: ${(props) => props.width || (props.fullWidth ? "100%" : "auto")};
+  min-width: ${(props) => props.minWidth || (props.fullWidth ? "100%" : "auto")};
   height: ${(props) => props.height || (props.fullHeight ? "100%" : "auto")};
+  ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
   padding: ${(props) => props.padding || "16px"};
   margin: ${(props) => props.margin || "0"};
   color: ${(props) => colors[props.color] || props.color || "inherit"};
@@ -473,15 +486,26 @@ var shouldForwardPropRow = (prop) => ![
   "margin",
   "width",
   "wrap",
-  "backgroundColor"
+  "backgroundColor",
+  "flex",
+  "minHeight",
+  "maxHeight",
+  "overflowX",
+  "overflowY",
+  "position"
 ].includes(prop);
 var StyledRow = import_styled_components4.default.div.withConfig({
   shouldForwardProp: shouldForwardPropRow
 })`
   display: flex;
   flex-wrap: ${(props) => props.wrap || "nowrap"};
+  ${(props) => props.flex ? `flex: ${props.flex};` : ""}
+  ${(props) => props.position ? `position: ${props.position};` : ""}
+  ${(props) => props.overflowX ? `overflow-x: ${props.overflowX};` : ""}
+  ${(props) => props.overflowY ? `overflow-y: ${props.overflowY};` : ""}
   width: ${(props) => props.width || "100%"};
-  max-height: 100%;
+  max-height: ${(props) => props.maxHeight || "100%"};
+  ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
   background-color: ${(props) => props.backgroundColor || "transparent"};
   margin: ${(props) => props.margin || "0"};
   height: ${(props) => props.fullHeight ? `100%` : "auto"};
@@ -512,7 +536,18 @@ var shouldForwardPropCol = (prop) => ![
   "padding",
   "fullHeight",
   "fullWidth",
-  "flex"
+  "flex",
+  "width",
+  "minWidth",
+  "height",
+  "minHeight",
+  "alignSelf",
+  "overflowX",
+  "overflowY",
+  "scrollbarGutter",
+  "hideScrollbar",
+  "overflowWrap",
+  "position"
 ].includes(prop);
 var StyledCol = import_styled_components5.default.div.withConfig({
   shouldForwardProp: shouldForwardPropCol
@@ -520,9 +555,24 @@ var StyledCol = import_styled_components5.default.div.withConfig({
   display: flex;
   flex-direction: column;
   overflow: visible;
+  overflow-x: ${(props) => props.overflowX || "visible"};
+  overflow-y: ${(props) => props.overflowY || "visible"};
+  ${(props) => props.scrollbarGutter ? `scrollbar-gutter: ${props.scrollbarGutter};` : ""}
+  ${(props) => props.hideScrollbar ? `
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  ` : ""}
+  ${(props) => props.overflowWrap ? `overflow-wrap: ${props.overflowWrap};` : ""}
+  ${(props) => props.position ? `position: ${props.position};` : ""}
   max-height: 100%;
-  height: ${(props) => props.fullHeight ? "100%" : "fit-content"};
-  width: ${(props) => props.fullWidth ? "100%" : props.size ? `${props.size / 12 * 100}%` : "fit-content"};
+  height: ${(props) => props.height || (props.fullHeight ? "100%" : "fit-content")};
+  ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
+  width: ${(props) => props.width || (props.fullWidth ? "100%" : props.size ? `${props.size / 12 * 100}%` : "fit-content")};
+  ${(props) => props.minWidth ? `min-width: ${props.minWidth};` : ""}
+  ${(props) => props.alignSelf ? `align-self: ${props.alignSelf};` : ""}
   flex: ${(props) => {
   var _a;
   return (_a = props.flex) != null ? _a : props.size ? `1 1 ${props.size / 12 * 100}%` : "auto";
@@ -571,6 +621,7 @@ var Text = (props) => {
     max,
     wrap,
     lineClamp,
+    overflowWrap,
     onClick
   } = _a, rest = __objRest(_a, [
     "size",
@@ -589,6 +640,7 @@ var Text = (props) => {
     "max",
     "wrap",
     "lineClamp",
+    "overflowWrap",
     "onClick"
   ]);
   const textStyle = __spreadValues({
@@ -606,7 +658,8 @@ var Text = (props) => {
     display: lineClamp ? "-webkit-box" : max ? "inline-block" : "",
     overflow: "hidden",
     textOverflow: max ? "ellipsis" : "",
-    whiteSpace: wrap || ""
+    whiteSpace: wrap || "",
+    overflowWrap: overflowWrap || ""
   }, lineClamp ? {
     WebkitLineClamp: lineClamp,
     WebkitBoxOrient: "vertical",
@@ -707,6 +760,7 @@ var StyledDivider = import_styled_components7.default.div`
     height: ${$thickness || "1px"};
     width: 100%;
   `}
+  ${({ $flexShrink }) => $flexShrink !== void 0 ? `flex-shrink: ${$flexShrink};` : ""}
   margin-top: ${({ $ySpacing }) => $ySpacing || "0px"};
   margin-bottom: ${({ $ySpacing }) => $ySpacing || "0px"};
   border: none;
@@ -717,12 +771,14 @@ var Divider = (_a) => {
     color = "#DCDCDC",
     thickness = "1px",
     ySpacing = "0px",
+    flexShrink,
     className = ""
   } = _b, rest = __objRest(_b, [
     "orientation",
     "color",
     "thickness",
     "ySpacing",
+    "flexShrink",
     "className"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -732,6 +788,7 @@ var Divider = (_a) => {
       $color: resolveColor(color),
       $thickness: thickness,
       $ySpacing: ySpacing,
+      $flexShrink: flexShrink,
       className,
       role: "separator"
     }, rest)
@@ -896,6 +953,7 @@ var shouldForwardProp4 = (p) => ![
   "isLoading",
   "sizeConfig",
   "iconOnly",
+  "iconOnlySize",
   "noHover"
 ].includes(p);
 var StyledButton = import_styled_components9.default.button.withConfig({
@@ -984,8 +1042,8 @@ var StyledButton = import_styled_components9.default.button.withConfig({
   `}
 
   ${(p) => p.iconOnly && `
-      width: 36px !important;
-      height: 36px !important;
+      width: ${p.iconOnlySize || "36px"} !important;
+      height: ${p.iconOnlySize || "36px"} !important;
       padding: 0 !important;
       border-radius: 6px;
     `}
@@ -1022,7 +1080,8 @@ var Button = (_a) => {
     fontWeight,
     onClick,
     disabled,
-    noHover = false
+    noHover = false,
+    iconOnlySize
   } = _b, rest = __objRest(_b, [
     "label",
     "children",
@@ -1037,7 +1096,8 @@ var Button = (_a) => {
     "fontWeight",
     "onClick",
     "disabled",
-    "noHover"
+    "noHover",
+    "iconOnlySize"
   ]);
   const ref = (0, import_react4.useRef)(null);
   const sizeConfig = defaultSizes[size];
@@ -1064,7 +1124,8 @@ var Button = (_a) => {
       sizeConfig,
       disabled: disabled || isLoading,
       "aria-busy": isLoading ? "true" : void 0,
-      iconOnly: Boolean(iconLeft || iconRight) && !label
+      iconOnly: Boolean(iconLeft || iconRight) && !label,
+      iconOnlySize
     }, rest), {
       children: [
         isLoading && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loader, {}),
@@ -1259,7 +1320,8 @@ var shouldForwardProp6 = (prop) => ![
   "borderRadius",
   "boxShadow",
   "width",
-  "pulse"
+  "pulse",
+  "pointer"
 ].includes(prop);
 var StyledBubble = import_styled_components11.default.span.withConfig({
   shouldForwardProp: shouldForwardProp6
@@ -1272,6 +1334,7 @@ var StyledBubble = import_styled_components11.default.span.withConfig({
   margin: ${(props) => props.margin || "0"};
   padding: ${(props) => props.padding || paddingSizes[props.size] || "5px 10px"};
   font-weight: 600;
+  ${(props) => props.pointer ? "cursor: pointer;" : ""}
   width: ${(props) => props.width ? props.width : "fit-content"};
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1602,7 +1665,8 @@ var Drawer = ({
   variant = "blue_700",
   leftOutline = true,
   rightOutline = false,
-  footer
+  footer,
+  stretchContent = false
 }) => {
   const [isRendered, setIsRendered] = (0, import_react7.useState)(showDrawer);
   const [isVisible, setIsVisible] = (0, import_react7.useState)(false);
@@ -1642,7 +1706,7 @@ var Drawer = ({
           )
         ] }),
         title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Divider, { orientation: "horizontal", thickness: "1px" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ScrollableContent, { children: children && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Col, { fullWidth: true, children }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ScrollableContent, { children: children && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Col, { fullWidth: true, fullHeight: stretchContent, children }) }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Divider, { orientation: "horizontal", thickness: "1px" }),
         footer,
         (leftButtonLabel || rightButtonLabel) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Row, { gap: "12", fullWidth: true, children: [
@@ -2512,7 +2576,8 @@ var shouldForwardProp8 = (prop) => ![
   "borderRadius",
   "gap",
   "marginTop",
-  "asTextArea"
+  "asTextArea",
+  "fontSize"
 ].includes(prop);
 var StyledContainer2 = import_styled_components20.default.div.withConfig({
   shouldForwardProp: shouldForwardProp8
@@ -2530,6 +2595,7 @@ var StyledInput = import_styled_components20.default.input.withConfig({
   max-width: ${(props) => props.width || "100%"};
   width: ${(props) => props.width || "100%"};
   height: 36px;
+  ${(props) => props.fontSize ? `font-size: ${props.fontSize};` : ""}
   padding: ${(props) => props.padding || "8px"};
   border-radius: ${(props) => props.borderRadius || "5px"};
   background-color: ${(props) => props.disabled ? colors.grey_200 : props.transparent ? "transparent" : colors.white};
@@ -2546,7 +2612,7 @@ var StyledInput = import_styled_components20.default.input.withConfig({
 
   &::placeholder {
     font-family: 'Open Sans', sans-serif;
-    font-size: 12px;
+    font-size: ${(props) => props.fontSize || "12px"};
     font-weight: 400;
     color: ${colors.grey_500};
   }
@@ -2560,6 +2626,7 @@ var StyledTextarea = import_styled_components20.default.textarea.withConfig({
 })`
   max-width: ${(props) => props.width || "100%"};
   width: ${(props) => props.width || "100%"};
+  ${(props) => props.fontSize ? `font-size: ${props.fontSize};` : ""}
   padding: ${(props) => props.padding || "8px"};
   border-radius: ${(props) => props.borderRadius || "5px"};
   background-color: ${(props) => props.disabled ? colors.grey_200 : props.transparent ? "transparent" : colors.white};
@@ -2576,7 +2643,7 @@ var StyledTextarea = import_styled_components20.default.textarea.withConfig({
 
   &::placeholder {
     font-family: 'Open Sans', sans-serif;
-    font-size: 12px;
+    font-size: ${(props) => props.fontSize || "12px"};
     font-weight: 400;
     color: ${colors.grey_500};
   }
@@ -5224,6 +5291,7 @@ var import_jsx_runtime53 = require("react/jsx-runtime");
 var StyledCard = import_styled_components44.default.div`
   overflow: hidden;
   transition: box-shadow 0.15s ease;
+  ${(p) => p.$flexShrink !== void 0 ? `flex-shrink: ${p.$flexShrink};` : ""}
   background-color: ${(p) => p.$backgroundColor};
   border-radius: ${(p) => p.$borderRadius};
   ${(p) => p.$accentColor ? `border-left: 2px solid ${p.$accentColor};` : ""}
@@ -5240,7 +5308,8 @@ var Card2 = ({
   accentColor,
   backgroundColor = "#F8FAFC",
   padding = "10px 12px",
-  borderRadius = "8px"
+  borderRadius = "8px",
+  flexShrink
 }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
   StyledCard,
   {
@@ -5248,6 +5317,7 @@ var Card2 = ({
     $backgroundColor: backgroundColor,
     $borderRadius: borderRadius,
     $accentColor: accentColor,
+    $flexShrink: flexShrink,
     onClick,
     children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StyledCardInner, { $padding: padding, children })
   }

package/dist/index.mjs

@@ -237,11 +237,23 @@ var shouldForwardProp2 = (prop) => ![
   "border",
   "borderColor",
   "shadowColor",
-  "height"
+  "height",
+  "width",
+  "minWidth",
+  "minHeight",
+  "flex",
+  "flexDirection",
+  "overflow",
+  "position",
+  "inset"
 ].includes(prop);
 var StyledBox = styled2.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
-  position: relative;
+  position: ${(props) => props.position || "relative"};
+  ${(props) => props.inset ? `inset: ${props.inset};` : ""}
   display: flex;
+  ${(props) => props.flexDirection ? `flex-direction: ${props.flexDirection};` : ""}
+  ${(props) => props.flex ? `flex: ${props.flex};` : ""}
+  ${(props) => props.overflow ? `overflow: ${props.overflow};` : ""}
   border: ${(props) => {
   var _a;
   return (_a = props.border) != null ? _a : `1px solid ${colors.grey_300}`;
@@ -257,9 +269,10 @@ var StyledBox = styled2.div.withConfig({ shouldForwardProp: shouldForwardProp2 }
   return base ? `${halo}, ${base}` : halo;
 }};
 
-  width: ${(props) => props.fullWidth ? "100%" : "auto"};
-  min-width: ${(props) => props.fullWidth ? "100%" : "auto"};
+  width: ${(props) => props.width || (props.fullWidth ? "100%" : "auto")};
+  min-width: ${(props) => props.minWidth || (props.fullWidth ? "100%" : "auto")};
   height: ${(props) => props.height || (props.fullHeight ? "100%" : "auto")};
+  ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
   padding: ${(props) => props.padding || "16px"};
   margin: ${(props) => props.margin || "0"};
   color: ${(props) => colors[props.color] || props.color || "inherit"};
@@ -334,15 +347,26 @@ var shouldForwardPropRow = (prop) => ![
   "margin",
   "width",
   "wrap",
-  "backgroundColor"
+  "backgroundColor",
+  "flex",
+  "minHeight",
+  "maxHeight",
+  "overflowX",
+  "overflowY",
+  "position"
 ].includes(prop);
 var StyledRow = styled4.div.withConfig({
   shouldForwardProp: shouldForwardPropRow
 })`
   display: flex;
   flex-wrap: ${(props) => props.wrap || "nowrap"};
+  ${(props) => props.flex ? `flex: ${props.flex};` : ""}
+  ${(props) => props.position ? `position: ${props.position};` : ""}
+  ${(props) => props.overflowX ? `overflow-x: ${props.overflowX};` : ""}
+  ${(props) => props.overflowY ? `overflow-y: ${props.overflowY};` : ""}
   width: ${(props) => props.width || "100%"};
-  max-height: 100%;
+  max-height: ${(props) => props.maxHeight || "100%"};
+  ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
   background-color: ${(props) => props.backgroundColor || "transparent"};
   margin: ${(props) => props.margin || "0"};
   height: ${(props) => props.fullHeight ? `100%` : "auto"};
@@ -373,7 +397,18 @@ var shouldForwardPropCol = (prop) => ![
   "padding",
   "fullHeight",
   "fullWidth",
-  "flex"
+  "flex",
+  "width",
+  "minWidth",
+  "height",
+  "minHeight",
+  "alignSelf",
+  "overflowX",
+  "overflowY",
+  "scrollbarGutter",
+  "hideScrollbar",
+  "overflowWrap",
+  "position"
 ].includes(prop);
 var StyledCol = styled5.div.withConfig({
   shouldForwardProp: shouldForwardPropCol
@@ -381,9 +416,24 @@ var StyledCol = styled5.div.withConfig({
   display: flex;
   flex-direction: column;
   overflow: visible;
+  overflow-x: ${(props) => props.overflowX || "visible"};
+  overflow-y: ${(props) => props.overflowY || "visible"};
+  ${(props) => props.scrollbarGutter ? `scrollbar-gutter: ${props.scrollbarGutter};` : ""}
+  ${(props) => props.hideScrollbar ? `
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  ` : ""}
+  ${(props) => props.overflowWrap ? `overflow-wrap: ${props.overflowWrap};` : ""}
+  ${(props) => props.position ? `position: ${props.position};` : ""}
   max-height: 100%;
-  height: ${(props) => props.fullHeight ? "100%" : "fit-content"};
-  width: ${(props) => props.fullWidth ? "100%" : props.size ? `${props.size / 12 * 100}%` : "fit-content"};
+  height: ${(props) => props.height || (props.fullHeight ? "100%" : "fit-content")};
+  ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
+  width: ${(props) => props.width || (props.fullWidth ? "100%" : props.size ? `${props.size / 12 * 100}%` : "fit-content")};
+  ${(props) => props.minWidth ? `min-width: ${props.minWidth};` : ""}
+  ${(props) => props.alignSelf ? `align-self: ${props.alignSelf};` : ""}
   flex: ${(props) => {
   var _a;
   return (_a = props.flex) != null ? _a : props.size ? `1 1 ${props.size / 12 * 100}%` : "auto";
@@ -432,6 +482,7 @@ var Text = (props) => {
     max,
     wrap,
     lineClamp,
+    overflowWrap,
     onClick
   } = _a, rest = __objRest(_a, [
     "size",
@@ -450,6 +501,7 @@ var Text = (props) => {
     "max",
     "wrap",
     "lineClamp",
+    "overflowWrap",
     "onClick"
   ]);
   const textStyle = __spreadValues({
@@ -467,7 +519,8 @@ var Text = (props) => {
     display: lineClamp ? "-webkit-box" : max ? "inline-block" : "",
     overflow: "hidden",
     textOverflow: max ? "ellipsis" : "",
-    whiteSpace: wrap || ""
+    whiteSpace: wrap || "",
+    overflowWrap: overflowWrap || ""
   }, lineClamp ? {
     WebkitLineClamp: lineClamp,
     WebkitBoxOrient: "vertical",
@@ -568,6 +621,7 @@ var StyledDivider = styled7.div`
     height: ${$thickness || "1px"};
     width: 100%;
   `}
+  ${({ $flexShrink }) => $flexShrink !== void 0 ? `flex-shrink: ${$flexShrink};` : ""}
   margin-top: ${({ $ySpacing }) => $ySpacing || "0px"};
   margin-bottom: ${({ $ySpacing }) => $ySpacing || "0px"};
   border: none;
@@ -578,12 +632,14 @@ var Divider = (_a) => {
     color = "#DCDCDC",
     thickness = "1px",
     ySpacing = "0px",
+    flexShrink,
     className = ""
   } = _b, rest = __objRest(_b, [
     "orientation",
     "color",
     "thickness",
     "ySpacing",
+    "flexShrink",
     "className"
   ]);
   return /* @__PURE__ */ jsx8(
@@ -593,6 +649,7 @@ var Divider = (_a) => {
       $color: resolveColor(color),
       $thickness: thickness,
       $ySpacing: ySpacing,
+      $flexShrink: flexShrink,
       className,
       role: "separator"
     }, rest)
@@ -757,6 +814,7 @@ var shouldForwardProp4 = (p) => ![
   "isLoading",
   "sizeConfig",
   "iconOnly",
+  "iconOnlySize",
   "noHover"
 ].includes(p);
 var StyledButton = styled9.button.withConfig({
@@ -845,8 +903,8 @@ var StyledButton = styled9.button.withConfig({
   `}
 
   ${(p) => p.iconOnly && `
-      width: 36px !important;
-      height: 36px !important;
+      width: ${p.iconOnlySize || "36px"} !important;
+      height: ${p.iconOnlySize || "36px"} !important;
       padding: 0 !important;
       border-radius: 6px;
     `}
@@ -883,7 +941,8 @@ var Button = (_a) => {
     fontWeight,
     onClick,
     disabled,
-    noHover = false
+    noHover = false,
+    iconOnlySize
   } = _b, rest = __objRest(_b, [
     "label",
     "children",
@@ -898,7 +957,8 @@ var Button = (_a) => {
     "fontWeight",
     "onClick",
     "disabled",
-    "noHover"
+    "noHover",
+    "iconOnlySize"
   ]);
   const ref = useRef2(null);
   const sizeConfig = defaultSizes[size];
@@ -925,7 +985,8 @@ var Button = (_a) => {
       sizeConfig,
       disabled: disabled || isLoading,
       "aria-busy": isLoading ? "true" : void 0,
-      iconOnly: Boolean(iconLeft || iconRight) && !label
+      iconOnly: Boolean(iconLeft || iconRight) && !label,
+      iconOnlySize
     }, rest), {
       children: [
         isLoading && /* @__PURE__ */ jsx11(Loader, {}),
@@ -1120,7 +1181,8 @@ var shouldForwardProp6 = (prop) => ![
   "borderRadius",
   "boxShadow",
   "width",
-  "pulse"
+  "pulse",
+  "pointer"
 ].includes(prop);
 var StyledBubble = styled11.span.withConfig({
   shouldForwardProp: shouldForwardProp6
@@ -1133,6 +1195,7 @@ var StyledBubble = styled11.span.withConfig({
   margin: ${(props) => props.margin || "0"};
   padding: ${(props) => props.padding || paddingSizes[props.size] || "5px 10px"};
   font-weight: 600;
+  ${(props) => props.pointer ? "cursor: pointer;" : ""}
   width: ${(props) => props.width ? props.width : "fit-content"};
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1463,7 +1526,8 @@ var Drawer = ({
   variant = "blue_700",
   leftOutline = true,
   rightOutline = false,
-  footer
+  footer,
+  stretchContent = false
 }) => {
   const [isRendered, setIsRendered] = useState3(showDrawer);
   const [isVisible, setIsVisible] = useState3(false);
@@ -1503,7 +1567,7 @@ var Drawer = ({
           )
         ] }),
         title && /* @__PURE__ */ jsx16(Divider, { orientation: "horizontal", thickness: "1px" }),
-        /* @__PURE__ */ jsx16(ScrollableContent, { children: children && /* @__PURE__ */ jsx16(Col, { fullWidth: true, children }) }),
+        /* @__PURE__ */ jsx16(ScrollableContent, { children: children && /* @__PURE__ */ jsx16(Col, { fullWidth: true, fullHeight: stretchContent, children }) }),
         /* @__PURE__ */ jsx16(Divider, { orientation: "horizontal", thickness: "1px" }),
         footer,
         (leftButtonLabel || rightButtonLabel) && /* @__PURE__ */ jsxs6(Row, { gap: "12", fullWidth: true, children: [
@@ -2379,7 +2443,8 @@ var shouldForwardProp8 = (prop) => ![
   "borderRadius",
   "gap",
   "marginTop",
-  "asTextArea"
+  "asTextArea",
+  "fontSize"
 ].includes(prop);
 var StyledContainer2 = styled20.div.withConfig({
   shouldForwardProp: shouldForwardProp8
@@ -2397,6 +2462,7 @@ var StyledInput = styled20.input.withConfig({
   max-width: ${(props) => props.width || "100%"};
   width: ${(props) => props.width || "100%"};
   height: 36px;
+  ${(props) => props.fontSize ? `font-size: ${props.fontSize};` : ""}
   padding: ${(props) => props.padding || "8px"};
   border-radius: ${(props) => props.borderRadius || "5px"};
   background-color: ${(props) => props.disabled ? colors.grey_200 : props.transparent ? "transparent" : colors.white};
@@ -2413,7 +2479,7 @@ var StyledInput = styled20.input.withConfig({
 
   &::placeholder {
     font-family: 'Open Sans', sans-serif;
-    font-size: 12px;
+    font-size: ${(props) => props.fontSize || "12px"};
     font-weight: 400;
     color: ${colors.grey_500};
   }
@@ -2427,6 +2493,7 @@ var StyledTextarea = styled20.textarea.withConfig({
 })`
   max-width: ${(props) => props.width || "100%"};
   width: ${(props) => props.width || "100%"};
+  ${(props) => props.fontSize ? `font-size: ${props.fontSize};` : ""}
   padding: ${(props) => props.padding || "8px"};
   border-radius: ${(props) => props.borderRadius || "5px"};
   background-color: ${(props) => props.disabled ? colors.grey_200 : props.transparent ? "transparent" : colors.white};
@@ -2443,7 +2510,7 @@ var StyledTextarea = styled20.textarea.withConfig({
 
   &::placeholder {
     font-family: 'Open Sans', sans-serif;
-    font-size: 12px;
+    font-size: ${(props) => props.fontSize || "12px"};
     font-weight: 400;
     color: ${colors.grey_500};
   }
@@ -5105,6 +5172,7 @@ import { jsx as jsx53 } from "react/jsx-runtime";
 var StyledCard = styled44.div`
   overflow: hidden;
   transition: box-shadow 0.15s ease;
+  ${(p) => p.$flexShrink !== void 0 ? `flex-shrink: ${p.$flexShrink};` : ""}
   background-color: ${(p) => p.$backgroundColor};
   border-radius: ${(p) => p.$borderRadius};
   ${(p) => p.$accentColor ? `border-left: 2px solid ${p.$accentColor};` : ""}
@@ -5121,7 +5189,8 @@ var Card2 = ({
   accentColor,
   backgroundColor = "#F8FAFC",
   padding = "10px 12px",
-  borderRadius = "8px"
+  borderRadius = "8px",
+  flexShrink
 }) => /* @__PURE__ */ jsx53(
   StyledCard,
   {
@@ -5129,6 +5198,7 @@ var Card2 = ({
     $backgroundColor: backgroundColor,
     $borderRadius: borderRadius,
     $accentColor: accentColor,
+    $flexShrink: flexShrink,
     onClick,
     children: /* @__PURE__ */ jsx53(StyledCardInner, { $padding: padding, children })
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.285",
+  "version": "1.0.286",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",