@dynatrace/strato-components 0.85.0 → 0.85.21

package/esm/typography/text/Text.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/typography/text/Text.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { type ElementType, type ReactElement, forwardRef } from 'react';\n\nimport { textCSS } from './Text.sty.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.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 { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * The props for the text component without any props coming from polymorphing.\n * @public\n */\nexport interface TextOwnProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** Sets the text style. Variants include \"base\", \"base-emphasized\", etc. */\n  textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';\n  /** Sets the font style. Can either be \"text\" or \"code\" */\n  fontStyle?: 'text' | 'code';\n}\n\n/**\n * @public\n * Combined props for the text component - polymorphing and own props. */\nexport type TextProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  TextOwnProps\n>;\n\n/**\n * Use the `Text` component for text that is rendered without any semantic markup.\n * @public\n */\nexport const Text: <E extends ElementType = 'span'>(\n  props: TextProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      textStyle,\n      fontStyle,\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    }: TextProps<E>,\n    ref: typeof remainingProps.ref,\n  ) => {\n    const TextTag = as || 'span';\n\n    let ellipsis: undefined | 'singleLine' | 'multiLine';\n\n    return (\n      <TextTag\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={ref}\n        className={clsx([\n          textCSS({ ellipsis }),\n          (fontStyle || textStyle) && textStyleCSS({ fontStyle, textStyle }),\n          consumerClassName,\n        ])}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {children}\n      </TextTag>\n    );\n  },\n);\n\n(Text as typeof Text & { displayName: string }).displayName = 'Text';\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAA8C,kBAAkB;AAEvE,SAAS,eAAe;AAQxB,SAAS,oBAAoB;AA+BtB,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU,MAAM;AAEtB,QAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB;AAAA,QACA,WAAW,KAAK;AAAA,UACd,QAAQ,EAAE,SAAS,CAAC;AAAA,WACnB,aAAa,cAAc,aAAa,EAAE,WAAW,UAAU,CAAC;AAAA,UACjE;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
+  "names": []
+}

package/esm/typography/{Text → text}/Text.sty.js

@@ -1,6 +1,6 @@
 import "./Text.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var textCSS = _7a468({ defaultClassName: "Text_textCSS__ty6wu50", variantClassNames: { ellipsis: { singleLine: "Text_textCSS_ellipsis_singleLine__ty6wu51", multiLine: "Text_textCSS_ellipsis_multiLine__ty6wu52" } }, defaultVariants: {}, compoundVariants: [] });
