@dynatrace/strato-components 3.1.3 → 3.2.1

package/esm/content/markdown/transformers/typography-mapping.sty.js

@@ -1,10 +1,10 @@
 import "./typography-mapping.css";
-var MarkdownCheckmarkBackgroundCSS = "_11vdepp5-3-1-3";
-var MarkdownHeadingCSS = "_11vdepp0-3-1-3";
-var MarkdownImageCSS = "_11vdepp4-3-1-3";
-var MarkdownListCSS = "_11vdepp1-3-1-3";
-var MarkdownListItemCSS = "_11vdepp2-3-1-3";
-var MarkdownParagraphCSS = "_11vdepp3-3-1-3";
+var MarkdownCheckmarkBackgroundCSS = "_11vdepp5-3-2-1";
+var MarkdownHeadingCSS = "_11vdepp0-3-2-1";
+var MarkdownImageCSS = "_11vdepp4-3-2-1";
+var MarkdownListCSS = "_11vdepp1-3-2-1";
+var MarkdownListItemCSS = "_11vdepp2-3-2-1";
+var MarkdownParagraphCSS = "_11vdepp3-3-2-1";
 export {
   MarkdownCheckmarkBackgroundCSS,
   MarkdownHeadingCSS,

package/esm/content/markdown/transformers/typography-mapping.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/markdown/transformers/typography-mapping.css.ts"],
-  "sourcesContent": ["import './typography-mapping.css';\nexport var MarkdownCheckmarkBackgroundCSS = '_11vdepp5-3-1-3';\nexport var MarkdownHeadingCSS = '_11vdepp0-3-1-3';\nexport var MarkdownImageCSS = '_11vdepp4-3-1-3';\nexport var MarkdownListCSS = '_11vdepp1-3-1-3';\nexport var MarkdownListItemCSS = '_11vdepp2-3-1-3';\nexport var MarkdownParagraphCSS = '_11vdepp3-3-1-3';"],
+  "sourcesContent": ["import './typography-mapping.css';\nexport var MarkdownCheckmarkBackgroundCSS = '_11vdepp5-3-2-1';\nexport var MarkdownHeadingCSS = '_11vdepp0-3-2-1';\nexport var MarkdownImageCSS = '_11vdepp4-3-2-1';\nexport var MarkdownListCSS = '_11vdepp1-3-2-1';\nexport var MarkdownListItemCSS = '_11vdepp2-3-2-1';\nexport var MarkdownParagraphCSS = '_11vdepp3-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iCAAiC;AACrC,IAAI,qBAAqB;AACzB,IAAI,mBAAmB;AACvB,IAAI,kBAAkB;AACtB,IAAI,sBAAsB;AAC1B,IAAI,uBAAuB;",
   "names": []
 }

package/esm/content/message-container/MessageContainer.js

@@ -12,7 +12,7 @@ import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
-import { isDev } from "../../core/utils/is-node-environment.js";
+import { devLog } from "../../core/utils/logging.js";
 import { Container } from "../../layouts/container/Container.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 const COMPONENT_NAME = "MessageContainer";
@@ -39,12 +39,12 @@ const _MessageContainer = forwardRef(
       description: Description,
       actions: Actions
     });
-    if (!slots.title && isDev()) {
-      console.warn(
-        "The MessageContainer component requires a Title component."
+    if (!slots.description) {
+      devLog(
+        "The MessageContainer component requires a Description component."
       );
     }
-    const isSingleline = !slots.description;
+    const wrapActions = slots.title && slots.description;
     return /* @__PURE__ */ jsx(MessageContainerContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(
       Container,
       {
@@ -69,7 +69,7 @@ const _MessageContainer = forwardRef(
               flexGrow: 1,
               columnGap: 8,
               rowGap: 6,
-              flexDirection: isSingleline ? "row" : "column",
+              flexDirection: wrapActions ? "column" : "row",
               flexWrap: "wrap",
               minWidth: 0,
               children: [
@@ -94,9 +94,8 @@ const _MessageContainer = forwardRef(
                 slots.actions && /* @__PURE__ */ jsx(
                   Flex,
                   {
-                    style: {
-                      paddingRight: slots.description ? 8 : 0,
-                      paddingBottom: slots.description ? 10 : 0
+                    ...wrapActions && {
+                      style: { paddingRight: 8, paddingBottom: 10 }
                     },
                     children: slots.actions
                   }

package/esm/content/message-container/MessageContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/message-container/MessageContainer.tsx"],
-  "sourcesContent": ["import { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { Actions } from './Actions.js';\nimport { MessageContainerContext } from './contexts/MessageContainerContext.js';\nimport { Description } from './Description.js';\nimport type { MessageContainerProps } from './MessageContainer.types.js';\nimport { Prefix } from './Prefix.js';\nimport { Title } from './Title.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { Container } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\nconst COMPONENT_NAME = 'MessageContainer';\n\nconst _MessageContainer = forwardRef<HTMLDivElement, MessageContainerProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      variant = 'neutral',\n      onDismiss,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-allow': dataDtrumAllow,\n      'data-dtrum-mask': dataDtrumMask,\n      ...remainingProps\n    }: MessageContainerProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const intl = useIntl();\n\n    const [slots] = useSlots(children, {\n      prefix: Prefix,\n      title: Title,\n      description: Description,\n      actions: Actions,\n    });\n\n    if (!slots.title && isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'The MessageContainer component requires a Title component.',\n      );\n    }\n\n    const isSingleline = !slots.description;\n\n    return (\n      <MessageContainerContext.Provider value={{ variant }}>\n        <Container\n          color={variant}\n          padding={6}\n          paddingLeft={16}\n          ref={forwardedRef}\n          className={consumerClassName}\n          style={consumerStyle}\n          data-testid={dataTestId}\n          data-dtrum-allow={dataDtrumAllow}\n          data-dtrum-mask={dataDtrumMask}\n          {...ariaLabelingProps}\n          {...behavioralTrackingProps}\n          {...forwardProps}\n          data-dt-component={COMPONENT_NAME}\n        >\n          <Flex justifyContent=\"space-between\" alignItems=\"flex-start\">\n            {slots.prefix && (\n              <Flex flex=\"0 0 20px\" paddingY={6} justifyContent=\"center\">\n                {slots.prefix}\n              </Flex>\n            )}\n            <Flex\n              flexGrow={1}\n              columnGap={8}\n              rowGap={6}\n              flexDirection={isSingleline ? 'row' : 'column'}\n              flexWrap=\"wrap\"\n              minWidth={0}\n            >\n              <Flex\n                flexDirection=\"column\"\n                gap={2}\n                flexGrow={1}\n                justifyContent=\"center\"\n                paddingY={6}\n                paddingRight={8}\n                maxWidth=\"100%\"\n                minWidth={0}\n                style={{ boxSizing: 'border-box' }}\n              >\n                {slots.title}\n                {slots.description}\n              </Flex>\n              {slots.actions && (\n                <Flex\n                  style={{\n                    paddingRight: slots.description ? 8 : 0,\n                    paddingBottom: slots.description ? 10 : 0,\n                  }}\n                >\n                  {slots.actions}\n                </Flex>\n              )}\n            </Flex>\n            {onDismiss !== undefined && (\n              <Flex flexShrink={0} alignItems=\"flex-start\">\n                <Button\n                  onClick={onDismiss}\n                  color={variant}\n                  aria-label={intl.formatMessage({\n                    defaultMessage: 'Close message',\n                    id: '2+ypcBK9NuQ5zg1k',\n                    description:\n                      'Aria label used for the close button of the information',\n                  })}\n                >\n                  <Button.Prefix>\n                    <XmarkIcon />\n                  </Button.Prefix>\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </Container>\n      </MessageContainerContext.Provider>\n    );\n  },\n);\n\n(\n  _MessageContainer as typeof _MessageContainer & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `MessageContainer` allows you to communicate statuses prominently. It's either persistent or dismissible. If needed, provide actions to help users take the following steps or resolve an issue.\n * @public\n */\nexport const MessageContainer = Object.assign(_MessageContainer, {\n  Prefix,\n  Title,\n  Description,\n  Actions,\n});\n"],
-  "mappings": "AA8Ec,cAYA,YAZA;AA9Ed,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,SAAS,eAAe;AACxB,SAAS,+BAA+B;AACxC,SAAS,mBAAmB;AAE5B,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAEvB,MAAM,oBAAoB;AAAA,EACxB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,oBAAoB;AAAA,MACpB,mBAAmB;AAAA,MACnB,GAAG;AAAA,IACL,IAA2B;AAE3B,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,UAAM,OAAO,QAAQ;AAErB,UAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,MACjC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,IACX,CAAC;AAED,QAAI,CAAC,MAAM,SAAS,MAAM,GAAG;AAE3B,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAEA,UAAM,eAAe,CAAC,MAAM;AAE5B,WACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,EAAE,QAAQ,GACjD;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,aAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACb,oBAAkB;AAAA,QAClB,mBAAiB;AAAA,QAChB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB,+BAAC,QAAK,gBAAe,iBAAgB,YAAW,cAC7C;AAAA,gBAAM,UACL,oBAAC,QAAK,MAAK,YAAW,UAAU,GAAG,gBAAe,UAC/C,gBAAM,QACT;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,WAAW;AAAA,cACX,QAAQ;AAAA,cACR,eAAe,eAAe,QAAQ;AAAA,cACtC,UAAS;AAAA,cACT,UAAU;AAAA,cAEV;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAc;AAAA,oBACd,KAAK;AAAA,oBACL,UAAU;AAAA,oBACV,gBAAe;AAAA,oBACf,UAAU;AAAA,oBACV,cAAc;AAAA,oBACd,UAAS;AAAA,oBACT,UAAU;AAAA,oBACV,OAAO,EAAE,WAAW,aAAa;AAAA,oBAEhC;AAAA,4BAAM;AAAA,sBACN,MAAM;AAAA;AAAA;AAAA,gBACT;AAAA,gBACC,MAAM,WACL;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,sBACL,cAAc,MAAM,cAAc,IAAI;AAAA,sBACtC,eAAe,MAAM,cAAc,KAAK;AAAA,oBAC1C;AAAA,oBAEC,gBAAM;AAAA;AAAA,gBACT;AAAA;AAAA;AAAA,UAEJ;AAAA,UACC,cAAc,UACb,oBAAC,QAAK,YAAY,GAAG,YAAW,cAC9B;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,OAAO;AAAA,cACP,cAAY,KAAK,cAAc;AAAA,gBAC7B,gBAAgB;AAAA,gBAChB,IAAI;AAAA,gBACJ,aACE;AAAA,cACJ,CAAC;AAAA,cAED,8BAAC,OAAO,QAAP,EACC,8BAAC,aAAU,GACb;AAAA;AAAA,UACF,GACF;AAAA,WAEJ;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAGE,kBACA,cAAc;AAMT,MAAM,mBAAmB,OAAO,OAAO,mBAAmB;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { Actions } from './Actions.js';\nimport { MessageContainerContext } from './contexts/MessageContainerContext.js';\nimport { Description } from './Description.js';\nimport type { MessageContainerProps } from './MessageContainer.types.js';\nimport { Prefix } from './Prefix.js';\nimport { Title } from './Title.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { Container } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\nconst COMPONENT_NAME = 'MessageContainer';\n\nconst _MessageContainer = forwardRef<HTMLDivElement, MessageContainerProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      variant = 'neutral',\n      onDismiss,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-allow': dataDtrumAllow,\n      'data-dtrum-mask': dataDtrumMask,\n      ...remainingProps\n    }: MessageContainerProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const intl = useIntl();\n\n    const [slots] = useSlots(children, {\n      prefix: Prefix,\n      title: Title,\n      description: Description,\n      actions: Actions,\n    });\n\n    if (!slots.description) {\n      devLog(\n        'The MessageContainer component requires a Description component.',\n      );\n    }\n\n    const wrapActions = slots.title && slots.description;\n\n    return (\n      <MessageContainerContext.Provider value={{ variant }}>\n        <Container\n          color={variant}\n          padding={6}\n          paddingLeft={16}\n          ref={forwardedRef}\n          className={consumerClassName}\n          style={consumerStyle}\n          data-testid={dataTestId}\n          data-dtrum-allow={dataDtrumAllow}\n          data-dtrum-mask={dataDtrumMask}\n          {...ariaLabelingProps}\n          {...behavioralTrackingProps}\n          {...forwardProps}\n          data-dt-component={COMPONENT_NAME}\n        >\n          <Flex justifyContent=\"space-between\" alignItems=\"flex-start\">\n            {slots.prefix && (\n              <Flex flex=\"0 0 20px\" paddingY={6} justifyContent=\"center\">\n                {slots.prefix}\n              </Flex>\n            )}\n            <Flex\n              flexGrow={1}\n              columnGap={8}\n              rowGap={6}\n              flexDirection={wrapActions ? 'column' : 'row'}\n              flexWrap=\"wrap\"\n              minWidth={0}\n            >\n              <Flex\n                flexDirection=\"column\"\n                gap={2}\n                flexGrow={1}\n                justifyContent=\"center\"\n                paddingY={6}\n                paddingRight={8}\n                maxWidth=\"100%\"\n                minWidth={0}\n                style={{ boxSizing: 'border-box' }}\n              >\n                {slots.title}\n                {slots.description}\n              </Flex>\n              {slots.actions && (\n                <Flex\n                  {...(wrapActions && {\n                    style: { paddingRight: 8, paddingBottom: 10 },\n                  })}\n                >\n                  {slots.actions}\n                </Flex>\n              )}\n            </Flex>\n            {onDismiss !== undefined && (\n              <Flex flexShrink={0} alignItems=\"flex-start\">\n                <Button\n                  onClick={onDismiss}\n                  color={variant}\n                  aria-label={intl.formatMessage({\n                    defaultMessage: 'Close message',\n                    id: '2+ypcBK9NuQ5zg1k',\n                    description:\n                      'Aria label used for the close button of the information',\n                  })}\n                >\n                  <Button.Prefix>\n                    <XmarkIcon />\n                  </Button.Prefix>\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </Container>\n      </MessageContainerContext.Provider>\n    );\n  },\n);\n\n(\n  _MessageContainer as typeof _MessageContainer & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `MessageContainer` allows you to communicate statuses prominently. It's either persistent or dismissible. If needed, provide actions to help users take the following steps or resolve an issue.\n * @public\n */\nexport const MessageContainer = Object.assign(_MessageContainer, {\n  Prefix,\n  Title,\n  Description,\n  Actions,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/microguide/Microguide.css

@@ -1,27 +1,27 @@
-._z4mh730-3-1-3 {
+._z4mh730-3-2-1 {
   max-height: calc(100vh - calc(var(--dt-spacings-size-32, 32px) + var(--dt-spacings-size-56, 56px)));
   overflow: hidden;
 }
-._z4mh731-3-1-3 {
+._z4mh731-3-2-1 {
   position: relative;
   margin: 0 var(--dt-spacings-size-16, 16px) var(--dt-spacings-size-8, 8px);
 }
-._z4mh732-3-1-3 {
+._z4mh732-3-2-1 {
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
-._z4mh733-3-1-3 {
+._z4mh733-3-2-1 {
   overflow: hidden;
   padding: 0 var(--dt-spacings-size-16, 16px);
 }
-._z4mh734-3-1-3 {
+._z4mh734-3-2-1 {
   z-index: var(--dt-elevations-default, 1);
   position: relative;
 }
-._z4mh735-3-1-3 {
-  --_1igzksy0-3-1-3: var(--dt-borders-radius-surface-subdued, 9px);
+._z4mh735-3-2-1 {
+  --_1igzksy0-3-2-1: var(--dt-borders-radius-surface-subdued, 9px);
   position: fixed;
   width: 400px;
   max-width: calc(100vw - var(--dt-spacings-size-32, 32px));
@@ -30,19 +30,19 @@
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   pointer-events: auto;
 }
-._z4mh736-3-1-3 {
+._z4mh736-3-2-1 {
   bottom: var(--dt-spacings-size-16, 16px);
   left: var(--dt-spacings-size-16, 16px);
 }
-._z4mh737-3-1-3 {
+._z4mh737-3-2-1 {
   top: var(--dt-spacings-size-16, 16px);
   right: var(--dt-spacings-size-16, 16px);
 }
-._z4mh738-3-1-3 {
+._z4mh738-3-2-1 {
   top: var(--dt-spacings-size-16, 16px);
   left: var(--dt-spacings-size-16, 16px);
 }
-._z4mh739-3-1-3 {
+._z4mh739-3-2-1 {
   bottom: var(--dt-spacings-size-16, 16px);
   right: var(--dt-spacings-size-16, 16px);
 }

package/esm/content/microguide/Microguide.js

@@ -166,7 +166,7 @@ const MicroGuideRoot = forwardRef(
                 children: [
                   /* @__PURE__ */ jsx("div", { style: { color: Colors.Text.Neutral.Subdued }, children: stepsLength > 1 && `${currentStep + 1}/${stepsLength}` }),
                   /* @__PURE__ */ jsxs(Flex, { gap: 8, children: [
-                    currentStep > 0 && /* @__PURE__ */ jsx(Button, { onClick: handleBack, children: /* @__PURE__ */ jsx(
+                    currentStep > 0 && /* @__PURE__ */ jsx(Button, { onClick: handleBack, "data-dt-name": "BackButton", children: /* @__PURE__ */ jsx(
                       FormattedMessage,
                       {
                         description: "Microguide Back button.",
@@ -181,6 +181,7 @@ const MicroGuideRoot = forwardRef(
                         color: isLastStep ? "primary" : "neutral",
                         onClick: isLastStep ? () => onClose(currentStep, true) : handleNext,
                         onKeyDown: () => closedOnKeydown.current = isLastStep,
+                        "data-dt-name": isLastStep ? "GotItButton" : "NextButton",
                         children: isLastStep ? intl.formatMessage({
                           defaultMessage: "Got it",
                           id: "fzkORq3AsvX/NtMB",

package/esm/content/microguide/Microguide.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/microguide/Microguide.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { MicroguideContext } from './contexts/MicroguideContext.js';\nimport {\n  microguideFooterCSS,\n  microguideWrapperCSS,\n  microguideWrapperPositionCSS,\n} from './Microguide.sty.js';\nimport { Step } from './Step.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.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 { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Surface } from '../../layouts/surface/Surface.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\nimport { Content } from '../shared-components/Content.js';\nimport { Title } from '../shared-components/Title.js';\nimport { Visual } from '../shared-components/Visual.js';\n\nconst COMPONENT_NAME = 'Microguide';\n\n// #region Typings\n/**\n * Accepted properties for Microguide\n * @public\n */\nexport interface MicroguideProps\n  extends WithChildren,\n    AriaLabelingProps,\n    DataTestId,\n    MaskingProps,\n    StylingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the Microguide is currently shown or not. Has to be controlled by the consumer.\n   */\n  open: boolean;\n  /**\n   * Placement of the Microguide.\n   * @defaultValue 'bottom-right'\n   */\n  placement?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n  /**\n   * Callback fired when closing the Microguide.\n   * Indicates the current step (zero-based) when closing and whether the Microguide was finished (i.e. closed in the last step).\n   * @param currentStep - The currently active step when closing.\n   * @param finished - Whether the guide was closed in the last step.\n   */\n  onClose: (currentStep: number, finished: boolean) => void;\n  /**\n   * Callback fired when the user navigates between steps. Indicates the target step (zero-based).\n   * @param step - The step that the user navigated to.\n   */\n  onStepChange?: (step: number) => void;\n}\n// #endregion Typings\n\n/**\n * Microguide component\n */\nconst MicroGuideRoot = forwardRef<HTMLDivElement, MicroguideProps>(\n  (props, forwardedRef) => {\n    const {\n      open,\n      placement = 'bottom-right',\n      onClose,\n      children,\n      onStepChange,\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    const microguideContainer = useRef<HTMLElement | null>(null);\n    const closeButtonRef = useRef<HTMLButtonElement | null>(null);\n\n    const [currentStep, setCurrentStep] = useState(0);\n    const [isNext, setIsNext] = useState(true);\n    const [hasTitle, setHasTitle] = useState(false);\n    const [hasContent, setHasContent] = useState(false);\n    const [handleFocusOnKeydown, closedOnKeydown] =\n      useKeyboardFocusHandling(closeButtonRef);\n    const overlayStacking = useOverlayStacking(undefined, 'microguide');\n    const intl = useIntl();\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const [slots] = useSlots(children, {\n      steps: { match: Step, multiple: true },\n    });\n\n    const stepsLength = slots.steps?.length ?? 0;\n    const isLastStep = currentStep + 1 >= stepsLength;\n    if (hasTitle && ariaLabelingProps['aria-labelledby'] === undefined) {\n      ariaLabelingProps['aria-labelledby'] = 'strato-microguide-title';\n    }\n    if (hasContent && ariaLabelingProps['aria-describedby'] === undefined) {\n      ariaLabelingProps['aria-describedby'] = 'strato-microguide-content';\n    }\n\n    // Handle the escape key\n    const closeOnEscape = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        closedOnKeydown.current = true;\n        onClose(currentStep, currentStep === stepsLength);\n      }\n    };\n\n    useLayoutEffect(() => {\n      const toastContainer = document.querySelector('[data-toast-container]');\n      microguideContainer.current = document.createElement('div');\n      microguideContainer.current.setAttribute('aria-live', 'polite');\n      microguideContainer.current.setAttribute(\n        'data-microguide-container',\n        'true',\n      );\n\n      if (toastContainer && toastContainer.parentNode) {\n        toastContainer.parentNode.insertBefore(\n          microguideContainer.current,\n          toastContainer,\n        );\n      } else {\n        document.body.appendChild(microguideContainer.current);\n      }\n\n      return () => {\n        microguideContainer.current?.remove();\n      };\n    }, []);\n\n    useEffect(() => {\n      // Reset microguide to the first page once it closes\n      if (open === false) {\n        setCurrentStep(0);\n        // handle focus if closed via keyboard\n        handleFocusOnKeydown();\n      }\n    }, [handleFocusOnKeydown, open]);\n\n    const handleBack = () => {\n      const previousStep = currentStep - 1;\n      setIsNext(false);\n      onStepChange?.(previousStep);\n      setCurrentStep(previousStep);\n    };\n\n    const handleNext = () => {\n      const nextStep = currentStep + 1;\n      setIsNext(true);\n      onStepChange?.(nextStep);\n      setCurrentStep(nextStep);\n    };\n\n    return open\n      ? createPortal(\n          <Surface\n            ref={forwardedRef}\n            elevation=\"floating\"\n            onKeyDown={closeOnEscape}\n            role=\"dialog\"\n            aria-modal=\"false\"\n            className={clsx(\n              microguideWrapperCSS,\n              microguideWrapperPositionCSS[placement],\n              consumerClassName,\n            )}\n            style={{ zIndex: overlayStacking.style.zIndex, ...consumerStyle }}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            <MicroguideContext.Provider\n              value={{\n                onClose,\n                currentStep,\n                totalSteps: stepsLength,\n                isNext,\n                setHasContent,\n                setHasTitle,\n                closeButtonRef,\n                closedOnKeydown,\n              }}\n            >\n              {slots.steps?.[currentStep]}\n            </MicroguideContext.Provider>\n            <Flex\n              className={microguideFooterCSS}\n              flexDirection=\"row\"\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n              gap={16}\n              paddingX={16}\n              paddingBottom={16}\n              paddingTop={8}\n            >\n              <div style={{ color: Colors.Text.Neutral.Subdued }}>\n                {stepsLength > 1 && `${currentStep + 1}/${stepsLength}`}\n              </div>\n              <Flex gap={8}>\n                {currentStep > 0 && (\n                  <Button onClick={handleBack}>\n                    <FormattedMessage\n                      description=\"Microguide Back button.\"\n                      defaultMessage=\"Back\"\n                      id=\"N27hQ6LyGqdym2Yi\"\n                    />\n                  </Button>\n                )}\n                <Button\n                  variant={isLastStep ? 'accent' : 'emphasized'}\n                  color={isLastStep ? 'primary' : 'neutral'}\n                  onClick={\n                    isLastStep ? () => onClose(currentStep, true) : handleNext\n                  }\n                  onKeyDown={() => (closedOnKeydown.current = isLastStep)}\n                >\n                  {isLastStep\n                    ? intl.formatMessage({\n                        defaultMessage: 'Got it',\n                        id: 'fzkORq3AsvX/NtMB',\n                        description: 'Microguide Got it button at last step.',\n                      })\n                    : intl.formatMessage({\n                        defaultMessage: 'Next',\n                        id: '+jn6HNnzB4IDIbZu',\n                        description: 'Microguide Next button.',\n                      })}\n                </Button>\n              </Flex>\n            </Flex>\n          </Surface>,\n          microguideContainer.current || document.body,\n        )\n      : null;\n  },\n);\n\n(\n  MicroGuideRoot as typeof MicroGuideRoot & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `Microguide` supports the onboarding of new users, as well as the introduction of new features to existing users.\n * It can have one or multiple steps, each of which has three optional slots: `Title`, `Visual` and `Content`.\n * @public\n */\nexport const Microguide = Object.assign(MicroGuideRoot, {\n  Step,\n  Title,\n  Visual,\n  Content,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { MicroguideContext } from './contexts/MicroguideContext.js';\nimport {\n  microguideFooterCSS,\n  microguideWrapperCSS,\n  microguideWrapperPositionCSS,\n} from './Microguide.sty.js';\nimport { Step } from './Step.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.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 { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Surface } from '../../layouts/surface/Surface.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\nimport { Content } from '../shared-components/Content.js';\nimport { Title } from '../shared-components/Title.js';\nimport { Visual } from '../shared-components/Visual.js';\n\nconst COMPONENT_NAME = 'Microguide';\n\n// #region Typings\n/**\n * Accepted properties for Microguide\n * @public\n */\nexport interface MicroguideProps\n  extends WithChildren,\n    AriaLabelingProps,\n    DataTestId,\n    MaskingProps,\n    StylingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the Microguide is currently shown or not. Has to be controlled by the consumer.\n   */\n  open: boolean;\n  /**\n   * Placement of the Microguide.\n   * @defaultValue 'bottom-right'\n   */\n  placement?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n  /**\n   * Callback fired when closing the Microguide.\n   * Indicates the current step (zero-based) when closing and whether the Microguide was finished (i.e. closed in the last step).\n   * @param currentStep - The currently active step when closing.\n   * @param finished - Whether the guide was closed in the last step.\n   */\n  onClose: (currentStep: number, finished: boolean) => void;\n  /**\n   * Callback fired when the user navigates between steps. Indicates the target step (zero-based).\n   * @param step - The step that the user navigated to.\n   */\n  onStepChange?: (step: number) => void;\n}\n// #endregion Typings\n\n/**\n * Microguide component\n */\nconst MicroGuideRoot = forwardRef<HTMLDivElement, MicroguideProps>(\n  (props, forwardedRef) => {\n    const {\n      open,\n      placement = 'bottom-right',\n      onClose,\n      children,\n      onStepChange,\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    const microguideContainer = useRef<HTMLElement | null>(null);\n    const closeButtonRef = useRef<HTMLButtonElement | null>(null);\n\n    const [currentStep, setCurrentStep] = useState(0);\n    const [isNext, setIsNext] = useState(true);\n    const [hasTitle, setHasTitle] = useState(false);\n    const [hasContent, setHasContent] = useState(false);\n    const [handleFocusOnKeydown, closedOnKeydown] =\n      useKeyboardFocusHandling(closeButtonRef);\n    const overlayStacking = useOverlayStacking(undefined, 'microguide');\n    const intl = useIntl();\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const [slots] = useSlots(children, {\n      steps: { match: Step, multiple: true },\n    });\n\n    const stepsLength = slots.steps?.length ?? 0;\n    const isLastStep = currentStep + 1 >= stepsLength;\n    if (hasTitle && ariaLabelingProps['aria-labelledby'] === undefined) {\n      ariaLabelingProps['aria-labelledby'] = 'strato-microguide-title';\n    }\n    if (hasContent && ariaLabelingProps['aria-describedby'] === undefined) {\n      ariaLabelingProps['aria-describedby'] = 'strato-microguide-content';\n    }\n\n    // Handle the escape key\n    const closeOnEscape = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        closedOnKeydown.current = true;\n        onClose(currentStep, currentStep === stepsLength);\n      }\n    };\n\n    useLayoutEffect(() => {\n      const toastContainer = document.querySelector('[data-toast-container]');\n      microguideContainer.current = document.createElement('div');\n      microguideContainer.current.setAttribute('aria-live', 'polite');\n      microguideContainer.current.setAttribute(\n        'data-microguide-container',\n        'true',\n      );\n\n      if (toastContainer && toastContainer.parentNode) {\n        toastContainer.parentNode.insertBefore(\n          microguideContainer.current,\n          toastContainer,\n        );\n      } else {\n        document.body.appendChild(microguideContainer.current);\n      }\n\n      return () => {\n        microguideContainer.current?.remove();\n      };\n    }, []);\n\n    useEffect(() => {\n      // Reset microguide to the first page once it closes\n      if (open === false) {\n        setCurrentStep(0);\n        // handle focus if closed via keyboard\n        handleFocusOnKeydown();\n      }\n    }, [handleFocusOnKeydown, open]);\n\n    const handleBack = () => {\n      const previousStep = currentStep - 1;\n      setIsNext(false);\n      onStepChange?.(previousStep);\n      setCurrentStep(previousStep);\n    };\n\n    const handleNext = () => {\n      const nextStep = currentStep + 1;\n      setIsNext(true);\n      onStepChange?.(nextStep);\n      setCurrentStep(nextStep);\n    };\n\n    return open\n      ? createPortal(\n          <Surface\n            ref={forwardedRef}\n            elevation=\"floating\"\n            onKeyDown={closeOnEscape}\n            role=\"dialog\"\n            aria-modal=\"false\"\n            className={clsx(\n              microguideWrapperCSS,\n              microguideWrapperPositionCSS[placement],\n              consumerClassName,\n            )}\n            style={{ zIndex: overlayStacking.style.zIndex, ...consumerStyle }}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            <MicroguideContext.Provider\n              value={{\n                onClose,\n                currentStep,\n                totalSteps: stepsLength,\n                isNext,\n                setHasContent,\n                setHasTitle,\n                closeButtonRef,\n                closedOnKeydown,\n              }}\n            >\n              {slots.steps?.[currentStep]}\n            </MicroguideContext.Provider>\n            <Flex\n              className={microguideFooterCSS}\n              flexDirection=\"row\"\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n              gap={16}\n              paddingX={16}\n              paddingBottom={16}\n              paddingTop={8}\n            >\n              <div style={{ color: Colors.Text.Neutral.Subdued }}>\n                {stepsLength > 1 && `${currentStep + 1}/${stepsLength}`}\n              </div>\n              <Flex gap={8}>\n                {currentStep > 0 && (\n                  <Button onClick={handleBack} data-dt-name=\"BackButton\">\n                    <FormattedMessage\n                      description=\"Microguide Back button.\"\n                      defaultMessage=\"Back\"\n                      id=\"N27hQ6LyGqdym2Yi\"\n                    />\n                  </Button>\n                )}\n                <Button\n                  variant={isLastStep ? 'accent' : 'emphasized'}\n                  color={isLastStep ? 'primary' : 'neutral'}\n                  onClick={\n                    isLastStep ? () => onClose(currentStep, true) : handleNext\n                  }\n                  onKeyDown={() => (closedOnKeydown.current = isLastStep)}\n                  data-dt-name={isLastStep ? 'GotItButton' : 'NextButton'}\n                >\n                  {isLastStep\n                    ? intl.formatMessage({\n                        defaultMessage: 'Got it',\n                        id: 'fzkORq3AsvX/NtMB',\n                        description: 'Microguide Got it button at last step.',\n                      })\n                    : intl.formatMessage({\n                        defaultMessage: 'Next',\n                        id: '+jn6HNnzB4IDIbZu',\n                        description: 'Microguide Next button.',\n                      })}\n                </Button>\n              </Flex>\n            </Flex>\n          </Surface>,\n          microguideContainer.current || document.body,\n        )\n      : null;\n  },\n);\n\n(\n  MicroGuideRoot as typeof MicroGuideRoot & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `Microguide` supports the onboarding of new users, as well as the introduction of new features to existing users.\n * It can have one or multiple steps, each of which has three optional slots: `Title`, `Visual` and `Content`.\n * @public\n */\nexport const Microguide = Object.assign(MicroGuideRoot, {\n  Step,\n  Title,\n  Visual,\n  Content,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/microguide/Microguide.sty.js

@@ -1,11 +1,11 @@
 import "./Microguide.css";
-var microguideAnimatedContentCSS = "_z4mh733-3-1-3";
-var microguideContentWrapperCSS = "_z4mh732-3-1-3";
-var microguideFooterCSS = "_z4mh734-3-1-3";
-var microguideStepContainerCSS = "_z4mh730-3-1-3";
-var microguideVisualWrapperCSS = "_z4mh731-3-1-3";
-var microguideWrapperCSS = "_z4mh735-3-1-3";
-var microguideWrapperPositionCSS = { "bottom-left": "_z4mh736-3-1-3", "top-right": "_z4mh737-3-1-3", "top-left": "_z4mh738-3-1-3", "bottom-right": "_z4mh739-3-1-3" };
+var microguideAnimatedContentCSS = "_z4mh733-3-2-1";
+var microguideContentWrapperCSS = "_z4mh732-3-2-1";
+var microguideFooterCSS = "_z4mh734-3-2-1";
+var microguideStepContainerCSS = "_z4mh730-3-2-1";
+var microguideVisualWrapperCSS = "_z4mh731-3-2-1";
+var microguideWrapperCSS = "_z4mh735-3-2-1";
+var microguideWrapperPositionCSS = { "bottom-left": "_z4mh736-3-2-1", "top-right": "_z4mh737-3-2-1", "top-left": "_z4mh738-3-2-1", "bottom-right": "_z4mh739-3-2-1" };
 export {
   microguideAnimatedContentCSS,
   microguideContentWrapperCSS,

package/esm/content/microguide/Microguide.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/microguide/Microguide.css.ts"],
-  "sourcesContent": ["import './Microguide.css';\nexport var microguideAnimatedContentCSS = '_z4mh733-3-1-3';\nexport var microguideContentWrapperCSS = '_z4mh732-3-1-3';\nexport var microguideFooterCSS = '_z4mh734-3-1-3';\nexport var microguideStepContainerCSS = '_z4mh730-3-1-3';\nexport var microguideVisualWrapperCSS = '_z4mh731-3-1-3';\nexport var microguideWrapperCSS = '_z4mh735-3-1-3';\nexport var microguideWrapperPositionCSS = {'bottom-left':'_z4mh736-3-1-3','top-right':'_z4mh737-3-1-3','top-left':'_z4mh738-3-1-3','bottom-right':'_z4mh739-3-1-3'};"],
+  "sourcesContent": ["import './Microguide.css';\nexport var microguideAnimatedContentCSS = '_z4mh733-3-2-1';\nexport var microguideContentWrapperCSS = '_z4mh732-3-2-1';\nexport var microguideFooterCSS = '_z4mh734-3-2-1';\nexport var microguideStepContainerCSS = '_z4mh730-3-2-1';\nexport var microguideVisualWrapperCSS = '_z4mh731-3-2-1';\nexport var microguideWrapperCSS = '_z4mh735-3-2-1';\nexport var microguideWrapperPositionCSS = {'bottom-left':'_z4mh736-3-2-1','top-right':'_z4mh737-3-2-1','top-left':'_z4mh738-3-2-1','bottom-right':'_z4mh739-3-2-1'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,+BAA+B;AACnC,IAAI,8BAA8B;AAClC,IAAI,sBAAsB;AAC1B,IAAI,6BAA6B;AACjC,IAAI,6BAA6B;AACjC,IAAI,uBAAuB;AAC3B,IAAI,+BAA+B,EAAC,eAAc,kBAAiB,aAAY,kBAAiB,YAAW,kBAAiB,gBAAe,iBAAgB;",
   "names": []
 }

package/esm/content/microguide/Step.js

@@ -133,6 +133,7 @@ const Step = ({ children }) => {
                     id: "0yl3EugW5oCHVbO1",
                     description: "Close the microguide."
                   }),
+                  "data-dt-name": "CloseButton",
                   children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(XmarkIcon, {}) })
                 }
               )

package/esm/content/microguide/Step.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/microguide/Step.tsx"],
-  "sourcesContent": ["import {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n  type MotionProps,\n  type Transition,\n  type Variants,\n} from 'framer-motion';\nimport { useEffect, type PropsWithChildren } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { useMicroguideContext } from './hooks/useMicroguideContext.js';\nimport {\n  microguideAnimatedContentCSS,\n  microguideContentWrapperCSS,\n  microguideStepContainerCSS,\n  microguideVisualWrapperCSS,\n} from './Microguide.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { moveEasing } from '../../core/utils/framer-motion-easings.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Content } from '../shared-components/Content.js';\nimport { Title } from '../shared-components/Title.js';\nimport { Visual } from '../shared-components/Visual.js';\n\n//#endregion Typings\n\nconst contentVariants: Variants = {\n  enter: (isNext: boolean) => {\n    return {\n      x: isNext ? '100%' : '-100%',\n      opacity: 0,\n    };\n  },\n  center: {\n    x: 0,\n    opacity: 1,\n    position: 'relative',\n  },\n  exit: (isNext: boolean) => {\n    return {\n      x: isNext ? '-100%' : '100%',\n      opacity: 0,\n      position: 'absolute',\n      left: 0,\n    };\n  },\n};\n\nconst fadeProps: MotionProps = {\n  initial: {\n    opacity: 0,\n  },\n  animate: {\n    opacity: 1,\n    position: 'relative',\n  },\n  exit: {\n    opacity: 0,\n    position: 'absolute',\n    left: 0,\n  },\n};\n\n/**\n * Container for a single step of the Microguide.\n * @public\n */\nexport const Step = ({ children }: PropsWithChildren) => {\n  const {\n    onClose,\n    currentStep,\n    totalSteps,\n    isNext,\n    setHasContent,\n    setHasTitle,\n    closeButtonRef,\n    closedOnKeydown,\n  } = useMicroguideContext();\n  const intl = useIntl();\n\n  const shouldReduceMotion = useReducedMotion();\n  const transitionProp: Transition = {\n    duration: shouldReduceMotion ? 0 : AnimationsJS.SlideIn.Duration.Base,\n    ease: moveEasing,\n  };\n\n  const [slots] = useSlots(children, {\n    title: Title,\n    visual: Visual,\n    content: Content,\n  });\n\n  useEffect(() => {\n    setHasTitle(slots.title !== undefined);\n    setHasContent(slots.content !== undefined);\n  }, [setHasContent, setHasTitle, slots.content, slots.title]);\n\n  return (\n    <Flex\n      as={motion.div}\n      flexDirection=\"column\"\n      gap={8}\n      className={microguideStepContainerCSS}\n    >\n      <Flex\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"flex-start\"\n        gap={16}\n        paddingTop={8}\n        paddingLeft={16}\n        paddingRight={8}\n      >\n        <Flex\n          flexItem\n          paddingY={6}\n          flexGrow={1}\n          id=\"strato-microguide-title\"\n          style={{ position: 'relative' }}\n        >\n          <AnimatePresence initial={false}>\n            {slots.title && (\n              <motion.div\n                {...fadeProps}\n                transition={transitionProp}\n                key={`strato-microguide-title-${currentStep}`}\n              >\n                {slots.title}\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </Flex>\n        <Button\n          onClick={() => onClose(currentStep, currentStep + 1 === totalSteps)}\n          onKeyDown={() => (closedOnKeydown.current = true)}\n          ref={closeButtonRef}\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Close microguide',\n            id: '0yl3EugW5oCHVbO1',\n            description: 'Close the microguide.',\n          })}\n        >\n          <Button.Prefix>\n            <XmarkIcon />\n          </Button.Prefix>\n        </Button>\n      </Flex>\n      {slots.visual && (\n        <div className={microguideVisualWrapperCSS}>\n          <AnimatePresence initial={false}>\n            <motion.div\n              {...fadeProps}\n              transition={transitionProp}\n              key={`strato-microguide-visual-${currentStep}`}\n            >\n              {slots.visual}\n            </motion.div>\n          </AnimatePresence>\n        </div>\n      )}\n      {slots.content && (\n        <div\n          className={microguideContentWrapperCSS}\n          id=\"strato-microguide-content\"\n        >\n          <AnimatePresence initial={false} custom={isNext}>\n            <Flex\n              as={motion.div}\n              variants={contentVariants}\n              className={microguideAnimatedContentCSS}\n              custom={isNext}\n              initial=\"enter\"\n              animate=\"center\"\n              exit=\"exit\"\n              transition={transitionProp}\n              key={`strato-microguide-content-${currentStep}`}\n              flexDirection=\"column\"\n            >\n              {slots.content}\n            </Flex>\n          </AnimatePresence>\n        </div>\n      )}\n    </Flex>\n  );\n};\n\nStep['displayName'] = 'Microguide.Step';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n  type MotionProps,\n  type Transition,\n  type Variants,\n} from 'framer-motion';\nimport { useEffect, type PropsWithChildren } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { useMicroguideContext } from './hooks/useMicroguideContext.js';\nimport {\n  microguideAnimatedContentCSS,\n  microguideContentWrapperCSS,\n  microguideStepContainerCSS,\n  microguideVisualWrapperCSS,\n} from './Microguide.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { moveEasing } from '../../core/utils/framer-motion-easings.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Content } from '../shared-components/Content.js';\nimport { Title } from '../shared-components/Title.js';\nimport { Visual } from '../shared-components/Visual.js';\n\n//#endregion Typings\n\nconst contentVariants: Variants = {\n  enter: (isNext: boolean) => {\n    return {\n      x: isNext ? '100%' : '-100%',\n      opacity: 0,\n    };\n  },\n  center: {\n    x: 0,\n    opacity: 1,\n    position: 'relative',\n  },\n  exit: (isNext: boolean) => {\n    return {\n      x: isNext ? '-100%' : '100%',\n      opacity: 0,\n      position: 'absolute',\n      left: 0,\n    };\n  },\n};\n\nconst fadeProps: MotionProps = {\n  initial: {\n    opacity: 0,\n  },\n  animate: {\n    opacity: 1,\n    position: 'relative',\n  },\n  exit: {\n    opacity: 0,\n    position: 'absolute',\n    left: 0,\n  },\n};\n\n/**\n * Container for a single step of the Microguide.\n * @public\n */\nexport const Step = ({ children }: PropsWithChildren) => {\n  const {\n    onClose,\n    currentStep,\n    totalSteps,\n    isNext,\n    setHasContent,\n    setHasTitle,\n    closeButtonRef,\n    closedOnKeydown,\n  } = useMicroguideContext();\n  const intl = useIntl();\n\n  const shouldReduceMotion = useReducedMotion();\n  const transitionProp: Transition = {\n    duration: shouldReduceMotion ? 0 : AnimationsJS.SlideIn.Duration.Base,\n    ease: moveEasing,\n  };\n\n  const [slots] = useSlots(children, {\n    title: Title,\n    visual: Visual,\n    content: Content,\n  });\n\n  useEffect(() => {\n    setHasTitle(slots.title !== undefined);\n    setHasContent(slots.content !== undefined);\n  }, [setHasContent, setHasTitle, slots.content, slots.title]);\n\n  return (\n    <Flex\n      as={motion.div}\n      flexDirection=\"column\"\n      gap={8}\n      className={microguideStepContainerCSS}\n    >\n      <Flex\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"flex-start\"\n        gap={16}\n        paddingTop={8}\n        paddingLeft={16}\n        paddingRight={8}\n      >\n        <Flex\n          flexItem\n          paddingY={6}\n          flexGrow={1}\n          id=\"strato-microguide-title\"\n          style={{ position: 'relative' }}\n        >\n          <AnimatePresence initial={false}>\n            {slots.title && (\n              <motion.div\n                {...fadeProps}\n                transition={transitionProp}\n                key={`strato-microguide-title-${currentStep}`}\n              >\n                {slots.title}\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </Flex>\n        <Button\n          onClick={() => onClose(currentStep, currentStep + 1 === totalSteps)}\n          onKeyDown={() => (closedOnKeydown.current = true)}\n          ref={closeButtonRef}\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Close microguide',\n            id: '0yl3EugW5oCHVbO1',\n            description: 'Close the microguide.',\n          })}\n          data-dt-name=\"CloseButton\"\n        >\n          <Button.Prefix>\n            <XmarkIcon />\n          </Button.Prefix>\n        </Button>\n      </Flex>\n      {slots.visual && (\n        <div className={microguideVisualWrapperCSS}>\n          <AnimatePresence initial={false}>\n            <motion.div\n              {...fadeProps}\n              transition={transitionProp}\n              key={`strato-microguide-visual-${currentStep}`}\n            >\n              {slots.visual}\n            </motion.div>\n          </AnimatePresence>\n        </div>\n      )}\n      {slots.content && (\n        <div\n          className={microguideContentWrapperCSS}\n          id=\"strato-microguide-content\"\n        >\n          <AnimatePresence initial={false} custom={isNext}>\n            <Flex\n              as={motion.div}\n              variants={contentVariants}\n              className={microguideAnimatedContentCSS}\n              custom={isNext}\n              initial=\"enter\"\n              animate=\"center\"\n              exit=\"exit\"\n              transition={transitionProp}\n              key={`strato-microguide-content-${currentStep}`}\n              flexDirection=\"column\"\n            >\n              {slots.content}\n            </Flex>\n          </AnimatePresence>\n        </div>\n      )}\n    </Flex>\n  );\n};\n\nStep['displayName'] = 'Microguide.Step';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/progress/ProgressBar.css

@@ -1,4 +1,4 @@
-@keyframes _13n9uwh0-3-1-3 {
+@keyframes _13n9uwh0-3-2-1 {
   0% {
     transform: translateX(-100%) scaleX(0);
   }
@@ -6,92 +6,92 @@
     transform: translateX(100%) scaleX(1.5);
   }
 }
-._13n9uwh5-3-1-3 {
-  color: var(--_13n9uwh1-3-1-3);
-}
-._13n9uwhd-3-1-3 {
-  --_13n9uwh1-3-1-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_13n9uwh4-3-1-3: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_13n9uwh2-3-1-3: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_13n9uwh3-3-1-3: var(--dt-colors-border-primary-accent, #464cce);
-}
-._13n9uwhe-3-1-3 {
-  --_13n9uwh1-3-1-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_13n9uwh4-3-1-3: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_13n9uwh2-3-1-3: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_13n9uwh3-3-1-3: var(--dt-colors-border-success-accent, #2d6761);
-}
-._13n9uwhf-3-1-3 {
-  --_13n9uwh1-3-1-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_13n9uwh4-3-1-3: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_13n9uwh2-3-1-3: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_13n9uwh3-3-1-3: var(--dt-colors-border-warning-accent, #855400);
-}
-._13n9uwhg-3-1-3 {
-  --_13n9uwh1-3-1-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_13n9uwh4-3-1-3: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_13n9uwh2-3-1-3: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_13n9uwh3-3-1-3: var(--dt-colors-border-critical-accent, #bb0731);
-}
-._13n9uwhh-3-1-3 {
-  --_13n9uwh1-3-1-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_13n9uwh4-3-1-3: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_13n9uwh2-3-1-3: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_13n9uwh3-3-1-3: var(--dt-colors-border-neutral-accent, #595a7d);
+._13n9uwh5-3-2-1 {
+  color: var(--_13n9uwh1-3-2-1);
+}
+._13n9uwhd-3-2-1 {
+  --_13n9uwh1-3-2-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_13n9uwh4-3-2-1: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_13n9uwh2-3-2-1: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_13n9uwh3-3-2-1: var(--dt-colors-border-primary-accent, #464cce);
+}
+._13n9uwhe-3-2-1 {
+  --_13n9uwh1-3-2-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_13n9uwh4-3-2-1: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_13n9uwh2-3-2-1: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_13n9uwh3-3-2-1: var(--dt-colors-border-success-accent, #2d6761);
+}
+._13n9uwhf-3-2-1 {
+  --_13n9uwh1-3-2-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_13n9uwh4-3-2-1: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_13n9uwh2-3-2-1: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_13n9uwh3-3-2-1: var(--dt-colors-border-warning-accent, #855400);
+}
+._13n9uwhg-3-2-1 {
+  --_13n9uwh1-3-2-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_13n9uwh4-3-2-1: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_13n9uwh2-3-2-1: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_13n9uwh3-3-2-1: var(--dt-colors-border-critical-accent, #bb0731);
+}
+._13n9uwhh-3-2-1 {
+  --_13n9uwh1-3-2-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_13n9uwh4-3-2-1: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_13n9uwh2-3-2-1: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_13n9uwh3-3-2-1: var(--dt-colors-border-neutral-accent, #595a7d);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._13n9uwhi-3-1-3 {
-  --_13n9uwh1-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh4-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh2-3-1-3: var(--dt-colors-border-primary-on-accent-disabled, #f4f4fb33);
-  --_13n9uwh3-3-1-3: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
-}
-._13n9uwhj-3-1-3 {
-  --_13n9uwh1-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh4-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh2-3-1-3: var(--dt-colors-border-success-on-accent-disabled, #f1f4f433);
-  --_13n9uwh3-3-1-3: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
-}
-._13n9uwhk-3-1-3 {
-  --_13n9uwh1-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh4-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh2-3-1-3: var(--dt-colors-border-warning-on-accent-disabled, #27202433);
-  --_13n9uwh3-3-1-3: var(--dt-colors-border-warning-on-accent-default, #272024);
-}
-._13n9uwhl-3-1-3 {
-  --_13n9uwh1-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh4-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh2-3-1-3: var(--dt-colors-border-critical-on-accent-disabled, #f9f1f333);
-  --_13n9uwh3-3-1-3: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
-}
-._13n9uwhm-3-1-3 {
-  --_13n9uwh1-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh4-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh2-3-1-3: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
-  --_13n9uwh3-3-1-3: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
-}
-._13n9uwhn-3-1-3 {
+._13n9uwhi-3-2-1 {
+  --_13n9uwh1-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh4-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh2-3-2-1: var(--dt-colors-border-primary-on-accent-disabled, #f4f4fb33);
+  --_13n9uwh3-3-2-1: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
+}
+._13n9uwhj-3-2-1 {
+  --_13n9uwh1-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh4-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh2-3-2-1: var(--dt-colors-border-success-on-accent-disabled, #f1f4f433);
+  --_13n9uwh3-3-2-1: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
+}
+._13n9uwhk-3-2-1 {
+  --_13n9uwh1-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh4-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh2-3-2-1: var(--dt-colors-border-warning-on-accent-disabled, #27202433);
+  --_13n9uwh3-3-2-1: var(--dt-colors-border-warning-on-accent-default, #272024);
+}
+._13n9uwhl-3-2-1 {
+  --_13n9uwh1-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh4-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh2-3-2-1: var(--dt-colors-border-critical-on-accent-disabled, #f9f1f333);
+  --_13n9uwh3-3-2-1: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
+}
+._13n9uwhm-3-2-1 {
+  --_13n9uwh1-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh4-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh2-3-2-1: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
+  --_13n9uwh3-3-2-1: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+}
+._13n9uwhn-3-2-1 {
   width: 100%;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   overflow: hidden;
   position: relative;
-  background: var(--_13n9uwh2-3-1-3);
+  background: var(--_13n9uwh2-3-2-1);
 }
-._13n9uwho-3-1-3 {
+._13n9uwho-3-2-1 {
   height: 6px;
 }
-._13n9uwhp-3-1-3 {
+._13n9uwhp-3-2-1 {
   height: 8px;
 }
-._13n9uwhq-3-1-3 {
+._13n9uwhq-3-2-1 {
   height: 100%;
   transition-duration: var(--dt-timings-fast-default, 170ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
-  background-color: var(--_13n9uwh3-3-1-3);
+  background-color: var(--_13n9uwh3-3-2-1);
 }
-._13n9uwhr-3-1-3 {
+._13n9uwhr-3-2-1 {
   width: 100%;
-  animation-name: _13n9uwh0-3-1-3;
+  animation-name: _13n9uwh0-3-2-1;
   animation-duration: var(--dt-timings-slowest-gentle, 1500ms);
   animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   animation-iteration-count: infinite;

package/esm/content/progress/ProgressBar.sty.js

@@ -1,10 +1,10 @@
 import "./ProgressBar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var progressBarFillCSS = _7a468({ defaultClassName: "_13n9uwhq-3-1-3", variantClassNames: { indeterminate: { true: "_13n9uwhr-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCSS = _7a468({ defaultClassName: "_13n9uwhn-3-1-3", variantClassNames: { size: { condensed: "_13n9uwho-3-1-3", "default": "_13n9uwhp-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var progressIndicatorColorVar = "var(--_13n9uwh3-3-1-3)";
-var progressRoot = _7a468({ defaultClassName: "_13n9uwh5-3-1-3", variantClassNames: { color: { primary: "_13n9uwh6-3-1-3", success: "_13n9uwh7-3-1-3", warning: "_13n9uwh8-3-1-3", critical: "_13n9uwh9-3-1-3", neutral: "_13n9uwha-3-1-3" }, onAccent: { true: "_13n9uwhb-3-1-3", false: "_13n9uwhc-3-1-3" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", onAccent: false }, "_13n9uwhd-3-1-3"], [{ color: "success", onAccent: false }, "_13n9uwhe-3-1-3"], [{ color: "warning", onAccent: false }, "_13n9uwhf-3-1-3"], [{ color: "critical", onAccent: false }, "_13n9uwhg-3-1-3"], [{ color: "neutral", onAccent: false }, "_13n9uwhh-3-1-3"], [{ color: "primary", onAccent: true }, "_13n9uwhi-3-1-3"], [{ color: "success", onAccent: true }, "_13n9uwhj-3-1-3"], [{ color: "warning", onAccent: true }, "_13n9uwhk-3-1-3"], [{ color: "critical", onAccent: true }, "_13n9uwhl-3-1-3"], [{ color: "neutral", onAccent: true }, "_13n9uwhm-3-1-3"]] });
-var progressValueColorVar = "var(--_13n9uwh4-3-1-3)";
+var progressBarFillCSS = _7a468({ defaultClassName: "_13n9uwhq-3-2-1", variantClassNames: { indeterminate: { true: "_13n9uwhr-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCSS = _7a468({ defaultClassName: "_13n9uwhn-3-2-1", variantClassNames: { size: { condensed: "_13n9uwho-3-2-1", "default": "_13n9uwhp-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var progressIndicatorColorVar = "var(--_13n9uwh3-3-2-1)";
+var progressRoot = _7a468({ defaultClassName: "_13n9uwh5-3-2-1", variantClassNames: { color: { primary: "_13n9uwh6-3-2-1", success: "_13n9uwh7-3-2-1", warning: "_13n9uwh8-3-2-1", critical: "_13n9uwh9-3-2-1", neutral: "_13n9uwha-3-2-1" }, onAccent: { true: "_13n9uwhb-3-2-1", false: "_13n9uwhc-3-2-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", onAccent: false }, "_13n9uwhd-3-2-1"], [{ color: "success", onAccent: false }, "_13n9uwhe-3-2-1"], [{ color: "warning", onAccent: false }, "_13n9uwhf-3-2-1"], [{ color: "critical", onAccent: false }, "_13n9uwhg-3-2-1"], [{ color: "neutral", onAccent: false }, "_13n9uwhh-3-2-1"], [{ color: "primary", onAccent: true }, "_13n9uwhi-3-2-1"], [{ color: "success", onAccent: true }, "_13n9uwhj-3-2-1"], [{ color: "warning", onAccent: true }, "_13n9uwhk-3-2-1"], [{ color: "critical", onAccent: true }, "_13n9uwhl-3-2-1"], [{ color: "neutral", onAccent: true }, "_13n9uwhm-3-2-1"]] });
+var progressValueColorVar = "var(--_13n9uwh4-3-2-1)";
 export {
   progressBarFillCSS,
   progressCSS,

package/esm/content/progress/ProgressBar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/progress/ProgressBar.css.ts"],
-  "sourcesContent": ["import './ProgressBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarFillCSS = _7a468({defaultClassName:'_13n9uwhq-3-1-3',variantClassNames:{indeterminate:{true:'_13n9uwhr-3-1-3'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCSS = _7a468({defaultClassName:'_13n9uwhn-3-1-3',variantClassNames:{size:{condensed:'_13n9uwho-3-1-3','default':'_13n9uwhp-3-1-3'}},defaultVariants:{},compoundVariants:[]});\nexport var progressIndicatorColorVar = 'var(--_13n9uwh3-3-1-3)';\nexport var progressRoot = _7a468({defaultClassName:'_13n9uwh5-3-1-3',variantClassNames:{color:{primary:'_13n9uwh6-3-1-3',success:'_13n9uwh7-3-1-3',warning:'_13n9uwh8-3-1-3',critical:'_13n9uwh9-3-1-3',neutral:'_13n9uwha-3-1-3'},onAccent:{true:'_13n9uwhb-3-1-3',false:'_13n9uwhc-3-1-3'}},defaultVariants:{},compoundVariants:[[{color:'primary',onAccent:false},'_13n9uwhd-3-1-3'],[{color:'success',onAccent:false},'_13n9uwhe-3-1-3'],[{color:'warning',onAccent:false},'_13n9uwhf-3-1-3'],[{color:'critical',onAccent:false},'_13n9uwhg-3-1-3'],[{color:'neutral',onAccent:false},'_13n9uwhh-3-1-3'],[{color:'primary',onAccent:true},'_13n9uwhi-3-1-3'],[{color:'success',onAccent:true},'_13n9uwhj-3-1-3'],[{color:'warning',onAccent:true},'_13n9uwhk-3-1-3'],[{color:'critical',onAccent:true},'_13n9uwhl-3-1-3'],[{color:'neutral',onAccent:true},'_13n9uwhm-3-1-3']]});\nexport var progressValueColorVar = 'var(--_13n9uwh4-3-1-3)';"],
+  "sourcesContent": ["import './ProgressBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarFillCSS = _7a468({defaultClassName:'_13n9uwhq-3-2-1',variantClassNames:{indeterminate:{true:'_13n9uwhr-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCSS = _7a468({defaultClassName:'_13n9uwhn-3-2-1',variantClassNames:{size:{condensed:'_13n9uwho-3-2-1','default':'_13n9uwhp-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var progressIndicatorColorVar = 'var(--_13n9uwh3-3-2-1)';\nexport var progressRoot = _7a468({defaultClassName:'_13n9uwh5-3-2-1',variantClassNames:{color:{primary:'_13n9uwh6-3-2-1',success:'_13n9uwh7-3-2-1',warning:'_13n9uwh8-3-2-1',critical:'_13n9uwh9-3-2-1',neutral:'_13n9uwha-3-2-1'},onAccent:{true:'_13n9uwhb-3-2-1',false:'_13n9uwhc-3-2-1'}},defaultVariants:{},compoundVariants:[[{color:'primary',onAccent:false},'_13n9uwhd-3-2-1'],[{color:'success',onAccent:false},'_13n9uwhe-3-2-1'],[{color:'warning',onAccent:false},'_13n9uwhf-3-2-1'],[{color:'critical',onAccent:false},'_13n9uwhg-3-2-1'],[{color:'neutral',onAccent:false},'_13n9uwhh-3-2-1'],[{color:'primary',onAccent:true},'_13n9uwhi-3-2-1'],[{color:'success',onAccent:true},'_13n9uwhj-3-2-1'],[{color:'warning',onAccent:true},'_13n9uwhk-3-2-1'],[{color:'critical',onAccent:true},'_13n9uwhl-3-2-1'],[{color:'neutral',onAccent:true},'_13n9uwhm-3-2-1']]});\nexport var progressValueColorVar = 'var(--_13n9uwh4-3-2-1)';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtK,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvL,IAAI,4BAA4B;AAChC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,UAAS,mBAAkB,SAAQ,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AAC50B,IAAI,wBAAwB;",
   "names": []
 }

package/esm/content/progress/ProgressBarIcon.css

@@ -1,5 +1,5 @@
-._szm9t40-3-1-3 {
+._szm9t40-3-2-1 {
   display: flex;
   margin-left: auto;
-  color: var(--_13n9uwh3-3-1-3);
+  color: var(--_13n9uwh3-3-2-1);
 }

package/esm/content/progress/ProgressBarIcon.sty.js

@@ -1,6 +1,6 @@
 import "./ProgressBar.css";
 import "./ProgressBarIcon.css";
-var progressBarIconContainerCSS = "_szm9t40-3-1-3";
+var progressBarIconContainerCSS = "_szm9t40-3-2-1";
 export {
   progressBarIconContainerCSS
 };

package/esm/content/progress/ProgressBarIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/progress/ProgressBarIcon.css.ts"],
-  "sourcesContent": ["import './ProgressBar.css';\nimport './ProgressBarIcon.css';\nexport var progressBarIconContainerCSS = '_szm9t40-3-1-3';"],
+  "sourcesContent": ["import './ProgressBar.css';\nimport './ProgressBarIcon.css';\nexport var progressBarIconContainerCSS = '_szm9t40-3-2-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,8BAA8B;",
   "names": []
 }