@dynatrace/strato-components 0.84.31 → 0.84.51

package/esm/layouts/Divider/Divider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/Divider/Divider.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { dividerCSS } from './Divider.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { colorUtilsCSS } from '../../core/utils/colorUtils.sty.js';\n\n// #region Typings\n\n/** @public\n * Divider component props.\n */\nexport interface DividerProps extends StylingProps, DataTestId {\n  /**\n   * Orientation of the Divider component.\n   * @defaultValue 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Control the HTML tag used for rendering the Divider.\n   * @defaultValue 'div'\n   */\n  as?: 'hr' | 'div';\n  /**\n   * Indicate whether the Divider is used inside a Flex component to apply the right styling.\n   * If set to false, make sure to have an explicit width/height style set on a parent HTML tag.\n   * @defaultValue true\n   */\n  flexItem?: boolean;\n  /**\n   * The color of the Divider.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';\n  /**\n   * The visual style of the Divider.\n   * @defaultValue 'default'\n   */\n  variant?: 'default' | 'accent';\n}\n// #endregion\n\n/**\n * The `Divider` component visually separates groups of content.\n * @public\n */\nexport const Divider = /* @__PURE__ */ forwardRef<\n  HTMLDivElement | HTMLHRElement,\n  DividerProps\n>((props, ref) => {\n  const {\n    orientation = 'horizontal',\n    flexItem = true,\n    as = 'div',\n    color = 'neutral',\n    variant = 'default',\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  const DividerTag = as;\n\n  return (\n    <DividerTag\n      role=\"separator\"\n      aria-orientation={orientation === 'vertical' ? orientation : undefined}\n      // @ts-expect-error ref can't be div and hr here\n      ref={ref}\n      data-testid={dataTestId}\n      className={clsx(\n        colorUtilsCSS({ color, variant }),\n        dividerCSS({ orientation, flexItem }),\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      {...remainingProps}\n    />\n  );\n});\n\n(Divider as typeof Divider & { displayName: string }).displayName = 'Divider';\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB;AAyCvB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,eAAe;AAAA,IACf,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,aAAa;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAkB,gBAAgB,aAAa,cAAc;AAAA,MAE7D;AAAA,MACA,eAAa;AAAA,MACb,WAAW;AAAA,QACT,cAAc,EAAE,OAAO,QAAQ,CAAC;AAAA,QAChC,WAAW,EAAE,aAAa,SAAS,CAAC;AAAA,QACpC;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEA,QAAqD,cAAc;",
+  "names": []
+}

package/esm/layouts/Divider/Divider.sty.js

@@ -0,0 +1,8 @@
+import "../../core/utils/colorUtils.css";
+import "./Divider.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var dividerCSS = _7a468({ defaultClassName: "Divider_dividerCSS__1ljcfp90", variantClassNames: { orientation: { horizontal: "Divider_dividerCSS_orientation_horizontal__1ljcfp91", vertical: "Divider_dividerCSS_orientation_vertical__1ljcfp92" }, flexItem: { true: "Divider_dividerCSS_flexItem_true__1ljcfp93", false: "Divider_dividerCSS_flexItem_false__1ljcfp94" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "Divider_dividerCSS_compound_0__1ljcfp95"], [{ orientation: "vertical", flexItem: true }, "Divider_dividerCSS_compound_1__1ljcfp96"]] });
+export {
+  dividerCSS
+};
+//# sourceMappingURL=Divider.sty.js.map

