@dynatrace/strato-components 0.84.31 → 0.84.51

package/styles/colorUtils.css

@@ -0,0 +1,80 @@
+.colorUtils_colorUtilsCSS_color_critical__17bwkb04 {
+  --vars_text__17bwkb00: var(--dt-colors-text-critical-default, #b80031);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-critical-default, #b80031);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-critical-default, #f1cdcf);
+}
+.colorUtils_colorUtilsCSS_color_neutral__17bwkb05 {
+  --vars_text__17bwkb00: var(--dt-colors-text-neutral-default, #2b2a58);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-neutral-default, #2b2a58);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-neutral-default, #d2d3e1);
+}
+.colorUtils_colorUtilsCSS_color_primary__17bwkb06 {
+  --vars_text__17bwkb00: var(--dt-colors-text-primary-default, #454cc9);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-primary-default, #454cc9);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-primary-default, #ccd3f3);
+}
+.colorUtils_colorUtilsCSS_color_success__17bwkb07 {
+  --vars_text__17bwkb00: var(--dt-colors-text-success-default, #2c6360);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-success-default, #2c6360);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-success-default, #cad6d7);
+}
+.colorUtils_colorUtilsCSS_color_warning__17bwkb08 {
+  --vars_text__17bwkb00: var(--dt-colors-text-warning-default, #805100);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-warning-default, #805100);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-warning-default, #f4e5d5);
+}
+.colorUtils_colorUtilsCSS_color_onAccent__17bwkb09 {
+  --vars_text__17bwkb00: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+}
+.colorUtils_colorUtilsCSS_compound_0__17bwkb0e {
+  --vars_text__17bwkb00: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-primary-accent, #454cc9);
+}
+.colorUtils_colorUtilsCSS_compound_1__17bwkb0f {
+  --vars_text__17bwkb00: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-success-accent, #2c6360);
+}
+.colorUtils_colorUtilsCSS_compound_2__17bwkb0g {
+  --vars_text__17bwkb00: var(--dt-colors-text-warning-on-accent-default, #272025);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-warning-on-accent-default, #272025);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-warning-accent, #805100);
+}
+.colorUtils_colorUtilsCSS_compound_3__17bwkb0h {
+  --vars_text__17bwkb00: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-critical-accent, #b80031);
+}
+.colorUtils_colorUtilsCSS_compound_4__17bwkb0i {
+  --vars_text__17bwkb00: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-neutral-accent, #545587);
+}
+.colorUtils_colorUtilsCSS_compound_5__17bwkb0j {
+  --vars_text__17bwkb00: var(--dt-colors-text-primary-disabled, #54558780);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-primary-disabled, #54558780);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-primary-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_6__17bwkb0k {
+  --vars_text__17bwkb00: var(--dt-colors-text-success-disabled, #54558780);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-success-disabled, #54558780);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-success-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_7__17bwkb0l {
+  --vars_text__17bwkb00: var(--dt-colors-text-warning-disabled, #54558780);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-warning-disabled, #54558780);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-warning-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_8__17bwkb0m {
+  --vars_text__17bwkb00: var(--dt-colors-text-critical-disabled, #54558780);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-critical-disabled, #54558780);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-critical-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_9__17bwkb0n {
+  --vars_text__17bwkb00: var(--dt-colors-text-neutral-disabled, #54558780);
+  --vars_icon__17bwkb01: var(--dt-colors-icon-neutral-disabled, #54558780);
+  --vars_borderColor__17bwkb02: var(--dt-colors-border-neutral-disabled, #d2d3e180);
+}

package/styles/colorUtils.sty.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Defines the vars that decide the color
+ * @internal
+ */
+declare const vars: {
+    text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    icon: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+/**
+ * Defines the style for text, icons and border colors
+ * @internal
+ */
+export declare const colorUtilsCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        critical: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        neutral: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        success: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        onAccent: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+    };
+    variant: {
+        default: {};
+        accent: {};
+    };
+    disabled: {
+        true: {};
+        false: {};
+    };
+}>;
+export { vars as colorUtilsVars };

package/styles/colorUtils.sty.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var colorUtils_css_exports = {};
+__export(colorUtils_css_exports, {
+  colorUtilsCSS: () => colorUtilsCSS,
+  colorUtilsVars: () => colorUtilsVars
+});
+module.exports = __toCommonJS(colorUtils_css_exports);
+var import_colorUtils_css_ts_vanilla = require("./colorUtils.css");
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "colorUtils__17bwkb03", variantClassNames: { color: { critical: "colorUtils_colorUtilsCSS_color_critical__17bwkb04", neutral: "colorUtils_colorUtilsCSS_color_neutral__17bwkb05", primary: "colorUtils_colorUtilsCSS_color_primary__17bwkb06", success: "colorUtils_colorUtilsCSS_color_success__17bwkb07", warning: "colorUtils_colorUtilsCSS_color_warning__17bwkb08", onAccent: "colorUtils_colorUtilsCSS_color_onAccent__17bwkb09" }, variant: { "default": "colorUtils_colorUtilsCSS_variant_default__17bwkb0a", accent: "colorUtils_colorUtilsCSS_variant_accent__17bwkb0b" }, disabled: { true: "colorUtils_colorUtilsCSS_disabled_true__17bwkb0c", false: "colorUtils_colorUtilsCSS_disabled_false__17bwkb0d" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_0__17bwkb0e"], [{ color: "success", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_1__17bwkb0f"], [{ color: "warning", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_2__17bwkb0g"], [{ color: "critical", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_3__17bwkb0h"], [{ color: "neutral", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_4__17bwkb0i"], [{ color: "primary", disabled: true }, "colorUtils_colorUtilsCSS_compound_5__17bwkb0j"], [{ color: "success", disabled: true }, "colorUtils_colorUtilsCSS_compound_6__17bwkb0k"], [{ color: "warning", disabled: true }, "colorUtils_colorUtilsCSS_compound_7__17bwkb0l"], [{ color: "critical", disabled: true }, "colorUtils_colorUtilsCSS_compound_8__17bwkb0m"], [{ color: "neutral", disabled: true }, "colorUtils_colorUtilsCSS_compound_9__17bwkb0n"]] });
+var colorUtilsVars = { text: "var(--vars_text__17bwkb00)", icon: "var(--vars_icon__17bwkb01)", borderColor: "var(--vars_borderColor__17bwkb02)" };

package/styles/container.css

@@ -0,0 +1,64 @@
+.container_containerColorsCSS_color_critical__6levse4 {
+  --vars_text__6levse0: var(--dt-colors-text-critical-default, #b80031);
+  --vars_background__6levse1: var(--dt-colors-background-container-critical-default, #f3eaed);
+  --vars_borderColor__6levse2: var(--dt-colors-border-critical-default, #f1cdcf);
+}
+.container_containerColorsCSS_color_neutral__6levse5 {
+  --vars_text__6levse0: var(--dt-colors-text-neutral-default, #2b2a58);
+  --vars_background__6levse1: var(--dt-colors-background-container-neutral-default, #ebebf2);
+  --vars_borderColor__6levse2: var(--dt-colors-border-neutral-default, #d2d3e1);
+}
+.container_containerColorsCSS_color_primary__6levse6 {
+  --vars_text__6levse0: var(--dt-colors-text-primary-default, #454cc9);
+  --vars_background__6levse1: var(--dt-colors-background-container-primary-default, #e9ebf6);
+  --vars_borderColor__6levse2: var(--dt-colors-border-primary-default, #ccd3f3);
+}
+.container_containerColorsCSS_color_success__6levse7 {
+  --vars_text__6levse0: var(--dt-colors-text-success-default, #2c6360);
+  --vars_background__6levse1: var(--dt-colors-background-container-success-default, #e9ecef);
+  --vars_borderColor__6levse2: var(--dt-colors-border-success-default, #cad6d7);
+}
+.container_containerColorsCSS_color_warning__6levse8 {
+  --vars_text__6levse0: var(--dt-colors-text-warning-default, #805100);
+  --vars_background__6levse1: var(--dt-colors-background-container-warning-default, #f3efef);
+  --vars_borderColor__6levse2: var(--dt-colors-border-warning-default, #f4e5d5);
+}
+.container_containerColorsCSS_variant_minimal__6levse9 {
+  --vars_background__6levse1: transparent;
+  background-color: none;
+}
+.container_containerColorsCSS_compound_0__6levsed {
+  --vars_text__6levse0: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --vars_background__6levse1: var(--dt-colors-background-container-primary-accent, #474ecf);
+}
+.container_containerColorsCSS_compound_1__6levsee {
+  --vars_text__6levse0: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --vars_background__6levse1: var(--dt-colors-background-container-success-accent, #2f6863);
+}
+.container_containerColorsCSS_compound_2__6levsef {
+  --vars_text__6levse0: var(--dt-colors-text-warning-on-accent-default, #272025);
+  --vars_background__6levse1: var(--dt-colors-background-container-warning-accent, #eca440);
+}
+.container_containerColorsCSS_compound_3__6levseg {
+  --vars_text__6levse0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --vars_background__6levse1: var(--dt-colors-background-container-critical-accent, #c4233b);
+}
+.container_containerColorsCSS_compound_4__6levseh {
+  --vars_text__6levse0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_background__6levse1: var(--dt-colors-background-container-neutral-accent, #5a5b8c);
+}
+.container_containerColorsCSS_compound_5__6levsei {
+  --vars_background__6levse1: var(--dt-colors-background-container-primary-emphasized, #dfe3f5);
+}
+.container_containerColorsCSS_compound_6__6levsej {
+  --vars_background__6levse1: var(--dt-colors-background-container-success-emphasized, #dfe4e7);
+}
+.container_containerColorsCSS_compound_7__6levsek {
+  --vars_background__6levse1: var(--dt-colors-background-container-warning-emphasized, #f4ece6);
+}
+.container_containerColorsCSS_compound_8__6levsel {
+  --vars_background__6levse1: var(--dt-colors-background-container-critical-emphasized, #f3e0e3);
+}
+.container_containerColorsCSS_compound_9__6levsem {
+  --vars_background__6levse1: var(--dt-colors-background-container-neutral-emphasized, #e2e3ec);
+}

package/styles/container.sty.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Defines the vars that decide the color
+ * @internal
+ */
+declare const vars: {
+    text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+/**
+ * Defines the style for all containers
+ * @internal
+ */
+export declare const containerColorsCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        critical: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        neutral: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        success: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+    };
+    variant: {
+        minimal: {
+            backgroundColor: "none";
+            vars: {
+                [x: string]: string;
+            };
+        };
+        default: {};
+        emphasized: {};
+        accent: {};
+    };
+}>;
+export { vars as containerColorVars };

package/styles/container.sty.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var container_css_exports = {};
+__export(container_css_exports, {
+  containerColorVars: () => containerColorVars,
+  containerColorsCSS: () => containerColorsCSS
+});
+module.exports = __toCommonJS(container_css_exports);
+var import_container_css_ts_vanilla = require("./container.css");
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var containerColorVars = { text: "var(--vars_text__6levse0)", background: "var(--vars_background__6levse1)", borderColor: "var(--vars_borderColor__6levse2)" };
+var containerColorsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "container__6levse3", variantClassNames: { color: { critical: "container_containerColorsCSS_color_critical__6levse4", neutral: "container_containerColorsCSS_color_neutral__6levse5", primary: "container_containerColorsCSS_color_primary__6levse6", success: "container_containerColorsCSS_color_success__6levse7", warning: "container_containerColorsCSS_color_warning__6levse8" }, variant: { minimal: "container_containerColorsCSS_variant_minimal__6levse9", "default": "container_containerColorsCSS_variant_default__6levsea", emphasized: "container_containerColorsCSS_variant_emphasized__6levseb", accent: "container_containerColorsCSS_variant_accent__6levsec" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "container_containerColorsCSS_compound_0__6levsed"], [{ color: "success", variant: "accent" }, "container_containerColorsCSS_compound_1__6levsee"], [{ color: "warning", variant: "accent" }, "container_containerColorsCSS_compound_2__6levsef"], [{ color: "critical", variant: "accent" }, "container_containerColorsCSS_compound_3__6levseg"], [{ color: "neutral", variant: "accent" }, "container_containerColorsCSS_compound_4__6levseh"], [{ color: "primary", variant: "emphasized" }, "container_containerColorsCSS_compound_5__6levsei"], [{ color: "success", variant: "emphasized" }, "container_containerColorsCSS_compound_6__6levsej"], [{ color: "warning", variant: "emphasized" }, "container_containerColorsCSS_compound_7__6levsek"], [{ color: "critical", variant: "emphasized" }, "container_containerColorsCSS_compound_8__6levsel"], [{ color: "neutral", variant: "emphasized" }, "container_containerColorsCSS_compound_9__6levsem"]] });

package/styles/ellipsis.css

@@ -0,0 +1,5 @@
+.ellipsis_ellipsisCSS__oqqp1n0 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/styles/ellipsis.sty.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Defines the style for all ellipsis
+ * @internal
+ */
+export declare const ellipsisCSS: string;

package/styles/ellipsis.sty.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ellipsis_css_exports = {};
+__export(ellipsis_css_exports, {
+  ellipsisCSS: () => ellipsisCSS
+});
+module.exports = __toCommonJS(ellipsis_css_exports);
+var import_ellipsis_css_ts_vanilla = require("./ellipsis.css");
+var ellipsisCSS = "ellipsis_ellipsisCSS__oqqp1n0";

package/styles/extract-util.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Helper function that will extract all props from an object and will return them.
+ * The rest returned are the ones that don´t belong to the object.
+ * @internal
+ */
+export declare function extract<T extends object, K extends keyof T>(obj: T, keys: Array<K>): {
+    extracted: Pick<T, K>;
+    rest: Omit<T, K>;
+};

package/styles/extract-util.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var extract_util_exports = {};
+__export(extract_util_exports, {
+  extract: () => extract
+});
+module.exports = __toCommonJS(extract_util_exports);
+function extract(obj, keys) {
+  const extracted = {};
+  const rest = { ...obj };
+  for (const key of keys) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      extracted[key] = obj[key];
+      delete rest[key];
+    }
+  }
+  return { extracted, rest };
+}

package/styles/getFlexStyles.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { GapProps } from './getGapSprinkles.js';
+import { GridFlexPositionProps } from './getGridFlexPositionSprinkles.js';
+import { LayoutSizeProps } from './getLayoutSizeStyles.js';
+import { SpacingProps } from './getSpacingSprinkles.js';
+/**
+ * Defines the flex item style props.
+ * @public
+ */
+export interface FlexItemStyleProps {
+    /**
+     * Determines whether this is a flex item.
+     * If true, display: 'flex' style will not be added.
+     */
+    flexItem?: boolean;
+}
+/**
+ * Defines the flex props.
+ * @public
+ */
+export interface FlexStyleProps extends GridFlexPositionProps, GapProps, LayoutSizeProps, SpacingProps, FlexItemStyleProps {
+    /** Defines order */
+    order?: React.CSSProperties['order'];
+    /** Defines flex grow */
+    flexGrow?: React.CSSProperties['flexGrow'];
+    /** Defines flex shrink */
+    flexShrink?: React.CSSProperties['flexShrink'];
+    /** Defines flex basis */
+    flexBasis?: React.CSSProperties['flexBasis'];
+    /** Defines flex */
+    flex?: React.CSSProperties['flex'];
+    /** Defines flex direction */
+    flexDirection?: React.CSSProperties['flexDirection'];
+    /** Defines flex wrap */
+    flexWrap?: React.CSSProperties['flexWrap'];
+    /** Defines flex flow */
+    flexFlow?: React.CSSProperties['flexFlow'];
+    /** Defines grid column start */
+    gridColumnStart?: React.CSSProperties['gridColumnStart'];
+    /** Defines grid column end */
+    gridColumnEnd?: React.CSSProperties['gridColumnEnd'];
+    /** Defines grid row start */
+    gridRowStart?: React.CSSProperties['gridRowStart'];
+    /** Defines grid row end */
+    gridRowEnd?: React.CSSProperties['gridRowEnd'];
+    /** Defines grid column */
+    gridColumn?: React.CSSProperties['gridColumn'];
+    /** Defines grid row */
+    gridRow?: React.CSSProperties['gridRow'];
+    /** Defines grid area */
+    gridArea?: React.CSSProperties['gridArea'];
+}
+/**
+ * Helper function that will extract all styling relevant props for the Flex styling
+ * and will return them as classnames and style attributes.
+ * The remaining props returned are the ones that no longer contain any Flex styling
+ * related entries.
+ * @public
+ */
+export declare function getFlexStyles<T extends FlexStyleProps>(props: T, defaults?: Partial<FlexStyleProps>): [
+    className: string,
+    style: React.CSSProperties,
+    remainingProps: Omit<T, keyof FlexStyleProps>
+];

package/styles/getFlexStyles.js

@@ -0,0 +1,95 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var getFlexStyles_exports = {};
+__export(getFlexStyles_exports, {
+  getFlexStyles: () => getFlexStyles
+});
+module.exports = __toCommonJS(getFlexStyles_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_extract_util = require("./extract-util.js");
+var import_getGapSprinkles = require("./getGapSprinkles.js");
+var import_getGridFlexPositionSprinkles = require("./getGridFlexPositionSprinkles.js");
+var import_getLayoutSizeStyles = require("./getLayoutSizeStyles.js");
+var import_getSpacingSprinkles = require("./getSpacingSprinkles.js");
+var import_safe_sprinkles = require("./safe-sprinkles.js");
+const flexItemPropKeys = ["flexItem"];
+const flexStylePropKeys = [
+  /* Flex item props */
+  "order",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "flex",
+  /* Grid container props */
+  "flexDirection",
+  "flexWrap",
+  "flexFlow",
+  /* Grid item props */
+  "gridColumnStart",
+  "gridColumnEnd",
+  "gridRowStart",
+  "gridRowEnd",
+  "gridColumn",
+  "gridRow",
+  "gridArea"
+];
+function extractFlexItem(props) {
+  const { extracted, rest } = (0, import_extract_util.extract)(props, flexItemPropKeys);
+  return { extracted, rest };
+}
+function getFlexStyles(props, defaults = {}) {
+  const { extracted: additionalFlexStyles, rest } = (0, import_extract_util.extract)(
+    props,
+    flexStylePropKeys
+  );
+  const [sizeStyles, afterSizeExtraction] = (0, import_getLayoutSizeStyles.getLayoutSizeStyles)(rest, defaults);
+  const [gridFlexClassNames, gridFlexRemainingProps] = (0, import_getGridFlexPositionSprinkles.getGridFlexPositionSprinkles)(afterSizeExtraction, defaults);
+  const [spacingClassNames, spacingRemainingProps] = (0, import_getSpacingSprinkles.getSpacingSprinkles)(
+    gridFlexRemainingProps,
+    defaults
+  );
+  const [gapClassNames, gapRemainingProps] = (0, import_getGapSprinkles.getGapSprinkles)(
+    spacingRemainingProps,
+    defaults
+  );
+  const { extracted: flexItemProps, rest: remainingProps } = extractFlexItem(gapRemainingProps);
+  const flexItemClassName = flexItemProps.flexItem ? void 0 : (0, import_safe_sprinkles.globalSprinkles)({ display: "flex" });
+  return [
+    (0, import_clsx.default)(
+      gridFlexClassNames,
+      spacingClassNames,
+      gapClassNames,
+      flexItemClassName
+    ),
+    {
+      ...sizeStyles,
+      ...additionalFlexStyles
+    },
+    remainingProps
+  ];
+}

package/styles/getGapSprinkles.d.ts

@@ -0,0 +1,19 @@
+import { type SpacingProperties } from './sprinkle-properties.js';
+/**
+ * Defines the box gap props.
+ * @public
+ */
+export interface GapProps {
+    /** Defines gap */
+    gap?: SpacingProperties;
+    /** Defines row gap */
+    rowGap?: SpacingProperties;
+    /** Defines column gap */
+    columnGap?: SpacingProperties;
+}
+/**
+ * Given a set of props will return the relevant class names for the gap sprinkles
+ * and the remaining props.
+ * @internal
+ */
+export declare function getGapSprinkles<T extends GapProps>(props: T, defaults?: Partial<GapProps>): [className: string, remainingProps: Omit<T, keyof GapProps>];

package/styles/getGapSprinkles.js

@@ -0,0 +1,36 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var getGapSprinkles_exports = {};
+__export(getGapSprinkles_exports, {
+  getGapSprinkles: () => getGapSprinkles
+});
+module.exports = __toCommonJS(getGapSprinkles_exports);
+var import_extract_util = require("./extract-util.js");
+var import_safe_sprinkles = require("./safe-sprinkles.js");
+const gapPropKeys = ["gap", "rowGap", "columnGap"];
+function getGapSprinkles(props, defaults = {}) {
+  const { extracted, rest } = (0, import_extract_util.extract)(props, gapPropKeys);
+  const { extracted: extractedDefaults } = (0, import_extract_util.extract)(defaults, gapPropKeys);
+  return [
+    (0, import_safe_sprinkles.globalSprinkles)({
+      ...extractedDefaults,
+      ...extracted
+    }),
+    rest
+  ];
+}

package/styles/getGridFlexPositionSprinkles.d.ts

@@ -0,0 +1,35 @@
+import { AlignContentPositionProps, AlignItemsPositionProps, AlignSelfPositionProps, JustifyContentPositionProps, JustifyItemsPositionProps, JustifySelfPositionProps, PlaceContentPositionProps, PlaceItemsPositionProps, PlaceSelfPositionProps } from './sprinkle-properties.js';
+/**
+ * Defines the grid flex positions props.
+ * @public
+ */
+export interface GridFlexPositionProps {
+    /** justify self positions */
+    justifySelf?: JustifySelfPositionProps;
+    /** align self positions */
+    alignSelf?: AlignSelfPositionProps;
+    /** place self positions */
+    placeSelf?: PlaceSelfPositionProps;
+    /** justify items positions */
+    justifyItems?: JustifyItemsPositionProps;
+    /** align items positions */
+    alignItems?: AlignItemsPositionProps;
+    /** place items positions */
+    placeItems?: PlaceItemsPositionProps;
+    /** justify content positions */
+    justifyContent?: JustifyContentPositionProps;
+    /** align content positions */
+    alignContent?: AlignContentPositionProps;
+    /** place content positions */
+    placeContent?: PlaceContentPositionProps;
+}
+/**
+ * Given a set of props, this function will extract the sprinkles props for
+ * Grid/Flex Position spinkles and return the appropriate
+ * classnames as well as the remaining props.
+ * @internal
+ * */
+export declare function getGridFlexPositionSprinkles<T extends GridFlexPositionProps>(props: T, defaults?: Partial<GridFlexPositionProps>): [
+    sprinklesClassNames: string,
+    remainingProps: Omit<T, keyof GridFlexPositionProps>
+];