design-zystem 1.0.288 → 1.0.289

package/dist/index.d.mts

@@ -98,6 +98,8 @@ interface RowProps extends HTMLAttributes<HTMLDivElement> {
     overflowY?: string;
     /** Positioning scheme; `relative` makes the row the anchor of an absolutely positioned child. */
     position?: string;
+    /** Explicit min-width. `minWidth="0"` lets a flex row shrink below its content size. */
+    minWidth?: string;
     style?: CSSProperties;
     className?: string;
 }
@@ -122,6 +124,8 @@ interface ColProps extends HTMLAttributes<HTMLDivElement> {
     height?: string;
     /** Floor height of a flex child; `minHeight="0"` lets it shrink below its content so an inner area can scroll. */
     minHeight?: string;
+    /** `flex-shrink` factor. `flexShrink="0"` prevents the column from shrinking below its explicit `width`. */
+    flexShrink?: 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. */
@@ -589,8 +593,12 @@ declare const colors: {
     readonly badge_blue_bg: "#DBE9FE";
     readonly badge_green_text: "#17803D";
     readonly badge_green_bg: "#DCFCE7";
+    readonly badge_orange_text: "#C2410C";
+    readonly badge_orange_bg: "#FFF7ED";
     readonly badge_purple_text: "#7230DB";
     readonly badge_purple_bg: "#EDE9FE";
+    readonly badge_red_text: "#F44649";
+    readonly badge_red_bg: "#FCDDDE";
     readonly brown_50: "#EFEBE9";
     readonly brown_100: "#D7CCC8";
     readonly brown_300: "#A1887F";

package/dist/index.d.ts

@@ -98,6 +98,8 @@ interface RowProps extends HTMLAttributes<HTMLDivElement> {
     overflowY?: string;
     /** Positioning scheme; `relative` makes the row the anchor of an absolutely positioned child. */
     position?: string;
+    /** Explicit min-width. `minWidth="0"` lets a flex row shrink below its content size. */
+    minWidth?: string;
     style?: CSSProperties;
     className?: string;
 }
@@ -122,6 +124,8 @@ interface ColProps extends HTMLAttributes<HTMLDivElement> {
     height?: string;
     /** Floor height of a flex child; `minHeight="0"` lets it shrink below its content so an inner area can scroll. */
     minHeight?: string;
+    /** `flex-shrink` factor. `flexShrink="0"` prevents the column from shrinking below its explicit `width`. */
+    flexShrink?: 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. */
@@ -589,8 +593,12 @@ declare const colors: {
     readonly badge_blue_bg: "#DBE9FE";
     readonly badge_green_text: "#17803D";
     readonly badge_green_bg: "#DCFCE7";
+    readonly badge_orange_text: "#C2410C";
+    readonly badge_orange_bg: "#FFF7ED";
     readonly badge_purple_text: "#7230DB";
     readonly badge_purple_bg: "#EDE9FE";
+    readonly badge_red_text: "#F44649";
+    readonly badge_red_bg: "#FCDDDE";
     readonly brown_50: "#EFEBE9";
     readonly brown_100: "#D7CCC8";
     readonly brown_300: "#A1887F";

package/dist/index.js

@@ -336,8 +336,12 @@ var colors = {
   badge_blue_bg: "#DBE9FE",
   badge_green_text: "#17803D",
   badge_green_bg: "#DCFCE7",
+  badge_orange_text: "#C2410C",
+  badge_orange_bg: "#FFF7ED",
   badge_purple_text: "#7230DB",
   badge_purple_bg: "#EDE9FE",
+  badge_red_text: "#F44649",
+  badge_red_bg: "#FCDDDE",
   // BROWN
   brown_50: "#EFEBE9",
   brown_100: "#D7CCC8",
@@ -485,6 +489,7 @@ var shouldForwardPropRow = (prop) => ![
   "fullwidth",
   "margin",
   "width",
+  "minWidth",
   "wrap",
   "backgroundColor",
   "flex",
@@ -504,6 +509,7 @@ var StyledRow = import_styled_components4.default.div.withConfig({
   ${(props) => props.overflowX ? `overflow-x: ${props.overflowX};` : ""}
   ${(props) => props.overflowY ? `overflow-y: ${props.overflowY};` : ""}
   width: ${(props) => props.width || "100%"};
+  ${(props) => props.minWidth ? `min-width: ${props.minWidth};` : ""}
   max-height: ${(props) => props.maxHeight || "100%"};
   ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -541,6 +547,7 @@ var shouldForwardPropCol = (prop) => ![
   "minWidth",
   "height",
   "minHeight",
+  "flexShrink",
   "alignSelf",
   "overflowX",
   "overflowY",
@@ -570,6 +577,7 @@ var StyledCol = import_styled_components5.default.div.withConfig({
   max-height: 100%;
   height: ${(props) => props.height || (props.fullHeight ? "100%" : "fit-content")};
   ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
+  ${(props) => props.flexShrink !== void 0 ? `flex-shrink: ${props.flexShrink};` : ""}
   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};` : ""}

package/dist/index.mjs

@@ -197,8 +197,12 @@ var colors = {
   badge_blue_bg: "#DBE9FE",
   badge_green_text: "#17803D",
   badge_green_bg: "#DCFCE7",
+  badge_orange_text: "#C2410C",
+  badge_orange_bg: "#FFF7ED",
   badge_purple_text: "#7230DB",
   badge_purple_bg: "#EDE9FE",
+  badge_red_text: "#F44649",
+  badge_red_bg: "#FCDDDE",
   // BROWN
   brown_50: "#EFEBE9",
   brown_100: "#D7CCC8",
@@ -346,6 +350,7 @@ var shouldForwardPropRow = (prop) => ![
   "fullwidth",
   "margin",
   "width",
+  "minWidth",
   "wrap",
   "backgroundColor",
   "flex",
@@ -365,6 +370,7 @@ var StyledRow = styled4.div.withConfig({
   ${(props) => props.overflowX ? `overflow-x: ${props.overflowX};` : ""}
   ${(props) => props.overflowY ? `overflow-y: ${props.overflowY};` : ""}
   width: ${(props) => props.width || "100%"};
+  ${(props) => props.minWidth ? `min-width: ${props.minWidth};` : ""}
   max-height: ${(props) => props.maxHeight || "100%"};
   ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -402,6 +408,7 @@ var shouldForwardPropCol = (prop) => ![
   "minWidth",
   "height",
   "minHeight",
+  "flexShrink",
   "alignSelf",
   "overflowX",
   "overflowY",
@@ -431,6 +438,7 @@ var StyledCol = styled5.div.withConfig({
   max-height: 100%;
   height: ${(props) => props.height || (props.fullHeight ? "100%" : "fit-content")};
   ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
+  ${(props) => props.flexShrink !== void 0 ? `flex-shrink: ${props.flexShrink};` : ""}
   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};` : ""}

package/package.json

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