package/esm/layouts/Divider/Divider.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/Divider/Divider.css.ts"],
+  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'Divider_dividerCSS__1ljcfp90',variantClassNames:{orientation:{horizontal:'Divider_dividerCSS_orientation_horizontal__1ljcfp91',vertical:'Divider_dividerCSS_orientation_vertical__1ljcfp92'},flexItem:{true:'Divider_dividerCSS_flexItem_true__1ljcfp93',false:'Divider_dividerCSS_flexItem_false__1ljcfp94'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'Divider_dividerCSS_compound_0__1ljcfp95'],[{orientation:'vertical',flexItem:true},'Divider_dividerCSS_compound_1__1ljcfp96']]});"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,gCAA+B,mBAAkB,EAAC,aAAY,EAAC,YAAW,uDAAsD,UAAS,oDAAmD,GAAE,UAAS,EAAC,MAAK,8CAA6C,OAAM,8CAA6C,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,aAAY,cAAa,UAAS,MAAK,GAAE,yCAAyC,GAAE,CAAC,EAAC,aAAY,YAAW,UAAS,KAAI,GAAE,yCAAyC,CAAC,EAAC,CAAC;",
+  "names": []
+}

package/esm/layouts/container/Container.css

@@ -0,0 +1,8 @@
+.Container_containerCSS__f32lcd0 {
+  border-style: var(--dt-borders-style-default, solid);
+  border-width: var(--dt-borders-width-emphasized, 2px);
+  border-radius: var(--dt-borders-radius-container-default, 12px);
+  color: var(--vars_text__6levse0);
+  border-color: var(--vars_borderColor__6levse2);
+  background-color: var(--vars_background__6levse1);
+}

package/esm/layouts/container/Container.js

@@ -0,0 +1,55 @@
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+import { containerCSS } from "./Container.sty.js";
+import { containerColorsCSS } from "../../styles/container.sty.js";
+import {
+  _getLayoutSizeStyles as getLayoutSizeStyles,
+  _getSpacingSprinkles as getSpacingSprinkles
+} from "../../styles/index.js";
+const Container = /* @__PURE__ */ forwardRef(
+  ({
+    as,
+    children,
+    variant = "default",
+    color = "neutral",
+    className: consumerClassName,
+    style: consumerStyle,
+    "data-testid": dataTestId,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow,
+    ...remainingProps
+  }, ref) => {
+    const [spacingClasses, sprinkleRestProps] = getSpacingSprinkles(
+      remainingProps,
+      { padding: 16 }
+    );
+    const [sizeStyles, sizeRestProps] = getLayoutSizeStyles(sprinkleRestProps);
+    const Component = as || "div";
+    return /* @__PURE__ */ React.createElement(
+      Component,
+      {
+        ref,
+        className: clsx(
+          containerColorsCSS({ color, variant }),
+          containerCSS,
+          spacingClasses,
+          consumerClassName
+        ),
+        style: {
+          ...sizeStyles,
+          ...consumerStyle
+        },
+        "data-testid": dataTestId,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow,
+        ...sizeRestProps
+      },
+      children
+    );
+  }
+);
+Container.displayName = "Container";
+export {
+  Container
+};
+//# sourceMappingURL=Container.js.map

