@d4gger/design-system 2.7.0

package/dist/layout/layout.props.js

@@ -0,0 +1,313 @@
+import { extractProps } from "../_internal/helpers/extractProps.js";
+import { marginPropDef } from "../_internal/props/margin.prop.js";
+import { paddingPropDef } from "../_internal/props/padding.prop.js";
+import {
+  parseSizeValue,
+  parseSpaceValue,
+  sizeScaleValues,
+  spaceScaleValues,
+  spaceUtilityValues
+} from "../_internal/props/propDef.js";
+const boxSpaceValues = ["none", ...spaceScaleValues];
+const lengthValues = ["auto", "full", ...sizeScaleValues];
+const displayValues = [
+  "block",
+  "inline-block",
+  "inline",
+  "flex",
+  "inline-flex",
+  "grid",
+  "inline-grid",
+  "contents",
+  "none"
+];
+const positionValues = ["static", "relative", "absolute", "fixed", "sticky"];
+const flexAlignValues = ["start", "center", "end", "stretch", "baseline"];
+const gridTrackValues = ["1", "2", "3", "4", "5", "6", "12"];
+const gridFlowValues = ["row", "column", "row dense", "column dense"];
+const gridAlignContentValues = ["start", "end", "center", "between", "around", "evenly", "stretch"];
+const gridJustifyItemsValues = ["start", "end", "center", "stretch"];
+function createResponsiveVariableProp(customProperty, parseValue) {
+  return {
+    type: "string",
+    default: void 0,
+    className: "",
+    customProperties: [customProperty],
+    parseValue,
+    responsive: true
+  };
+}
+function parseLengthValue(value) {
+  if (value === "auto") {
+    return "auto";
+  }
+  if (value === "full") {
+    return "100%";
+  }
+  return parseSizeValue(value) ?? value;
+}
+function parseFlexAlignValue(value) {
+  if (value === "start") {
+    return "flex-start";
+  }
+  if (value === "end") {
+    return "flex-end";
+  }
+  return value;
+}
+function parseFlexJustifyValue(value) {
+  if (value === "start") {
+    return "flex-start";
+  }
+  if (value === "end") {
+    return "flex-end";
+  }
+  if (value === "between") {
+    return "space-between";
+  }
+  if (value === "around") {
+    return "space-around";
+  }
+  if (value === "evenly") {
+    return "space-evenly";
+  }
+  return value;
+}
+function parseGridTrackValue(value) {
+  if (/^\d+$/.test(value)) {
+    return `repeat(${value}, minmax(0, 1fr))`;
+  }
+  return value;
+}
+function parseGridAlignContentValue(value) {
+  if (value === "start") {
+    return "start";
+  }
+  if (value === "end") {
+    return "end";
+  }
+  if (value === "center") {
+    return "center";
+  }
+  if (value === "between") {
+    return "space-between";
+  }
+  if (value === "around") {
+    return "space-around";
+  }
+  if (value === "evenly") {
+    return "space-evenly";
+  }
+  if (value === "stretch") {
+    return "stretch";
+  }
+  return value;
+}
+function parseGridJustifyItemsValue(value) {
+  if (value === "start") {
+    return "start";
+  }
+  if (value === "end") {
+    return "end";
+  }
+  if (value === "center") {
+    return "center";
+  }
+  if (value === "stretch") {
+    return "stretch";
+  }
+  return value;
+}
+function parseContainerSizeValue(value) {
+  switch (value) {
+    case "1":
+      return "420px";
+    case "2":
+      return "640px";
+    case "3":
+      return "768px";
+    case "4":
+      return "1024px";
+    case "content":
+      return "1080px";
+    case "wide":
+      return "1200px";
+    case "full":
+      return "none";
+    default:
+      return value;
+  }
+}
+function parseSectionSizeValue(value) {
+  switch (value) {
+    case "1":
+      return "var(--dsx-space-md)";
+    case "2":
+      return "var(--dsx-space-xl)";
+    case "3":
+      return "var(--dsx-space-2xl)";
+    default:
+      return value;
+  }
+}
+function parseInsetSizeValue(value) {
+  switch (value) {
+    case "1":
+      return "var(--dsx-space-xs)";
+    case "2":
+      return "var(--dsx-space-sm)";
+    case "3":
+      return "var(--dsx-space-md)";
+    case "4":
+      return "var(--dsx-space-lg)";
+    default:
+      return value;
+  }
+}
+const BOX_PROP_DEFS = {
+  width: {
+    ...createResponsiveVariableProp("--dsx-r-width", parseLengthValue),
+    className: "dsx-r-w",
+    type: "enum | string",
+    values: lengthValues
+  },
+  height: {
+    ...createResponsiveVariableProp("--dsx-r-height", parseLengthValue),
+    className: "dsx-r-h",
+    type: "enum | string",
+    values: lengthValues
+  },
+  display: {
+    ...createResponsiveVariableProp("--dsx-box-display"),
+    className: "dsx-r-display",
+    type: "enum | string",
+    values: displayValues
+  },
+  minWidth: {
+    ...createResponsiveVariableProp("--dsx-box-min-width", parseLengthValue),
+    className: "dsx-r-min-w",
+    type: "enum | string",
+    values: lengthValues
+  },
+  maxWidth: {
+    ...createResponsiveVariableProp("--dsx-box-max-width", parseLengthValue),
+    className: "dsx-r-max-w",
+    type: "enum | string",
+    values: lengthValues
+  },
+  minHeight: {
+    ...createResponsiveVariableProp("--dsx-box-min-height", parseLengthValue),
+    className: "dsx-r-min-h",
+    type: "enum | string",
+    values: lengthValues
+  },
+  maxHeight: {
+    ...createResponsiveVariableProp("--dsx-box-max-height", parseLengthValue),
+    className: "dsx-r-max-h",
+    type: "enum | string",
+    values: lengthValues
+  },
+  position: {
+    ...createResponsiveVariableProp("--dsx-box-position"),
+    className: "dsx-r-position",
+    type: "enum | string",
+    values: positionValues
+  },
+  alignSelf: {
+    ...createResponsiveVariableProp("--dsx-box-align-self", parseFlexAlignValue),
+    className: "dsx-r-as",
+    type: "enum | string",
+    values: flexAlignValues
+  },
+  justifySelf: {
+    ...createResponsiveVariableProp("--dsx-box-justify-self", parseFlexAlignValue),
+    className: "dsx-r-js",
+    type: "enum | string",
+    values: flexAlignValues
+  },
+  ...marginPropDef,
+  ...paddingPropDef
+};
+const FLEX_PROP_DEFS = {
+  direction: createResponsiveVariableProp("--dsx-flex-direction"),
+  align: createResponsiveVariableProp("--dsx-flex-align", parseFlexAlignValue),
+  justify: createResponsiveVariableProp("--dsx-flex-justify", parseFlexJustifyValue),
+  wrap: createResponsiveVariableProp("--dsx-flex-wrap"),
+  gap: {
+    ...createResponsiveVariableProp("--dsx-box-gap", parseSpaceValue),
+    className: "dsx-r-gap",
+    type: "enum | string",
+    values: [...spaceScaleValues, ...spaceUtilityValues]
+  }
+};
+const GRID_PROP_DEFS = {
+  columns: {
+    ...createResponsiveVariableProp("--dsx-grid-columns", parseGridTrackValue),
+    className: "dsx-r-gtc",
+    type: "enum | string",
+    values: gridTrackValues
+  },
+  rows: {
+    ...createResponsiveVariableProp("--dsx-grid-rows", parseGridTrackValue),
+    className: "dsx-r-gtr",
+    type: "enum | string",
+    values: gridTrackValues
+  },
+  gap: {
+    ...createResponsiveVariableProp("--dsx-box-gap", parseSpaceValue),
+    className: "dsx-r-gap",
+    type: "enum | string",
+    values: [...spaceScaleValues, ...spaceUtilityValues]
+  },
+  areas: {
+    ...createResponsiveVariableProp("--dsx-grid-areas"),
+    className: "dsx-r-gta",
+    type: "enum | string",
+    values: []
+  },
+  flow: {
+    ...createResponsiveVariableProp("--dsx-grid-auto-flow"),
+    className: "dsx-r-gaf",
+    type: "enum | string",
+    values: gridFlowValues
+  },
+  alignContent: {
+    ...createResponsiveVariableProp("--dsx-grid-align-content", parseGridAlignContentValue),
+    className: "dsx-r-ac",
+    type: "enum | string",
+    values: gridAlignContentValues
+  },
+  justifyItems: {
+    ...createResponsiveVariableProp("--dsx-grid-justify-items", parseGridJustifyItemsValue),
+    className: "dsx-r-ji",
+    type: "enum | string",
+    values: gridJustifyItemsValues
+  },
+  justifyContent: createResponsiveVariableProp("--dsx-grid-justify-content", parseGridAlignContentValue)
+};
+const CONTAINER_PROP_DEFS = {
+  size: createResponsiveVariableProp("--dsx-container-max-width", parseContainerSizeValue),
+  inset: createResponsiveVariableProp("--dsx-container-inset", parseSpaceValue)
+};
+const SECTION_PROP_DEFS = {
+  size: createResponsiveVariableProp("--dsx-section-space", parseSectionSizeValue),
+  space: createResponsiveVariableProp("--dsx-section-space", parseSpaceValue)
+};
+const INSET_PROP_DEFS = {
+  size: createResponsiveVariableProp("--dsx-inset-size", parseInsetSizeValue)
+};
+function extractLayoutProps(props, ...propDefs) {
+  const { asChild: _asChild, ...restProps } = props;
+  return extractProps({ ...restProps, className: void 0 }, ...propDefs);
+}
+export {
+  BOX_PROP_DEFS,
+  CONTAINER_PROP_DEFS,
+  FLEX_PROP_DEFS,
+  GRID_PROP_DEFS,
+  INSET_PROP_DEFS,
+  SECTION_PROP_DEFS,
+  createResponsiveVariableProp,
+  extractLayoutProps
+};
+//# sourceMappingURL=layout.props.js.map