+var textCSS = _7a468({ defaultClassName: "Text_textCSS__rup8ap0", variantClassNames: { ellipsis: { singleLine: "Text_textCSS_ellipsis_singleLine__rup8ap1", multiLine: "Text_textCSS_ellipsis_multiLine__rup8ap2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   textCSS
 };

package/esm/typography/{Text → text}/Text.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/typography/Text/Text.css.ts"],
-  "sourcesContent": ["import './Text.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var textCSS = _7a468({defaultClassName:'Text_textCSS__ty6wu50',variantClassNames:{ellipsis:{singleLine:'Text_textCSS_ellipsis_singleLine__ty6wu51',multiLine:'Text_textCSS_ellipsis_multiLine__ty6wu52'}},defaultVariants:{},compoundVariants:[]});"],
+  "sources": ["../../../../src/typography/text/Text.css.ts"],
+  "sourcesContent": ["import './Text.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var textCSS = _7a468({defaultClassName:'Text_textCSS__rup8ap0',variantClassNames:{ellipsis:{singleLine:'Text_textCSS_ellipsis_singleLine__rup8ap1',multiLine:'Text_textCSS_ellipsis_multiLine__rup8ap2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU,OAAO,EAAC,kBAAiB,yBAAwB,mBAAkB,EAAC,UAAS,EAAC,YAAW,6CAA4C,WAAU,2CAA0C,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/{typography/TextEllipsis → esm/typography/text-ellipsis}/TextEllipsis.css

@@ -1,4 +1,4 @@
-.TextEllipsis_textEllipsisCSS__1n6xzhd0 {
+.TextEllipsis_textEllipsisCSS__1mnpbqs0 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,14 +9,14 @@
   text-decoration: inherit;
   width: 100%;
 }
-.TextEllipsis_textEllipsisCSS_truncationMode_start__1n6xzhd1 {
+.TextEllipsis_textEllipsisCSS_truncationMode_start__1mnpbqs1 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-.TextEllipsis_textEllipsisCSS_truncationMode_middle__1n6xzhd2 {
+.TextEllipsis_textEllipsisCSS_truncationMode_middle__1mnpbqs2 {
   text-overflow: clip;
 }
-.TextEllipsis_textEllipsisCSS_truncationMode_end__1n6xzhd3 {
+.TextEllipsis_textEllipsisCSS_truncationMode_end__1mnpbqs3 {
   text-overflow: ellipsis;
 }

package/esm/typography/text-ellipsis/TextEllipsis.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/typography/text-ellipsis/TextEllipsis.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, {\n  forwardRef,\n  HTMLAttributes,\n  RefObject,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { textEllipsisCSS } from './TextEllipsis.sty.js';\nimport { _useFontsUpdated } from '../../core/hooks/useFontsUpdated.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type _Font } from '../utils.js';\nimport { _centerEllipsizeText } from '../utils.js';\n\n/**\n * Available modes for how overly long text is truncated and where the ellipsis is placed.\n * @internal\n */\nexport type _TruncationMode = 'start' | 'middle' | 'end';\n\n/**\n * The props for the TextEllipsis component.\n * @public\n */\nexport interface TextEllipsisProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** The children (as text) passed to the component. */\n  children: string;\n  /**\n   * The mode used for for truncating the text, either at the start, in the middle or at the end.\n   * @defaultValue 'end'\n   */\n  truncationMode?: 'start' | 'middle' | 'end';\n  /** Gets called when text needs to get truncated due to lack of horizontal space. */\n  onTextOverflow?: (ellipsized: boolean) => void;\n}\n\n/**\n * Returns an object containing all font-related CSS properties from\n * a given DOM element that are relevant for rendering formatted text\n * in a 2D canvas context.\n *\n * @param textWrapper - The HTML element to extract the CSS properties from\n */\nfunction getFontProps(textWrapper: HTMLSpanElement): _Font {\n  const computedStyle = window.getComputedStyle(textWrapper, null);\n\n  return {\n    fontStyle: computedStyle.getPropertyValue('font-style'),\n    fontWeight: computedStyle.getPropertyValue('font-weight'),\n    fontSize: computedStyle.getPropertyValue('font-size'),\n    fontFamily: computedStyle.getPropertyValue('font-family'),\n  };\n}\n\n/**\n * Determines whether a CSS text-ellipsis is currently rendered in a container.\n * Note: `containerWidth` is only passed to avoid unnecessary reflows by calling `getBoundingClientRect()`\n */\nfunction isNativeEllipsisActive(\n  textWrapper: HTMLSpanElement,\n  containerWidth: number,\n): boolean {\n  const textWidth =\n    Math.floor(textWrapper.getBoundingClientRect().width * 100) / 100;\n\n  return textWidth > containerWidth;\n}\n\n/**\n * Detects whether a given formatted text has enough space within its\n * parent container and applies or removes an ellipsis accordingly.\n *\n * @param originalText - The text to be truncated if its width exceeds <code>maxWidthInPx</code>\n * @param truncationMode - The mode used for for truncating the text, either at the start, in the middle or at the end\n * @param containerRef - Object ref pointing towards the root element of the TextEllipsis component\n * @param wasEllipsized - Whether an ellipsis was applied during the last render cycle\n * @param onTextOverflow - Callback that gets called whenever the state of the ellipsis changes since the last render cycle\n */\nfunction renderEllipsizedText(\n  originalText: string,\n  truncationMode: TextEllipsisProps['truncationMode'],\n  containerRef: RefObject<HTMLSpanElement>,\n  wasEllipsized: boolean,\n  onTextOverflow?: (ellipsized: boolean) => void,\n): boolean {\n  const containerElement = containerRef.current;\n  const textWrapper: HTMLSpanElement | null =\n    (containerElement?.firstElementChild as HTMLSpanElement) || null;\n\n  if (containerElement !== null && textWrapper !== null) {\n    if (textWrapper.textContent !== originalText) {\n      textWrapper.textContent = originalText; // always reset to full text before measuring container width\n    }\n\n    const containerWidth =\n      Math.ceil(containerElement.getBoundingClientRect().width * 100) / 100;\n\n    if (truncationMode === 'middle') {\n      if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n        const ellipsizedText = _centerEllipsizeText(\n          originalText,\n          getFontProps(textWrapper),\n          containerWidth,\n        );\n        textWrapper.textContent = ellipsizedText;\n\n        if (ellipsizedText !== originalText) {\n          if (onTextOverflow && !wasEllipsized) {\n            onTextOverflow(true);\n          }\n\n          return true;\n        }\n      }\n\n      if (onTextOverflow && wasEllipsized) {\n        onTextOverflow(false);\n      }\n    } else if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n      if (onTextOverflow && !wasEllipsized) {\n        onTextOverflow(true);\n      }\n\n      return true;\n    } else if (onTextOverflow && wasEllipsized) {\n      onTextOverflow(false);\n    }\n  }\n\n  return false;\n}\n\nconst ComputedTextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  TextEllipsisProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    truncationMode = 'end',\n    onTextOverflow,\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  // resize observer is needed to re-render the component in case of resizing\n  const { ref: observerContainerRef } = useResizeObserver<HTMLSpanElement>();\n  const containerRef = useRef<HTMLSpanElement | null>(null);\n  const ellipsisStateRef = useRef<boolean>(false);\n  const mergedRef = useMergeRefs<HTMLSpanElement | null>([\n    observerContainerRef,\n    (instance: HTMLSpanElement) => {\n      containerRef.current = instance;\n    },\n    forwardedRef,\n  ]);\n  const containerWidth = containerRef.current?.getBoundingClientRect().width;\n  const fontsUpdated = _useFontsUpdated();\n\n  useLayoutEffect(() => {\n    ellipsisStateRef.current = renderEllipsizedText(\n      children,\n      truncationMode,\n      containerRef,\n      ellipsisStateRef.current,\n      onTextOverflow,\n    );\n  }, [containerWidth, children, truncationMode, fontsUpdated, onTextOverflow]);\n\n  return (\n    <span\n      ref={mergedRef}\n      aria-label={children}\n      data-ellipsis\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n    >\n      <span>{children}</span>\n    </span>\n  );\n});\n\nconst CssTextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  TextEllipsisProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    truncationMode = 'end',\n    onTextOverflow,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  return (\n    <span\n      ref={forwardedRef}\n      aria-label={children}\n      data-ellipsis\n      data-testid={dataTestId}\n      className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n    >\n      <span>{children}</span>\n    </span>\n  );\n});\n\n/**\n * Use the `TextEllipsis` component to truncate text and show an ellipsis whenever\n * there is insufficient space to render the entire text. While some of our Strato\n * components provide ellipsis out of the box, you need to take care of this yourself\n * when writing your own components.\n * @public\n */\nexport const TextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  TextEllipsisProps\n>((props, forwardedRef) => {\n  // in case onTextOverflow is not defined and the ellipsis is start or end\n  // we can use css only which is significantly more performant\n  const cssOnlyEllipsis =\n    !props.onTextOverflow && props.truncationMode !== 'middle';\n\n  return cssOnlyEllipsis ? (\n    <CssTextEllipsis ref={forwardedRef} {...props} />\n  ) : (\n    <ComputedTextEllipsis ref={forwardedRef} {...props} />\n  );\n});\n\n(TextEllipsis as typeof TextEllipsis & { displayName: string }).displayName =\n  'TextEllipsis';\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO;AAAA,EACL;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,OAAO,uBAAuB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAK7B,SAAS,4BAA4B;AAmCrC,SAAS,aAAa,aAAqC;AACzD,QAAM,gBAAgB,OAAO,iBAAiB,aAAa,IAAI;AAE/D,SAAO;AAAA,IACL,WAAW,cAAc,iBAAiB,YAAY;AAAA,IACtD,YAAY,cAAc,iBAAiB,aAAa;AAAA,IACxD,UAAU,cAAc,iBAAiB,WAAW;AAAA,IACpD,YAAY,cAAc,iBAAiB,aAAa;AAAA,EAC1D;AACF;AAMA,SAAS,uBACP,aACA,gBACS;AACT,QAAM,YACJ,KAAK,MAAM,YAAY,sBAAsB,EAAE,QAAQ,GAAG,IAAI;AAEhE,SAAO,YAAY;AACrB;AAYA,SAAS,qBACP,cACA,gBACA,cACA,eACA,gBACS;AACT,QAAM,mBAAmB,aAAa;AACtC,QAAM,cACH,kBAAkB,qBAAyC;AAE9D,MAAI,qBAAqB,QAAQ,gBAAgB,MAAM;AACrD,QAAI,YAAY,gBAAgB,cAAc;AAC5C,kBAAY,cAAc;AAAA,IAC5B;AAEA,UAAM,iBACJ,KAAK,KAAK,iBAAiB,sBAAsB,EAAE,QAAQ,GAAG,IAAI;AAEpE,QAAI,mBAAmB,UAAU;AAC/B,UAAI,uBAAuB,aAAa,cAAc,GAAG;AACvD,cAAM,iBAAiB;AAAA,UACrB;AAAA,UACA,aAAa,WAAW;AAAA,UACxB;AAAA,QACF;AACA,oBAAY,cAAc;AAE1B,YAAI,mBAAmB,cAAc;AACnC,cAAI,kBAAkB,CAAC,eAAe;AACpC,2BAAe,IAAI;AAAA,UACrB;AAEA,iBAAO;AAAA,QACT;AAAA,MACF;AAEA,UAAI,kBAAkB,eAAe;AACnC,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF,WAAW,uBAAuB,aAAa,cAAc,GAAG;AAC9D,UAAI,kBAAkB,CAAC,eAAe;AACpC,uBAAe,IAAI;AAAA,MACrB;AAEA,aAAO;AAAA,IACT,WAAW,kBAAkB,eAAe;AAC1C,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF;AAEA,SAAO;AACT;AAEA,MAAM,uBAAuC,2BAG3C,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AAGJ,QAAM,EAAE,KAAK,qBAAqB,IAAI,kBAAmC;AACzE,QAAM,eAAe,OAA+B,IAAI;AACxD,QAAM,mBAAmB,OAAgB,KAAK;AAC9C,QAAM,YAAY,aAAqC;AAAA,IACrD;AAAA,IACA,CAAC,aAA8B;AAC7B,mBAAa,UAAU;AAAA,IACzB;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,iBAAiB,aAAa,SAAS,sBAAsB,EAAE;AACrE,QAAM,eAAe,iBAAiB;AAEtC,kBAAgB,MAAM;AACpB,qBAAiB,UAAU;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,gBAAgB,UAAU,gBAAgB,cAAc,cAAc,CAAC;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAa;AAAA,MACb,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,gBAAgB,EAAE,eAAe,CAAC,GAAG,iBAAiB;AAAA,MACtE,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,IAEJ,oCAAC,cAAM,QAAS;AAAA,EAClB;AAEJ,CAAC;AAED,MAAM,kBAAkC,2BAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAa;AAAA,MACb,eAAa;AAAA,MACb,WAAW,KAAK,gBAAgB,EAAE,eAAe,CAAC,GAAG,iBAAiB;AAAA,MACtE,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,IAEJ,oCAAC,cAAM,QAAS;AAAA,EAClB;AAEJ,CAAC;AASM,MAAM,eAA+B,2BAG1C,CAAC,OAAO,iBAAiB;AAGzB,QAAM,kBACJ,CAAC,MAAM,kBAAkB,MAAM,mBAAmB;AAEpD,SAAO,kBACL,oCAAC,mBAAgB,KAAK,cAAe,GAAG,OAAO,IAE/C,oCAAC,wBAAqB,KAAK,cAAe,GAAG,OAAO;AAExD,CAAC;AAEA,aAA+D,cAC9D;",
+  "names": []
+}

package/esm/typography/text-ellipsis/TextEllipsis.sty.js

@@ -0,0 +1,7 @@
+import "./TextEllipsis.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var textEllipsisCSS = _7a468({ defaultClassName: "TextEllipsis_textEllipsisCSS__1mnpbqs0", variantClassNames: { truncationMode: { start: "TextEllipsis_textEllipsisCSS_truncationMode_start__1mnpbqs1", middle: "TextEllipsis_textEllipsisCSS_truncationMode_middle__1mnpbqs2", end: "TextEllipsis_textEllipsisCSS_truncationMode_end__1mnpbqs3" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  textEllipsisCSS
+};
+//# sourceMappingURL=TextEllipsis.sty.js.map

package/esm/typography/{TextEllipsis → text-ellipsis}/TextEllipsis.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/typography/TextEllipsis/TextEllipsis.css.ts"],
-  "sourcesContent": ["import './TextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var textEllipsisCSS = _7a468({defaultClassName:'TextEllipsis_textEllipsisCSS__1n6xzhd0',variantClassNames:{truncationMode:{start:'TextEllipsis_textEllipsisCSS_truncationMode_start__1n6xzhd1',middle:'TextEllipsis_textEllipsisCSS_truncationMode_middle__1n6xzhd2',end:'TextEllipsis_textEllipsisCSS_truncationMode_end__1n6xzhd3'}},defaultVariants:{},compoundVariants:[]});"],
+  "sources": ["../../../../src/typography/text-ellipsis/TextEllipsis.css.ts"],
+  "sourcesContent": ["import './TextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var textEllipsisCSS = _7a468({defaultClassName:'TextEllipsis_textEllipsisCSS__1mnpbqs0',variantClassNames:{truncationMode:{start:'TextEllipsis_textEllipsisCSS_truncationMode_start__1mnpbqs1',middle:'TextEllipsis_textEllipsisCSS_truncationMode_middle__1mnpbqs2',end:'TextEllipsis_textEllipsisCSS_truncationMode_end__1mnpbqs3'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,0CAAyC,mBAAkB,EAAC,gBAAe,EAAC,OAAM,+DAA8D,QAAO,gEAA+D,KAAI,4DAA2D,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/index.d.ts

@@ -1,3 +1,4 @@
+export * from './buttons/index.js';
 export * from './core/index.js';
 export * from './content/index.js';
 export * from './layouts/index.js';

package/index.js

@@ -14,6 +14,7 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./buttons/index.js"), module.exports);
 __reExport(src_exports, require("./core/index.js"), module.exports);
 __reExport(src_exports, require("./content/index.js"), module.exports);
 __reExport(src_exports, require("./layouts/index.js"), module.exports);

package/lang/en.json

@@ -5,10 +5,22 @@
       "value": "Loading"
     }
   ],
+  "JQOGuaGgqJObmSY1": [
+    {
+      "type": 0,
+      "value": "Open with"
+    }
+  ],
   "JzYy8MUVfPcyf4l5": [
     {
       "type": 0,
       "value": "Opening the link in a new window"
     }
+  ],
+  "cycz+bYG+VH7Of4e": [
+    {
+      "type": 0,
+      "value": "Loading"
+    }
   ]
 }

package/lang/ja.json

@@ -1,2 +1,26 @@
 {
+  "3J6qHQEUwDxvZuIl": [
+    {
+      "type": 0,
+      "value": "ロードしています"
+    }
+  ],
+  "JQOGuaGgqJObmSY1": [
+    {
+      "type": 0,
+      "value": "プログラムから開く"
+    }
+  ],
+  "JzYy8MUVfPcyf4l5": [
+    {
+      "type": 0,
+      "value": "リンクを新しいウィンドウで開く"
+    }
+  ],
+  "cycz+bYG+VH7Of4e": [
+    {
+      "type": 0,
+      "value": "ロードしています"
+    }
+  ]
 }

package/lang/uncompiled/en.json

@@ -3,8 +3,16 @@
     "notes": "Default label for the progress-bar.",
     "translation": "Loading"
   },
+  "JQOGuaGgqJObmSY1": {
+    "notes": "Intent button open label",
+    "translation": "Open with"
+  },
   "JzYy8MUVfPcyf4l5": {
     "notes": "External link icon that describes the external link icon",
     "translation": "Opening the link in a new window"
+  },
+  "cycz+bYG+VH7Of4e": {
+    "notes": "Label for the loading state.",
+    "translation": "Loading"
   }
 }

package/lang/uncompiled/ja.json

@@ -1 +1,14 @@
-{}
+{
+  "3J6qHQEUwDxvZuIl": {
+    "translation": "ロードしています"
+  },
+  "JQOGuaGgqJObmSY1": {
+    "translation": "プログラムから開く"
+  },
+  "JzYy8MUVfPcyf4l5": {
+    "translation": "リンクを新しいウィンドウで開く"
+  },
+  "cycz+bYG+VH7Of4e": {
+    "translation": "ロードしています"
+  }
+}

package/layouts/{Divider → divider}/Divider.css

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

package/layouts/{Divider → divider}/Divider.sty.js

@@ -23,4 +23,4 @@ module.exports = __toCommonJS(Divider_css_exports);
 var import_colorUtils_css_ts_vanilla = require("../../core/utils/colorUtils.css");
 var import_Divider_css_ts_vanilla = require("./Divider.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var dividerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ 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"]] });
+var dividerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Divider_dividerCSS__1thxv8m0", variantClassNames: { orientation: { horizontal: "Divider_dividerCSS_orientation_horizontal__1thxv8m1", vertical: "Divider_dividerCSS_orientation_vertical__1thxv8m2" }, flexItem: { true: "Divider_dividerCSS_flexItem_true__1thxv8m3", false: "Divider_dividerCSS_flexItem_false__1thxv8m4" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "Divider_dividerCSS_compound_0__1thxv8m5"], [{ orientation: "vertical", flexItem: true }, "Divider_dividerCSS_compound_1__1thxv8m6"]] });

package/layouts/helpers/spacingToCss.d.ts

@@ -0,0 +1,6 @@
+import { type MarginProperties } from '../../styles/sprinkle-properties.js';
+/**
+ * Converts a spacing token to its corresponding CSS value.
+ * @internal
+ */
+export declare const spacingToCss: (spacingToken: MarginProperties | undefined) => number | string | undefined;

package/layouts/helpers/spacingToCss.js

@@ -0,0 +1,29 @@
+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 spacingToCss_exports = {};
+__export(spacingToCss_exports, {
+  spacingToCss: () => spacingToCss
+});
+module.exports = __toCommonJS(spacingToCss_exports);
+var import_sprinkle_properties = require("../../styles/sprinkle-properties.js");
+const spacingToCss = (spacingToken) => {
+  if (spacingToken === void 0) {
+    return void 0;
+  }
+  return import_sprinkle_properties.marginProperties[spacingToken];
+};

package/layouts/hooks/useLayoutSizeProps.d.ts

@@ -0,0 +1,6 @@
+import type { LayoutSizeProps, LayoutSizeCSS } from '../types/layout.types.js';
+/**
+ * Returns the layout size properties.
+ * @internal
+ */
+export declare const useLayoutSizeProps: (props: LayoutSizeProps) => LayoutSizeCSS;

package/layouts/hooks/useLayoutSizeProps.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useLayoutSizeProps_exports = {};
+__export(useLayoutSizeProps_exports, {
+  useLayoutSizeProps: () => useLayoutSizeProps
+});
+module.exports = __toCommonJS(useLayoutSizeProps_exports);
+const useLayoutSizeProps = (props) => {
+  const { width, minWidth, maxWidth, height, minHeight, maxHeight } = props;
+  return {
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight
+  };
+};

package/layouts/hooks/useLayoutStyles.d.ts

@@ -0,0 +1,7 @@
+import type { SurfaceProps } from '../surface/Surface.js';
+import type { LayoutStyles, DefaultStyles } from '../types/layout.types.js';
+/**
+ * Generates layout styles including padding, margin, and size properties.
+ * @internal
+ */
+export declare function useLayoutStyles(props: SurfaceProps<any>, defaultStyles: DefaultStyles): LayoutStyles;

package/layouts/hooks/useLayoutStyles.js

@@ -0,0 +1,123 @@
+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 useLayoutStyles_exports = {};
+__export(useLayoutStyles_exports, {
+  useLayoutStyles: () => useLayoutStyles
+});
+module.exports = __toCommonJS(useLayoutStyles_exports);
+var import_useLayoutSizeProps = require("./useLayoutSizeProps.js");
+var import_useMarginProps = require("./useMarginProps.js");
+var import_usePaddingProps = require("./usePaddingProps.js");
+function useLayoutStyles(props, defaultStyles) {
+  const {
+    /** Padding props */
+    padding,
+    p,
+    paddingX,
+    px,
+    paddingY,
+    py,
+    paddingTop,
+    pt,
+    paddingRight,
+    pr,
+    paddingBottom,
+    pb,
+    paddingLeft,
+    pl,
+    /** Margin props */
+    margin,
+    m,
+    marginX,
+    mx,
+    marginY,
+    my,
+    marginTop,
+    mt,
+    marginRight,
+    mr,
+    marginBottom,
+    mb,
+    marginLeft,
+    ml,
+    /** Layout props */
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    /** filtered remaining props for passing back to component */
+    ...remainingProps
+  } = props;
+  const paddingProps = {
+    padding,
+    p,
+    paddingX,
+    px,
+    paddingY,
+    py,
+    paddingTop,
+    pt,
+    paddingRight,
+    pr,
+    paddingBottom,
+    pb,
+    paddingLeft,
+    pl
+  };
+  const marginProps = {
+    margin,
+    m,
+    marginX,
+    mx,
+    marginY,
+    my,
+    marginTop,
+    mt,
+    marginRight,
+    mr,
+    marginBottom,
+    mb,
+    marginLeft,
+    ml
+  };
+  const layoutProps = {
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight
+  };
+  const paddingStyles = (0, import_usePaddingProps.usePaddingProps)(
+    paddingProps,
+    defaultStyles.paddingDefaults
+  );
+  const marginStyles = (0, import_useMarginProps.useMarginProps)(
+    marginProps,
+    defaultStyles.marginDefaults
+  );
+  const layoutSizeStyles = (0, import_useLayoutSizeProps.useLayoutSizeProps)(layoutProps);
+  return {
+    paddingStyles,
+    marginStyles,
+    layoutSizeStyles,
+    remainingProps
+  };
+}

package/layouts/hooks/useMarginProps.d.ts

@@ -0,0 +1,7 @@
+import { SpacingProps } from '../../styles/getSpacingSprinkles.js';
+import type { MarginCSS, DefaultMargin } from '../types/layout.types.js';
+/**
+ * Generates CSS margin properties based on the provided margin props and default margin values.
+ * @internal
+ */
+export declare const useMarginProps: (props: SpacingProps, defaultMarginProps?: DefaultMargin) => MarginCSS;

package/layouts/hooks/useMarginProps.js

@@ -0,0 +1,73 @@
+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 useMarginProps_exports = {};
+__export(useMarginProps_exports, {
+  useMarginProps: () => useMarginProps
+});
+module.exports = __toCommonJS(useMarginProps_exports);
+var import_lodash_es = require("lodash");
+var import_spacingToCss = require("../helpers/spacingToCss.js");
+const defaultMargin = {
+  margin: 0,
+  marginTop: 0,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0
+};
+const useMarginProps = (props, defaultMarginProps = defaultMargin) => {
+  const {
+    margin,
+    m,
+    marginX,
+    mx,
+    marginY,
+    my,
+    marginTop,
+    mt,
+    marginRight,
+    mr,
+    marginBottom,
+    mb,
+    marginLeft,
+    ml
+  } = props;
+  const convertedDefaultMarginProps = {
+    marginTop: (0, import_spacingToCss.spacingToCss)(
+      defaultMarginProps.marginTop ?? defaultMarginProps.margin
+    ),
+    marginLeft: (0, import_spacingToCss.spacingToCss)(
+      defaultMarginProps.marginLeft ?? defaultMarginProps.margin
+    ),
+    marginBottom: (0, import_spacingToCss.spacingToCss)(
+      defaultMarginProps.marginBottom ?? defaultMarginProps.margin
+    ),
+    marginRight: (0, import_spacingToCss.spacingToCss)(
+      defaultMarginProps.marginRight ?? defaultMarginProps.margin
+    )
+  };
+  return (0, import_lodash_es.merge)({}, convertedDefaultMarginProps, {
+    marginTop: (0, import_spacingToCss.spacingToCss)(mt ?? marginTop ?? my ?? marginY ?? m ?? margin),
+    marginRight: (0, import_spacingToCss.spacingToCss)(
+      mr ?? marginRight ?? mx ?? marginX ?? m ?? margin
+    ),
+    marginBottom: (0, import_spacingToCss.spacingToCss)(
+      mb ?? marginBottom ?? my ?? marginY ?? m ?? margin
+    ),
+    marginLeft: (0, import_spacingToCss.spacingToCss)(ml ?? marginLeft ?? mx ?? marginX ?? m ?? margin)
+  });
+};

package/layouts/hooks/usePaddingProps.d.ts

@@ -0,0 +1,7 @@
+import { SpacingProps } from '../../styles/getSpacingSprinkles.js';
+import type { PaddingCSS, DefaultPadding } from '../types/layout.types.js';
+/**
+ * Generates CSS padding properties based on the provided padding props and default padding values.
+ * @internal
+ */
+export declare const usePaddingProps: (props: SpacingProps, defaultPaddingProps?: DefaultPadding) => PaddingCSS;

package/layouts/hooks/usePaddingProps.js

@@ -0,0 +1,77 @@
+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 usePaddingProps_exports = {};
+__export(usePaddingProps_exports, {
+  usePaddingProps: () => usePaddingProps
+});
+module.exports = __toCommonJS(usePaddingProps_exports);
+var import_lodash_es = require("lodash");
+var import_spacingToCss = require("../helpers/spacingToCss.js");
+const defaultPadding = {
+  padding: 0,
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0
+};
+const usePaddingProps = (props, defaultPaddingProps = defaultPadding) => {
+  const {
+    padding,
+    p,
+    paddingX,
+    px,
+    paddingY,
+    py,
+    paddingTop,
+    pt,
+    paddingRight,
+    pr,
+    paddingBottom,
+    pb,
+    paddingLeft,
+    pl
+  } = props;
+  const convertedDefaultPaddingProps = {
+    paddingTop: (0, import_spacingToCss.spacingToCss)(
+      defaultPaddingProps.paddingTop ?? defaultPaddingProps.padding
+    ),
+    paddingLeft: (0, import_spacingToCss.spacingToCss)(
+      defaultPaddingProps.paddingLeft ?? defaultPaddingProps.padding
+    ),
+    paddingBottom: (0, import_spacingToCss.spacingToCss)(
+      defaultPaddingProps.paddingBottom ?? defaultPaddingProps.padding
+    ),
+    paddingRight: (0, import_spacingToCss.spacingToCss)(
+      defaultPaddingProps.paddingRight ?? defaultPaddingProps.padding
+    )
+  };
+  return (0, import_lodash_es.merge)({}, convertedDefaultPaddingProps, {
+    paddingTop: (0, import_spacingToCss.spacingToCss)(
+      pt ?? paddingTop ?? py ?? paddingY ?? p ?? padding
+    ),
+    paddingRight: (0, import_spacingToCss.spacingToCss)(
+      pr ?? paddingRight ?? px ?? paddingX ?? p ?? padding
+    ),
+    paddingBottom: (0, import_spacingToCss.spacingToCss)(
+      pb ?? paddingBottom ?? py ?? paddingY ?? p ?? padding
+    ),
+    paddingLeft: (0, import_spacingToCss.spacingToCss)(
+      pl ?? paddingLeft ?? px ?? paddingX ?? p ?? padding
+    )
+  });
+};

package/layouts/index.d.ts

@@ -1,6 +1,10 @@
 export { Flex, type FlexOwnProps, type FlexProps } from './flex/Flex.js';
 export { Grid, type GridOwnProps, type GridProps } from './grid/Grid.js';
-export { Divider } from './Divider/Divider.js';
-export type { DividerProps } from './Divider/Divider.js';
+export { Divider } from './divider/Divider.js';
+export type { DividerProps } from './divider/Divider.js';
 export { Container } from './container/Container.js';
 export type { ContainerOwnProps, ContainerProps, } from './container/Container.js';
+export type { LayoutSizeCSS } from './types/layout.types.js';
+export { Surface } from './surface/Surface.js';
+export type { SurfaceOwnProps, SurfaceProps } from './surface/Surface.js';
+export { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.css.js';