package/esm/layouts/container/Container.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/container/Container.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef, type ElementType, type ReactElement } from 'react';\n\nimport { containerCSS } from './Container.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\nimport {\n  _getLayoutSizeStyles as getLayoutSizeStyles,\n  _getSpacingSprinkles as getSpacingSprinkles,\n  type LayoutSizeProps,\n  type SpacingProps,\n} from '../../styles/index.js';\n\n/**\n * Accepted properties for Container\n * @public\n */\nexport interface ContainerOwnProps\n  extends WithChildren,\n    DataTestId,\n    StylingProps,\n    SpacingProps,\n    LayoutSizeProps,\n    MaskingProps {\n  /**\n   * The visual style of the container.\n   * @defaultValue 'default'\n   */\n  variant?: 'minimal' | 'default' | 'emphasized' | 'accent';\n  /**\n   * The color of the container. This should be chosen based on the context\n   * the container is used in.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';\n}\n\n/**\n * Merge own props with others inherited from the underlying element type\n * @public\n */\nexport type ContainerProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  ContainerOwnProps\n>;\n\n/**\n * Containers can be used to group content that is related. Additionally, they emphasize and highlight your grouped content.\n * @public\n */\nexport const Container: <E extends ElementType = 'div'>(\n  props: ContainerProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      as,\n      children,\n      variant = 'default',\n      color = 'neutral',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: ContainerProps<E>,\n    ref: typeof remainingProps.ref,\n  ) => {\n    const [spacingClasses, sprinkleRestProps] = getSpacingSprinkles(\n      remainingProps,\n      { padding: 16 },\n    );\n\n    const [sizeStyles, sizeRestProps] = getLayoutSizeStyles(sprinkleRestProps);\n\n    // Make the component polymorphic\n    const Component = as || 'div';\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          containerColorsCSS({ color, variant }),\n          containerCSS,\n          spacingClasses,\n          consumerClassName,\n        )}\n        style={{\n          ...sizeStyles,\n          ...consumerStyle,\n        }}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...sizeRestProps}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\n(Container as typeof Container & { displayName: string }).displayName =\n  'Container';\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAuD;AAEvE,SAAS,oBAAoB;AAM7B,SAAS,0BAA0B;AACnC;AAAA,EACE,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAGnB;AAuCA,MAAM,YAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAC1C;AAAA,MACA,EAAE,SAAS,GAAG;AAAA,IAChB;AAEA,UAAM,CAAC,YAAY,aAAa,IAAI,oBAAoB,iBAAiB;AAGzE,UAAM,YAAY,MAAM;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,mBAAmB,EAAE,OAAO,QAAQ,CAAC;AAAA,UACrC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,UAAyD,cACxD;",
+  "names": []
+}

package/esm/layouts/container/Container.sty.js

@@ -0,0 +1,7 @@
+import "../../styles/container.css";
+import "./Container.css";
+var containerCSS = "Container_containerCSS__f32lcd0";
+export {
+  containerCSS
+};
+//# sourceMappingURL=Container.sty.js.map

package/esm/layouts/container/Container.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/container/Container.css.ts"],
+  "sourcesContent": ["import '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = 'Container_containerCSS__f32lcd0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,eAAe;",
+  "names": []
+}

package/esm/layouts/flex/Flex.js

@@ -0,0 +1,46 @@
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+import {
+  getFlexStyles
+} from "../../styles/getFlexStyles.js";
+const Flex = /* @__PURE__ */ forwardRef(
+  (props, forwardedRef) => {
+    const {
+      children,
+      id,
+      as,
+      className: consumerClassName,
+      style: consumerStyle,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      ...remainingProps
+    } = props;
+    const [flexClassNames, flexStyles, nonFlexStyleProps] = getFlexStyles(
+      remainingProps,
+      { gap: 8 }
+    );
+    const Component = as ?? "div";
+    return /* @__PURE__ */ React.createElement(
+      Component,
+      {
+        ref: forwardedRef,
+        id,
+        "data-testid": dataTestId,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow,
+        className: clsx(flexClassNames, consumerClassName),
+        style: {
+          ...flexStyles,
+          ...consumerStyle
+        },
+        ...nonFlexStyleProps
+      },
+      children
+    );
+  }
+);
+export {
+  Flex
+};
+//# sourceMappingURL=Flex.js.map

package/esm/layouts/flex/Flex.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/flex/Flex.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { type ElementType, type ReactElement, forwardRef } from 'react';\n\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport {\n  getFlexStyles,\n  type FlexStyleProps,\n} from '../../styles/getFlexStyles.js';\n\n/**\n * Flex own props.\n * @public\n */\nexport type FlexOwnProps = WithChildren &\n  StylingProps &\n  FlexStyleProps &\n  DataTestId &\n  MaskingProps;\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type FlexProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  FlexOwnProps\n>;\n\n/**\n * The `Flex` component can be used to layout its children with Flexbox.\n * The component can be customized with flexbox props.\n * @public\n */\nexport const Flex: <E extends ElementType = 'div'>(\n  props: FlexProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: FlexProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      children,\n      id,\n      as,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [flexClassNames, flexStyles, nonFlexStyleProps] = getFlexStyles(\n      remainingProps,\n      { gap: 8 },\n    );\n\n    const Component = as ?? 'div';\n\n    return (\n      <Component\n        ref={forwardedRef}\n        id={id}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(flexClassNames, consumerClassName)}\n        style={{\n          ...flexStyles,\n          ...consumerStyle,\n        }}\n        {...nonFlexStyleProps}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAA8C,kBAAkB;AAOvE;AAAA,EACE;AAAA,OAEK;AA0BA,MAAM,OAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,gBAAgB,YAAY,iBAAiB,IAAI;AAAA,MACtD;AAAA,MACA,EAAE,KAAK,EAAE;AAAA,IACX;AAEA,UAAM,YAAY,MAAM;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,gBAAgB,iBAAiB;AAAA,QACjD,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "names": []
+}

