@dynatrace/strato-components 0.84.21 → 0.84.42

package/esm/core/styles/useFocusRing.js

@@ -0,0 +1,69 @@
+import {
+  useCallback,
+  useEffect,
+  useState
+} from "react";
+import { focusRingCSS, focusRingFocusWithinCSS } from "./focusRing.sty.js";
+import { _useFocusContext } from "../index.js";
+const variants = [
+  "neutral",
+  "primary",
+  "success",
+  "warning",
+  "critical",
+  "onAccent"
+];
+function useFocusRing(props = {}) {
+  const {
+    variant = "neutral",
+    ignoreModality = false,
+    isMinimal = false,
+    focusWithin = false,
+    disabled = false
+  } = props;
+  const [isFocused, setIsFocused] = useState(false);
+  const { modality } = _useFocusContext();
+  useEffect(() => {
+    if (disabled) {
+      setIsFocused(false);
+    }
+  }, [disabled]);
+  const onBlur = useCallback((e) => {
+    if (e.currentTarget === e.target) {
+      setIsFocused(false);
+    }
+  }, []);
+  const onFocus = useCallback((e) => {
+    if (e.currentTarget === e.target) {
+      setIsFocused(true);
+    }
+  }, []);
+  const focusProps = {
+    onFocus,
+    onBlur
+  };
+  if ((ignoreModality || modality === "keyboard") && isFocused || focusWithin) {
+    if (isMinimal) {
+      return {
+        focusClassName: focusWithin ? focusRingFocusWithinCSS({ minimal: true, variant }) : focusRingCSS({ minimal: true, variant }),
+        isFocusVisible: !focusWithin,
+        focusProps
+      };
+    }
+    return {
+      focusClassName: focusWithin ? focusRingFocusWithinCSS({ minimal: false, variant }) : focusRingCSS({ minimal: false, variant }),
+      isFocusVisible: !focusWithin,
+      focusProps
+    };
+  }
+  return {
+    focusClassName: focusWithin ? focusRingFocusWithinCSS() : focusRingCSS(),
+    isFocusVisible: false,
+    focusProps
+  };
+}
+export {
+  useFocusRing,
+  variants
+};
+//# sourceMappingURL=useFocusRing.js.map

