@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/index.cjs

@@ -0,0 +1,292 @@
+'use strict';
+
+var Icon = require('./components/icon/Icon');
+var UserDisplay = require('./components/user-display/UserDisplay');
+var Headline = require('./components/headline/Headline');
+var SectionLabel = require('./components/section-label/SectionLabel');
+var PageLayout = require('./components/page-layout/PageLayout');
+var Footer = require('./components/page-layout/components/footer/Footer');
+var Card = require('./components/card/Card');
+var CardContainer = require('./components/card-container/CardContainer');
+var SkeletonLoaderItem = require('./components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+var SkeletonLoader = require('./components/skeleton-loader/SkeletonLoader');
+var Page = require('./components/page/Page');
+var Breadcrumbs = require('./components/breadcrumbs/Breadcrumbs');
+var Circle = require('./components/circle/Circle');
+var chartColors = require('./constants/chart-colors');
+var chartColors_types = require('./constants/chart-colors.types');
+var severity_types = require('./constants/severity.types');
+var AppHeader = require('./components/app-header/AppHeader');
+var nestedFiltering = require('./utils/arrays/nested-filtering');
+var formatDate = require('./utils/date/formatDate');
+var AttributeChip = require('./components/attribute-chip/AttributeChip');
+var MetaBar = require('./components/meta-bar/MetaBar');
+var FadeOverlay = require('./components/overlay/fade-overlay/FadeOverlay');
+var InputContainer = require('./components/forms/input-container/InputContainer');
+var Divider = require('./components/divider/Divider');
+var Grid = require('./components/grid/Grid');
+var MetricTile = require('./components/metric-tile/MetricTile');
+var Stack = require('./components/stack/Stack');
+var EnvironmentBanner = require('./components/environment-banner/EnvironmentBanner');
+var Panel = require('./components/panel/Panel');
+var Toast = require('./components/toast/Toast');
+var Hyperlink = require('./components/hyperlink/Hyperlink');
+var StatePage = require('./components/state-page/StatePage');
+var Alert = require('./components/alert/Alert');
+var InlineStatus = require('./components/inline-status/InlineStatus');
+var MediaCard = require('./components/media-card/MediaCard');
+var HighlightedText = require('./components/highlighted-text/HighlightedText');
+var ButtonSelect = require('./components/button-select/ButtonSelect');
+var Sidebar = require('./components/sidebar/Sidebar');
+var SplitButton = require('./components/split-button/SplitButton');
+var ChipMultiToggle = require('./components/filtering/chip-multi-toggle/ChipMultiToggle');
+var CheckboxGroup = require('./components/forms/checkbox-group/CheckboxGroup');
+
+
+
+Object.keys(Icon).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Icon[k]; }
+	});
+});
+Object.keys(UserDisplay).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return UserDisplay[k]; }
+	});
+});
+Object.keys(Headline).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Headline[k]; }
+	});
+});
+Object.keys(SectionLabel).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return SectionLabel[k]; }
+	});
+});
+Object.keys(PageLayout).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return PageLayout[k]; }
+	});
+});
+Object.keys(Footer).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Footer[k]; }
+	});
+});
+Object.keys(Card).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Card[k]; }
+	});
+});
+Object.keys(CardContainer).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return CardContainer[k]; }
+	});
+});
+Object.keys(SkeletonLoaderItem).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return SkeletonLoaderItem[k]; }
+	});
+});
+Object.keys(SkeletonLoader).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return SkeletonLoader[k]; }
+	});
+});
+Object.keys(Page).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Page[k]; }
+	});
+});
+Object.keys(Breadcrumbs).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Breadcrumbs[k]; }
+	});
+});
+Object.keys(Circle).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Circle[k]; }
+	});
+});
+Object.keys(chartColors).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return chartColors[k]; }
+	});
+});
+Object.keys(chartColors_types).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return chartColors_types[k]; }
+	});
+});
+Object.keys(severity_types).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return severity_types[k]; }
+	});
+});
+Object.keys(AppHeader).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return AppHeader[k]; }
+	});
+});
+Object.keys(nestedFiltering).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return nestedFiltering[k]; }
+	});
+});
+Object.keys(formatDate).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return formatDate[k]; }
+	});
+});
+Object.keys(AttributeChip).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return AttributeChip[k]; }
+	});
+});
+Object.keys(MetaBar).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return MetaBar[k]; }
+	});
+});
+Object.keys(FadeOverlay).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return FadeOverlay[k]; }
+	});
+});
+Object.keys(InputContainer).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return InputContainer[k]; }
+	});
+});
+Object.keys(Divider).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Divider[k]; }
+	});
+});
+Object.keys(Grid).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Grid[k]; }
+	});
+});
+Object.keys(MetricTile).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return MetricTile[k]; }
+	});
+});
+Object.keys(Stack).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Stack[k]; }
+	});
+});
+Object.keys(EnvironmentBanner).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return EnvironmentBanner[k]; }
+	});
+});
+Object.keys(Panel).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Panel[k]; }
+	});
+});
+Object.keys(Toast).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Toast[k]; }
+	});
+});
+Object.keys(Hyperlink).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Hyperlink[k]; }
+	});
+});
+Object.keys(StatePage).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return StatePage[k]; }
+	});
+});
+Object.keys(Alert).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Alert[k]; }
+	});
+});
+Object.keys(InlineStatus).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return InlineStatus[k]; }
+	});
+});
+Object.keys(MediaCard).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return MediaCard[k]; }
+	});
+});
+Object.keys(HighlightedText).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return HighlightedText[k]; }
+	});
+});
+Object.keys(ButtonSelect).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return ButtonSelect[k]; }
+	});
+});
+Object.keys(Sidebar).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Sidebar[k]; }
+	});
+});
+Object.keys(SplitButton).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return SplitButton[k]; }
+	});
+});
+Object.keys(ChipMultiToggle).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return ChipMultiToggle[k]; }
+	});
+});
+Object.keys(CheckboxGroup).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return CheckboxGroup[k]; }
+	});
+});

package/dist/index.css

@@ -0,0 +1,75 @@
+@import './styles/styles.css';
+
+@import './components/accordion/Accordion.module.css';
+@import './components/accordion/components/AccordionRow.module.css';
+@import './components/alert/Alert.module.css';
+@import './components/app-header/AppHeader.module.css';
+@import './components/attribute-chip/AttributeChip.module.css';
+@import './components/avatar/Avatar.module.css';
+@import './components/breadcrumbs/Breadcrumbs.module.css';
+@import './components/button-select/ButtonSelect.module.css';
+@import './components/button/Button.module.css';
+@import './components/card-container/CardContainer.module.css';
+@import './components/card/Card.module.css';
+@import './components/card/components/CardMeta.module.css';
+@import './components/chip/Chip.module.css';
+@import './components/circle/Circle.module.css';
+@import './components/clear-button/ClearButton.module.css';
+@import './components/code-block/CodeBlock.module.css';
+@import './components/copy-button/CopyButton.module.css';
+@import './components/datetime-picker/DateTimePicker.module.css';
+@import './components/environment-banner/EnvironmentBanner.module.css';
+@import './components/filter-field/FilterField.module.css';
+@import './components/filtering/chip-multi-toggle/ChipMultiToggle.module.css';
+@import './components/forms/checkbox-group/CheckboxGroup.module.css';
+@import './components/forms/checkbox/Checkbox.module.css';
+@import './components/forms/file-upload/FileUpload.module.css';
+@import './components/forms/form-select/FormSelect.module.css';
+@import './components/forms/input-container/InputContainer.module.css';
+@import './components/forms/input/Input.module.css';
+@import './components/forms/radio-buttons/RadioButtons.module.css';
+@import './components/forms/select/Select.module.css';
+@import './components/forms/switch/Switch.module.css';
+@import './components/forms/text-area/Textarea.module.css';
+@import './components/forms/typeahead/Typeahead.module.css';
+@import './components/grid/Grid.module.css';
+@import './components/headline/Headline.module.css';
+@import './components/hyperlink/Hyperlink.module.css';
+@import './components/icon/Icon.module.css';
+@import './components/inline-status/InlineStatus.module.css';
+@import './components/json-viewer/JsonViewer.module.css';
+@import './components/lightbox/Lightbox.module.css';
+@import './components/media-card/MediaCard.module.css';
+@import './components/menu/Menu.module.css';
+@import './components/meta-bar/MetaBar.module.css';
+@import './components/metric-tile/MetricTile.module.css';
+@import './components/nav-bar/NavBar.module.css';
+@import './components/overlay/fade-overlay/FadeOverlay.module.css';
+@import './components/overlay/modal/Modal.module.css';
+@import './components/overlay/side-panel/SidePanel.module.css';
+@import './components/overlay/tooltip/Tooltip.module.css';
+@import './components/page-layout/PageLayout.module.css';
+@import './components/page-layout/components/footer/Footer.module.css';
+@import './components/page/Page.module.css';
+@import './components/pagination/Pagination.module.css';
+@import './components/panel/Panel.module.css';
+@import './components/popover/Popover.module.css';
+@import './components/search-box/SearchBox.module.css';
+@import './components/section-label/SectionLabel.module.css';
+@import './components/segmented-progress-bar/SegmentedProgressBar.module.css';
+@import './components/sidebar/components/SidebarItem.module.css';
+@import './components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css';
+@import './components/sidebar/components/sidebar-container/SidebarContainer.module.css';
+@import './components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css';
+@import './components/sidebar/components/sidebar-items/SidebarItems.module.css';
+@import './components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.module.css';
+@import './components/split-button/SplitButton.module.css';
+@import './components/split-pane/SplitPane.module.css';
+@import './components/stack/Stack.module.css';
+@import './components/state-page/StatePage.module.css';
+@import './components/table/Table.module.css';
+@import './components/table/components/column-resizer/ColumnResizer.module.css';
+@import './components/table/components/empty-state/EmptyState.module.css';
+@import './components/tabs/Tabs.module.css';
+@import './components/toast/Toast.module.css';
+@import './components/user-display/UserDisplay.module.css';

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+export * from './components/icon/Icon';
+export * from './components/user-display/UserDisplay';
+export * from './components/headline/Headline';
+export * from './components/section-label/SectionLabel';
+export * from './components/page-layout/PageLayout';
+export * from './components/page-layout/components/footer/Footer';
+export * from './components/card/Card';
+export * from './components/card-container/CardContainer';
+export * from './components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+export * from './components/skeleton-loader/SkeletonLoader';
+export * from './components/page/Page';
+export * from './components/breadcrumbs/Breadcrumbs';
+export * from './components/circle/Circle';
+export * from './constants/chart-colors';
+export * from './constants/chart-colors.types';
+export * from './constants/severity.types';
+export * from './components/app-header/AppHeader';
+export * from './utils/arrays/nested-filtering';
+export * from './utils/date/formatDate';
+export * from './components/attribute-chip/AttributeChip';
+export * from './components/meta-bar/MetaBar';
+export * from './components/overlay/fade-overlay/FadeOverlay';
+export * from './components/forms/input-container/InputContainer';
+export * from './components/divider/Divider';
+export * from './components/grid/Grid';
+export * from './components/metric-tile/MetricTile';
+export type { TableContextMenuItem } from './components/table/Table.types';
+export * from './components/stack/Stack';
+export * from './components/environment-banner/EnvironmentBanner';
+export * from './components/panel/Panel';
+export * from './components/toast/Toast';
+export * from './components/hyperlink/Hyperlink';
+export * from './components/state-page/StatePage';
+export * from './components/alert/Alert';
+export * from './components/inline-status/InlineStatus';
+export * from './components/media-card/MediaCard';
+export * from './components/highlighted-text/HighlightedText';
+export * from './components/button-select/ButtonSelect';
+export * from './components/sidebar/Sidebar';
+export * from './components/split-button/SplitButton';
+export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
+export * from './components/forms/checkbox-group/CheckboxGroup';

