@dynatrace/strato-components 3.11.0 → 3.11.2

package/esm/layouts/app-header/action-group/ActionGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  Fragment,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { ActionButton } from './ActionButton.js';\nimport { actionGroupHiddenItemCSS } from './ActionGroup.sty.js';\nimport { CollapsedActionGroup } from './CollapsedActionGroup.js';\nimport { ACTION_GROUP_GAP } from './constants.js';\nimport { ActionGroupContext } from './contexts/ActionGroupContext.js';\nimport { Group } from './Group.js';\nimport { NavItem } from './NavItem.js';\nimport { useContainerSize } from '../../../core/hooks/useContainerSize.js';\nimport { useMeasureChildren } from '../../../core/hooks/useMeasureChildren.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useRovingFocus } from '../../../core/hooks/useRovingFocus.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../../core/utils/merge-props.js';\nimport { Divider } from '../../divider/Divider.js';\nimport { Flex, FlexOwnProps } from '../../flex/Flex.js';\n\nconst COMPONENT_NAME = 'ActionGroup';\n\n// #region Typings\n/** @internal */\nexport interface ActionGroupProps\n  extends FlexOwnProps,\n    HTMLAttributes<HTMLElement>,\n    WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether or not the ActionGroup is collapsible.\n   * @defaultValue true\n   */\n  collapsible?: boolean;\n  /**\n   * Whether the items in the ActionGroup should have a roving focus applied.\n   * @defaultValue true\n   */\n  rovingFocus?: boolean;\n  /**\n   * Whether to collapse starting from the beginning or end of the ActionGroup.\n   * @defaultValue start\n   */\n  collapseFrom?: 'start' | 'end';\n  /**\n   * Icon used for the trigger that opens/closes the overlay when the ActionGroup is collapsed.\n   */\n  triggerIcon?: ReactElement;\n  /**\n   * Influences the spacings. Condensed is more compact.\n   */\n  density?: 'default' | 'condensed';\n  /**\n   * Handler called when the collapsed state changes.\n   */\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n  /**\n   * Handler called when at least one item is moved into the menu.\n   */\n  onOverflowChange?: (isCollapsed: boolean) => void;\n}\n\ntype SlotsType = {\n  items: ReactNode[];\n  menuItems: ReactNode[];\n};\n// #endregion\n\nfunction itemIsPinned(child: ReactNode): boolean {\n  return (\n    isElement(child) &&\n    typeof child.props === 'object' &&\n    child.props !== null &&\n    'pin' in child.props &&\n    child.props.pin === true\n  );\n}\n\nconst ActionGroupRoot = forwardRef<HTMLDivElement, ActionGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      collapsible = true,\n      collapseFrom = 'start',\n      children,\n      rovingFocus = true,\n      triggerIcon,\n      density = 'default',\n      onCollapsedChange,\n      onOverflowChange,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...restProps\n    }: ActionGroupProps = props;\n    const _containerRef = useRef<HTMLDivElement | null>(null);\n\n    const { containerRef, measurements, childProps } = useMeasureChildren();\n\n    // Sorted array of child nodes, including dividers (but not the menu trigger). Needed to access\n    // the child node corresponding to the index of the childProps returned from the useMeasureChildren hook.\n    const measuredChildren = useRef<\n      Array<ReactNode | { props?: { pin: boolean } }>\n    >([]);\n    const { width } = useContainerSize(_containerRef);\n    // We need to round up the width, otherwise we might run into an endless loop\n    // with the ActionGroup constantly collapsing / expanding.\n    const containerWidth = Math.round(width);\n\n    const menuItems = useRef(new Map<string, boolean>());\n    // Number of items that are pinned. Used to adjust when the onCollapsedChange callback is triggered.\n    const pinnedItemsCount = useRef(0);\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    const totalChildrenWidth = useMemo(() => {\n      // Get total width of children.\n      let childWidths = Object.values(measurements).reduce(\n        (acc, value) => (acc += value?.width || 0),\n        0,\n      );\n      // We also have to include the gaps the flex container is adding.\n      childWidths += (childProps.length - 1) * ACTION_GROUP_GAP;\n\n      return childWidths;\n    }, [childProps, measurements]);\n\n    const slots = useMemo(() => {\n      const slots: SlotsType = { items: [], menuItems: [] };\n\n      // Using React.Children.toArray and not React.Children.forEach to get the correct index for each child.\n      // If an item is conditionally rendered in the ActionGroup, it would still be iterated over using forEach,\n      // even if it ends up not being rendered in the DOM.\n      // Converting the children to an array already removes children that will not be rendered.\n      const childrenArray = Children.toArray(children);\n\n      // As soon as we have sufficient data from the measurement hook,\n      // determine visible and hidden action group items.\n      if (\n        collapsible &&\n        containerWidth > 0 &&\n        childProps.length > 0 &&\n        Object.keys(measurements).length === childProps.length\n      ) {\n        const childKeys = childProps.map((props) => props['data-id']);\n\n        // Index of the next child to remove if there is not enough space.\n        // Currently collapsing the actions starting on the start.\n        let childIndex = collapseFrom === 'start' ? 0 : childProps.length - 1;\n        // Clear all entries so that action group items will show up again when expanding the container.\n        menuItems.current.clear();\n\n        let childWidths = totalChildrenWidth;\n        while (\n          childWidths > containerWidth &&\n          ((collapseFrom === 'end' && childIndex >= 0) ||\n            (collapseFrom === 'start' && childIndex < childProps.length))\n        ) {\n          const childNode =\n            measuredChildren.current[\n              // The childProps array also includes props for the menu trigger, which is not included in the\n              // measured children array. If collapsing from the end, the index needs to be shifted back by 1.\n              childIndex + (isOverflowing && collapseFrom === 'end' ? -1 : 0)\n            ];\n\n          // If an item is pinned, we don't push it into the menu.\n          if (isElement(childNode) && itemIsPinned(childNode)) {\n            // Intentionally left empty\n          } else {\n            let childKeyIndex = childIndex;\n            if (isOverflowing) {\n              // If an item is already overflowing, we need to shift the index by 1 to not\n              // include the menu trigger in the calculation since it will never be hidden.\n              const collapseFromOffset = collapseFrom === 'start' ? 1 : -1;\n              childKeyIndex = childKeyIndex + collapseFromOffset;\n            }\n            const key = childKeys[childKeyIndex];\n            if (key && measurements[key] !== undefined) {\n              // Add item to the list of items rendered in the menu.\n              menuItems.current.set(key, true);\n              // Subtract freed up space and check again, if there's sufficient space to render the remaining children.\n              childWidths -= (measurements[key]?.width || 0) + ACTION_GROUP_GAP;\n            }\n          }\n\n          childIndex += collapseFrom === 'start' ? 1 : -1;\n        }\n      }\n\n      let groupCount = 0;\n      let pinnedItems = 0;\n      measuredChildren.current = [];\n\n      for (const [index, child] of childrenArray.entries()) {\n        if (!isElement(child)) {\n          continue;\n        }\n\n        // The key applied to the children so react is not removing the nodes when adding the menu trigger.\n        // This would cause the mutation observer of the measurement hook to trigger and mess up the calculations.\n        // Applying a consistent child key resolves that issue.\n        const childKey = index + groupCount;\n        // The index of the child used to apply the correct childProps returned from the measurement hook.\n        // If collapsing from the end and an overflow is already happening, we need to shift by 1 to account\n        // for the menu trigger that is then also included in the childProps array.\n        const childIndex =\n          childKey + (isOverflowing && collapseFrom === 'start' ? 1 : 0);\n\n        const isItemOverflowing = menuItems.current.get(\n          childProps[childIndex]?.['data-id'] || '',\n        );\n\n        const clonedChild = cloneElement(\n          child,\n          _mergeProps(child.props ?? {}, childProps[childIndex], {\n            key: childKey,\n            className: clsx(props.className, {\n              [actionGroupHiddenItemCSS]: isItemOverflowing,\n            }),\n          }),\n        );\n\n        // TODO: If the item before the group is not also a group, we should also add a divider there.\n        // Add a divider for each group rendered in the ActionGroup (except the last one).\n        if (child.type === Group) {\n          // If the item after the divider is overflowing, the divider needs to be hidden.\n          const isNextItemOverflowing = menuItems.current.get(\n            childProps[childIndex + 2]?.['data-id'] || '',\n          );\n          measuredChildren.current.push(clonedChild);\n\n          slots.items.push(\n            <Fragment key={`fragment-${childKey}`}>\n              {clonedChild}\n              {index !== childrenArray.length - 1 && (\n                <Divider\n                  orientation=\"vertical\"\n                  flexItem={false}\n                  style={{\n                    height: 20,\n                  }}\n                  className={clsx({\n                    [actionGroupHiddenItemCSS]:\n                      !!isItemOverflowing || !!isNextItemOverflowing,\n                  })}\n                  {...childProps[childIndex + 1]}\n                  key={childKey + 1}\n                />\n              )}\n            </Fragment>,\n          );\n\n          if (itemIsPinned(child)) {\n            measuredChildren.current.push({ props: { pin: true } });\n            pinnedItems += 1;\n          } else {\n            measuredChildren.current.push({});\n          }\n\n          groupCount += 1;\n        } else {\n          measuredChildren.current.push(clonedChild);\n          slots.items.push(clonedChild);\n\n          if (itemIsPinned(child)) {\n            pinnedItems += 1;\n          }\n        }\n\n        if (isItemOverflowing) {\n          slots.menuItems.push(child);\n        }\n      }\n\n      pinnedItemsCount.current = pinnedItems;\n\n      setIsOverflowing(slots.menuItems.length > 0);\n      setIsCollapsed(\n        slots.menuItems.length + pinnedItemsCount.current ===\n          slots.items.length,\n      );\n\n      return slots;\n      // Excluding state 'isOverflowing' to prevent an additional re-render.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n      measurements,\n      childProps,\n      children,\n      collapseFrom,\n      collapsible,\n      totalChildrenWidth,\n      containerWidth,\n    ]);\n\n    const { containerRef: rovingContainerRef } = useRovingFocus<HTMLDivElement>(\n      {\n        // FIXME: Follow-up for detecting the initial index already, when it is initially undefined based on\n        // either tab-index attributes or the first focusable element. This will solve the problem for\n        // everyone and will not overcomplicate the logic. ADES-2260\n        initialIndex: undefined,\n        direction: 'horizontal',\n        focusableChildrenSelector:\n          ':scope a, :scope button, :scope [type=\"button\"]',\n      },\n    );\n\n    const rootRef = useMergeRefs([\n      forwardedRef,\n      ...(rovingFocus ? [rovingContainerRef] : []),\n    ]);\n    const collapsibleRootRef = useMergeRefs([\n      rootRef,\n      containerRef,\n      _containerRef,\n    ]);\n\n    // Trigger onOverflowChange callback whenever the isOverflowing state changes.\n    useEffect(() => {\n      onOverflowChange?.(isOverflowing);\n    }, [isOverflowing, onOverflowChange]);\n\n    // Trigger onCollapsedChange callback whenever the isCollapsed state changes.\n    useEffect(() => {\n      onCollapsedChange?.(isCollapsed);\n    }, [isCollapsed, onCollapsedChange]);\n\n    return (\n      <Flex\n        data-actiongroup\n        alignItems=\"center\"\n        data-testid={dataTestId}\n        ref={collapsible ? collapsibleRootRef : rootRef}\n        gap={ACTION_GROUP_GAP}\n        className={consumerClassName}\n        style={{ minWidth: !collapsible ? 0 : undefined, ...consumerStyle }}\n        {...restProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <ActionGroupContext.Provider\n          value={{\n            isCollapsed: false,\n          }}\n        >\n          {collapseFrom === 'start' && slots?.menuItems.length > 0 && (\n            <CollapsedActionGroup\n              triggerIcon={triggerIcon}\n              childProps={childProps[0]}\n              density={density}\n            >\n              {slots?.menuItems}\n            </CollapsedActionGroup>\n          )}\n          {slots?.items}\n          {collapseFrom === 'end' && slots?.menuItems.length > 0 && (\n            <CollapsedActionGroup\n              triggerIcon={triggerIcon}\n              childProps={childProps[childProps.length - 1]}\n              density={density}\n            >\n              {slots?.menuItems}\n            </CollapsedActionGroup>\n          )}\n        </ActionGroupContext.Provider>\n      </Flex>\n    );\n  },\n);\n\n(\n  ActionGroupRoot as typeof ActionGroupRoot & { displayName: string }\n).displayName = 'ActionGroup';\n\n/**\n * The `ActionGroup` groups related actions in a container. It takes care of\n * collapsing the actions into an overlay if there is insufficient space for\n * rendering all the actions next to each other. It also applies a roving focus\n * to the actions.\n * @internal\n */\nexport const ActionGroup = Object.assign(ActionGroupRoot, {\n  ActionButton,\n  Group,\n  NavItem,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  Fragment,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { ActionButton } from './ActionButton.js';\nimport { actionGroupHiddenItemCSS } from './ActionGroup.sty.js';\nimport { CollapsedActionGroup } from './CollapsedActionGroup.js';\nimport { ACTION_GROUP_GAP } from './constants.js';\nimport { ActionGroupContext } from './contexts/ActionGroupContext.js';\nimport { Group } from './Group.js';\nimport { NavItem } from './NavItem.js';\nimport { useContainerSize } from '../../../core/hooks/useContainerSize.js';\nimport { useMeasureChildren } from '../../../core/hooks/useMeasureChildren.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useRovingFocus } from '../../../core/hooks/useRovingFocus.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../../core/utils/merge-props.js';\nimport { Divider } from '../../divider/Divider.js';\nimport { Flex, FlexOwnProps } from '../../flex/Flex.js';\n\nconst COMPONENT_NAME = 'ActionGroup';\n\n// #region Typings\n/** @internal */\nexport interface ActionGroupProps\n  extends\n    FlexOwnProps,\n    HTMLAttributes<HTMLElement>,\n    WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether or not the ActionGroup is collapsible.\n   * @defaultValue true\n   */\n  collapsible?: boolean;\n  /**\n   * Whether the items in the ActionGroup should have a roving focus applied.\n   * @defaultValue true\n   */\n  rovingFocus?: boolean;\n  /**\n   * Whether to collapse starting from the beginning or end of the ActionGroup.\n   * @defaultValue start\n   */\n  collapseFrom?: 'start' | 'end';\n  /**\n   * Icon used for the trigger that opens/closes the overlay when the ActionGroup is collapsed.\n   */\n  triggerIcon?: ReactElement;\n  /**\n   * Influences the spacings. Condensed is more compact.\n   */\n  density?: 'default' | 'condensed';\n  /**\n   * Handler called when the collapsed state changes.\n   */\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n  /**\n   * Handler called when at least one item is moved into the menu.\n   */\n  onOverflowChange?: (isCollapsed: boolean) => void;\n}\n\ntype SlotsType = {\n  items: ReactNode[];\n  menuItems: ReactNode[];\n};\n// #endregion\n\nfunction itemIsPinned(child: ReactNode): boolean {\n  return (\n    isValidElement(child) &&\n    typeof child.props === 'object' &&\n    child.props !== null &&\n    'pin' in child.props &&\n    child.props.pin === true\n  );\n}\n\nconst ActionGroupRoot = forwardRef<HTMLDivElement, ActionGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      collapsible = true,\n      collapseFrom = 'start',\n      children,\n      rovingFocus = true,\n      triggerIcon,\n      density = 'default',\n      onCollapsedChange,\n      onOverflowChange,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...restProps\n    }: ActionGroupProps = props;\n    const _containerRef = useRef<HTMLDivElement | null>(null);\n\n    const { containerRef, measurements, childProps } = useMeasureChildren();\n\n    // Sorted array of child nodes, including dividers (but not the menu trigger). Needed to access\n    // the child node corresponding to the index of the childProps returned from the useMeasureChildren hook.\n    const measuredChildren = useRef<\n      Array<ReactNode | { props?: { pin: boolean } }>\n    >([]);\n    const { width } = useContainerSize(_containerRef);\n    // We need to round up the width, otherwise we might run into an endless loop\n    // with the ActionGroup constantly collapsing / expanding.\n    const containerWidth = Math.round(width);\n\n    const menuItems = useRef(new Map<string, boolean>());\n    // Number of items that are pinned. Used to adjust when the onCollapsedChange callback is triggered.\n    const pinnedItemsCount = useRef(0);\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    const totalChildrenWidth = useMemo(() => {\n      // Get total width of children.\n      let childWidths = Object.values(measurements).reduce(\n        (acc, value) => (acc += value?.width || 0),\n        0,\n      );\n      // We also have to include the gaps the flex container is adding.\n      childWidths += (childProps.length - 1) * ACTION_GROUP_GAP;\n\n      return childWidths;\n    }, [childProps, measurements]);\n\n    const slots = useMemo(() => {\n      const slots: SlotsType = { items: [], menuItems: [] };\n\n      // Using React.Children.toArray and not React.Children.forEach to get the correct index for each child.\n      // If an item is conditionally rendered in the ActionGroup, it would still be iterated over using forEach,\n      // even if it ends up not being rendered in the DOM.\n      // Converting the children to an array already removes children that will not be rendered.\n      const childrenArray = Children.toArray(children);\n\n      // As soon as we have sufficient data from the measurement hook,\n      // determine visible and hidden action group items.\n      if (\n        collapsible &&\n        containerWidth > 0 &&\n        childProps.length > 0 &&\n        Object.keys(measurements).length === childProps.length\n      ) {\n        const childKeys = childProps.map((props) => props['data-id']);\n\n        // Index of the next child to remove if there is not enough space.\n        // Currently collapsing the actions starting on the start.\n        let childIndex = collapseFrom === 'start' ? 0 : childProps.length - 1;\n        // Clear all entries so that action group items will show up again when expanding the container.\n        menuItems.current.clear();\n\n        let childWidths = totalChildrenWidth;\n        while (\n          childWidths > containerWidth &&\n          ((collapseFrom === 'end' && childIndex >= 0) ||\n            (collapseFrom === 'start' && childIndex < childProps.length))\n        ) {\n          const childNode =\n            measuredChildren.current[\n              // The childProps array also includes props for the menu trigger, which is not included in the\n              // measured children array. If collapsing from the end, the index needs to be shifted back by 1.\n              childIndex + (isOverflowing && collapseFrom === 'end' ? -1 : 0)\n            ];\n\n          // If an item is pinned, we don't push it into the menu.\n          if (isValidElement(childNode) && itemIsPinned(childNode)) {\n            // Intentionally left empty\n          } else {\n            let childKeyIndex = childIndex;\n            if (isOverflowing) {\n              // If an item is already overflowing, we need to shift the index by 1 to not\n              // include the menu trigger in the calculation since it will never be hidden.\n              const collapseFromOffset = collapseFrom === 'start' ? 1 : -1;\n              childKeyIndex = childKeyIndex + collapseFromOffset;\n            }\n            const key = childKeys[childKeyIndex];\n            if (key && measurements[key] !== undefined) {\n              // Add item to the list of items rendered in the menu.\n              menuItems.current.set(key, true);\n              // Subtract freed up space and check again, if there's sufficient space to render the remaining children.\n              childWidths -= (measurements[key]?.width || 0) + ACTION_GROUP_GAP;\n            }\n          }\n\n          childIndex += collapseFrom === 'start' ? 1 : -1;\n        }\n      }\n\n      let groupCount = 0;\n      let pinnedItems = 0;\n      measuredChildren.current = [];\n\n      for (const [index, child] of childrenArray.entries()) {\n        if (!isValidElement(child)) {\n          continue;\n        }\n\n        // The key applied to the children so react is not removing the nodes when adding the menu trigger.\n        // This would cause the mutation observer of the measurement hook to trigger and mess up the calculations.\n        // Applying a consistent child key resolves that issue.\n        const childKey = index + groupCount;\n        // The index of the child used to apply the correct childProps returned from the measurement hook.\n        // If collapsing from the end and an overflow is already happening, we need to shift by 1 to account\n        // for the menu trigger that is then also included in the childProps array.\n        const childIndex =\n          childKey + (isOverflowing && collapseFrom === 'start' ? 1 : 0);\n\n        const isItemOverflowing = menuItems.current.get(\n          childProps[childIndex]?.['data-id'] || '',\n        );\n\n        const clonedChild = cloneElement(\n          child,\n          _mergeProps(child.props ?? {}, childProps[childIndex], {\n            key: childKey,\n            className: clsx(props.className, {\n              [actionGroupHiddenItemCSS]: isItemOverflowing,\n            }),\n          }),\n        );\n\n        // TODO: If the item before the group is not also a group, we should also add a divider there.\n        // Add a divider for each group rendered in the ActionGroup (except the last one).\n        if (child.type === Group) {\n          // If the item after the divider is overflowing, the divider needs to be hidden.\n          const isNextItemOverflowing = menuItems.current.get(\n            childProps[childIndex + 2]?.['data-id'] || '',\n          );\n          measuredChildren.current.push(clonedChild);\n\n          slots.items.push(\n            <Fragment key={`fragment-${childKey}`}>\n              {clonedChild}\n              {index !== childrenArray.length - 1 && (\n                <Divider\n                  orientation=\"vertical\"\n                  flexItem={false}\n                  style={{\n                    height: 20,\n                  }}\n                  className={clsx({\n                    [actionGroupHiddenItemCSS]:\n                      !!isItemOverflowing || !!isNextItemOverflowing,\n                  })}\n                  {...childProps[childIndex + 1]}\n                  key={childKey + 1}\n                />\n              )}\n            </Fragment>,\n          );\n\n          if (itemIsPinned(child)) {\n            measuredChildren.current.push({ props: { pin: true } });\n            pinnedItems += 1;\n          } else {\n            measuredChildren.current.push({});\n          }\n\n          groupCount += 1;\n        } else {\n          measuredChildren.current.push(clonedChild);\n          slots.items.push(clonedChild);\n\n          if (itemIsPinned(child)) {\n            pinnedItems += 1;\n          }\n        }\n\n        if (isItemOverflowing) {\n          slots.menuItems.push(child);\n        }\n      }\n\n      pinnedItemsCount.current = pinnedItems;\n\n      setIsOverflowing(slots.menuItems.length > 0);\n      setIsCollapsed(\n        slots.menuItems.length + pinnedItemsCount.current ===\n          slots.items.length,\n      );\n\n      return slots;\n      // Excluding state 'isOverflowing' to prevent an additional re-render.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n      measurements,\n      childProps,\n      children,\n      collapseFrom,\n      collapsible,\n      totalChildrenWidth,\n      containerWidth,\n    ]);\n\n    const { containerRef: rovingContainerRef } = useRovingFocus<HTMLDivElement>(\n      {\n        // FIXME: Follow-up for detecting the initial index already, when it is initially undefined based on\n        // either tab-index attributes or the first focusable element. This will solve the problem for\n        // everyone and will not overcomplicate the logic. ADES-2260\n        initialIndex: undefined,\n        direction: 'horizontal',\n        focusableChildrenSelector:\n          ':scope a, :scope button, :scope [type=\"button\"]',\n      },\n    );\n\n    const rootRef = useMergeRefs([\n      forwardedRef,\n      ...(rovingFocus ? [rovingContainerRef] : []),\n    ]);\n    const collapsibleRootRef = useMergeRefs([\n      rootRef,\n      containerRef,\n      _containerRef,\n    ]);\n\n    // Trigger onOverflowChange callback whenever the isOverflowing state changes.\n    useEffect(() => {\n      onOverflowChange?.(isOverflowing);\n    }, [isOverflowing, onOverflowChange]);\n\n    // Trigger onCollapsedChange callback whenever the isCollapsed state changes.\n    useEffect(() => {\n      onCollapsedChange?.(isCollapsed);\n    }, [isCollapsed, onCollapsedChange]);\n\n    return (\n      <Flex\n        data-actiongroup\n        alignItems=\"center\"\n        data-testid={dataTestId}\n        ref={collapsible ? collapsibleRootRef : rootRef}\n        gap={ACTION_GROUP_GAP}\n        className={consumerClassName}\n        style={{ minWidth: !collapsible ? 0 : undefined, ...consumerStyle }}\n        {...restProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <ActionGroupContext.Provider\n          value={{\n            isCollapsed: false,\n          }}\n        >\n          {collapseFrom === 'start' && slots?.menuItems.length > 0 && (\n            <CollapsedActionGroup\n              triggerIcon={triggerIcon}\n              childProps={childProps[0]}\n              density={density}\n            >\n              {slots?.menuItems}\n            </CollapsedActionGroup>\n          )}\n          {slots?.items}\n          {collapseFrom === 'end' && slots?.menuItems.length > 0 && (\n            <CollapsedActionGroup\n              triggerIcon={triggerIcon}\n              childProps={childProps[childProps.length - 1]}\n              density={density}\n            >\n              {slots?.menuItems}\n            </CollapsedActionGroup>\n          )}\n        </ActionGroupContext.Provider>\n      </Flex>\n    );\n  },\n);\n\n(\n  ActionGroupRoot as typeof ActionGroupRoot & { displayName: string }\n).displayName = 'ActionGroup';\n\n/**\n * The `ActionGroup` groups related actions in a container. It takes care of\n * collapsing the actions into an overlay if there is insufficient space for\n * rendering all the actions next to each other. It also applies a roving focus\n * to the actions.\n * @internal\n */\nexport const ActionGroup = Object.assign(ActionGroupRoot, {\n  ActionButton,\n  Group,\n  NavItem,\n});\n"],
+  "mappings": "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",
   "names": ["slots", "props"]
 }