package/esm/core/styles/useFocusRing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/styles/useFocusRing.ts"],
+  "sourcesContent": ["import {\n  FocusEvent,\n  FocusEventHandler,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { focusRingCSS, focusRingFocusWithinCSS } from './focusRing.sty.js';\nimport { _useFocusContext } from '../index.js';\n\nexport type Modality = 'keyboard' | 'pointer' | 'touch' | 'unknown';\n\n/** @internal */\nexport const variants = [\n  'neutral',\n  'primary',\n  'success',\n  'warning',\n  'critical',\n  'onAccent',\n] as const;\n/** @internal */\nexport type VariantType = (typeof variants)[number];\n/** @internal */\nexport type UseFocusRingProps = {\n  /**\n   * A minimal focus outline is available for smaller content elements like links. This variant is applied when set to true.\n   * @defaultValue false\n   */\n  isMinimal?: boolean;\n\n  /**\n   * Whether or not the modality should be ignored, so that the focus ring is also present if users clicks the element (not just by tabbing to it).\n   * @defaultValue false\n   */\n  ignoreModality?: boolean;\n\n  /**\n   * The styling variant of the element.\n   * @defaultValue neutral\n   */\n  variant?: VariantType;\n\n  /**\n   * Apply the focus ring styling if an embedded element gains the focus\n   */\n  focusWithin?: boolean;\n\n  /**\n   * Whether the element is disabled. If disabled changes to true, the focus will be removed.\n   */\n  disabled?: boolean;\n};\n\nexport type FocusRingProps = {\n  /** The focus styles that depend on modality. */\n  focusClassName: string;\n  /** Focus handlers used to manage the focus state. Must be applied to the element that receives the focus.*/\n  focusProps: {\n    onFocus: (e: FocusEvent) => void;\n    onBlur: (e: FocusEvent) => void;\n  };\n  /** Whether or not the element got focus via keyboard. */\n  isFocusVisible: boolean;\n};\n\n/**\n * Custom hook used to determine focus styling depending on modality.\n * Returns the css classes (vanilla) that can be applied to the component in order to show the correct focus outline.\n * @internal\n */\nexport function useFocusRing(props: UseFocusRingProps = {}): FocusRingProps {\n  const {\n    variant = 'neutral',\n    ignoreModality = false,\n    isMinimal = false,\n    focusWithin = false,\n    disabled = false,\n  } = props;\n  const [isFocused, setIsFocused] = useState(false);\n  const { modality } = _useFocusContext();\n\n  useEffect(() => {\n    if (disabled) {\n      setIsFocused(false);\n    }\n  }, [disabled]);\n\n  const onBlur = useCallback<FocusEventHandler>((e) => {\n    // trigger only when the self element is unfocused (stopPropagation)\n    if (e.currentTarget === e.target) {\n      setIsFocused(false);\n    }\n  }, []);\n\n  const onFocus = useCallback<FocusEventHandler>((e) => {\n    // trigger only when the self element is focused (stopPropagation)\n    if (e.currentTarget === e.target) {\n      setIsFocused(true);\n    }\n  }, []);\n\n  const focusProps = {\n    onFocus,\n    onBlur,\n  };\n\n  if (\n    ((ignoreModality || modality === 'keyboard') && isFocused) ||\n    focusWithin\n  ) {\n    if (isMinimal) {\n      return {\n        focusClassName: focusWithin\n          ? focusRingFocusWithinCSS({ minimal: true, variant })\n          : focusRingCSS({ minimal: true, variant }),\n        isFocusVisible: !focusWithin,\n        focusProps,\n      };\n    }\n\n    return {\n      focusClassName: focusWithin\n        ? focusRingFocusWithinCSS({ minimal: false, variant })\n        : focusRingCSS({ minimal: false, variant }),\n      isFocusVisible: !focusWithin,\n      focusProps,\n    };\n  }\n\n  return {\n    focusClassName: focusWithin ? focusRingFocusWithinCSS() : focusRingCSS(),\n    isFocusVisible: false,\n    focusProps,\n  };\n}\n"],
+  "mappings": "AAAA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,+BAA+B;AACtD,SAAS,wBAAwB;AAK1B,MAAM,WAAW;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAmDO,SAAS,aAAa,QAA2B,CAAC,GAAmB;AAC1E,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,EACb,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,SAAS,IAAI,iBAAiB;AAEtC,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,SAAS,YAA+B,CAAC,MAAM;AAEnD,QAAI,EAAE,kBAAkB,EAAE,QAAQ;AAChC,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAA+B,CAAC,MAAM;AAEpD,QAAI,EAAE,kBAAkB,EAAE,QAAQ;AAChC,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,EACF;AAEA,OACI,kBAAkB,aAAa,eAAe,aAChD,aACA;AACA,QAAI,WAAW;AACb,aAAO;AAAA,QACL,gBAAgB,cACZ,wBAAwB,EAAE,SAAS,MAAM,QAAQ,CAAC,IAClD,aAAa,EAAE,SAAS,MAAM,QAAQ,CAAC;AAAA,QAC3C,gBAAgB,CAAC;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,MACL,gBAAgB,cACZ,wBAAwB,EAAE,SAAS,OAAO,QAAQ,CAAC,IACnD,aAAa,EAAE,SAAS,OAAO,QAAQ,CAAC;AAAA,MAC5C,gBAAgB,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,gBAAgB,cAAc,wBAAwB,IAAI,aAAa;AAAA,IACvE,gBAAgB;AAAA,IAChB;AAAA,EACF;AACF;",
+  "names": []
+}

package/esm/core/types/a11y-props.js

@@ -0,0 +1 @@
+//# sourceMappingURL=a11y-props.js.map

package/esm/core/types/a11y-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/core/types/dom.js

@@ -0,0 +1 @@
+//# sourceMappingURL=dom.js.map

package/esm/core/types/dom.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/core/types/focusable-element.js

@@ -0,0 +1 @@
+//# sourceMappingURL=focusable-element.js.map

package/esm/core/types/focusable-element.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/core/types/heading.js

@@ -0,0 +1 @@
+//# sourceMappingURL=heading.js.map