package/dist/index.js

@@ -0,0 +1,41 @@
+export * from './components/icon/Icon';
+export * from './components/user-display/UserDisplay';
+export * from './components/headline/Headline';
+export * from './components/section-label/SectionLabel';
+export * from './components/page-layout/PageLayout';
+export * from './components/page-layout/components/footer/Footer';
+export * from './components/card/Card';
+export * from './components/card-container/CardContainer';
+export * from './components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+export * from './components/skeleton-loader/SkeletonLoader';
+export * from './components/page/Page';
+export * from './components/breadcrumbs/Breadcrumbs';
+export * from './components/circle/Circle';
+export * from './constants/chart-colors';
+export * from './constants/chart-colors.types';
+export * from './constants/severity.types';
+export * from './components/app-header/AppHeader';
+export * from './utils/arrays/nested-filtering';
+export * from './utils/date/formatDate';
+export * from './components/attribute-chip/AttributeChip';
+export * from './components/meta-bar/MetaBar';
+export * from './components/overlay/fade-overlay/FadeOverlay';
+export * from './components/forms/input-container/InputContainer';
+export * from './components/divider/Divider';
+export * from './components/grid/Grid';
+export * from './components/metric-tile/MetricTile';
+export * from './components/stack/Stack';
+export * from './components/environment-banner/EnvironmentBanner';
+export * from './components/panel/Panel';
+export * from './components/toast/Toast';
+export * from './components/hyperlink/Hyperlink';
+export * from './components/state-page/StatePage';
+export * from './components/alert/Alert';
+export * from './components/inline-status/InlineStatus';
+export * from './components/media-card/MediaCard';
+export * from './components/highlighted-text/HighlightedText';
+export * from './components/button-select/ButtonSelect';
+export * from './components/sidebar/Sidebar';
+export * from './components/split-button/SplitButton';
+export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
+export * from './components/forms/checkbox-group/CheckboxGroup';

package/dist/styles/animation.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+const MOTION_MS = {
+  panelSlide: 300,
+  modal: 200,
+  tooltipOpen: 300
+};
+
+exports.MOTION_MS = MOTION_MS;

package/dist/styles/animation.d.ts

@@ -0,0 +1,5 @@
+export declare const MOTION_MS: {
+    readonly panelSlide: 300;
+    readonly modal: 200;
+    readonly tooltipOpen: 300;
+};

package/dist/styles/animation.js

@@ -0,0 +1,7 @@
+const MOTION_MS = {
+  panelSlide: 300,
+  modal: 200,
+  tooltipOpen: 300
+};
+
+export { MOTION_MS };

package/dist/styles/css-helper-classes/flex.css

@@ -0,0 +1,113 @@
+.dbc-flex {
+  display: flex;
+}
+
+.dbc-inline-flex {
+  display: inline-flex;
+}
+
+.dbc-flex-row {
+  flex-direction: row;
+}
+.dbc-flex-column {
+  flex-direction: column;
+}
+
+.dbc-flex-wrap {
+  flex-wrap: wrap;
+}
+.dbc-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.dbc-justify-start {
+  justify-content: flex-start;
+}
+.dbc-justify-center {
+  justify-content: center;
+}
+.dbc-justify-end {
+  justify-content: flex-end;
+}
+.dbc-justify-between {
+  justify-content: space-between;
+}
+.dbc-justify-around {
+  justify-content: space-around;
+}
+.dbc-justify-evenly {
+  justify-content: space-evenly;
+}
+
+.dbc-items-start {
+  align-items: flex-start;
+}
+.dbc-items-center {
+  align-items: center;
+}
+.dbc-items-end {
+  align-items: flex-end;
+}
+.dbc-items-stretch {
+  align-items: stretch;
+}
+
+.dbc-self-start {
+  align-self: flex-start;
+}
+.dbc-self-center {
+  align-self: center;
+}
+.dbc-self-end {
+  align-self: flex-end;
+}
+.dbc-self-stretch {
+  align-self: stretch;
+}
+
+.dbc-gap-xxs {
+  gap: var(--spacing-xxs);
+}
+.dbc-gap-xs {
+  gap: var(--spacing-xs);
+}
+.dbc-gap-sm {
+  gap: var(--spacing-sm);
+}
+.dbc-gap-md {
+  gap: var(--spacing-md);
+}
+.dbc-gap-lg {
+  gap: var(--spacing-lg);
+}
+.dbc-gap-xl {
+  gap: var(--spacing-xl);
+}
+
+.dbc-gap-2xl {
+  gap: var(--spacing-2xl);
+}
+
+.dbc-gap-3xl {
+  gap: var(--spacing-3xl);
+}
+
+.dbc-gap-4xl {
+  gap: var(--spacing-4xl);
+}
+
+.dbc-flex-grow {
+  flex-grow: 1;
+}
+.dbc-flex-shrink {
+  flex-shrink: 1;
+}
+.dbc-flex-none {
+  flex: none;
+}
+
+.dbc-flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}