package/esm/layouts/grid/Grid.js

@@ -0,0 +1,46 @@
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+import {
+  getGridStyles
+} from "../../styles/getGridStyles.js";
+const Grid = /* @__PURE__ */ 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] = getGridStyles(
+      remainingProps,
+      { gap: 8 }
+    );
+    const Component = as ?? "div";
+    return /* @__PURE__ */ React.createElement(
+      Component,
+      {
+        ref: forwardedRef,
+        "data-testid": dataTestId,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow,
+        id,
+        className: clsx(gridClassNames, consumerClassName),
+        style: {
+          ...gridStyles,
+          ...consumerStyle
+        },
+        ...nonGridStyleProps
+      },
+      children
+    );
+  }
+);
+export {
+  Grid
+};
+//# sourceMappingURL=Grid.js.map

package/esm/layouts/grid/Grid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/grid/Grid.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { ElementType, ReactElement, forwardRef } from 'react';\n\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport {\n  type GridStyleProps,\n  getGridStyles,\n} from '../../styles/getGridStyles.js';\n\n/**\n * Defines grid own props.\n * @public\n */\nexport type GridOwnProps = WithChildren &\n  StylingProps &\n  GridStyleProps &\n  DataTestId &\n  MaskingProps;\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type GridProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  GridOwnProps\n>;\n\n/**\n * The `Grid` component can be used to layout its children with the help of CSS Grid.\n * The component can be customized with CSS grid props.\n * @public\n */\nexport const Grid: <E extends ElementType = 'div'>(\n  props: GridProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: GridProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      children,\n      id,\n      as = 'div',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [gridClassNames, gridStyles, nonGridStyleProps] = getGridStyles(\n      remainingProps,\n      { gap: 8 },\n    );\n\n    const Component = as ?? 'div';\n\n    return (\n      <Component\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        id={id}\n        className={clsx(gridClassNames, consumerClassName)}\n        style={{\n          ...gridStyles,\n          ...consumerStyle,\n        }}\n        {...nonGridStyleProps}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAoC,kBAAkB;AAO7D;AAAA,EAEE;AAAA,OACK;AA0BA,MAAM,OAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,gBAAgB,YAAY,iBAAiB,IAAI;AAAA,MACtD;AAAA,MACA,EAAE,KAAK,EAAE;AAAA,IACX;AAEA,UAAM,YAAY,MAAM;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB;AAAA,QACA,WAAW,KAAK,gBAAgB,iBAAiB;AAAA,QACjD,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "names": []
+}

package/esm/layouts/index.js

@@ -0,0 +1,11 @@
+import { Flex } from "./flex/Flex.js";
+import { Grid } from "./grid/Grid.js";
+import { Divider } from "./Divider/Divider.js";
+import { Container } from "./container/Container.js";
+export {
+  Container,
+  Divider,
+  Flex,
+  Grid
+};
+//# sourceMappingURL=index.js.map

package/esm/layouts/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/layouts/index.ts"],
+  "sourcesContent": ["export { Flex, type FlexOwnProps, type FlexProps } from './flex/Flex.js';\nexport { Grid, type GridOwnProps, type GridProps } from './grid/Grid.js';\nexport { Divider } from './Divider/Divider.js';\nexport type { DividerProps } from './Divider/Divider.js';\nexport { Container } from './container/Container.js';\nexport type {\n  ContainerOwnProps,\n  ContainerProps,\n} from './container/Container.js';\n"],
+  "mappings": "AAAA,SAAS,YAA+C;AACxD,SAAS,YAA+C;AACxD,SAAS,eAAe;AAExB,SAAS,iBAAiB;",
+  "names": []
+}

package/esm/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/esm/styles/colorUtils.sty.js

@@ -0,0 +1,9 @@
+import "./colorUtils.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var colorUtilsCSS = _7a468({ 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)" };
+export {
+  colorUtilsCSS,
+  colorUtilsVars
+};
+//# sourceMappingURL=colorUtils.sty.js.map

package/esm/styles/colorUtils.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styles/colorUtils.css.ts"],
+  "sourcesContent": ["import './colorUtils.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var colorUtilsCSS = _7a468({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']]});\nexport var colorUtilsVars = {text:'var(--vars_text__17bwkb00)',icon:'var(--vars_icon__17bwkb01)',borderColor:'var(--vars_borderColor__17bwkb02)'};"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,wBAAuB,mBAAkB,EAAC,OAAM,EAAC,UAAS,qDAAoD,SAAQ,oDAAmD,SAAQ,oDAAmD,SAAQ,oDAAmD,SAAQ,oDAAmD,UAAS,oDAAmD,GAAE,SAAQ,EAAC,WAAU,sDAAqD,QAAO,oDAAmD,GAAE,UAAS,EAAC,MAAK,oDAAmD,OAAM,oDAAmD,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,+CAA+C,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,+CAA+C,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,+CAA+C,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,SAAQ,GAAE,+CAA+C,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,+CAA+C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,+CAA+C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,+CAA+C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,+CAA+C,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,KAAI,GAAE,+CAA+C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,+CAA+C,CAAC,EAAC,CAAC;AACljD,IAAI,iBAAiB,EAAC,MAAK,8BAA6B,MAAK,8BAA6B,aAAY,oCAAmC;",
+  "names": []
+}

package/esm/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/esm/styles/container.sty.js

@@ -0,0 +1,9 @@
+import "./container.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var containerColorVars = { text: "var(--vars_text__6levse0)", background: "var(--vars_background__6levse1)", borderColor: "var(--vars_borderColor__6levse2)" };
+var containerColorsCSS = _7a468({ 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"]] });
+export {
+  containerColorVars,
+  containerColorsCSS
+};
+//# sourceMappingURL=container.sty.js.map

package/esm/styles/container.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styles/container.css.ts"],
+  "sourcesContent": ["import './container.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var containerColorVars = {text:'var(--vars_text__6levse0)',background:'var(--vars_background__6levse1)',borderColor:'var(--vars_borderColor__6levse2)'};\nexport var containerColorsCSS = _7a468({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']]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,EAAC,MAAK,6BAA4B,YAAW,mCAAkC,aAAY,mCAAkC;AACtJ,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,sBAAqB,mBAAkB,EAAC,OAAM,EAAC,UAAS,wDAAuD,SAAQ,uDAAsD,SAAQ,uDAAsD,SAAQ,uDAAsD,SAAQ,sDAAqD,GAAE,SAAQ,EAAC,SAAQ,yDAAwD,WAAU,yDAAwD,YAAW,4DAA2D,QAAO,uDAAsD,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kDAAkD,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kDAAkD,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kDAAkD,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,SAAQ,GAAE,kDAAkD,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kDAAkD,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,kDAAkD,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,kDAAkD,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,kDAAkD,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,aAAY,GAAE,kDAAkD,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,kDAAkD,CAAC,EAAC,CAAC;",
+  "names": []
+}

package/esm/styles/ellipsis.css

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

package/esm/styles/ellipsis.sty.js

@@ -0,0 +1,6 @@
+import "./ellipsis.css";
+var ellipsisCSS = "ellipsis_ellipsisCSS__oqqp1n0";
+export {
+  ellipsisCSS
+};
+//# sourceMappingURL=ellipsis.sty.js.map

package/esm/styles/ellipsis.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styles/ellipsis.css.ts"],
+  "sourcesContent": ["import './ellipsis.css';\nexport var ellipsisCSS = 'ellipsis_ellipsisCSS__oqqp1n0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
+  "names": []
+}

package/esm/styles/extract-util.js

@@ -0,0 +1,15 @@
+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 };
+}
+export {
+  extract
+};
+//# sourceMappingURL=extract-util.js.map