package/esm/core/types/heading.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/core/types/masking-props.js

@@ -0,0 +1 @@
+//# sourceMappingURL=masking-props.js.map

package/esm/core/types/masking-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/core/types/polymorph.js

@@ -0,0 +1 @@
+//# sourceMappingURL=polymorph.js.map

package/esm/core/types/polymorph.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/core/utils/colorUtils.css

@@ -0,0 +1,80 @@
+.colorUtils_colorUtilsCSS_color_critical__k096v44 {
+  --vars_text__k096v40: var(--dt-colors-text-critical-default, #b80031);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-default, #b80031);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-default, #f1cdcf);
+}
+.colorUtils_colorUtilsCSS_color_neutral__k096v45 {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-default, #2b2a58);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-default, #2b2a58);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-default, #d2d3e1);
+}
+.colorUtils_colorUtilsCSS_color_primary__k096v46 {
+  --vars_text__k096v40: var(--dt-colors-text-primary-default, #454cc9);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-default, #454cc9);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-default, #ccd3f3);
+}
+.colorUtils_colorUtilsCSS_color_success__k096v47 {
+  --vars_text__k096v40: var(--dt-colors-text-success-default, #2c6360);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-default, #2c6360);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-default, #cad6d7);
+}
+.colorUtils_colorUtilsCSS_color_warning__k096v48 {
+  --vars_text__k096v40: var(--dt-colors-text-warning-default, #805100);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-default, #805100);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-default, #f4e5d5);
+}
+.colorUtils_colorUtilsCSS_color_onAccent__k096v49 {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+}
+.colorUtils_colorUtilsCSS_compound_0__k096v4e {
+  --vars_text__k096v40: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-accent, #454cc9);
+}
+.colorUtils_colorUtilsCSS_compound_1__k096v4f {
+  --vars_text__k096v40: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-accent, #2c6360);
+}
+.colorUtils_colorUtilsCSS_compound_2__k096v4g {
+  --vars_text__k096v40: var(--dt-colors-text-warning-on-accent-default, #272025);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-on-accent-default, #272025);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-accent, #805100);
+}
+.colorUtils_colorUtilsCSS_compound_3__k096v4h {
+  --vars_text__k096v40: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-accent, #b80031);
+}
+.colorUtils_colorUtilsCSS_compound_4__k096v4i {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-accent, #545587);
+}
+.colorUtils_colorUtilsCSS_compound_5__k096v4j {
+  --vars_text__k096v40: var(--dt-colors-text-primary-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_6__k096v4k {
+  --vars_text__k096v40: var(--dt-colors-text-success-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_7__k096v4l {
+  --vars_text__k096v40: var(--dt-colors-text-warning-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_8__k096v4m {
+  --vars_text__k096v40: var(--dt-colors-text-critical-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_9__k096v4n {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-disabled, #d2d3e180);
+}

package/esm/core/utils/colorUtils.sty.js

@@ -0,0 +1,9 @@
+import "./colorUtils.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var colorUtilsCSS = _7a468({ defaultClassName: "colorUtils__k096v43", variantClassNames: { color: { critical: "colorUtils_colorUtilsCSS_color_critical__k096v44", neutral: "colorUtils_colorUtilsCSS_color_neutral__k096v45", primary: "colorUtils_colorUtilsCSS_color_primary__k096v46", success: "colorUtils_colorUtilsCSS_color_success__k096v47", warning: "colorUtils_colorUtilsCSS_color_warning__k096v48", onAccent: "colorUtils_colorUtilsCSS_color_onAccent__k096v49" }, variant: { "default": "colorUtils_colorUtilsCSS_variant_default__k096v4a", accent: "colorUtils_colorUtilsCSS_variant_accent__k096v4b" }, disabled: { true: "colorUtils_colorUtilsCSS_disabled_true__k096v4c", false: "colorUtils_colorUtilsCSS_disabled_false__k096v4d" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_0__k096v4e"], [{ color: "success", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_1__k096v4f"], [{ color: "warning", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_2__k096v4g"], [{ color: "critical", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_3__k096v4h"], [{ color: "neutral", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_4__k096v4i"], [{ color: "primary", disabled: true }, "colorUtils_colorUtilsCSS_compound_5__k096v4j"], [{ color: "success", disabled: true }, "colorUtils_colorUtilsCSS_compound_6__k096v4k"], [{ color: "warning", disabled: true }, "colorUtils_colorUtilsCSS_compound_7__k096v4l"], [{ color: "critical", disabled: true }, "colorUtils_colorUtilsCSS_compound_8__k096v4m"], [{ color: "neutral", disabled: true }, "colorUtils_colorUtilsCSS_compound_9__k096v4n"]] });
+var colorUtilsVars = { text: "var(--vars_text__k096v40)", icon: "var(--vars_icon__k096v41)", borderColor: "var(--vars_borderColor__k096v42)" };
+export {
+  colorUtilsCSS,
+  colorUtilsVars
+};
+//# sourceMappingURL=colorUtils.sty.js.map

package/esm/core/utils/colorUtils.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/utils/colorUtils.css.ts"],
+  "sourcesContent": ["import './colorUtils.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var colorUtilsCSS = _7a468({defaultClassName:'colorUtils__k096v43',variantClassNames:{color:{critical:'colorUtils_colorUtilsCSS_color_critical__k096v44',neutral:'colorUtils_colorUtilsCSS_color_neutral__k096v45',primary:'colorUtils_colorUtilsCSS_color_primary__k096v46',success:'colorUtils_colorUtilsCSS_color_success__k096v47',warning:'colorUtils_colorUtilsCSS_color_warning__k096v48',onAccent:'colorUtils_colorUtilsCSS_color_onAccent__k096v49'},variant:{'default':'colorUtils_colorUtilsCSS_variant_default__k096v4a',accent:'colorUtils_colorUtilsCSS_variant_accent__k096v4b'},disabled:{true:'colorUtils_colorUtilsCSS_disabled_true__k096v4c',false:'colorUtils_colorUtilsCSS_disabled_false__k096v4d'}},defaultVariants:{},compoundVariants:[[{color:'primary',variant:'accent'},'colorUtils_colorUtilsCSS_compound_0__k096v4e'],[{color:'success',variant:'accent'},'colorUtils_colorUtilsCSS_compound_1__k096v4f'],[{color:'warning',variant:'accent'},'colorUtils_colorUtilsCSS_compound_2__k096v4g'],[{color:'critical',variant:'accent'},'colorUtils_colorUtilsCSS_compound_3__k096v4h'],[{color:'neutral',variant:'accent'},'colorUtils_colorUtilsCSS_compound_4__k096v4i'],[{color:'primary',disabled:true},'colorUtils_colorUtilsCSS_compound_5__k096v4j'],[{color:'success',disabled:true},'colorUtils_colorUtilsCSS_compound_6__k096v4k'],[{color:'warning',disabled:true},'colorUtils_colorUtilsCSS_compound_7__k096v4l'],[{color:'critical',disabled:true},'colorUtils_colorUtilsCSS_compound_8__k096v4m'],[{color:'neutral',disabled:true},'colorUtils_colorUtilsCSS_compound_9__k096v4n']]});\nexport var colorUtilsVars = {text:'var(--vars_text__k096v40)',icon:'var(--vars_icon__k096v41)',borderColor:'var(--vars_borderColor__k096v42)'};"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,uBAAsB,mBAAkB,EAAC,OAAM,EAAC,UAAS,oDAAmD,SAAQ,mDAAkD,SAAQ,mDAAkD,SAAQ,mDAAkD,SAAQ,mDAAkD,UAAS,mDAAkD,GAAE,SAAQ,EAAC,WAAU,qDAAoD,QAAO,mDAAkD,GAAE,UAAS,EAAC,MAAK,mDAAkD,OAAM,mDAAkD,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,SAAQ,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,KAAI,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,8CAA8C,CAAC,EAAC,CAAC;AAC7hD,IAAI,iBAAiB,EAAC,MAAK,6BAA4B,MAAK,6BAA4B,aAAY,mCAAkC;",
+  "names": []
+}

package/esm/index.js

@@ -1,2 +1,4 @@
 export * from "./core/index.js";
+export * from "./layouts/index.js";
+export * from "./typography/index.js";
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './core/index.js';\n"],
-  "mappings": "AAAA,cAAc;",
+  "sourcesContent": ["export * from './core/index.js';\nexport * from './layouts/index.js';\nexport * from './typography/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/esm/layouts/Divider/Divider.css

@@ -0,0 +1,23 @@
+.Divider_dividerCSS__1ljcfp90 {
+  border: none;
+  margin: 0;
+  overflow-wrap: break-word;
+  background-color: var(--vars_borderColor__k096v42);
+}
+.Divider_dividerCSS_orientation_horizontal__1ljcfp91 {
+  width: 100%;
+  height: var(--dt-borders-width-default, 1px);
+}
+.Divider_dividerCSS_orientation_vertical__1ljcfp92 {
+  width: var(--dt-borders-width-default, 1px);
+  height: 100%;
+}
+.Divider_dividerCSS_compound_0__1ljcfp95 {
+  flex-shrink: 0;
+}
+.Divider_dividerCSS_compound_1__1ljcfp96 {
+  flex-shrink: 0;
+  width: var(--dt-borders-width-default, 1px);
+  height: auto;
+  align-self: stretch;
+}

package/esm/layouts/Divider/Divider.js

@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+import { dividerCSS } from "./Divider.sty.js";
+import { colorUtilsCSS } from "../../core/utils/colorUtils.sty.js";
+const Divider = /* @__PURE__ */ forwardRef((props, ref) => {
+  const {
+    orientation = "horizontal",
+    flexItem = true,
+    as = "div",
+    color = "neutral",
+    variant = "default",
+    "data-testid": dataTestId,
+    className: consumerClassName,
+    style: consumerStyle,
+    ...remainingProps
+  } = props;
+  const DividerTag = as;
+  return /* @__PURE__ */ React.createElement(
+    DividerTag,
+    {
+      role: "separator",
+      "aria-orientation": orientation === "vertical" ? orientation : void 0,
+      ref,
+      "data-testid": dataTestId,
+      className: clsx(
+        colorUtilsCSS({ color, variant }),
+        dividerCSS({ orientation, flexItem }),
+        consumerClassName
+      ),
+      style: consumerStyle,
+      ...remainingProps
+    }
+  );
+});
+Divider.displayName = "Divider";
+export {
+  Divider
+};
+//# sourceMappingURL=Divider.js.map

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/index.js

@@ -0,0 +1,5 @@
+import { Divider } from "./Divider/Divider.js";
+export {
+  Divider
+};
+//# sourceMappingURL=index.js.map

package/esm/layouts/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/layouts/index.ts"],
+  "sourcesContent": ["export { Divider } from './Divider/Divider.js';\nexport type { DividerProps } from './Divider/Divider.js';\n"],
+  "mappings": "AAAA,SAAS,eAAe;",
+  "names": []
+}

package/esm/styles/textStyle.css

@@ -0,0 +1,64 @@
+.textStyle_textStyleCSS_compound_0__da9a8v7 {
+  font-family: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
+  font-weight: var(--dt-typography-code-base-default-weight, 400);
+  font-size: var(--dt-typography-code-base-default-size, 14px);
+  line-height: var(--dt-typography-code-base-default-line-height, 1.4285714286);
+  text-decoration: var(--dt-typography-code-base-default-text-decoration, none);
+  text-transform: var(--dt-typography-code-base-default-text-transform, none);
+}
+.textStyle_textStyleCSS_compound_1__da9a8v8 {
+  font-family: var(--dt-typography-code-base-emphasized-family, Roboto Mono,monospace);
+  font-weight: var(--dt-typography-code-base-emphasized-weight, 500);
+  font-size: var(--dt-typography-code-base-emphasized-size, 14px);
+  line-height: var(--dt-typography-code-base-emphasized-line-height, 1.4285714286);
+  text-decoration: var(--dt-typography-code-base-emphasized-text-decoration, none);
+  text-transform: var(--dt-typography-code-base-emphasized-text-transform, none);
+}
+.textStyle_textStyleCSS_compound_2__da9a8v9 {
+  font-family: var(--dt-typography-code-small-default-family, Roboto Mono,monospace);
+  font-weight: var(--dt-typography-code-small-default-weight, 400);
+  font-size: var(--dt-typography-code-small-default-size, 12px);
+  line-height: var(--dt-typography-code-small-default-line-height, 1.333333333);
+  text-decoration: var(--dt-typography-code-small-default-text-decoration, none);
+  text-transform: var(--dt-typography-code-small-default-text-transform, none);
+}
+.textStyle_textStyleCSS_compound_3__da9a8va {
+  font-family: var(--dt-typography-code-small-emphasized-family, Roboto Mono,monospace);
+  font-weight: var(--dt-typography-code-small-emphasized-weight, 500);
+  font-size: var(--dt-typography-code-small-emphasized-size, 12px);
+  line-height: var(--dt-typography-code-small-emphasized-line-height, 1.333333333);
+  text-decoration: var(--dt-typography-code-small-emphasized-text-decoration, none);
+  text-transform: var(--dt-typography-code-small-emphasized-text-transform, none);
+}
+.textStyle_textStyleCSS_compound_4__da9a8vb {
+  font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
+  font-weight: var(--dt-typography-text-base-default-weight, 400);
+  font-size: var(--dt-typography-text-base-default-size, 14px);
+  line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
+  text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
+  text-transform: var(--dt-typography-text-base-default-text-transform, none);
+}
+.textStyle_textStyleCSS_compound_5__da9a8vc {
+  font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
+  font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
+  font-size: var(--dt-typography-text-base-emphasized-size, 14px);
+  line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
+  text-decoration: var(--dt-typography-text-base-emphasized-text-decoration, none);
+  text-transform: var(--dt-typography-text-base-emphasized-text-transform, none);
+}
+.textStyle_textStyleCSS_compound_6__da9a8vd {
+  font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
+  font-weight: var(--dt-typography-text-small-default-weight, 400);
+  font-size: var(--dt-typography-text-small-default-size, 12px);
+  line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
+  text-decoration: var(--dt-typography-text-small-default-text-decoration, none);
+  text-transform: var(--dt-typography-text-small-default-text-transform, none);
+}
+.textStyle_textStyleCSS_compound_7__da9a8ve {
+  font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
+  font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
+  font-size: var(--dt-typography-text-small-emphasized-size, 12px);
+  line-height: var(--dt-typography-text-small-emphasized-line-height, 1.333333333);
+  text-decoration: var(--dt-typography-text-small-emphasized-text-decoration, none);
+  text-transform: var(--dt-typography-text-small-emphasized-text-transform, none);
+}

package/esm/styles/textStyle.sty.js

@@ -0,0 +1,7 @@
+import "./textStyle.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var textStyleCSS = _7a468({ defaultClassName: "textStyle__da9a8v0", variantClassNames: { fontStyle: { code: "textStyle_textStyleCSS_fontStyle_code__da9a8v1", text: "textStyle_textStyleCSS_fontStyle_text__da9a8v2" }, textStyle: { base: "textStyle_textStyleCSS_textStyle_base__da9a8v3", "base-emphasized": "textStyle_textStyleCSS_textStyle_base-emphasized__da9a8v4", small: "textStyle_textStyleCSS_textStyle_small__da9a8v5", "small-emphasized": "textStyle_textStyleCSS_textStyle_small-emphasized__da9a8v6" } }, defaultVariants: { fontStyle: "text", textStyle: "base" }, compoundVariants: [[{ fontStyle: "code", textStyle: "base" }, "textStyle_textStyleCSS_compound_0__da9a8v7"], [{ fontStyle: "code", textStyle: "base-emphasized" }, "textStyle_textStyleCSS_compound_1__da9a8v8"], [{ fontStyle: "code", textStyle: "small" }, "textStyle_textStyleCSS_compound_2__da9a8v9"], [{ fontStyle: "code", textStyle: "small-emphasized" }, "textStyle_textStyleCSS_compound_3__da9a8va"], [{ fontStyle: "text", textStyle: "base" }, "textStyle_textStyleCSS_compound_4__da9a8vb"], [{ fontStyle: "text", textStyle: "base-emphasized" }, "textStyle_textStyleCSS_compound_5__da9a8vc"], [{ fontStyle: "text", textStyle: "small" }, "textStyle_textStyleCSS_compound_6__da9a8vd"], [{ fontStyle: "text", textStyle: "small-emphasized" }, "textStyle_textStyleCSS_compound_7__da9a8ve"]] });
+export {
+  textStyleCSS
+};
+//# sourceMappingURL=textStyle.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styles/textStyle.css.ts"],
+  "sourcesContent": ["import './textStyle.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var textStyleCSS = _7a468({defaultClassName:'textStyle__da9a8v0',variantClassNames:{fontStyle:{code:'textStyle_textStyleCSS_fontStyle_code__da9a8v1',text:'textStyle_textStyleCSS_fontStyle_text__da9a8v2'},textStyle:{base:'textStyle_textStyleCSS_textStyle_base__da9a8v3','base-emphasized':'textStyle_textStyleCSS_textStyle_base-emphasized__da9a8v4',small:'textStyle_textStyleCSS_textStyle_small__da9a8v5','small-emphasized':'textStyle_textStyleCSS_textStyle_small-emphasized__da9a8v6'}},defaultVariants:{fontStyle:'text',textStyle:'base'},compoundVariants:[[{fontStyle:'code',textStyle:'base'},'textStyle_textStyleCSS_compound_0__da9a8v7'],[{fontStyle:'code',textStyle:'base-emphasized'},'textStyle_textStyleCSS_compound_1__da9a8v8'],[{fontStyle:'code',textStyle:'small'},'textStyle_textStyleCSS_compound_2__da9a8v9'],[{fontStyle:'code',textStyle:'small-emphasized'},'textStyle_textStyleCSS_compound_3__da9a8va'],[{fontStyle:'text',textStyle:'base'},'textStyle_textStyleCSS_compound_4__da9a8vb'],[{fontStyle:'text',textStyle:'base-emphasized'},'textStyle_textStyleCSS_compound_5__da9a8vc'],[{fontStyle:'text',textStyle:'small'},'textStyle_textStyleCSS_compound_6__da9a8vd'],[{fontStyle:'text',textStyle:'small-emphasized'},'textStyle_textStyleCSS_compound_7__da9a8ve']]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,sBAAqB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kDAAiD,MAAK,iDAAgD,GAAE,WAAU,EAAC,MAAK,kDAAiD,mBAAkB,6DAA4D,OAAM,mDAAkD,oBAAmB,6DAA4D,EAAC,GAAE,iBAAgB,EAAC,WAAU,QAAO,WAAU,OAAM,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,QAAO,WAAU,OAAM,GAAE,4CAA4C,GAAE,CAAC,EAAC,WAAU,QAAO,WAAU,kBAAiB,GAAE,4CAA4C,GAAE,CAAC,EAAC,WAAU,QAAO,WAAU,QAAO,GAAE,4CAA4C,GAAE,CAAC,EAAC,WAAU,QAAO,WAAU,mBAAkB,GAAE,4CAA4C,GAAE,CAAC,EAAC,WAAU,QAAO,WAAU,OAAM,GAAE,4CAA4C,GAAE,CAAC,EAAC,WAAU,QAAO,WAAU,kBAAiB,GAAE,4CAA4C,GAAE,CAAC,EAAC,WAAU,QAAO,WAAU,QAAO,GAAE,4CAA4C,GAAE,CAAC,EAAC,WAAU,QAAO,WAAU,mBAAkB,GAAE,4CAA4C,CAAC,EAAC,CAAC;",
+  "names": []
+}

package/esm/typography/BlockQuote/Blockquote.css

@@ -0,0 +1,17 @@
+.Blockquote_blockquoteCSS__18f615k0 {
+  position: relative;
+  margin: var(--dt-spacings-size-0, 0);
+  padding-left: var(--dt-spacings-size-40, 40px);
+  word-break: normal;
+  overflow-wrap: anywhere;
+}
+.Blockquote_blockquoteCSS__18f615k0:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: calc(var(--dt-spacings-size-40, 40px) - var(--dt-spacings-size-12, 12px));
+  width: var(--dt-borders-width-emphasized, 2px);
+  border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
+  height: 100%;
+  background: var(--dt-colors-border-neutral-default, #d2d3e1);
+}

package/esm/typography/BlockQuote/Blockquote.js

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+import { blockquoteCSS } from "./Blockquote.sty.js";
+const Blockquote = /* @__PURE__ */ forwardRef((props, ref) => {
+  const {
+    children,
+    cite,
+    "data-testid": dataTestId,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow,
+    className: consumerClassName,
+    style: consumerStyle,
+    ...remainingProps
+  } = props;
+  return /* @__PURE__ */ React.createElement(
+    "blockquote",
+    {
+      cite,
+      ref,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      className: clsx(blockquoteCSS, consumerClassName),
+      style: consumerStyle,
+      ...remainingProps
+    },
+    children
+  );
+});
+Blockquote.displayName = "Blockquote";
+export {
+  Blockquote
+};
+//# sourceMappingURL=Blockquote.js.map

package/esm/typography/BlockQuote/Blockquote.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/typography/BlockQuote/Blockquote.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { blockquoteCSS } from './Blockquote.sty.js';\nimport type {\n  DataTestId,\n  StylingProps,\n  WithChildren,\n} from '../../core/index.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\n\n/**\n * The props for the Blockquote component.\n * @public\n */\nexport interface BlockquoteProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * A URL that designates a source document or message for the information quoted.\n   * This attribute is intended to point to information explaining the context for the quoted content.\n   */\n  cite?: string;\n}\n\n/**\n * @public\n * The `Blockquote` component wraps longer text blocks and indicates that the passage is quoted from another source.\n */\nexport const Blockquote = /* @__PURE__ */ forwardRef<\n  HTMLQuoteElement,\n  BlockquoteProps\n>((props, ref) => {\n  const {\n    children,\n    cite,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  return (\n    <blockquote\n      cite={cite}\n      ref={ref}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(blockquoteCSS, consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n    >\n      {children}\n    </blockquote>\n  );\n});\n\n(Blockquote as typeof Blockquote & { displayName: string }).displayName =\n  'Blockquote';\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,qBAAqB;AA4BvB,MAAM,aAA6B,2BAGxC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,eAAe,iBAAiB;AAAA,MAChD,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
+  "names": []
+}

package/esm/typography/BlockQuote/Blockquote.sty.js

@@ -0,0 +1,6 @@
+import "./Blockquote.css";
+var blockquoteCSS = "Blockquote_blockquoteCSS__18f615k0";
+export {
+  blockquoteCSS
+};
+//# sourceMappingURL=Blockquote.sty.js.map

package/esm/typography/BlockQuote/Blockquote.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/typography/BlockQuote/Blockquote.css.ts"],
+  "sourcesContent": ["import './Blockquote.css';\nexport var blockquoteCSS = 'Blockquote_blockquoteCSS__18f615k0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
+  "names": []
+}

package/esm/typography/Code/Code.css

@@ -0,0 +1,16 @@
+.Code_codeCSS__1lx0ryl0 {
+  background: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+  padding-top: var(--dt-spacings-size-0, 0);
+  padding-bottom: var(--dt-spacings-size-0, 0);
+  padding-left: var(--dt-spacings-size-4, 4px);
+  padding-right: var(--dt-spacings-size-4, 4px);
+  border-radius: var(--dt-borders-radius-field-subdued, 4px);
+  overflow-wrap: break-word;
+  font-style: normal;
+  font-family: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
+  font-weight: var(--dt-typography-code-base-default-weight, 400);
+  text-transform: var(--dt-typography-code-base-default-text-transform, none);
+  text-decoration: var(--dt-typography-code-base-default-text-decoration, none);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}

package/esm/typography/Code/Code.js

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+import { codeCSS } from "./Code.sty.js";
+const Code = /* @__PURE__ */ forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      className: consumerClassName,
+      style: consumerStyle,
+      ...remainingProps
+    } = props;
+    return /* @__PURE__ */ React.createElement(
+      "code",
+      {
+        ref,
+        "data-testid": dataTestId,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow,
+        className: clsx(codeCSS, consumerClassName),
+        style: consumerStyle,
+        ...remainingProps
+      },
+      children
+    );
+  }
+);
+Code.displayName = "Code";
+export {
+  Code
+};
+//# sourceMappingURL=Code.js.map