@carbon-labs/react-animated-header 0.33.0 → 0.35.0

package/lib/components/HeaderAction/HeaderAction.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var react = require('@carbon/react');
+var usePrefix = require('../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
+
+const HeaderAction = ({
+  config,
+  headerExpanded
+}) => {
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}--animated-header__header-action`;
+
+  // ICON
+  if (config.type === 'icon-button') {
+    const {
+      icon: Icon,
+      iconLabel,
+      onClick,
+      disabled,
+      ariaLabel
+    } = config;
+    return /*#__PURE__*/React.createElement("div", {
+      className: blockClass,
+      "aria-label": ariaLabel,
+      "aria-hidden": !headerExpanded,
+      "data-expanded": headerExpanded
+    }, /*#__PURE__*/React.createElement(react.IconButton, {
+      kind: "ghost",
+      size: "lg",
+      label: iconLabel,
+      onClick: onClick,
+      disabled: disabled
+    }, Icon && /*#__PURE__*/React.createElement(Icon, {
+      fill: `var(--cds-icon-secondary)`,
+      size: 16
+    })));
+  }
+
+  // GHOST
+  if (config.type === 'ghost-button') {
+    const {
+      label,
+      icon,
+      onClick,
+      disabled,
+      ariaLabel
+    } = config;
+    return /*#__PURE__*/React.createElement("div", {
+      className: blockClass,
+      "aria-label": ariaLabel,
+      "aria-hidden": !headerExpanded,
+      "data-expanded": headerExpanded
+    }, /*#__PURE__*/React.createElement(react.Button, {
+      kind: "ghost",
+      size: "lg",
+      onClick: onClick,
+      disabled: disabled,
+      renderIcon: icon
+    }, label));
+  }
+};
+
+exports.default = HeaderAction;

package/lib/components/HeaderAction/header-action.types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { ElementType } from 'react';
+type Base = {
+    ariaLabel?: string;
+    headerExpanded?: boolean;
+};
+export type HeaderActionIcon = Base & {
+    type: 'icon-button';
+    icon: ElementType;
+    iconLabel: string;
+    onClick: () => void;
+    disabled?: boolean;
+};
+export type HeaderActionGhost = Base & {
+    type: 'ghost-button';
+    label: string;
+    icon?: ElementType;
+    onClick: () => void;
+    disabled?: boolean;
+};
+export type HeaderActionConfig = HeaderActionIcon | HeaderActionGhost;
+export type HeaderActionProps = {
+    headerActionConfig?: HeaderActionConfig | null;
+};
+export {};

package/lib/components/HeaderTitle/HeaderTitle.js

@@ -35,13 +35,12 @@ const HeaderTitle = ({
   const blockClass = `${prefix}--animated-header__title`;
   const currentLang = typeof window !== 'undefined' ? document.documentElement.lang || 'en' : 'en';
   const isNameFirst = NAME_FIRST_LANGS.includes(currentLang.slice(0, 2));
-  const headingCollapsed = `${blockClass}-collapsed`;
-  const headingExpanded = `${blockClass}-expanded`;
   return /*#__PURE__*/React.createElement(react.Tooltip, {
     align: "bottom",
     label: `${welcomeText}, ${userName}`
   }, /*#__PURE__*/React.createElement("h1", {
-    className: `${blockClass} ${headerExpanded ? headingExpanded : headingCollapsed}`,
+    className: blockClass,
+    "data-expanded": headerExpanded,
     "aria-label": ariaLabels?.welcome ?? `${welcomeText}, ${userName}`
   }, isNameFirst ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: `${blockClass}-first`

package/lib/components/TasksController/TasksController.d.ts

@@ -17,6 +17,7 @@ export interface TasksControllerConfig {
     };
     dropdown?: {
         propsOverrides?: Partial<Omit<DropdownProps<TileGroup>, 'id' | 'items' | 'selectedItem'>>;
+        label?: string;
         ariaLabel?: string;
     };
 }
@@ -25,7 +26,9 @@ export type TasksControllerProps = {
     isLoading?: boolean;
     allTileGroups?: TileGroup[];
     selectedTileGroup?: TileGroup | null;
-    setSelectedTileGroup: (e: any) => void;
+    setSelectedTileGroup?: (group: TileGroup | {
+        selectedItem: TileGroup;
+    }) => void;
 };
 declare const TasksController: ({ tasksControllerConfig, isLoading, allTileGroups, selectedTileGroup, setSelectedTileGroup, }: TasksControllerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TasksController;

package/lib/components/TasksController/TasksController.js

@@ -10,8 +10,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var react = require('@carbon/react');
 var React = require('react');
+var react = require('@carbon/react');
 var usePrefix = require('../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
 
 const TasksController = ({
@@ -21,54 +21,64 @@ const TasksController = ({
   selectedTileGroup,
   setSelectedTileGroup
 }) => {
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}--animated-header`;
+
+  /** Button overrides */
   const {
     className: buttonCustomClass,
     ...buttonOverrideProps
   } = tasksControllerConfig?.button?.propsOverrides || {};
+
+  /** Dropdown overrides */
   const {
     className: dropdownCustomClass,
     onChange: dropdownCustomOnChange,
     ...dropdownOverrideProps
   } = tasksControllerConfig?.dropdown?.propsOverrides || {};
-  const prefix = usePrefix.usePrefix();
-  const blockClass = `${prefix}--animated-header`;
+
+  /** Early outs */
+  if (!tasksControllerConfig?.type) return null;
+  if (isLoading || tasksControllerConfig?.isLoading) {
+    return /*#__PURE__*/React.createElement(react.SkeletonPlaceholder, {
+      className: `${blockClass}__task-controller-skeleton`
+    });
+  }
+
+  /** Button mode */
+  if (tasksControllerConfig?.type === 'button' && tasksControllerConfig?.button?.text) {
+    return /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
+      className: `${blockClass}__button${buttonCustomClass ? ` ${buttonCustomClass}` : ''}`
+    }, buttonOverrideProps), tasksControllerConfig.button.text);
+  }
+
+  /** Build Dropdown props (uses top-level list/selection/setter) */
   const dropdownProps = React.useMemo(() => {
-    if (!allTileGroups?.length) {
-      return null;
-    }
+    if (!allTileGroups?.length) return null;
     return {
       id: `${blockClass}__header-dropdown`,
       className: `${blockClass}__header-dropdown${dropdownCustomClass ? ` ${dropdownCustomClass}` : ''}`,
       size: 'md',
       titleText: 'Label',
-      label: allTileGroups[0]?.label ?? '',
+      label: tasksControllerConfig?.dropdown?.label ?? allTileGroups[0]?.label ?? '',
       hideLabel: true,
       type: 'inline',
       items: allTileGroups,
       selectedItem: selectedTileGroup ?? undefined,
       onChange: e => {
-        setSelectedTileGroup?.(e);
+        if (e.selectedItem) {
+          setSelectedTileGroup?.({
+            selectedItem: e.selectedItem
+          });
+        }
         dropdownCustomOnChange?.(e);
       },
       'aria-label': tasksControllerConfig?.dropdown?.ariaLabel ?? 'Select a task group',
       ...dropdownOverrideProps
     };
-  }, [allTileGroups, blockClass, dropdownCustomClass, selectedTileGroup, tasksControllerConfig?.dropdown?.ariaLabel, dropdownOverrideProps, setSelectedTileGroup, dropdownCustomOnChange]);
-  if (!tasksControllerConfig?.type) {
-    return null;
-  }
-  if (isLoading || tasksControllerConfig?.isLoading) {
-    return /*#__PURE__*/React.createElement(react.SkeletonPlaceholder, {
-      className: `${blockClass}__task-controller-skeleton`
-    });
-  }
+  }, [allTileGroups, selectedTileGroup, setSelectedTileGroup, blockClass, dropdownCustomClass, dropdownOverrideProps, dropdownCustomOnChange, tasksControllerConfig?.dropdown?.label, tasksControllerConfig?.dropdown?.ariaLabel]);
 
-  // Button
-  if (tasksControllerConfig?.type === 'button' && tasksControllerConfig?.button?.text) {
-    return /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
-      className: `${blockClass}__button${buttonCustomClass ? ` ${buttonCustomClass}` : ''}`
-    }, buttonOverrideProps), tasksControllerConfig.button.text);
-  }
+  /** Dropdown mode */
   if (tasksControllerConfig?.type === 'dropdown' && dropdownProps) {
     return /*#__PURE__*/React.createElement("div", {
       className: `${blockClass}__header-dropdown--container`

package/lib/index.d.ts

@@ -8,9 +8,10 @@
  */
 import AnimatedHeader from './components/AnimatedHeader/AnimatedHeader';
 import { AriaLabels, TileGroup } from './components/AnimatedHeader/types';
+import HeaderAction from './components/HeaderAction/HeaderAction';
 import HeaderTitle from './components/HeaderTitle/HeaderTitle';
 import { BaseTile } from './components/Tiles/index';
 export * from './assets';
 export type { Workspace, WorkspaceSelectorConfig, } from './components/WorkspaceSelector/WorkspaceSelector';
 export type { TasksControllerConfig } from './components/TasksController/TasksController';
-export { AnimatedHeader, BaseTile, HeaderTitle, type AriaLabels, type TileGroup, };
+export { AnimatedHeader, BaseTile, HeaderAction, HeaderTitle, type AriaLabels, type TileGroup, };

package/lib/index.js

@@ -8,6 +8,7 @@
 'use strict';
 
 var AnimatedHeader = require('./components/AnimatedHeader/AnimatedHeader.js');
+var HeaderAction = require('./components/HeaderAction/HeaderAction.js');
 var HeaderTitle = require('./components/HeaderTitle/HeaderTitle.js');
 require('react');
 require('@carbon/react');
@@ -15,8 +16,8 @@ require('@carbon/react/icons');
 var BaseTile = require('./components/Tiles/BaseTile/BaseTile.js');
 var header_static_data_fabric_light_06 = require('./assets/static/header_static_data_fabric_light_06.svg.js');
 var header_static_data_fabric_dark_06 = require('./assets/static/header_static_data_fabric_dark_06.svg.js');
-var header_static_db2_light_02 = require('./assets/static/header_static_db2_light_02.svg.js');
-var header_static_db2_dark_02 = require('./assets/static/header_static_db2_dark_02.svg.js');
+var header_static_db2_light_01 = require('./assets/static/header_static_db2_light_01.svg.js');
+var header_static_db2_dark_01 = require('./assets/static/header_static_db2_dark_01.svg.js');
 var header_static_watsonx_data_light_06 = require('./assets/static/header_static_watsonx_data_light_06.svg.js');
 var header_static_watsonx_data_dark_05 = require('./assets/static/header_static_watsonx_data_dark_05.svg.js');
 var header_static_watsonx_a_light_01 = require('./assets/static/header_static_watsonx_a_light_01.svg.js');
@@ -25,6 +26,8 @@ var header_static_wxbia_light_01 = require('./assets/static/header_static_wxbia_
 var header_static_wxbia_dark_01 = require('./assets/static/header_static_wxbia_dark_01.svg.js');
 var header_animated_data_fabric_light_03 = require('./assets/animated/header_animated_data_fabric_light_03.json.js');
 var header_animated_data_fabric_dark_06 = require('./assets/animated/header_animated_data_fabric_dark_06.json.js');
+var header_animated_db2_light_03 = require('./assets/animated/header_animated_db2_light_03.json.js');
+var header_animated_db2_dark_03 = require('./assets/animated/header_animated_db2_dark_03.json.js');
 var header_animated_watsonx_data_light_04 = require('./assets/animated/header_animated_watsonx_data_light_04.json.js');
 var header_animated_watsonx_data_dark_03 = require('./assets/animated/header_animated_watsonx_data_dark_03.json.js');
 var header_animated_watsonx_a_light_06 = require('./assets/animated/header_animated_watsonx_a_light_06.json.js');
@@ -35,12 +38,13 @@ var header_animated_wxbia_dark_06 = require('./assets/animated/header_animated_w
 
 
 exports.AnimatedHeader = AnimatedHeader.default;
+exports.HeaderAction = HeaderAction.default;
 exports.HeaderTitle = HeaderTitle.default;
 exports.BaseTile = BaseTile.BaseTile;
 exports.dataFabricStaticLight = header_static_data_fabric_light_06.default;
 exports.dataFabricStaticDark = header_static_data_fabric_dark_06.default;
-exports.db2StaticLight = header_static_db2_light_02.default;
-exports.db2StaticDark = header_static_db2_dark_02.default;
+exports.db2StaticLight = header_static_db2_light_01.default;
+exports.db2StaticDark = header_static_db2_dark_01.default;
 exports.watsonXStaticLight = header_static_watsonx_data_light_06.default;
 exports.watsonXStaticDark = header_static_watsonx_data_dark_05.default;
 exports.watsonXAStaticLight = header_static_watsonx_a_light_01.default;
@@ -49,6 +53,8 @@ exports.wxbiaStaticLight = header_static_wxbia_light_01.default;
 exports.wxbiaStaticDark = header_static_wxbia_dark_01.default;
 exports.dataFabricAnimatedLight = header_animated_data_fabric_light_03.default;
 exports.dataFabricAnimatedDark = header_animated_data_fabric_dark_06.default;
+exports.db2AnimatedLight = header_animated_db2_light_03.default;
+exports.db2AnimatedDark = header_animated_db2_dark_03.default;
 exports.watsonXAnimatedLight = header_animated_watsonx_data_light_04.default;
 exports.watsonXAnimatedDark = header_animated_watsonx_data_dark_03.default;
 exports.watsonXAAnimatedLight = header_animated_watsonx_a_light_06.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "2cb890436fa0c3e0f5a0b9738f2d59fb1a50eb31"
+  "gitHead": "e309816781d0fc8aff80cb7c9525830cc20c753c"
 }

package/scss/AnimatedHeader/animated-header.scss

@@ -258,6 +258,80 @@ body {
   inline-size: 100%;
 }
 
+.#{$prefix}__title-and-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-07;
+  min-block-size: $spacing-09;
+}
+
+.#{$prefix}__actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.#{$prefix}__content-switcher--container {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  inline-size: max-content;
+  isolation: isolate;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear,
+      margin 500ms motion.motion(standard, expressive);
+  }
+
+  &[data-expanded='true'] {
+    margin: $spacing-08 0 $spacing-05 0;
+    opacity: 1;
+    transition-delay: 110ms;
+  }
+
+  &[data-expanded='false'] {
+    margin: $spacing-02 0 $spacing-02 0;
+    line-height: 1.25;
+
+    opacity: 0;
+    transition-delay: 0ms;
+  }
+}
+
+.#{$prefix}__content-switcher--container::before {
+  position: absolute;
+  border-radius: inherit;
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  content: '';
+  inset: 0;
+  pointer-events: none;
+}
+
+.#{$prefix}__content-switcher {
+  position: relative;
+  z-index: 1;
+
+  animation: 500ms motion.motion(standard, expressive) 0ms 1 slide-in;
+  animation-delay: 383.333ms;
+  animation-fill-mode: both;
+}
+
+.#{$prefix}__content-switcher-skeleton {
+  background: $layer-01;
+  block-size: $spacing-08;
+  inline-size: 27rem;
+  max-inline-size: 18rem;
+
+  opacity: 0.7;
+}
+
+.#{$prefix}__content-switcher-skeleton::before {
+  background: $layer-02;
+}
+
 .#{$prefix}__content {
   z-index: 2;
   display: flex;
@@ -438,6 +512,10 @@ body {
     display: none;
   }
 
+  .#{$prefix}__header-switcher {
+    display: none;
+  }
+
   .#{$prefix}__content {
     display: none;
   }
@@ -457,6 +535,10 @@ body {
     display: block;
   }
 
+  .#{$prefix}__header-switcher {
+    display: inline-flex;
+  }
+
   .#{$prefix}__static {
     display: flex;
 

package/scss/HeaderAction/header-action.scss

@@ -0,0 +1,54 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/react/scss/theme' as *;
+
+$prefix: 'clabs--animated-header__header-action' !default;
+
+.#{$prefix} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-05;
+  min-block-size: 2.5rem;
+
+  &::after {
+    position: absolute;
+    z-index: 2;
+    display: block;
+    background-color: $border-subtle;
+    block-size: $spacing-06;
+    content: '';
+    inline-size: 0.0625rem;
+    inset-inline-end: 0;
+  }
+
+  button.cds--btn {
+    z-index: 3;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear, visibility 500ms linear;
+  }
+
+  &[data-expanded='true'] {
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  &[data-expanded='false'] {
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+    visibility: hidden;
+  }
+}

package/scss/HeaderTitle/header-title.scss

@@ -13,17 +13,30 @@
 $prefix: 'clabs--animated-header__title' !default;
 
 .#{$prefix} {
-  @include type-style('heading-05');
-
   position: relative;
   z-index: 2;
   overflow: hidden;
-  margin: $spacing-08 0 $spacing-05 0;
   text-overflow: ellipsis;
-  transition: font-size 500ms motion.motion(standard, expressive),
-    margin 500ms motion.motion(standard, expressive);
   white-space: nowrap;
 
+  @media (prefers-reduced-motion: no-preference) {
+    transition: font-size 500ms motion.motion(standard, expressive),
+      margin 500ms motion.motion(standard, expressive);
+  }
+
+  &[data-expanded='true'] {
+    @include type-style('heading-05');
+
+    margin: $spacing-08 0 $spacing-05 0;
+  }
+
+  &[data-expanded='false'] {
+    @include type-style('heading-03');
+
+    margin: calc($spacing-04 - 0.5px) 0 calc($spacing-04 - 0.5px) 0;
+    line-height: 1.25;
+  }
+
   @supports (-webkit-line-clamp: 3) {
     display: -webkit-box;
     overflow: hidden;
@@ -41,13 +54,6 @@ $prefix: 'clabs--animated-header__title' !default;
   }
 }
 
-.#{$prefix}-collapsed {
-  @include type-style('heading-03');
-
-  margin: $spacing-03 0 $spacing-04 0;
-  line-height: 1.25;
-}
-
 .#{$prefix}-first {
   animation: 250ms ease-in fade-in;
   animation-fill-mode: both;

package/scss/animated-header.scss

@@ -6,6 +6,7 @@
  */
 
 @use 'AnimatedHeader/animated-header.scss';
+@use 'HeaderAction/header-action.scss';
 @use 'HeaderTitle/header-title.scss';
 @use 'Tiles/AITile/ai-tile.scss';
 @use 'Tiles/AIPromptTile/ai-prompt-tile.scss';

package/assets/static/header_static_db2_dark_02.svg

@@ -1,88 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1312 738">
-  <defs>
-    <style>
-      .cls-1 {
-        stroke: #003a6d;
-      }
-
-      .cls-1, .cls-2 {
-        fill: none;
-        stroke-miterlimit: 10;
-      }
-
-      .cls-3 {
-        fill: #e0e0e0;
-      }
-
-      .cls-4 {
-        fill: #161616;
-        stroke: #007d79;
-      }
-
-      .cls-5 {
-        fill: #d9fbfb;
-        stroke: #03ddbd;
-      }
-
-      .cls-2 {
-        stroke: #a6c8ff;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
-  <g>
-    <g id="Layer_1">
-      <path class="cls-2" d="M-2148.3,0v171.3s0,72,72.4,72h583.6"/>
-      <path class="cls-2" d="M-2804.3,98.9h1016.5s72.5,1,72.5-73V0"/>
-      <path class="cls-2" d="M-2805,315.2h1162s81.3.3,81.3-71.9v-45.9"/>
-      <path class="cls-2" d="M-2804.3,171.3h1016.5s144.4.5,144.4-145.3V0"/>
-      <path class="cls-2" d="M-2804.3,26h1160.3s82.3,0,82.3,80.9v631.1"/>
-      <path class="cls-5" d="M-1556.6,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <line class="cls-2" x1="-1859.7" x2="-1859.7" y2="738"/>
-      <line class="cls-2" x1="-2004" x2="-2004" y2="738"/>
-      <line class="cls-2" x1="-2075.9" x2="-2075.9" y2="738"/>
-      <line class="cls-2" x1="-1931.9" x2="-1931.9" y2="738"/>
-      <line class="cls-2" x1="-1787.8" x2="-1787.8" y2="738"/>
-      <path class="cls-5" d="M-1782.6,20.8c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-5" d="M-1638.3,20.8c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-5" d="M-1926.7,93.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-5" d="M-1854.6,166.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-5" d="M-1854.6,310c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-5" d="M-1926.7,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-5" d="M-1996.9,25.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-5" d="M-2068.8,98.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-5" d="M-2068.8,171.3c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-5" d="M-1780.7,171.3c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-5" d="M-1782.6,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <g>
-        <rect class="cls-3" x="-2466.1" y="121.6" width="223.5" height="176.1"/>
-        <rect class="cls-3" x="-2225.6" y="121.6" width="223.5" height="176.1"/>
-        <rect class="cls-3" x="-1986.4" y="121.6" width="223.5" height="176.1"/>
-        <rect class="cls-3" x="-1746.1" y="121.6" width="223.5" height="176.1"/>
-      </g>
-      <path class="cls-1" d="M656.3-.3v171.3s0,72,72.4,72h583.6"/>
-      <path class="cls-1" d="M.3,98.6h1016.5s72.5,1,72.5-73V-.3"/>
-      <path class="cls-1" d="M-.3,314.8h1162s81.3.3,81.3-71.9v-45.9"/>
-      <path class="cls-1" d="M.3,170.9h1016.5s144.4.5,144.4-145.3V-.3"/>
-      <path class="cls-1" d="M.3,25.7h1160.3s82.3,0,82.3,80.9v631.1"/>
-      <path class="cls-4" d="M1248.1,237.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <line class="cls-1" x1="944.9" y1="-.3" x2="944.9" y2="737.7"/>
-      <line class="cls-1" x1="800.6" y1="-.3" x2="800.6" y2="737.7"/>
-      <line class="cls-1" x1="728.7" y1="-.3" x2="728.7" y2="737.7"/>
-      <line class="cls-1" x1="872.8" y1="-.3" x2="872.8" y2="737.7"/>
-      <line class="cls-1" x1="1016.9" y1="-.3" x2="1016.9" y2="737.7"/>
-      <path class="cls-4" d="M1022,20.5c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-4" d="M1166.4,20.5c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-4" d="M877.9,93.4c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-4" d="M950.1,165.8c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-4" d="M950.1,309.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-4" d="M877.9,237.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-4" d="M807.7,25.6c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-4" d="M735.8,98.6c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-4" d="M735.8,170.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-4" d="M1024,170.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-4" d="M1022,237.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-    </g>
-  </g>
-</svg>

package/assets/static/header_static_db2_light_02.svg

@@ -1,44 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1312 738">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #d9fbfb;
-        stroke: #03ddbd;
-      }
-
-      .cls-2 {
-        fill: none;
-        stroke: #a6c8ff;
-        stroke-miterlimit: 10;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
-  <g>
-    <g id="Layer_1">
-      <path class="cls-2" d="M656,0v171.3s0,72,72.4,72h583.6"/>
-      <path class="cls-2" d="M0,98.9h1016.5s72.5,1,72.5-73V0"/>
-      <path class="cls-2" d="M-.6,315.2h1162s81.3.3,81.3-71.9v-45.9"/>
-      <path class="cls-2" d="M0,171.3h1016.5s144.4.5,144.4-145.3V0"/>
-      <path class="cls-2" d="M0,26h1160.3s82.3,0,82.3,80.9v631.1"/>
-      <path class="cls-1" d="M1247.8,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <line class="cls-2" x1="944.6" x2="944.6" y2="738"/>
-      <line class="cls-2" x1="800.3" x2="800.3" y2="738"/>
-      <line class="cls-2" x1="728.4" x2="728.4" y2="738"/>
-      <line class="cls-2" x1="872.5" x2="872.5" y2="738"/>
-      <line class="cls-2" x1="1016.5" x2="1016.5" y2="738"/>
-      <path class="cls-1" d="M1021.7,20.8c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-1" d="M1166.1,20.8c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-1" d="M877.6,93.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-1" d="M949.8,166.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-1" d="M949.8,310c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-1" d="M877.6,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-      <path class="cls-1" d="M807.4,25.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-1" d="M735.5,98.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-1" d="M735.5,171.3c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-1" d="M1023.6,171.3c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
-      <path class="cls-1" d="M1021.7,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
-    </g>
-  </g>
-</svg>