package/esm/layouts/app-header/action-group/ActionGroup.sty.js

@@ -1,5 +1,5 @@
 import "./ActionGroup.css";
-var actionGroupHiddenItemCSS = "_1d2ks7u0-3-11-0";
+var actionGroupHiddenItemCSS = "_1d2ks7u0-3-11-2";
 export {
   actionGroupHiddenItemCSS
 };

package/esm/layouts/app-header/action-group/ActionGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionGroup.css.ts"],
-  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-11-0';"],
+  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,2BAA2B;",
   "names": []
 }

package/esm/layouts/app-header/action-group/Group.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, Children } from "react";
-import { isElement } from "react-is";
+import { forwardRef, isValidElement, Children } from "react";
 import { ACTION_GROUP_GAP } from "./constants.js";
 import { useActionGroupContext } from "./hooks/useActionGroupContext.js";
 import { Menu } from "../../../navigation/menu/Menu.js";
@@ -18,7 +17,7 @@ const Group = forwardRef(
       items: []
     };
     for (const child of Children.toArray(children)) {
-      if (isElement(child)) {
+      if (isValidElement(child)) {
         slots.items?.push(child);
       }
     }

package/esm/layouts/app-header/action-group/Group.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/Group.tsx"],
-  "sourcesContent": ["import { forwardRef, type ReactNode, Children } from 'react';\nimport { isElement } from 'react-is';\n\nimport { ACTION_GROUP_GAP } from './constants.js';\nimport { useActionGroupContext } from './hooks/useActionGroupContext.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { Menu } from '../../../navigation/menu/Menu.js';\nimport { Flex } from '../../flex/Flex.js';\n\n\n// #region Typings\n\n/**\n * @public\n */\nexport interface GroupProps extends WithChildren, StylingProps, DataTestId {}\n\ntype SlotsType = {\n  items: ReactNode[];\n};\n// #endregion\n\n/**\n * A group of action items.\n * A horizontal / vertical divider will be rendered between grouped actions.\n * @public\n */\nexport const Group = forwardRef<HTMLDivElement, GroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: GroupProps = props;\n\n    const slots: SlotsType = {\n      items: [],\n    };\n\n    for (const child of Children.toArray(children)) {\n      if (isElement(child)) {\n        slots.items?.push(child);\n      }\n    }\n\n    const { isCollapsed } = useActionGroupContext();\n\n    return isCollapsed ? (\n      <Menu.Group\n        ref={forwardedRef}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n      >\n        {slots.items}\n      </Menu.Group>\n    ) : (\n      <Flex\n        ref={forwardedRef}\n        gap={ACTION_GROUP_GAP}\n        alignItems=\"center\"\n        role=\"group\"\n        className={consumerClassName}\n        style={{ ...consumerStyle, flexShrink: 0 }}\n        data-testid={dataTestId}\n        {...remainingProps}\n      >\n        {slots.items}\n      </Flex>\n    );\n  },\n);\n\n(Group as typeof Group & { displayName: string }).displayName =\n  'ActionGroup.Group';\n"],
-  "mappings": "AAoDM;AApDN,SAAS,YAA4B,gBAAgB;AACrD,SAAS,iBAAiB;AAE1B,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AAItC,SAAS,YAAY;AACrB,SAAS,YAAY;AAoBd,MAAM,QAAQ;AAAA,EACnB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAgB;AAEhB,UAAM,QAAmB;AAAA,MACvB,OAAO,CAAC;AAAA,IACV;AAEA,eAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,UAAI,UAAU,KAAK,GAAG;AACpB,cAAM,OAAO,KAAK,KAAK;AAAA,MACzB;AAAA,IACF;AAEA,UAAM,EAAE,YAAY,IAAI,sBAAsB;AAE9C,WAAO,cACL;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QAEZ,gBAAM;AAAA;AAAA,IACT,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,KAAK;AAAA,QACL,YAAW;AAAA,QACX,MAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO,EAAE,GAAG,eAAe,YAAY,EAAE;AAAA,QACzC,eAAa;AAAA,QACZ,GAAG;AAAA,QAEH,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AACF;AAEC,MAAiD,cAChD;",
+  "sourcesContent": ["import { forwardRef, isValidElement, type ReactNode, Children } from 'react';\n\nimport { ACTION_GROUP_GAP } from './constants.js';\nimport { useActionGroupContext } from './hooks/useActionGroupContext.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { Menu } from '../../../navigation/menu/Menu.js';\nimport { Flex } from '../../flex/Flex.js';\n\n// #region Typings\n\n/**\n * @public\n */\nexport interface GroupProps extends WithChildren, StylingProps, DataTestId {}\n\ntype SlotsType = {\n  items: ReactNode[];\n};\n// #endregion\n\n/**\n * A group of action items.\n * A horizontal / vertical divider will be rendered between grouped actions.\n * @public\n */\nexport const Group = forwardRef<HTMLDivElement, GroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: GroupProps = props;\n\n    const slots: SlotsType = {\n      items: [],\n    };\n\n    for (const child of Children.toArray(children)) {\n      if (isValidElement(child)) {\n        slots.items?.push(child);\n      }\n    }\n\n    const { isCollapsed } = useActionGroupContext();\n\n    return isCollapsed ? (\n      <Menu.Group\n        ref={forwardedRef}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n      >\n        {slots.items}\n      </Menu.Group>\n    ) : (\n      <Flex\n        ref={forwardedRef}\n        gap={ACTION_GROUP_GAP}\n        alignItems=\"center\"\n        role=\"group\"\n        className={consumerClassName}\n        style={{ ...consumerStyle, flexShrink: 0 }}\n        data-testid={dataTestId}\n        {...remainingProps}\n      >\n        {slots.items}\n      </Flex>\n    );\n  },\n);\n\n(Group as typeof Group & { displayName: string }).displayName =\n  'ActionGroup.Group';\n"],
+  "mappings": "AAkDM;AAlDN,SAAS,YAAY,gBAAgC,gBAAgB;AAErE,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AAItC,SAAS,YAAY;AACrB,SAAS,YAAY;AAmBd,MAAM,QAAQ;AAAA,EACnB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAgB;AAEhB,UAAM,QAAmB;AAAA,MACvB,OAAO,CAAC;AAAA,IACV;AAEA,eAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,UAAI,eAAe,KAAK,GAAG;AACzB,cAAM,OAAO,KAAK,KAAK;AAAA,MACzB;AAAA,IACF;AAEA,UAAM,EAAE,YAAY,IAAI,sBAAsB;AAE9C,WAAO,cACL;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QAEZ,gBAAM;AAAA;AAAA,IACT,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,KAAK;AAAA,QACL,YAAW;AAAA,QACX,MAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO,EAAE,GAAG,eAAe,YAAY,EAAE;AAAA,QACzC,eAAa;AAAA,QACZ,GAAG;AAAA,QAEH,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AACF;AAEC,MAAiD,cAChD;",
   "names": []
 }