package/esm/styles/extract-util.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styles/extract-util.ts"],
+  "sourcesContent": ["/**\n * Helper function that will extract all props from an object and will return them.\n * The rest returned are the ones that don\u00B4t belong to the object.\n * @internal\n */\nexport function extract<T extends object, K extends keyof T>(\n  obj: T,\n  keys: Array<K>,\n): { extracted: Pick<T, K>; rest: Omit<T, K> } {\n  const extracted: Pick<T, K> = {} as Pick<T, K>;\n  const rest: Omit<T, K> = { ...obj } as Omit<T, K>;\n  for (const key of keys) {\n    if (Object.prototype.hasOwnProperty.call(obj, key)) {\n      extracted[key] = obj[key];\n      // @ts-expect-error: Typesafety is not given for hasOwnProperty where it states that key could still be of type K\n      delete rest[key];\n    }\n  }\n\n  return { extracted, rest };\n}\n"],
+  "mappings": "AAKO,SAAS,QACd,KACA,MAC6C;AAC7C,QAAM,YAAwB,CAAC;AAC/B,QAAM,OAAmB,EAAE,GAAG,IAAI;AAClC,aAAW,OAAO,MAAM;AACtB,QAAI,OAAO,UAAU,eAAe,KAAK,KAAK,GAAG,GAAG;AAClD,gBAAU,GAAG,IAAI,IAAI,GAAG;AAExB,aAAO,KAAK,GAAG;AAAA,IACjB;AAAA,EACF;AAEA,SAAO,EAAE,WAAW,KAAK;AAC3B;",
+  "names": []
+}

package/esm/styles/getFlexStyles.js

@@ -0,0 +1,69 @@
+import clsx from "clsx";
+import { extract } from "./extract-util.js";
+import { getGapSprinkles } from "./getGapSprinkles.js";
+import {
+  getGridFlexPositionSprinkles
+} from "./getGridFlexPositionSprinkles.js";
+import { getLayoutSizeStyles } from "./getLayoutSizeStyles.js";
+import { getSpacingSprinkles } from "./getSpacingSprinkles.js";
+import { globalSprinkles } from "./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 } = extract(props, flexItemPropKeys);
+  return { extracted, rest };
+}
+function getFlexStyles(props, defaults = {}) {
+  const { extracted: additionalFlexStyles, rest } = extract(
+    props,
+    flexStylePropKeys
+  );
+  const [sizeStyles, afterSizeExtraction] = getLayoutSizeStyles(rest, defaults);
+  const [gridFlexClassNames, gridFlexRemainingProps] = getGridFlexPositionSprinkles(afterSizeExtraction, defaults);
+  const [spacingClassNames, spacingRemainingProps] = getSpacingSprinkles(
+    gridFlexRemainingProps,
+    defaults
+  );
+  const [gapClassNames, gapRemainingProps] = getGapSprinkles(
+    spacingRemainingProps,
+    defaults
+  );
+  const { extracted: flexItemProps, rest: remainingProps } = extractFlexItem(gapRemainingProps);
+  const flexItemClassName = flexItemProps.flexItem ? void 0 : globalSprinkles({ display: "flex" });
+  return [
+    clsx(
+      gridFlexClassNames,
+      spacingClassNames,
+      gapClassNames,
+      flexItemClassName
+    ),
+    {
+      ...sizeStyles,
+      ...additionalFlexStyles
+    },
+    remainingProps
+  ];
+}
+export {
+  getFlexStyles
+};
+//# sourceMappingURL=getFlexStyles.js.map

package/esm/styles/getFlexStyles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styles/getFlexStyles.ts"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React from 'react';\n\nimport { extract } from './extract-util.js';\nimport { GapProps, getGapSprinkles } from './getGapSprinkles.js';\nimport {\n  GridFlexPositionProps,\n  getGridFlexPositionSprinkles,\n} from './getGridFlexPositionSprinkles.js';\nimport { LayoutSizeProps, getLayoutSizeStyles } from './getLayoutSizeStyles.js';\nimport { SpacingProps, getSpacingSprinkles } from './getSpacingSprinkles.js';\nimport { globalSprinkles } from './safe-sprinkles.js';\n\n/**\n * Defines the flex item style props.\n * @public\n */\nexport interface FlexItemStyleProps {\n  /**\n   * Determines whether this is a flex item.\n   * If true, display: 'flex' style will not be added.\n   */\n  flexItem?: boolean;\n}\n\n/**\n * Keys that will define the flex item.\n * @public\n */\nconst flexItemPropKeys: Array<keyof FlexItemStyleProps> = ['flexItem'];\n\n/**\n * Defines the flex props.\n * @public\n */\nexport interface FlexStyleProps\n  extends GridFlexPositionProps,\n    GapProps,\n    LayoutSizeProps,\n    SpacingProps,\n    FlexItemStyleProps {\n  /* Flex item props */\n  /** Defines order */\n  order?: React.CSSProperties['order'];\n  /** Defines flex grow */\n  flexGrow?: React.CSSProperties['flexGrow'];\n  /** Defines flex shrink */\n  flexShrink?: React.CSSProperties['flexShrink'];\n  /** Defines flex basis */\n  flexBasis?: React.CSSProperties['flexBasis'];\n  /** Defines flex */\n  flex?: React.CSSProperties['flex'];\n  /* Flex container props */\n  /** Defines flex direction */\n  flexDirection?: React.CSSProperties['flexDirection'];\n  /** Defines flex wrap */\n  flexWrap?: React.CSSProperties['flexWrap'];\n  /** Defines flex flow */\n  flexFlow?: React.CSSProperties['flexFlow'];\n  /* Grid item props */\n  /** Defines grid column start */\n  gridColumnStart?: React.CSSProperties['gridColumnStart'];\n  /** Defines grid column end */\n  gridColumnEnd?: React.CSSProperties['gridColumnEnd'];\n  /** Defines grid row start */\n  gridRowStart?: React.CSSProperties['gridRowStart'];\n  /** Defines grid row end */\n  gridRowEnd?: React.CSSProperties['gridRowEnd'];\n  /** Defines grid column */\n  gridColumn?: React.CSSProperties['gridColumn'];\n  /** Defines grid row */\n  gridRow?: React.CSSProperties['gridRow'];\n  /** Defines grid area */\n  gridArea?: React.CSSProperties['gridArea'];\n}\n\n/**\n * Keys that will define the flex.\n * @public\n */\nconst flexStylePropKeys: Array<keyof FlexStyleProps> = [\n  /* Flex item props */\n  'order',\n  'flexGrow',\n  'flexShrink',\n  'flexBasis',\n  'flex',\n  /* Grid container props */\n  'flexDirection',\n  'flexWrap',\n  'flexFlow',\n  /* Grid item props */\n  'gridColumnStart',\n  'gridColumnEnd',\n  'gridRowStart',\n  'gridRowEnd',\n  'gridColumn',\n  'gridRow',\n  'gridArea',\n];\n\n// This one is split out of the getFlexStyles to ease typing, as the generic\n// would be overly complex when using inline.\n/**\n * Extracts the flexItem prop from the remaining props.\n * @public\n */\nfunction extractFlexItem<T extends FlexItemStyleProps>(\n  props: T,\n): {\n  extracted: Pick<T, keyof FlexItemStyleProps>;\n  rest: Omit<T, keyof FlexItemStyleProps>;\n} {\n  const { extracted, rest } = extract(props, flexItemPropKeys);\n  return { extracted, rest };\n}\n\n/**\n * Helper function that will extract all styling relevant props for the Flex styling\n * and will return them as classnames and style attributes.\n * The remaining props returned are the ones that no longer contain any Flex styling\n * related entries.\n * @public\n */\nexport function getFlexStyles<T extends FlexStyleProps>(\n  props: T,\n  defaults: Partial<FlexStyleProps> = {},\n): [\n  className: string,\n  style: React.CSSProperties,\n  remainingProps: Omit<T, keyof FlexStyleProps>,\n] {\n  const { extracted: additionalFlexStyles, rest } = extract(\n    props,\n    flexStylePropKeys,\n  );\n\n  const [sizeStyles, afterSizeExtraction] = getLayoutSizeStyles(rest, defaults);\n\n  const [gridFlexClassNames, gridFlexRemainingProps] =\n    getGridFlexPositionSprinkles(afterSizeExtraction, defaults);\n\n  const [spacingClassNames, spacingRemainingProps] = getSpacingSprinkles(\n    gridFlexRemainingProps,\n    defaults,\n  );\n\n  const [gapClassNames, gapRemainingProps] = getGapSprinkles(\n    spacingRemainingProps,\n    defaults,\n  );\n\n  const { extracted: flexItemProps, rest: remainingProps } =\n    extractFlexItem(gapRemainingProps);\n\n  const flexItemClassName = flexItemProps.flexItem\n    ? undefined\n    : globalSprinkles({ display: 'flex' });\n\n  return [\n    clsx(\n      gridFlexClassNames,\n      spacingClassNames,\n      gapClassNames,\n      flexItemClassName,\n    ),\n    {\n      ...sizeStyles,\n      ...additionalFlexStyles,\n    },\n    remainingProps as Omit<T, keyof FlexStyleProps>,\n  ];\n}\n"],
+  "mappings": "AAAA,OAAO,UAAU;AAGjB,SAAS,eAAe;AACxB,SAAmB,uBAAuB;AAC1C;AAAA,EAEE;AAAA,OACK;AACP,SAA0B,2BAA2B;AACrD,SAAuB,2BAA2B;AAClD,SAAS,uBAAuB;AAkBhC,MAAM,mBAAoD,CAAC,UAAU;AAmDrE,MAAM,oBAAiD;AAAA;AAAA,EAErD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAQA,SAAS,gBACP,OAIA;AACA,QAAM,EAAE,WAAW,KAAK,IAAI,QAAQ,OAAO,gBAAgB;AAC3D,SAAO,EAAE,WAAW,KAAK;AAC3B;AASO,SAAS,cACd,OACA,WAAoC,CAAC,GAKrC;AACA,QAAM,EAAE,WAAW,sBAAsB,KAAK,IAAI;AAAA,IAChD;AAAA,IACA;AAAA,EACF;AAEA,QAAM,CAAC,YAAY,mBAAmB,IAAI,oBAAoB,MAAM,QAAQ;AAE5E,QAAM,CAAC,oBAAoB,sBAAsB,IAC/C,6BAA6B,qBAAqB,QAAQ;AAE5D,QAAM,CAAC,mBAAmB,qBAAqB,IAAI;AAAA,IACjD;AAAA,IACA;AAAA,EACF;AAEA,QAAM,CAAC,eAAe,iBAAiB,IAAI;AAAA,IACzC;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,WAAW,eAAe,MAAM,eAAe,IACrD,gBAAgB,iBAAiB;AAEnC,QAAM,oBAAoB,cAAc,WACpC,SACA,gBAAgB,EAAE,SAAS,OAAO,CAAC;AAEvC,SAAO;AAAA,IACL;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}