package/dist/layout/layout.props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/layout/layout.props.ts"],
+  "sourcesContent": ["import { extractProps } from '../_internal/helpers/extractProps'\nimport { marginPropDef, type MarginProps } from '../_internal/props/margin.prop'\nimport { paddingPropDef, type PaddingProps } from '../_internal/props/padding.prop'\nimport {\n  parseSizeValue,\n  parseSpaceValue,\n  sizeScaleValues,\n  spaceScaleValues,\n  spaceUtilityValues,\n  type PropDef,\n  type Responsive,\n} from '../_internal/props/propDef'\n\nimport type * as React from 'react'\n\nconst boxSpaceValues = ['none', ...spaceScaleValues] as const\nconst lengthValues = ['auto', 'full', ...sizeScaleValues] as const\nconst displayValues = [\n  'block',\n  'inline-block',\n  'inline',\n  'flex',\n  'inline-flex',\n  'grid',\n  'inline-grid',\n  'contents',\n  'none',\n] as const\nconst positionValues = ['static', 'relative', 'absolute', 'fixed', 'sticky'] as const\nconst flexDirectionValues = ['row', 'column', 'row-reverse', 'column-reverse'] as const\nconst flexAlignValues = ['start', 'center', 'end', 'stretch', 'baseline'] as const\nconst flexJustifyValues = ['start', 'center', 'end', 'between', 'around', 'evenly'] as const\nconst flexWrapValues = ['nowrap', 'wrap', 'wrap-reverse'] as const\nconst gridTrackValues = ['1', '2', '3', '4', '5', '6', '12'] as const\nconst gridFlowValues = ['row', 'column', 'row dense', 'column dense'] as const\nconst gridAlignContentValues = ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch'] as const\nconst gridJustifyItemsValues = ['start', 'end', 'center', 'stretch'] as const\nconst containerSizeValues = ['1', '2', '3', '4', 'content', 'wide', 'full'] as const\nconst sectionSizeValues = ['1', '2', '3'] as const\nconst insetSizeValues = ['1', '2', '3', '4'] as const\n\nfunction createResponsiveVariableProp(\n  customProperty: `--${string}`,\n  parseValue?: (value: string) => string | number | undefined,\n) {\n  return {\n    type: 'string',\n    default: undefined,\n    className: '',\n    customProperties: [customProperty],\n    parseValue,\n    responsive: true,\n  } as const satisfies PropDef\n}\n\nfunction parseLengthValue(value: string) {\n  if (value === 'auto') {\n    return 'auto'\n  }\n\n  if (value === 'full') {\n    return '100%'\n  }\n\n  return parseSizeValue(value) ?? value\n}\n\nfunction parseFlexAlignValue(value: string) {\n  if (value === 'start') {\n    return 'flex-start'\n  }\n\n  if (value === 'end') {\n    return 'flex-end'\n  }\n\n  return value\n}\n\nfunction parseFlexJustifyValue(value: string) {\n  if (value === 'start') {\n    return 'flex-start'\n  }\n\n  if (value === 'end') {\n    return 'flex-end'\n  }\n\n  if (value === 'between') {\n    return 'space-between'\n  }\n\n  if (value === 'around') {\n    return 'space-around'\n  }\n\n  if (value === 'evenly') {\n    return 'space-evenly'\n  }\n\n  return value\n}\n\nfunction parseGridTrackValue(value: string) {\n  if (/^\\d+$/.test(value)) {\n    return `repeat(${value}, minmax(0, 1fr))`\n  }\n\n  return value\n}\n\nfunction parseGridAlignContentValue(value: string) {\n  if (value === 'start') {\n    return 'start'\n  }\n\n  if (value === 'end') {\n    return 'end'\n  }\n\n  if (value === 'center') {\n    return 'center'\n  }\n\n  if (value === 'between') {\n    return 'space-between'\n  }\n\n  if (value === 'around') {\n    return 'space-around'\n  }\n\n  if (value === 'evenly') {\n    return 'space-evenly'\n  }\n\n  if (value === 'stretch') {\n    return 'stretch'\n  }\n\n  return value\n}\n\nfunction parseGridJustifyItemsValue(value: string) {\n  if (value === 'start') {\n    return 'start'\n  }\n\n  if (value === 'end') {\n    return 'end'\n  }\n\n  if (value === 'center') {\n    return 'center'\n  }\n\n  if (value === 'stretch') {\n    return 'stretch'\n  }\n\n  return value\n}\n\nfunction parseContainerSizeValue(value: string) {\n  switch (value) {\n    case '1':\n      return '420px'\n    case '2':\n      return '640px'\n    case '3':\n      return '768px'\n    case '4':\n      return '1024px'\n    case 'content':\n      return '1080px'\n    case 'wide':\n      return '1200px'\n    case 'full':\n      return 'none'\n    default:\n      return value\n  }\n}\n\nfunction parseSectionSizeValue(value: string) {\n  switch (value) {\n    case '1':\n      return 'var(--dsx-space-md)'\n    case '2':\n      return 'var(--dsx-space-xl)'\n    case '3':\n      return 'var(--dsx-space-2xl)'\n    default:\n      return value\n  }\n}\n\nfunction parseInsetSizeValue(value: string) {\n  switch (value) {\n    case '1':\n      return 'var(--dsx-space-xs)'\n    case '2':\n      return 'var(--dsx-space-sm)'\n    case '3':\n      return 'var(--dsx-space-md)'\n    case '4':\n      return 'var(--dsx-space-lg)'\n    default:\n      return value\n  }\n}\n\nconst BOX_PROP_DEFS = {\n  width: {\n    ...createResponsiveVariableProp('--dsx-r-width', parseLengthValue),\n    className: 'dsx-r-w',\n    type: 'enum | string',\n    values: lengthValues,\n  },\n  height: {\n    ...createResponsiveVariableProp('--dsx-r-height', parseLengthValue),\n    className: 'dsx-r-h',\n    type: 'enum | string',\n    values: lengthValues,\n  },\n  display: {\n    ...createResponsiveVariableProp('--dsx-box-display'),\n    className: 'dsx-r-display',\n    type: 'enum | string',\n    values: displayValues,\n  },\n  minWidth: {\n    ...createResponsiveVariableProp('--dsx-box-min-width', parseLengthValue),\n    className: 'dsx-r-min-w',\n    type: 'enum | string',\n    values: lengthValues,\n  },\n  maxWidth: {\n    ...createResponsiveVariableProp('--dsx-box-max-width', parseLengthValue),\n    className: 'dsx-r-max-w',\n    type: 'enum | string',\n    values: lengthValues,\n  },\n  minHeight: {\n    ...createResponsiveVariableProp('--dsx-box-min-height', parseLengthValue),\n    className: 'dsx-r-min-h',\n    type: 'enum | string',\n    values: lengthValues,\n  },\n  maxHeight: {\n    ...createResponsiveVariableProp('--dsx-box-max-height', parseLengthValue),\n    className: 'dsx-r-max-h',\n    type: 'enum | string',\n    values: lengthValues,\n  },\n  position: {\n    ...createResponsiveVariableProp('--dsx-box-position'),\n    className: 'dsx-r-position',\n    type: 'enum | string',\n    values: positionValues,\n  },\n  alignSelf: {\n    ...createResponsiveVariableProp('--dsx-box-align-self', parseFlexAlignValue),\n    className: 'dsx-r-as',\n    type: 'enum | string',\n    values: flexAlignValues,\n  },\n  justifySelf: {\n    ...createResponsiveVariableProp('--dsx-box-justify-self', parseFlexAlignValue),\n    className: 'dsx-r-js',\n    type: 'enum | string',\n    values: flexAlignValues,\n  },\n  ...marginPropDef,\n  ...paddingPropDef,\n} as const\n\nconst FLEX_PROP_DEFS = {\n  direction: createResponsiveVariableProp('--dsx-flex-direction'),\n  align: createResponsiveVariableProp('--dsx-flex-align', parseFlexAlignValue),\n  justify: createResponsiveVariableProp('--dsx-flex-justify', parseFlexJustifyValue),\n  wrap: createResponsiveVariableProp('--dsx-flex-wrap'),\n  gap: {\n    ...createResponsiveVariableProp('--dsx-box-gap', parseSpaceValue),\n    className: 'dsx-r-gap',\n    type: 'enum | string',\n    values: [...spaceScaleValues, ...spaceUtilityValues],\n  },\n} as const\n\nconst GRID_PROP_DEFS = {\n  columns: {\n    ...createResponsiveVariableProp('--dsx-grid-columns', parseGridTrackValue),\n    className: 'dsx-r-gtc',\n    type: 'enum | string',\n    values: gridTrackValues,\n  },\n  rows: {\n    ...createResponsiveVariableProp('--dsx-grid-rows', parseGridTrackValue),\n    className: 'dsx-r-gtr',\n    type: 'enum | string',\n    values: gridTrackValues,\n  },\n  gap: {\n    ...createResponsiveVariableProp('--dsx-box-gap', parseSpaceValue),\n    className: 'dsx-r-gap',\n    type: 'enum | string',\n    values: [...spaceScaleValues, ...spaceUtilityValues],\n  },\n  areas: {\n    ...createResponsiveVariableProp('--dsx-grid-areas'),\n    className: 'dsx-r-gta',\n    type: 'enum | string',\n    values: [],\n  },\n  flow: {\n    ...createResponsiveVariableProp('--dsx-grid-auto-flow'),\n    className: 'dsx-r-gaf',\n    type: 'enum | string',\n    values: gridFlowValues,\n  },\n  alignContent: {\n    ...createResponsiveVariableProp('--dsx-grid-align-content', parseGridAlignContentValue),\n    className: 'dsx-r-ac',\n    type: 'enum | string',\n    values: gridAlignContentValues,\n  },\n  justifyItems: {\n    ...createResponsiveVariableProp('--dsx-grid-justify-items', parseGridJustifyItemsValue),\n    className: 'dsx-r-ji',\n    type: 'enum | string',\n    values: gridJustifyItemsValues,\n  },\n  justifyContent: createResponsiveVariableProp('--dsx-grid-justify-content', parseGridAlignContentValue),\n} as const\n\nconst CONTAINER_PROP_DEFS = {\n  size: createResponsiveVariableProp('--dsx-container-max-width', parseContainerSizeValue),\n  inset: createResponsiveVariableProp('--dsx-container-inset', parseSpaceValue),\n} as const\n\nconst SECTION_PROP_DEFS = {\n  size: createResponsiveVariableProp('--dsx-section-space', parseSectionSizeValue),\n  space: createResponsiveVariableProp('--dsx-section-space', parseSpaceValue),\n} as const\n\nconst INSET_PROP_DEFS = {\n  size: createResponsiveVariableProp('--dsx-inset-size', parseInsetSizeValue),\n} as const\n\ntype ResponsiveValue<T extends string> = Responsive<T>\n\ntype BoxStyleProps = MarginProps & PaddingProps & {\n  width?: ResponsiveValue<(typeof lengthValues)[number] | string>\n  height?: ResponsiveValue<(typeof lengthValues)[number] | string>\n  minWidth?: ResponsiveValue<(typeof lengthValues)[number] | string>\n  maxWidth?: ResponsiveValue<(typeof lengthValues)[number] | string>\n  minHeight?: ResponsiveValue<(typeof lengthValues)[number] | string>\n  maxHeight?: ResponsiveValue<(typeof lengthValues)[number] | string>\n  display?: ResponsiveValue<(typeof displayValues)[number] | string>\n  position?: ResponsiveValue<(typeof positionValues)[number] | string>\n  alignSelf?: ResponsiveValue<(typeof flexAlignValues)[number] | string>\n  justifySelf?: ResponsiveValue<(typeof flexAlignValues)[number] | string>\n}\n\ntype FlexStyleProps = {\n  direction?: ResponsiveValue<(typeof flexDirectionValues)[number]>\n  align?: ResponsiveValue<(typeof flexAlignValues)[number]>\n  justify?: ResponsiveValue<(typeof flexJustifyValues)[number]>\n  wrap?: ResponsiveValue<(typeof flexWrapValues)[number]>\n  gap?: ResponsiveValue<(typeof boxSpaceValues)[number] | string>\n}\n\ntype GridStyleProps = {\n  columns?: ResponsiveValue<(typeof gridTrackValues)[number] | string>\n  rows?: ResponsiveValue<(typeof gridTrackValues)[number] | string>\n  gap?: ResponsiveValue<(typeof boxSpaceValues)[number] | string>\n  areas?: ResponsiveValue<string>\n  flow?: ResponsiveValue<(typeof gridFlowValues)[number] | string>\n  alignContent?: ResponsiveValue<(typeof gridAlignContentValues)[number] | string>\n  justifyItems?: ResponsiveValue<(typeof gridJustifyItemsValues)[number] | string>\n  justifyContent?: ResponsiveValue<(typeof gridAlignContentValues)[number]>\n}\n\ntype ContainerStyleProps = {\n  size?: ResponsiveValue<(typeof containerSizeValues)[number]>\n  inset?: ResponsiveValue<(typeof boxSpaceValues)[number]>\n}\n\ntype SectionStyleProps = {\n  size?: ResponsiveValue<(typeof sectionSizeValues)[number]>\n  space?: ResponsiveValue<(typeof boxSpaceValues)[number]>\n}\n\ntype InsetStyleProps = {\n  size?: ResponsiveValue<(typeof insetSizeValues)[number]>\n}\n\nfunction extractLayoutProps<\n  P extends { style?: React.CSSProperties; asChild?: boolean; [key: string]: unknown },\n  T extends Record<string, PropDef>[],\n>(props: P, ...propDefs: T) {\n  const { asChild: _asChild, ...restProps } = props\n\n  return extractProps({ ...restProps, className: undefined }, ...propDefs)\n}\n\nexport {\n  BOX_PROP_DEFS,\n  CONTAINER_PROP_DEFS,\n  FLEX_PROP_DEFS,\n  GRID_PROP_DEFS,\n  INSET_PROP_DEFS,\n  SECTION_PROP_DEFS,\n  createResponsiveVariableProp,\n  extractLayoutProps,\n}\n\nexport type {\n  BoxStyleProps,\n  ContainerStyleProps,\n  FlexStyleProps,\n  GridStyleProps,\n  InsetStyleProps,\n  SectionStyleProps,\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/layout/responsive.props.cjs

@@ -0,0 +1,88 @@
+"use strict";
+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 responsive_props_exports = {};
+__export(responsive_props_exports, {
+  BREAKPOINTS: () => BREAKPOINTS,
+  BREAKPOINT_ORDER: () => BREAKPOINT_ORDER,
+  CONTAINER_WIDTHS: () => CONTAINER_WIDTHS,
+  DENSITY_MODES: () => DENSITY_MODES,
+  assignResponsiveVars: () => assignResponsiveVars,
+  getBreakpointMinWidth: () => getBreakpointMinWidth,
+  getBreakpointQuery: () => getBreakpointQuery,
+  getContainerWidth: () => getContainerWidth,
+  getDensityMode: () => getDensityMode,
+  isResponsiveValue: () => isResponsiveValue,
+  toResponsiveMap: () => toResponsiveMap
+});
+module.exports = __toCommonJS(responsive_props_exports);
+var import_breakpoints = require("./breakpoints.generated");
+const BREAKPOINTS = import_breakpoints.BREAKPOINT_VALUES;
+const BREAKPOINT_ORDER = ["sm", "md", "lg", "xl", "2xl"];
+const CONTAINER_WIDTHS = {
+  content: 1080,
+  wide: 1200
+};
+const DENSITY_MODES = {
+  comfortable: {
+    padding: "md",
+    controlHeight: "xl"
+  },
+  compact: {
+    padding: "sm",
+    controlHeight: "lg"
+  }
+};
+function getBreakpointMinWidth(name) {
+  return BREAKPOINTS[name];
+}
+function getBreakpointQuery(name) {
+  return `@media (min-width: ${BREAKPOINTS[name]}px)`;
+}
+function getContainerWidth(name) {
+  return CONTAINER_WIDTHS[name];
+}
+function getDensityMode(mode) {
+  return DENSITY_MODES[mode];
+}
+function isResponsiveValue(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function toResponsiveMap(value) {
+  if (value === void 0) return {};
+  if (isResponsiveValue(value)) return value;
+  return { initial: value };
+}
+function assignResponsiveVars(vars, name, value, resolve) {
+  const responsive = toResponsiveMap(value);
+  if (responsive.initial !== void 0) {
+    vars[`--${name}`] = resolve(responsive.initial);
+  }
+  let lastValue = responsive.initial;
+  for (const breakpoint of BREAKPOINT_ORDER) {
+    const nextValue = responsive[breakpoint];
+    if (nextValue !== void 0) {
+      vars[`--${name}-${breakpoint}`] = resolve(nextValue);
+      lastValue = nextValue;
+    } else if (lastValue !== void 0) {
+      vars[`--${name}-${breakpoint}`] = resolve(lastValue);
+    }
+  }
+  return vars;
+}
+//# sourceMappingURL=responsive.props.cjs.map

package/dist/layout/responsive.props.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/layout/responsive.props.ts"],
+  "sourcesContent": ["import { BREAKPOINT_VALUES } from './breakpoints.generated'\n\nexport const BREAKPOINTS = BREAKPOINT_VALUES\n\nexport const BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl', '2xl'] as const\n\nexport const CONTAINER_WIDTHS = {\n  content: 1080,\n  wide: 1200,\n} as const\n\nexport const DENSITY_MODES = {\n  comfortable: {\n    padding: 'md',\n    controlHeight: 'xl',\n  },\n  compact: {\n    padding: 'sm',\n    controlHeight: 'lg',\n  },\n} as const\n\nexport type BreakpointName = keyof typeof BREAKPOINTS\nexport type BreakpointOrder = (typeof BREAKPOINT_ORDER)[number]\nexport type ContainerWidthName = keyof typeof CONTAINER_WIDTHS\nexport type DensityMode = keyof typeof DENSITY_MODES\nexport type ResponsiveBreakpoint = BreakpointName\nexport type ResponsiveCondition = 'initial' | ResponsiveBreakpoint\nexport type ResponsiveValue<T> = T | Partial<Record<ResponsiveCondition, T>>\n\nexport function getBreakpointMinWidth(name: BreakpointName) {\n  return BREAKPOINTS[name]\n}\n\nexport function getBreakpointQuery(name: BreakpointName) {\n  return `@media (min-width: ${BREAKPOINTS[name]}px)`\n}\n\nexport function getContainerWidth(name: ContainerWidthName) {\n  return CONTAINER_WIDTHS[name]\n}\n\nexport function getDensityMode(mode: DensityMode) {\n  return DENSITY_MODES[mode]\n}\n\nexport function isResponsiveValue<T>(value: ResponsiveValue<T> | undefined): value is Partial<Record<ResponsiveCondition, T>> {\n  return Boolean(value) && typeof value === 'object' && !Array.isArray(value)\n}\n\nexport function toResponsiveMap<T>(value: ResponsiveValue<T> | undefined) {\n  if (value === undefined) return {}\n  if (isResponsiveValue(value)) return value\n\n  return { initial: value }\n}\n\nexport function assignResponsiveVars<T>(\n  vars: Record<`--${string}`, string | number | undefined>,\n  name: string,\n  value: ResponsiveValue<T> | undefined,\n  resolve: (next: T) => string | number | undefined,\n) {\n  const responsive = toResponsiveMap(value)\n\n  if (responsive.initial !== undefined) {\n    vars[`--${name}`] = resolve(responsive.initial)\n  }\n\n  let lastValue = responsive.initial\n  for (const breakpoint of BREAKPOINT_ORDER) {\n    const nextValue = responsive[breakpoint]\n    if (nextValue !== undefined) {\n      vars[`--${name}-${breakpoint}`] = resolve(nextValue)\n      lastValue = nextValue\n    } else if (lastValue !== undefined) {\n      // Carry forward the most recent defined value so the CSS var() fallback\n      // chain does not resolve the breakpoint init (empty or initial) instead\n      // of the intended value.\n      vars[`--${name}-${breakpoint}`] = resolve(lastValue)\n    }\n  }\n\n  return vars\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAkC;AAE3B,MAAM,cAAc;AAEpB,MAAM,mBAAmB,CAAC,MAAM,MAAM,MAAM,MAAM,KAAK;AAEvD,MAAM,mBAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,MAAM;AACR;AAEO,MAAM,gBAAgB;AAAA,EAC3B,aAAa;AAAA,IACX,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AACF;AAUO,SAAS,sBAAsB,MAAsB;AAC1D,SAAO,YAAY,IAAI;AACzB;AAEO,SAAS,mBAAmB,MAAsB;AACvD,SAAO,sBAAsB,YAAY,IAAI,CAAC;AAChD;AAEO,SAAS,kBAAkB,MAA0B;AAC1D,SAAO,iBAAiB,IAAI;AAC9B;AAEO,SAAS,eAAe,MAAmB;AAChD,SAAO,cAAc,IAAI;AAC3B;AAEO,SAAS,kBAAqB,OAAyF;AAC5H,SAAO,QAAQ,KAAK,KAAK,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK;AAC5E;AAEO,SAAS,gBAAmB,OAAuC;AACxE,MAAI,UAAU,OAAW,QAAO,CAAC;AACjC,MAAI,kBAAkB,KAAK,EAAG,QAAO;AAErC,SAAO,EAAE,SAAS,MAAM;AAC1B;AAEO,SAAS,qBACd,MACA,MACA,OACA,SACA;AACA,QAAM,aAAa,gBAAgB,KAAK;AAExC,MAAI,WAAW,YAAY,QAAW;AACpC,SAAK,KAAK,IAAI,EAAE,IAAI,QAAQ,WAAW,OAAO;AAAA,EAChD;AAEA,MAAI,YAAY,WAAW;AAC3B,aAAW,cAAc,kBAAkB;AACzC,UAAM,YAAY,WAAW,UAAU;AACvC,QAAI,cAAc,QAAW;AAC3B,WAAK,KAAK,IAAI,IAAI,UAAU,EAAE,IAAI,QAAQ,SAAS;AACnD,kBAAY;AAAA,IACd,WAAW,cAAc,QAAW;AAIlC,WAAK,KAAK,IAAI,IAAI,UAAU,EAAE,IAAI,QAAQ,SAAS;AAAA,IACrD;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/layout/responsive.props.d.cts

@@ -0,0 +1,43 @@
+export declare const BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly "2xl": 1536;
+};
+export declare const BREAKPOINT_ORDER: readonly ["sm", "md", "lg", "xl", "2xl"];
+export declare const CONTAINER_WIDTHS: {
+    readonly content: 1080;
+    readonly wide: 1200;
+};
+export declare const DENSITY_MODES: {
+    readonly comfortable: {
+        readonly padding: "md";
+        readonly controlHeight: "xl";
+    };
+    readonly compact: {
+        readonly padding: "sm";
+        readonly controlHeight: "lg";
+    };
+};
+export type BreakpointName = keyof typeof BREAKPOINTS;
+export type BreakpointOrder = (typeof BREAKPOINT_ORDER)[number];
+export type ContainerWidthName = keyof typeof CONTAINER_WIDTHS;
+export type DensityMode = keyof typeof DENSITY_MODES;
+export type ResponsiveBreakpoint = BreakpointName;
+export type ResponsiveCondition = 'initial' | ResponsiveBreakpoint;
+export type ResponsiveValue<T> = T | Partial<Record<ResponsiveCondition, T>>;
+export declare function getBreakpointMinWidth(name: BreakpointName): 640 | 768 | 1024 | 1280 | 1536;
+export declare function getBreakpointQuery(name: BreakpointName): string;
+export declare function getContainerWidth(name: ContainerWidthName): 1080 | 1200;
+export declare function getDensityMode(mode: DensityMode): {
+    readonly padding: "md";
+    readonly controlHeight: "xl";
+} | {
+    readonly padding: "sm";
+    readonly controlHeight: "lg";
+};
+export declare function isResponsiveValue<T>(value: ResponsiveValue<T> | undefined): value is Partial<Record<ResponsiveCondition, T>>;
+export declare function toResponsiveMap<T>(value: ResponsiveValue<T> | undefined): Partial<Record<ResponsiveCondition, T>>;
+export declare function assignResponsiveVars<T>(vars: Record<`--${string}`, string | number | undefined>, name: string, value: ResponsiveValue<T> | undefined, resolve: (next: T) => string | number | undefined): Record<`--${string}`, string | number | undefined>;
+//# sourceMappingURL=responsive.props.d.cts.map

package/dist/layout/responsive.props.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.props.d.cts","sourceRoot":"","sources":["../../src/layout/responsive.props.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;CAAoB,CAAA;AAE5C,eAAO,MAAM,gBAAgB,0CAA2C,CAAA;AAExE,eAAO,MAAM,gBAAgB;;;CAGnB,CAAA;AAEV,eAAO,MAAM,aAAa;;;;;;;;;CAShB,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAA;AACrD,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAC9D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,aAAa,CAAA;AACpD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAA;AACjD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,oBAAoB,CAAA;AAClE,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAA;AAE5E,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,cAAc,kCAEzD;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,cAAc,UAEtD;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,kBAAkB,eAEzD;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW;;;;;;EAE/C;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,KAAK,IAAI,OAAO,CAAC,MAAM,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAE5H;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,2CAKvE;AAED,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,IAAI,EAAE,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EACxD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,EACrC,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,sDAuBlD"}

package/dist/layout/responsive.props.d.mts

@@ -0,0 +1,43 @@
+export declare const BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly "2xl": 1536;
+};
+export declare const BREAKPOINT_ORDER: readonly ["sm", "md", "lg", "xl", "2xl"];
+export declare const CONTAINER_WIDTHS: {
+    readonly content: 1080;
+    readonly wide: 1200;
+};
+export declare const DENSITY_MODES: {
+    readonly comfortable: {
+        readonly padding: "md";
+        readonly controlHeight: "xl";
+    };
+    readonly compact: {
+        readonly padding: "sm";
+        readonly controlHeight: "lg";
+    };
+};
+export type BreakpointName = keyof typeof BREAKPOINTS;
+export type BreakpointOrder = (typeof BREAKPOINT_ORDER)[number];
+export type ContainerWidthName = keyof typeof CONTAINER_WIDTHS;
+export type DensityMode = keyof typeof DENSITY_MODES;
+export type ResponsiveBreakpoint = BreakpointName;
+export type ResponsiveCondition = 'initial' | ResponsiveBreakpoint;
+export type ResponsiveValue<T> = T | Partial<Record<ResponsiveCondition, T>>;
+export declare function getBreakpointMinWidth(name: BreakpointName): 640 | 768 | 1024 | 1280 | 1536;
+export declare function getBreakpointQuery(name: BreakpointName): string;
+export declare function getContainerWidth(name: ContainerWidthName): 1080 | 1200;
+export declare function getDensityMode(mode: DensityMode): {
+    readonly padding: "md";
+    readonly controlHeight: "xl";
+} | {
+    readonly padding: "sm";
+    readonly controlHeight: "lg";
+};
+export declare function isResponsiveValue<T>(value: ResponsiveValue<T> | undefined): value is Partial<Record<ResponsiveCondition, T>>;
+export declare function toResponsiveMap<T>(value: ResponsiveValue<T> | undefined): Partial<Record<ResponsiveCondition, T>>;
+export declare function assignResponsiveVars<T>(vars: Record<`--${string}`, string | number | undefined>, name: string, value: ResponsiveValue<T> | undefined, resolve: (next: T) => string | number | undefined): Record<`--${string}`, string | number | undefined>;
+//# sourceMappingURL=responsive.props.d.mts.map

package/dist/layout/responsive.props.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.props.d.mts","sourceRoot":"","sources":["../../src/layout/responsive.props.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;CAAoB,CAAA;AAE5C,eAAO,MAAM,gBAAgB,0CAA2C,CAAA;AAExE,eAAO,MAAM,gBAAgB;;;CAGnB,CAAA;AAEV,eAAO,MAAM,aAAa;;;;;;;;;CAShB,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAA;AACrD,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAC9D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,aAAa,CAAA;AACpD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAA;AACjD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,oBAAoB,CAAA;AAClE,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAA;AAE5E,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,cAAc,kCAEzD;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,cAAc,UAEtD;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,kBAAkB,eAEzD;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW;;;;;;EAE/C;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,KAAK,IAAI,OAAO,CAAC,MAAM,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAE5H;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,2CAKvE;AAED,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,IAAI,EAAE,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EACxD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,EACrC,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,sDAuBlD"}

package/dist/layout/responsive.props.d.ts

@@ -0,0 +1,43 @@
+export declare const BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly "2xl": 1536;
+};
+export declare const BREAKPOINT_ORDER: readonly ["sm", "md", "lg", "xl", "2xl"];
+export declare const CONTAINER_WIDTHS: {
+    readonly content: 1080;
+    readonly wide: 1200;
+};
+export declare const DENSITY_MODES: {
+    readonly comfortable: {
+        readonly padding: "md";
+        readonly controlHeight: "xl";
+    };
+    readonly compact: {
+        readonly padding: "sm";
+        readonly controlHeight: "lg";
+    };
+};
+export type BreakpointName = keyof typeof BREAKPOINTS;
+export type BreakpointOrder = (typeof BREAKPOINT_ORDER)[number];
+export type ContainerWidthName = keyof typeof CONTAINER_WIDTHS;
+export type DensityMode = keyof typeof DENSITY_MODES;
+export type ResponsiveBreakpoint = BreakpointName;
+export type ResponsiveCondition = 'initial' | ResponsiveBreakpoint;
+export type ResponsiveValue<T> = T | Partial<Record<ResponsiveCondition, T>>;
+export declare function getBreakpointMinWidth(name: BreakpointName): 640 | 768 | 1024 | 1280 | 1536;
+export declare function getBreakpointQuery(name: BreakpointName): string;
+export declare function getContainerWidth(name: ContainerWidthName): 1080 | 1200;
+export declare function getDensityMode(mode: DensityMode): {
+    readonly padding: "md";
+    readonly controlHeight: "xl";
+} | {
+    readonly padding: "sm";
+    readonly controlHeight: "lg";
+};
+export declare function isResponsiveValue<T>(value: ResponsiveValue<T> | undefined): value is Partial<Record<ResponsiveCondition, T>>;
+export declare function toResponsiveMap<T>(value: ResponsiveValue<T> | undefined): Partial<Record<ResponsiveCondition, T>>;
+export declare function assignResponsiveVars<T>(vars: Record<`--${string}`, string | number | undefined>, name: string, value: ResponsiveValue<T> | undefined, resolve: (next: T) => string | number | undefined): Record<`--${string}`, string | number | undefined>;
+//# sourceMappingURL=responsive.props.d.ts.map

package/dist/layout/responsive.props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.props.d.ts","sourceRoot":"","sources":["../../src/layout/responsive.props.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;CAAoB,CAAA;AAE5C,eAAO,MAAM,gBAAgB,0CAA2C,CAAA;AAExE,eAAO,MAAM,gBAAgB;;;CAGnB,CAAA;AAEV,eAAO,MAAM,aAAa;;;;;;;;;CAShB,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAA;AACrD,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAC9D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,aAAa,CAAA;AACpD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAA;AACjD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,oBAAoB,CAAA;AAClE,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAA;AAE5E,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,cAAc,kCAEzD;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,cAAc,UAEtD;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,kBAAkB,eAEzD;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW;;;;;;EAE/C;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,KAAK,IAAI,OAAO,CAAC,MAAM,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAE5H;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,2CAKvE;AAED,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,IAAI,EAAE,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EACxD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,EACrC,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,sDAuBlD"}