package/esm/layouts/app-header/action-group/NavItem.css

@@ -1,13 +1,13 @@
-._bf74pw2-3-11-0 {
+._bf74pw2-3-11-2 {
   position: relative;
 }
-._bf74pw2-3-11-0._bf74pw0-3-11-0:not(._bf74pw1-3-11-0), ._bf74pw2-3-11-0.active:not(._bf74pw1-3-11-0) {
+._bf74pw2-3-11-2._bf74pw0-3-11-2:not(._bf74pw1-3-11-2), ._bf74pw2-3-11-2.active:not(._bf74pw1-3-11-2) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._bf74pw2-3-11-0._bf74pw0-3-11-0:not(._bf74pw1-3-11-0):hover, ._bf74pw2-3-11-0.active:not(._bf74pw1-3-11-0):hover {
+._bf74pw2-3-11-2._bf74pw0-3-11-2:not(._bf74pw1-3-11-2):hover, ._bf74pw2-3-11-2.active:not(._bf74pw1-3-11-2):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._bf74pw2-3-11-0._bf74pw0-3-11-0::after, ._bf74pw2-3-11-0.active::after {
+._bf74pw2-3-11-2._bf74pw0-3-11-2::after, ._bf74pw2-3-11-2.active::after {
   content: "";
   position: absolute;
   width: 20px;

package/esm/layouts/app-header/action-group/NavItem.sty.js

@@ -1,7 +1,7 @@
 import "./NavItem.css";
-var button = "_bf74pw2-3-11-0";
-var isDisabled = "_bf74pw1-3-11-0";
-var isSelected = "_bf74pw0-3-11-0";
+var button = "_bf74pw2-3-11-2";
+var isDisabled = "_bf74pw1-3-11-2";
+var isSelected = "_bf74pw0-3-11-2";
 export {
   button,
   isDisabled,

package/esm/layouts/app-header/action-group/NavItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/NavItem.css.ts"],
-  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-11-0';\nexport var isDisabled = '_bf74pw1-3-11-0';\nexport var isSelected = '_bf74pw0-3-11-0';"],
+  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-11-2';\nexport var isDisabled = '_bf74pw1-3-11-2';\nexport var isSelected = '_bf74pw0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,aAAa;AACjB,IAAI,aAAa;",
   "names": []
 }

package/esm/layouts/app-header/app-icon/AppIcon.css

@@ -1,4 +1,4 @@
-@keyframes _1dtfpz50-3-11-0 {
+@keyframes _1dtfpz50-3-11-2 {
   0% {
     opacity: 0;
   }
@@ -6,11 +6,11 @@
     opacity: 1;
   }
 }
-._1dtfpz51-3-11-0 {
+._1dtfpz51-3-11-2 {
   object-fit: contain;
 }
-._1dtfpz52-3-11-0 {
-  animation-name: _1dtfpz50-3-11-0;
+._1dtfpz52-3-11-2 {
+  animation-name: _1dtfpz50-3-11-2;
   animation-duration: var(--dt-animations-fade-in-duration-slow, 350ms);
   animation-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
 }

package/esm/layouts/app-header/app-icon/AppIcon.sty.js

@@ -1,6 +1,6 @@
 import "./AppIcon.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var icon = _7a468({ defaultClassName: "_1dtfpz51-3-11-0", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var icon = _7a468({ defaultClassName: "_1dtfpz51-3-11-2", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   icon
 };

package/esm/layouts/app-header/app-icon/AppIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/app-icon/AppIcon.css.ts"],
-  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-11-0',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-11-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-11-2',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-11-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/container/Container.css

@@ -1,11 +1,11 @@
-._f32lcd0-3-11-0 {
+._f32lcd0-3-11-2 {
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-radius: var(--dt-borders-radius-container-default, 9px);
-  color: var(--_6levse0-3-11-0);
-  border-color: var(--_6levse2-3-11-0);
-  background-color: var(--_6levse1-3-11-0);
+  color: var(--_6levse0-3-11-2);
+  border-color: var(--_6levse2-3-11-2);
+  background-color: var(--_6levse1-3-11-2);
 }
-._1jgl8s50-3-11-0 ._f32lcd0-3-11-0 {
+._1jgl8s50-3-11-2 ._f32lcd0-3-11-2 {
   border-width: var(--dt-borders-width-default, 1px);
 }

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

@@ -1,7 +1,7 @@
 import "../../core/components/app-root/AppRoot.css";
 import "../../styles/container.css";
 import "./Container.css";
-var containerCSS = "_f32lcd0-3-11-0";
+var containerCSS = "_f32lcd0-3-11-2";
 export {
   containerCSS
 };

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

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

package/esm/layouts/divider/Divider.css

@@ -1,21 +1,21 @@
-._1thxv8m0-3-11-0 {
+._1thxv8m0-3-11-2 {
   border: none;
   margin: 0;
   overflow-wrap: break-word;
-  background-color: var(--_k096v42-3-11-0);
+  background-color: var(--_k096v42-3-11-2);
 }
-._1thxv8m1-3-11-0 {
+._1thxv8m1-3-11-2 {
   width: 100%;
   height: var(--dt-borders-width-default, 1px);
 }
-._1thxv8m2-3-11-0 {
+._1thxv8m2-3-11-2 {
   width: var(--dt-borders-width-default, 1px);
   height: 100%;
 }
-._1thxv8m5-3-11-0 {
+._1thxv8m5-3-11-2 {
   flex-shrink: 0;
 }
-._1thxv8m6-3-11-0 {
+._1thxv8m6-3-11-2 {
   flex-shrink: 0;
   width: var(--dt-borders-width-default, 1px);
   height: auto;

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

@@ -1,7 +1,7 @@
 import "../../core/utils/colorUtils.css";
 import "./Divider.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-11-0", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-11-0", vertical: "_1thxv8m2-3-11-0" }, flexItem: { true: "_1thxv8m3-3-11-0", false: "_1thxv8m4-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-11-0"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-11-0"]] });
+var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-11-2", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-11-2", vertical: "_1thxv8m2-3-11-2" }, flexItem: { true: "_1thxv8m3-3-11-2", false: "_1thxv8m4-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-11-2"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-11-2"]] });
 export {
   dividerCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/divider/Divider.css.ts"],
-  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-11-0',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-11-0',vertical:'_1thxv8m2-3-11-0'},flexItem:{true:'_1thxv8m3-3-11-0',false:'_1thxv8m4-3-11-0'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-11-0'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-11-0']]});"],
+  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-11-2',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-11-2',vertical:'_1thxv8m2-3-11-2'},flexItem:{true:'_1thxv8m3-3-11-2',false:'_1thxv8m4-3-11-2'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-11-2'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-11-2']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,aAAY,EAAC,YAAW,oBAAmB,UAAS,mBAAkB,GAAE,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,aAAY,cAAa,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,aAAY,YAAW,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/input-group/InputGroup.css

@@ -1,103 +1,103 @@
-._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 {
+._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 {
   gap: var(--dt-spacings-size-0, 0);
   isolation: isolate;
 }
-._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:not(:first-child),
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:not(:first-child, ._1x4bl8z1-3-11-0) > .strato-inputgroup,
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > ._1x4bl8z1-3-11-0 + * {
+._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:not(:first-child),
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:not(:first-child, ._1x4bl8z1-3-11-2) > .strato-inputgroup,
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > ._1x4bl8z1-3-11-2 + * {
   margin-left: -1px;
   box-sizing: content-box;
 }
-._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > * {
-  --_1x4bl8z0-3-11-0: 1;
+._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > * {
+  --_1x4bl8z0-3-11-2: 1;
   position: relative;
-  z-index: var(--_1x4bl8z0-3-11-0);
+  z-index: var(--_1x4bl8z0-3-11-2);
 }
-._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > * > .strato-inputgroup {
+._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > * > .strato-inputgroup {
   position: relative;
-  z-index: var(--_1x4bl8z0-3-11-0);
-}
-._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:not(:has([disabled])):hover,
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:not(:has([disabled])):active {
-  --_1x4bl8z0-3-11-0: 2;
-}
-._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > ._bx32hd-3-11-0._bx32h8-3-11-0:not(._bx32h6-3-11-0):not(:has(._1a8lqy92-3-11-0)):not(._1a8lqy92-3-11-0):hover,
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > ._bx32hd-3-11-0._bx32h8-3-11-0:not(._bx32h6-3-11-0):not(:has(._1a8lqy92-3-11-0)):not(._1a8lqy92-3-11-0):active {
-  --_1x4bl8z0-3-11-0: 2;
-}
-._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > ._bx32hd-3-11-0:is(._bx32h7-3-11-0,._bx32h9-3-11-0,._bx32ha-3-11-0,._bx32hb-3-11-0):not(._bx32h6-3-11-0):not(:has(._1a8lqy92-3-11-0)):not(._1a8lqy92-3-11-0),
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:has(._1a8lqy91-3-11-0):not(:has(._1a8lqy92-3-11-0)),
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0._1a8lqy91-3-11-0:not(._1a8lqy92-3-11-0) > *:not(._bx32h6-3-11-0):not(:has(._1a8lqy92-3-11-0)):not(._1a8lqy92-3-11-0) {
-  --_1x4bl8z0-3-11-0: 3;
-}
-._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > ._bx32hd-3-11-0:is(._bx32h7-3-11-0,._bx32h9-3-11-0,._bx32ha-3-11-0,._bx32hb-3-11-0):not(._bx32h6-3-11-0):not(:has(._1a8lqy92-3-11-0)):not(._1a8lqy92-3-11-0):hover,
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > ._bx32hd-3-11-0:is(._bx32h7-3-11-0,._bx32h9-3-11-0,._bx32ha-3-11-0,._bx32hb-3-11-0):not(._bx32h6-3-11-0):not(:has(._1a8lqy92-3-11-0)):not(._1a8lqy92-3-11-0):active,
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:has(._1a8lqy91-3-11-0):not(:has(._1a8lqy92-3-11-0)):hover,
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:has(._1a8lqy91-3-11-0):not(:has(._1a8lqy92-3-11-0)):active,
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0._1a8lqy91-3-11-0:not(._1a8lqy92-3-11-0) > *:not(._bx32h6-3-11-0):not(:has(._1a8lqy92-3-11-0)):not(._1a8lqy92-3-11-0):hover,
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0._1a8lqy91-3-11-0:not(._1a8lqy92-3-11-0) > *:not(._bx32h6-3-11-0):not(:has(._1a8lqy92-3-11-0)):not(._1a8lqy92-3-11-0):active {
-  --_1x4bl8z0-3-11-0: 4;
-}
-._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > ._bx32he-3-11-0:not(._bx32h6-3-11-0):not(:has(._1a8lqy92-3-11-0)):not(._1a8lqy92-3-11-0) {
-  --_1x4bl8z0-3-11-0: 5;
-}
-._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:focus-within,
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > * > .strato-inputgroup:focus-within {
-  --_1x4bl8z0-3-11-0: 6;
-}
-._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > ._bx32h6-3-11-0,
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > ._bx32h6-3-11-0:is(:hover, :active),
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > ._1a8lqy92-3-11-0,
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > ._1a8lqy92-3-11-0:is(:hover, :active),
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:has(._1a8lqy92-3-11-0),
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:has(._1a8lqy92-3-11-0):is(:hover, :active),
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:has(._bx32h6-3-11-0),
- ._1jgl8s50-3-11-0 ._1x4bl8z1-3-11-0 > *:has(._bx32h6-3-11-0):is(:hover, :active) {
-  --_1x4bl8z0-3-11-0: 0;
-}
-._1x4bl8z1-3-11-0 > .strato-inputgroup:not(:last-child),
- ._1x4bl8z1-3-11-0 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
+  z-index: var(--_1x4bl8z0-3-11-2);
+}
+._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:not(:has([disabled])):hover,
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:not(:has([disabled])):active {
+  --_1x4bl8z0-3-11-2: 2;
+}
+._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > ._bx32hd-3-11-2._bx32h8-3-11-2:not(._bx32h6-3-11-2):not(:has(._1a8lqy92-3-11-2)):not(._1a8lqy92-3-11-2):hover,
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > ._bx32hd-3-11-2._bx32h8-3-11-2:not(._bx32h6-3-11-2):not(:has(._1a8lqy92-3-11-2)):not(._1a8lqy92-3-11-2):active {
+  --_1x4bl8z0-3-11-2: 2;
+}
+._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > ._bx32hd-3-11-2:is(._bx32h7-3-11-2,._bx32h9-3-11-2,._bx32ha-3-11-2,._bx32hb-3-11-2):not(._bx32h6-3-11-2):not(:has(._1a8lqy92-3-11-2)):not(._1a8lqy92-3-11-2),
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:has(._1a8lqy91-3-11-2):not(:has(._1a8lqy92-3-11-2)),
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2._1a8lqy91-3-11-2:not(._1a8lqy92-3-11-2) > *:not(._bx32h6-3-11-2):not(:has(._1a8lqy92-3-11-2)):not(._1a8lqy92-3-11-2) {
+  --_1x4bl8z0-3-11-2: 3;
+}
+._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > ._bx32hd-3-11-2:is(._bx32h7-3-11-2,._bx32h9-3-11-2,._bx32ha-3-11-2,._bx32hb-3-11-2):not(._bx32h6-3-11-2):not(:has(._1a8lqy92-3-11-2)):not(._1a8lqy92-3-11-2):hover,
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > ._bx32hd-3-11-2:is(._bx32h7-3-11-2,._bx32h9-3-11-2,._bx32ha-3-11-2,._bx32hb-3-11-2):not(._bx32h6-3-11-2):not(:has(._1a8lqy92-3-11-2)):not(._1a8lqy92-3-11-2):active,
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:has(._1a8lqy91-3-11-2):not(:has(._1a8lqy92-3-11-2)):hover,
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:has(._1a8lqy91-3-11-2):not(:has(._1a8lqy92-3-11-2)):active,
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2._1a8lqy91-3-11-2:not(._1a8lqy92-3-11-2) > *:not(._bx32h6-3-11-2):not(:has(._1a8lqy92-3-11-2)):not(._1a8lqy92-3-11-2):hover,
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2._1a8lqy91-3-11-2:not(._1a8lqy92-3-11-2) > *:not(._bx32h6-3-11-2):not(:has(._1a8lqy92-3-11-2)):not(._1a8lqy92-3-11-2):active {
+  --_1x4bl8z0-3-11-2: 4;
+}
+._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > ._bx32he-3-11-2:not(._bx32h6-3-11-2):not(:has(._1a8lqy92-3-11-2)):not(._1a8lqy92-3-11-2) {
+  --_1x4bl8z0-3-11-2: 5;
+}
+._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:focus-within,
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > * > .strato-inputgroup:focus-within {
+  --_1x4bl8z0-3-11-2: 6;
+}
+._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > ._bx32h6-3-11-2,
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > ._bx32h6-3-11-2:is(:hover, :active),
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > ._1a8lqy92-3-11-2,
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > ._1a8lqy92-3-11-2:is(:hover, :active),
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:has(._1a8lqy92-3-11-2),
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:has(._1a8lqy92-3-11-2):is(:hover, :active),
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:has(._bx32h6-3-11-2),
+ ._1jgl8s50-3-11-2 ._1x4bl8z1-3-11-2 > *:has(._bx32h6-3-11-2):is(:hover, :active) {
+  --_1x4bl8z0-3-11-2: 0;
+}
+._1x4bl8z1-3-11-2 > .strato-inputgroup:not(:last-child),
+ ._1x4bl8z1-3-11-2 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1x4bl8z1-3-11-0 > .strato-inputgroup:not(:first-child),
- ._1x4bl8z1-3-11-0 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z1-3-11-2 > .strato-inputgroup:not(:first-child),
+ ._1x4bl8z1-3-11-2 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._1x4bl8z1-3-11-0 > ._mvcxum0-3-11-0 {
+._1x4bl8z1-3-11-2 > ._mvcxum0-3-11-2 {
   display: grid;
   align-items: center;
   grid-template-rows: subgrid;
 }
-._1x4bl8z1-3-11-0:has(> ._mvcxum0-3-11-0 > label):has(> ._mvcxum0-3-11-0 > ._1l9bja60-3-11-0:last-child:not(:empty)) > ._mvcxum0-3-11-0 {
+._1x4bl8z1-3-11-2:has(> ._mvcxum0-3-11-2 > label):has(> ._mvcxum0-3-11-2 > ._1l9bja60-3-11-2:last-child:not(:empty)) > ._mvcxum0-3-11-2 {
   grid-row: 1 / span 3;
 }
-._1x4bl8z1-3-11-0:has(> ._mvcxum0-3-11-0 > label):not(:has(> ._mvcxum0-3-11-0 > ._1l9bja60-3-11-0:last-child:not(:empty))) > ._mvcxum0-3-11-0 {
+._1x4bl8z1-3-11-2:has(> ._mvcxum0-3-11-2 > label):not(:has(> ._mvcxum0-3-11-2 > ._1l9bja60-3-11-2:last-child:not(:empty))) > ._mvcxum0-3-11-2 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z1-3-11-0:not(:has(> ._mvcxum0-3-11-0 > label)):has(> ._mvcxum0-3-11-0 > ._1l9bja60-3-11-0:last-child:not(:empty)) > ._mvcxum0-3-11-0 {
+._1x4bl8z1-3-11-2:not(:has(> ._mvcxum0-3-11-2 > label)):has(> ._mvcxum0-3-11-2 > ._1l9bja60-3-11-2:last-child:not(:empty)) > ._mvcxum0-3-11-2 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z1-3-11-0 > ._mvcxum0-3-11-0 > label {
+._1x4bl8z1-3-11-2 > ._mvcxum0-3-11-2 > label {
   grid-row: 1 / 2;
   align-self: end;
 }
-._1x4bl8z1-3-11-0 > ._mvcxum0-3-11-0:has(> :not(label, ._1l9bja60-3-11-0)) > label {
+._1x4bl8z1-3-11-2 > ._mvcxum0-3-11-2:has(> :not(label, ._1l9bja60-3-11-2)) > label {
   width: 0;
   min-width: 100%;
 }
-._1x4bl8z1-3-11-0 > :not(._mvcxum0-3-11-0) {
+._1x4bl8z1-3-11-2 > :not(._mvcxum0-3-11-2) {
   grid-row: 1 / 2;
 }
-._1x4bl8z1-3-11-0:has(> ._mvcxum0-3-11-0 > label) > :not(._mvcxum0-3-11-0), ._1x4bl8z1-3-11-0:has(> ._mvcxum0-3-11-0 > label) > ._mvcxum0-3-11-0 > :not(label, ._1l9bja60-3-11-0) {
+._1x4bl8z1-3-11-2:has(> ._mvcxum0-3-11-2 > label) > :not(._mvcxum0-3-11-2), ._1x4bl8z1-3-11-2:has(> ._mvcxum0-3-11-2 > label) > ._mvcxum0-3-11-2 > :not(label, ._1l9bja60-3-11-2) {
   grid-row: 2 / 3;
 }
-._1x4bl8z1-3-11-0:has(> ._mvcxum0-3-11-0 > label) > ._mvcxum0-3-11-0 > ._1l9bja60-3-11-0 {
+._1x4bl8z1-3-11-2:has(> ._mvcxum0-3-11-2 > label) > ._mvcxum0-3-11-2 > ._1l9bja60-3-11-2 {
   grid-row: 3 / 4;
   align-self: start;
 }
-._1x4bl8z1-3-11-0 > ._mvcxum0-3-11-0:has(> :not(label, ._1l9bja60-3-11-0)) > ._1l9bja60-3-11-0 ._16z6rg14-3-11-0 {
+._1x4bl8z1-3-11-2 > ._mvcxum0-3-11-2:has(> :not(label, ._1l9bja60-3-11-2)) > ._1l9bja60-3-11-2 ._16z6rg14-3-11-2 {
   width: 0;
   flex: 1 1 auto;
 }

package/esm/layouts/input-group/InputGroup.sty.js

@@ -7,7 +7,7 @@ import "../../forms/forms-core/components/form-field/FormField.css";
 import "../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css";
 import "../../forms/forms-core/components/form-field-messages/FormFieldMessages.css";
 import "./InputGroup.css";
-var inputGroup = "_1x4bl8z1-3-11-0";
+var inputGroup = "_1x4bl8z1-3-11-2";
 var inputGroupClassName = "strato-inputgroup";
 export {
   inputGroup,

package/esm/layouts/input-group/InputGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/input-group/InputGroup.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../../forms/hooks/useAutofillEvent.css';\nimport '../../forms/_base-input/BaseInput.css';\nimport '../../forms/forms-core/components/form-field/FormField.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessages.css';\nimport './InputGroup.css';\nexport var inputGroup = '_1x4bl8z1-3-11-0';\nexport var inputGroupClassName = 'strato-inputgroup';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../../forms/hooks/useAutofillEvent.css';\nimport '../../forms/_base-input/BaseInput.css';\nimport '../../forms/forms-core/components/form-field/FormField.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessages.css';\nimport './InputGroup.css';\nexport var inputGroup = '_1x4bl8z1-3-11-2';\nexport var inputGroupClassName = 'strato-inputgroup';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,sBAAsB;",
   "names": []
 }

package/esm/layouts/page/DetailView.css

@@ -1,11 +1,11 @@
-._wapl5d0-3-11-0 {
+._wapl5d0-3-11-2 {
   grid-area: details;
   flex-direction: row-reverse;
 }
-._wapl5d1-3-11-0 {
+._wapl5d1-3-11-2 {
   background: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-11-0 ._wapl5d1-3-11-0 {
+._1jgl8s50-3-11-2 ._wapl5d1-3-11-2 {
   border-top-left-radius: 0;
 }

package/esm/layouts/page/DetailView.sty.js

@@ -1,7 +1,7 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./DetailView.css";
-var content = "_wapl5d1-3-11-0";
-var details = "_wapl5d0-3-11-0";
+var content = "_wapl5d1-3-11-2";
+var details = "_wapl5d0-3-11-2";
 export {
   content,
   details

package/esm/layouts/page/DetailView.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/DetailView.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './DetailView.css';\nexport var content = '_wapl5d1-3-11-0';\nexport var details = '_wapl5d0-3-11-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './DetailView.css';\nexport var content = '_wapl5d1-3-11-2';\nexport var details = '_wapl5d0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/Header.css

@@ -1,9 +1,9 @@
-._150dima0-3-11-0 {
+._150dima0-3-11-2 {
   grid-area: header;
   width: 100%;
   padding: var(--dt-spacings-size-8, 8px);
   box-sizing: border-box;
-  ._1jgl8s50-3-11-0 & {
+  ._1jgl8s50-3-11-2 & {
     border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
   }
 }

package/esm/layouts/page/Header.sty.js

@@ -1,6 +1,6 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Header.css";
-var header = "_150dima0-3-11-0";
+var header = "_150dima0-3-11-2";
 export {
   header
 };

package/esm/layouts/page/Header.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Header.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Header.css';\nexport var header = '_150dima0-3-11-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Header.css';\nexport var header = '_150dima0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }