@dynatrace/strato-components 0.84.42 → 0.85.0

package/layouts/grid/Grid.js

@@ -0,0 +1,72 @@
+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 Grid_exports = {};
+__export(Grid_exports, {
+  Grid: () => Grid
+});
+module.exports = __toCommonJS(Grid_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_react = __toESM(require("react"));
+var import_getGridStyles = require("../../styles/getGridStyles.js");
+const Grid = /* @__PURE__ */ (0, import_react.forwardRef)(
+  (props, forwardedRef) => {
+    const {
+      children,
+      id,
+      as = "div",
+      className: consumerClassName,
+      style: consumerStyle,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      ...remainingProps
+    } = props;
+    const [gridClassNames, gridStyles, nonGridStyleProps] = (0, import_getGridStyles.getGridStyles)(
+      remainingProps,
+      { gap: 8 }
+    );
+    const Component = as ?? "div";
+    return /* @__PURE__ */ import_react.default.createElement(
+      Component,
+      {
+        ref: forwardedRef,
+        "data-testid": dataTestId,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow,
+        id,
+        className: (0, import_clsx.default)(gridClassNames, consumerClassName),
+        style: {
+          ...gridStyles,
+          ...consumerStyle
+        },
+        ...nonGridStyleProps
+      },
+      children
+    );
+  }
+);

package/layouts/index.d.ts

@@ -1,2 +1,6 @@
+export { Flex, type FlexOwnProps, type FlexProps } from './flex/Flex.js';
+export { Grid, type GridOwnProps, type GridProps } from './grid/Grid.js';
 export { Divider } from './Divider/Divider.js';
 export type { DividerProps } from './Divider/Divider.js';
+export { Container } from './container/Container.js';
+export type { ContainerOwnProps, ContainerProps, } from './container/Container.js';

package/layouts/index.js

@@ -17,7 +17,13 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var layouts_exports = {};
 __export(layouts_exports, {
-  Divider: () => import_Divider.Divider
+  Container: () => import_Container.Container,
+  Divider: () => import_Divider.Divider,
+  Flex: () => import_Flex.Flex,
+  Grid: () => import_Grid.Grid
 });
 module.exports = __toCommonJS(layouts_exports);
+var import_Flex = require("./flex/Flex.js");
+var import_Grid = require("./grid/Grid.js");
 var import_Divider = require("./Divider/Divider.js");
+var import_Container = require("./container/Container.js");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynatrace/strato-components",
-  "version": "0.84.42",
+  "version": "0.85.0",
   "private": false,
   "license": "Apache-2.0",
   "lang": "lang/uncompiled",
@@ -19,6 +19,13 @@
       "module": "./esm/index.js",
       "import": "./esm/index.js"
     },
+    "./content": {
+      "types": "./content/index.d.ts",
+      "require": "./content/index.js",
+      "browser": "./esm/content/index.js",
+      "module": "./esm/content/index.js",
+      "import": "./esm/content/index.js"
+    },
     "./core": {
       "types": "./core/index.d.ts",
       "require": "./core/index.js",
@@ -26,6 +33,20 @@
       "module": "./esm/core/index.js",
       "import": "./esm/core/index.js"
     },
+    "./layouts": {
+      "types": "./layouts/index.d.ts",
+      "require": "./layouts/index.js",
+      "browser": "./esm/layouts/index.js",
+      "module": "./esm/layouts/index.js",
+      "import": "./esm/layouts/index.js"
+    },
+    "./styles": {
+      "types": "./styles/index.d.ts",
+      "require": "./styles/index.js",
+      "browser": "./esm/styles/index.js",
+      "module": "./esm/styles/index.js",
+      "import": "./esm/styles/index.js"
+    },
     "./typography": {
       "types": "./typography/index.d.ts",
       "require": "./typography/index.js",
@@ -40,37 +61,31 @@
     "./testing/jest": {
       "types": "./testing/jest/index.d.ts",
       "require": "./testing/jest/index.js"
-    },
-    "./layouts": {
-      "types": "./layouts/index.d.ts",
-      "require": "./layouts/index.js",
-      "browser": "./esm/layouts/index.js",
-      "module": "./esm/layouts/index.js",
-      "import": "./esm/layouts/index.js"
     }
   },
   "dependencies": {
+    "@dynatrace-sdk/units": "^0.13.1",
     "@dynatrace/devkit": "^0.3.2",
-    "@formatjs/icu-messageformat-parser": "^2.0.18",
+    "@formatjs/icu-messageformat-parser": "^2.7.8",
     "@jest/globals": "^29.7.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
     "wicg-inert": "^3.1.2",
     "use-resize-observer": "^9.1.0",
     "@dynatrace/strato-design-tokens": "0.20.30",
-    "@dynatrace/strato-icons": "0.37.0"
+    "@dynatrace/strato-icons": "0.39.0"
   },
   "peerDependencies": {
-    "@dynatrace-sdk/app-environment": ">= 1.0.0 < 2",
-    "@dynatrace-sdk/error-handlers": ">= 1.0.0 < 2",
-    "@dynatrace-sdk/navigation": ">= 1.0.0 < 2",
-    "@dynatrace-sdk/user-preferences": ">= 1.1.0 < 2",
-    "@testing-library/react": "^12.0.0 || ^14.0.0",
-    "@testing-library/user-event": ">= 13.1.8",
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0",
+    "@dynatrace-sdk/app-environment": "^1.0.0",
+    "@dynatrace-sdk/error-handlers": "^1.0.0",
+    "@dynatrace-sdk/navigation": "^1.0.0",
+    "@dynatrace-sdk/user-preferences": "^1.1.0",
+    "@testing-library/react": "^14.0.0 || ^15.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-intl": "^6.0.8",
-    "react-is": "^17.0.2 || ^18.0.0"
+    "react-is": "^18.0.0"
   },
   "peerDependenciesMeta": {
     "@testing-library/react": {

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>
+];