@gitlab/ui 115.1.0 → 115.3.0

package/dist/tokens/tokens_story.js

@@ -54,7 +54,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-m-0 gl-list-none gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.$value),style:(_vm.getStyle(token.$value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-text-inherit",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-items-center gl-gap-3"},[(token.deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-text-inherit"},[_vm._v(_vm._s(token.$value))]),_vm._v(" "),(_vm.isHex(token.$value))?_c('gl-color-contrast',{attrs:{"foreground":token.$value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(_vm.isHex(token.$value))?_c('gl-color-contrast',{attrs:{"foreground":token.$value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-m-0 gl-list-none gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.$value),style:(_vm.getStyle(token.$value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-text-inherit",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-items-center gl-gap-3"},[(token.$deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-text-inherit"},[_vm._v(_vm._s(token.$value))]),_vm._v(" "),(_vm.isHex(token.$value))?_c('gl-color-contrast',{attrs:{"foreground":token.$value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(_vm.isHex(token.$value))?_c('gl-color-contrast',{attrs:{"foreground":token.$value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/tokens_table.js

@@ -104,7 +104,7 @@ var script = {
         type: token.$type,
         value: token.$value,
         valueLabel: this.getValueLabel(token),
-        deprecated: token.deprecated ? 'deprecated' : '',
+        deprecated: token.$deprecated ? 'deprecated' : '',
         description: token.$description
       };
     },
@@ -189,7 +189,7 @@ var script = {
           if (token.filePath.match('contextual')) {
             figmaPrefix = '🔒/';
           }
-          if (token.deprecated) {
+          if (token.$deprecated) {
             figmaPrefix = '⚠️ DEPRECATED/';
           }
           return `${figmaPrefix}${token.path.filter(Boolean).join('-')}`;

package/dist/tokens/tokens_tailwind_table.js

@@ -94,7 +94,7 @@ var script = {
         value: token.$value,
         valueLabel: this.getValueLabel(token),
         darkValueLabel: this.getDarkValueLabel(token),
-        deprecated: token.deprecated ? 'deprecated' : '',
+        deprecated: token.$deprecated ? 'deprecated' : '',
         description: token.$description,
         className: this.formatContextToClass(token.context),
         cssValue: token.cssWithValue,
@@ -188,7 +188,7 @@ var script = {
           if (token.filePath.match('contextual')) {
             figmaPrefix = '🔒/';
           }
-          if (token.deprecated) {
+          if (token.$deprecated) {
             figmaPrefix = '⚠️ DEPRECATED/';
           }
           return `${figmaPrefix}${token.path.filter(Boolean).join('-')}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "115.1.0",
+  "version": "115.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -95,15 +95,15 @@
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "1.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.7",
+    "@babel/core": "^7.28.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@cypress/grep": "^4.1.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/svgs": "3.136.0",
-    "@jest/test-sequencer": "30.0.2",
+    "@jest/test-sequencer": "30.0.4",
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^3.1.0",
@@ -134,7 +134,7 @@
     "autoprefixer": "10.4.21",
     "axe-playwright": "^2.1.0",
     "babel-loader": "^9.2.1",
-    "cypress": "14.5.0",
+    "cypress": "14.5.1",
     "cypress-real-events": "^1.14.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.4.0",
@@ -142,8 +142,8 @@
     "esbuild": "^0.18.0",
     "fuse.js": "^7.1.0",
     "gitlab-api-async-iterator": "^1.3.1",
-    "glob": "10.4.5",
-    "globby": "^11.1.0",
+    "glob": "11.0.3",
+    "globby": "^14.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "30.0.2",
     "jest-circus": "30.0.2",
@@ -154,8 +154,8 @@
     "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.53.1",
-    "playwright-core": "^1.53.1",
+    "playwright": "^1.53.2",
+    "playwright-core": "^1.53.2",
     "postcss": "8.5.6",
     "postcss-loader": "8.1.1",
     "postcss-scss": "4.0.9",
@@ -173,7 +173,7 @@
     "start-server-and-test": "^1.15.4",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.0.0",
+    "style-dictionary": "^5.0.1",
     "style-loader": "3.3.2",
     "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.17",

package/src/components/dashboards/dashboard_layout/dashboard_layout.md

@@ -0,0 +1,3 @@
+The dashboard layout is used to provide a consistent UI within a dashboarding environment.
+The layout component should be used to render a grid-style dashboard as outlined by our
+[Pajamas documentation](https://design.gitlab.com/patterns/dashboards).

package/src/components/dashboards/dashboard_layout/dashboard_layout.vue

@@ -0,0 +1,132 @@
+<script>
+import GridLayout from './grid_layout/grid_layout.vue';
+import { dashboardConfigValidator } from './validators';
+
+/**
+ * The `DashboardLayout` component provides an easy way to render dashboards using a configuration, aligning with our [Pajamas guidelines](https://design.gitlab.com/patterns/dashboards).
+ *
+ * Please refer to the [documentation](https://docs.gitlab.com/development/fe_guide/dashboard_layout_framework) for more information.
+ *
+ */
+export default {
+  name: 'GlDashboardLayout',
+  components: {
+    GridLayout,
+  },
+  props: {
+    /**
+     * The dashboard configuration object.
+     *
+     * @typedef {Object} Dashboard
+     * @property {string} title - The dashboard title to render. Expected if no #title or #header slot is provided.
+     * @property {string} description - Optional: The dashboard description to render.
+     * @property {Array<Object>} panels - Optional: The dashboard panels. The entire object is passed to the #panel slot.
+     * @property {string} panels[].id - Each panel must have a unique ID.
+     * @property {string} panels[].title - The panel title to render.
+     * @property {Object} panels[].gridAttributes - Layout settings for the panel.
+     * @property {number} panels[].gridAttributes.width - Width of the panel in grid units.
+     * @property {number} panels[].gridAttributes.height - Height of the panel in grid units.
+     * @property {number} panels[].gridAttributes.xPos - X position of the panel in the grid, expressed in grid units, starts from 0.
+     * @property {number} panels[].gridAttributes.yPos - Y position of the panel in the grid, expressed in grid units, starts from 0.
+     *
+     * @type {Dashboard}
+     */
+    config: {
+      type: Object,
+      required: true,
+      validator: dashboardConfigValidator,
+    },
+    /**
+     * Set to `false` to enable user-driven modification of the grid layout.
+     */
+    isStaticGrid: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    dashboardHasPanels() {
+      return this.config.panels?.length > 0;
+    },
+    dashboardHasDescription() {
+      return this.$scopedSlots.description || Boolean(this.config.description);
+    },
+  },
+  methods: {
+    emitChanges(newConfig) {
+      this.$emit('changed', newConfig);
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <section class="gl-my-4 gl-flex gl-items-center">
+      <!-- @slot Used to render custom dashboard header state. Replaces the default rendering. -->
+      <slot name="header">
+        <div class="gl-flex gl-w-full gl-flex-col">
+          <!-- Dashboard title -->
+          <div class="gl-flex gl-items-center">
+            <!-- @slot Used to render custom dashboard titles. Replaces the default rendering. -->
+            <slot name="title">
+              <h2 data-testid="title" class="gl-my-0">{{ config.title }}</h2>
+            </slot>
+          </div>
+          <!-- Dashboard description -->
+          <div v-if="dashboardHasDescription" class="gl-mt-3 gl-flex">
+            <!-- @slot Used to render custom dashboard descriptions. Replaces the default rendering. -->
+            <slot name="description">
+              <p data-testid="description" class="gl-mb-0">
+                {{ config.description }}
+              </p>
+            </slot>
+          </div>
+        </div>
+      </slot>
+      <div v-if="$scopedSlots.actions" data-testid="actions-container">
+        <!-- @slot Place dashboard actions inside this slot. -->
+        <slot name="actions"></slot>
+      </div>
+    </section>
+    <div class="gl-flex">
+      <div class="gl-flex gl-grow gl-flex-col">
+        <!-- @slot For dashboard-level alerts. -->
+        <slot name="alert"></slot>
+
+        <!-- Dashboard filters -->
+        <section
+          v-if="$scopedSlots.filters"
+          class="gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4"
+          data-testid="filters-container"
+        >
+          <!-- @slot Place dashboard filters inside this slot. -->
+          <slot name="filters"></slot>
+        </section>
+
+        <!-- Dashboard grid -->
+        <!--
+          Gridstack guttering wraps around each panel in the grid.
+          We want the grid to be flush against the edge, so we remove the excess margin using -gl-mx-3.
+        -->
+        <grid-layout
+          v-if="dashboardHasPanels"
+          :value="config"
+          :is-static="isStaticGrid"
+          class="-gl-mx-3"
+          @input="emitChanges"
+        >
+          <template #panel="{ panel }">
+            <!-- @slot The contents to render inside each dashboard panel. -->
+            <slot name="panel" v-bind="{ panel }"></slot>
+          </template>
+        </grid-layout>
+
+        <!-- @slot Shown when a dashboard has no panels. -->
+        <slot v-else name="empty-state"></slot>
+      </div>
+    </div>
+    <!-- @slot Optional: The dashboard footer content. -->
+    <slot name="footer"></slot>
+  </div>
+</template>

package/src/components/dashboards/dashboard_layout/validators.js

@@ -0,0 +1,8 @@
+export const dashboardConfigValidator = (config) => {
+  if (config.panels) {
+    if (!Array.isArray(config.panels)) return false;
+    if (!config.panels.every((panel) => panel.id && panel.gridAttributes)) return false;
+  }
+
+  return true;
+};

package/src/components/index.js

@@ -0,0 +1,114 @@
+// Base components
+export { default as GlTableLite } from './base/table_lite/table_lite.vue';
+export { default as GlDropdownForm } from './base/dropdown/dropdown_form.vue';
+export { default as GlKeysetPagination } from './base/keyset_pagination/keyset_pagination.vue';
+export { default as GlInputGroupText } from './base/form/input_group_text/input_group_text.vue';
+export { default as GlFormCombobox } from './base/form/form_combobox/form_combobox.vue';
+export { default as GlTokenSelector } from './base/token_selector/token_selector.vue';
+export { default as GlNav } from './base/nav/nav.vue';
+export { default as GlNavItem } from './base/nav/nav_item.vue';
+export { default as GlFormCheckboxTree } from './base/form/form_checkbox_tree/form_checkbox_tree.vue';
+export { default as GlMarkdown } from './base/markdown/markdown.vue';
+export { default as GlIntersectionObserver } from './utilities/intersection_observer/intersection_observer.vue';
+export { default as GlLink, default as GlDeprecatedLink } from './base/link/link.vue';
+export { default as GlIcon } from './base/icon/icon.vue';
+export { default as GlAnimatedChevronRightDownIcon } from './base/animated_icon/animated_chevron_right_down_icon.vue';
+export { default as GlAnimatedChevronLgRightDownIcon } from './base/animated_icon/animated_chevron_lg_right_down_icon.vue';
+export { default as GlAnimatedChevronDownUpIcon } from './base/animated_icon/animated_chevron_down_up_icon.vue';
+export { default as GlAnimatedChevronLgDownUpIcon } from './base/animated_icon/animated_chevron_lg_down_up_icon.vue';
+export { default as GlAnimatedDuoChatIcon } from './base/animated_icon/animated_duo_chat_icon.vue';
+export { default as GlAnimatedLoaderIcon } from './base/animated_icon/animated_loader_icon.vue';
+export { default as GlAnimatedNotificationIcon } from './base/animated_icon/animated_notifications_icon.vue';
+export { default as GlAnimatedSidebarIcon } from './base/animated_icon/animated_sidebar_icon.vue';
+export { default as GlAnimatedSmileIcon } from './base/animated_icon/animated_smile_icon.vue';
+export { default as GlAnimatedSortIcon } from './base/animated_icon/animated_sort_icon.vue';
+export { default as GlAnimatedStarIcon } from './base/animated_icon/animated_star_icon.vue';
+export { default as GlAnimatedTodoIcon } from './base/animated_icon/animated_todo_icon.vue';
+export { default as GlAnimatedUploadIcon } from './base/animated_icon/animated_upload_icon.vue';
+export { default as GlLoadingIcon } from './base/loading_icon/loading_icon.vue';
+export { default as GlModal } from './base/modal/modal.vue';
+export { default as GlPagination } from './base/pagination/pagination.vue';
+export { default as GlPopover } from './base/popover/popover.vue';
+export { default as GlProgressBar } from './base/progress_bar/progress_bar.vue';
+export { default as GlToken } from './base/token/token.vue';
+export { default as GlBadge } from './base/badge/badge.vue';
+export { default as GlBanner } from './base/banner/banner.vue';
+export { default as GlButton } from './base/button/button.vue';
+export { default as GlTooltip } from './base/tooltip/tooltip.vue';
+export { default as GlToast } from './base/toast/toast';
+export { default as GlDashboardSkeleton } from './regions/dashboard_skeleton/dashboard_skeleton.vue';
+export { default as GlEmptyState } from './regions/empty_state/empty_state.vue';
+export { default as GlForm } from './base/form/form.vue';
+export { default as GlFormCharacterCount } from './base/form/form_character_count/form_character_count.vue';
+export { default as GlFormDate } from './base/form/form_date/form_date.vue';
+export { default as GlFormInput } from './base/form/form_input/form_input.vue';
+export { default as GlFormInputGroup } from './base/form/form_input_group/form_input_group.vue';
+export { default as GlFormRadio } from './base/form/form_radio/form_radio.vue';
+export { default as GlFormRadioGroup } from './base/form/form_radio_group/form_radio_group.vue';
+export { default as GlFormSelect } from './base/form/form_select/form_select.vue';
+export { default as GlFormTextarea } from './base/form/form_textarea/form_textarea.vue';
+export { default as GlFormGroup } from './base/form/form_group/form_group.vue';
+export { default as GlFormFields } from './base/form/form_fields/form_fields.vue';
+export { default as GlSearchBoxByType } from './base/search_box_by_type/search_box_by_type.vue';
+export { default as GlSearchBoxByClick } from './base/search_box_by_click/search_box_by_click.vue';
+export { default as GlDropdownItem } from './base/dropdown/dropdown_item.vue';
+export { default as GlDropdownSectionHeader } from './base/dropdown/dropdown_section_header.vue';
+export { default as GlDropdownDivider } from './base/dropdown/dropdown_divider.vue';
+export { default as GlDropdownText } from './base/dropdown/dropdown_text.vue';
+export { default as GlDropdown } from './base/dropdown/dropdown.vue';
+// new components aiming to replace GlDropdown  - start
+export { default as GlCollapsibleListbox } from './base/new_dropdowns/listbox/listbox.vue';
+export { default as GlListboxItem } from './base/new_dropdowns/listbox/listbox_item.vue';
+export { default as GlDisclosureDropdown } from './base/new_dropdowns/disclosure/disclosure_dropdown.vue';
+export { default as GlDisclosureDropdownItem } from './base/new_dropdowns/disclosure/disclosure_dropdown_item.vue';
+export { default as GlDisclosureDropdownGroup } from './base/new_dropdowns/disclosure/disclosure_dropdown_group.vue';
+// new components aiming to replace GlDropdown  - end
+export { default as GlPath } from './base/path/path.vue';
+export { default as GlTable } from './base/table/table.vue';
+export { default as GlBreadcrumb } from './base/breadcrumb/breadcrumb.vue';
+export { default as GlScrollableTabs } from './base/tabs/tabs/scrollable_tabs.vue';
+export { default as GlTabs } from './base/tabs/tabs/tabs.vue';
+export { default as GlTab } from './base/tabs/tab/tab.vue';
+export { default as GlButtonGroup } from './base/button_group/button_group.vue';
+export { default as GlFormCheckbox } from './base/form/form_checkbox/form_checkbox.vue';
+export { default as GlFormCheckboxGroup } from './base/form/form_checkbox/form_checkbox_group.vue';
+export { default as GlAvatar } from './base/avatar/avatar.vue';
+export { default as GlAvatarsInline } from './base/avatars_inline/avatars_inline.vue';
+export { default as GlAvatarLabeled } from './base/avatar_labeled/avatar_labeled.vue';
+export { default as GlAvatarLink } from './base/avatar_link/avatar_link.vue';
+export { default as GlLabel } from './base/label/label.vue';
+export { default as GlDatepicker } from './base/datepicker/datepicker.vue';
+export { default as GlDaterangePicker } from './base/daterange_picker/daterange_picker.vue';
+export { default as GlToggle } from './base/toggle/toggle.vue';
+export { default as GlSorting } from './base/sorting/sorting.vue';
+export { default as GlInfiniteScroll } from './base/infinite_scroll/infinite_scroll.vue';
+export { default as GlAlert } from './base/alert/alert.vue';
+export { default as GlSegmentedControl } from './base/segmented_control/segmented_control.vue';
+export { default as GlSkeletonLoader } from './base/skeleton_loader/skeleton_loader.vue';
+export { default as GlDrawer } from './base/drawer/drawer.vue';
+export { default as GlCard } from './base/card/card.vue';
+export { default as GlFilteredSearchSuggestion } from './base/filtered_search/filtered_search_suggestion.vue';
+export { default as GlFilteredSearchSuggestionList } from './base/filtered_search/filtered_search_suggestion_list.vue';
+export { default as GlFilteredSearchTerm } from './base/filtered_search/filtered_search_term.vue';
+export { default as GlFilteredSearchToken } from './base/filtered_search/filtered_search_token.vue';
+export { default as GlFilteredSearchTokenSegment } from './base/filtered_search/filtered_search_token_segment.vue';
+export { default as GlFilteredSearch } from './base/filtered_search/filtered_search.vue';
+export { default as GlBroadcastMessage } from './base/broadcast_message/broadcast_message.vue';
+export { default as GlCollapse } from './base/collapse/collapse.vue';
+export { default as GlAccordion } from './base/accordion/accordion.vue';
+export { default as GlAccordionItem } from './base/accordion/accordion_item.vue';
+
+// Dashboards
+export { default as GlDashboardLayout } from './dashboards/dashboard_layout/dashboard_layout.vue';
+export { default as GlDashboardPanel } from './dashboards/dashboard_panel/dashboard_panel.vue';
+
+// Experimental
+export { default as GlExperimentBadge } from './experimental/experiment_badge/experiment_badge.vue';
+
+// Utilities
+export { default as GlAnimatedNumber } from './utilities/animated_number/animated_number.vue';
+export { default as GlFriendlyWrap } from './utilities/friendly_wrap/friendly_wrap.vue';
+export { default as GlIntersperse } from './utilities/intersperse/intersperse.vue';
+export { default as GlSprintf } from './utilities/sprintf/sprintf.vue';
+export { default as GlTruncate } from './utilities/truncate/truncate.vue';
+export { default as GlTruncateText } from './utilities/truncate_text/truncate_text.vue';

package/src/directives/index.js

@@ -0,0 +1,8 @@
+export { GlModalDirective } from './modal';
+export { GlTooltipDirective } from './tooltip/tooltip';
+export { setGlTooltipDefaultContainer } from './tooltip/container';
+export { GlResizeObserverDirective } from './resize_observer/resize_observer';
+export { SafeLinkDirective as GlSafeLinkDirective } from './safe_link/safe_link';
+export { SafeHtmlDirective as GlSafeHtmlDirective } from './safe_html/safe_html';
+export { OutsideDirective as GlOutsideDirective } from './outside/outside';
+export { HoverLoadDirective as GlHoverLoadDirective } from './hover_load/hover_load';

package/src/index.js

@@ -3,126 +3,5 @@
 // The line above serves as a token for rollup-plugin-replace to inject styles in production
 // builds. We do this to avoid having the stylesheet included multiple times in Storybook.
 
-// Components
-export { default as GlTableLite } from './components/base/table_lite/table_lite.vue';
-export { default as GlDropdownForm } from './components/base/dropdown/dropdown_form.vue';
-export { default as GlKeysetPagination } from './components/base/keyset_pagination/keyset_pagination.vue';
-export { default as GlInputGroupText } from './components/base/form/input_group_text/input_group_text.vue';
-export { default as GlFormCombobox } from './components/base/form/form_combobox/form_combobox.vue';
-export { default as GlTokenSelector } from './components/base/token_selector/token_selector.vue';
-export { default as GlNav } from './components/base/nav/nav.vue';
-export { default as GlNavItem } from './components/base/nav/nav_item.vue';
-export { default as GlFormCheckboxTree } from './components/base/form/form_checkbox_tree/form_checkbox_tree.vue';
-export { default as GlMarkdown } from './components/base/markdown/markdown.vue';
-export { default as GlIntersectionObserver } from './components/utilities/intersection_observer/intersection_observer.vue';
-export { default as GlLink, default as GlDeprecatedLink } from './components/base/link/link.vue';
-export { default as GlIcon } from './components/base/icon/icon.vue';
-export { default as GlAnimatedChevronRightDownIcon } from './components/base/animated_icon/animated_chevron_right_down_icon.vue';
-export { default as GlAnimatedChevronLgRightDownIcon } from './components/base/animated_icon/animated_chevron_lg_right_down_icon.vue';
-export { default as GlAnimatedChevronDownUpIcon } from './components/base/animated_icon/animated_chevron_down_up_icon.vue';
-export { default as GlAnimatedChevronLgDownUpIcon } from './components/base/animated_icon/animated_chevron_lg_down_up_icon.vue';
-export { default as GlAnimatedDuoChatIcon } from './components/base/animated_icon/animated_duo_chat_icon.vue';
-export { default as GlAnimatedLoaderIcon } from './components/base/animated_icon/animated_loader_icon.vue';
-export { default as GlAnimatedNotificationIcon } from './components/base/animated_icon/animated_notifications_icon.vue';
-export { default as GlAnimatedSidebarIcon } from './components/base/animated_icon/animated_sidebar_icon.vue';
-export { default as GlAnimatedSmileIcon } from './components/base/animated_icon/animated_smile_icon.vue';
-export { default as GlAnimatedSortIcon } from './components/base/animated_icon/animated_sort_icon.vue';
-export { default as GlAnimatedStarIcon } from './components/base/animated_icon/animated_star_icon.vue';
-export { default as GlAnimatedTodoIcon } from './components/base/animated_icon/animated_todo_icon.vue';
-export { default as GlAnimatedUploadIcon } from './components/base/animated_icon/animated_upload_icon.vue';
-export { default as GlLoadingIcon } from './components/base/loading_icon/loading_icon.vue';
-export { default as GlModal } from './components/base/modal/modal.vue';
-export { default as GlPagination } from './components/base/pagination/pagination.vue';
-export { default as GlPopover } from './components/base/popover/popover.vue';
-export { default as GlProgressBar } from './components/base/progress_bar/progress_bar.vue';
-export { default as GlToken } from './components/base/token/token.vue';
-export { default as GlBadge } from './components/base/badge/badge.vue';
-export { default as GlBanner } from './components/base/banner/banner.vue';
-export { default as GlButton } from './components/base/button/button.vue';
-export { default as GlTooltip } from './components/base/tooltip/tooltip.vue';
-export { default as GlToast } from './components/base/toast/toast';
-export { default as GlDashboardSkeleton } from './components/regions/dashboard_skeleton/dashboard_skeleton.vue';
-export { default as GlEmptyState } from './components/regions/empty_state/empty_state.vue';
-export { default as GlForm } from './components/base/form/form.vue';
-export { default as GlFormCharacterCount } from './components/base/form/form_character_count/form_character_count.vue';
-export { default as GlFormDate } from './components/base/form/form_date/form_date.vue';
-export { default as GlFormInput } from './components/base/form/form_input/form_input.vue';
-export { default as GlFormInputGroup } from './components/base/form/form_input_group/form_input_group.vue';
-export { default as GlFormRadio } from './components/base/form/form_radio/form_radio.vue';
-export { default as GlFormRadioGroup } from './components/base/form/form_radio_group/form_radio_group.vue';
-export { default as GlFormSelect } from './components/base/form/form_select/form_select.vue';
-export { default as GlFormTextarea } from './components/base/form/form_textarea/form_textarea.vue';
-export { default as GlFormGroup } from './components/base/form/form_group/form_group.vue';
-export { default as GlFormFields } from './components/base/form/form_fields/form_fields.vue';
-export { default as GlSearchBoxByType } from './components/base/search_box_by_type/search_box_by_type.vue';
-export { default as GlSearchBoxByClick } from './components/base/search_box_by_click/search_box_by_click.vue';
-export { default as GlDropdownItem } from './components/base/dropdown/dropdown_item.vue';
-export { default as GlDropdownSectionHeader } from './components/base/dropdown/dropdown_section_header.vue';
-export { default as GlDropdownDivider } from './components/base/dropdown/dropdown_divider.vue';
-export { default as GlDropdownText } from './components/base/dropdown/dropdown_text.vue';
-export { default as GlDropdown } from './components/base/dropdown/dropdown.vue';
-// new components aiming to replace GlDropdown  - start
-export { default as GlCollapsibleListbox } from './components/base/new_dropdowns/listbox/listbox.vue';
-export { default as GlListboxItem } from './components/base/new_dropdowns/listbox/listbox_item.vue';
-export { default as GlDisclosureDropdown } from './components/base/new_dropdowns/disclosure/disclosure_dropdown.vue';
-export { default as GlDisclosureDropdownItem } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue';
-export { default as GlDisclosureDropdownGroup } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue';
-// new components aiming to replace GlDropdown  - end
-export { default as GlPath } from './components/base/path/path.vue';
-export { default as GlTable } from './components/base/table/table.vue';
-export { default as GlBreadcrumb } from './components/base/breadcrumb/breadcrumb.vue';
-export { default as GlScrollableTabs } from './components/base/tabs/tabs/scrollable_tabs.vue';
-export { default as GlTabs } from './components/base/tabs/tabs/tabs.vue';
-export { default as GlTab } from './components/base/tabs/tab/tab.vue';
-export { default as GlButtonGroup } from './components/base/button_group/button_group.vue';
-export { default as GlFormCheckbox } from './components/base/form/form_checkbox/form_checkbox.vue';
-export { default as GlFormCheckboxGroup } from './components/base/form/form_checkbox/form_checkbox_group.vue';
-export { default as GlAvatar } from './components/base/avatar/avatar.vue';
-export { default as GlAvatarsInline } from './components/base/avatars_inline/avatars_inline.vue';
-export { default as GlAvatarLabeled } from './components/base/avatar_labeled/avatar_labeled.vue';
-export { default as GlAvatarLink } from './components/base/avatar_link/avatar_link.vue';
-export { default as GlLabel } from './components/base/label/label.vue';
-export { default as GlDatepicker } from './components/base/datepicker/datepicker.vue';
-export { default as GlDaterangePicker } from './components/base/daterange_picker/daterange_picker.vue';
-export { default as GlToggle } from './components/base/toggle/toggle.vue';
-export { default as GlSorting } from './components/base/sorting/sorting.vue';
-export { default as GlInfiniteScroll } from './components/base/infinite_scroll/infinite_scroll.vue';
-export { default as GlAlert } from './components/base/alert/alert.vue';
-export { default as GlSegmentedControl } from './components/base/segmented_control/segmented_control.vue';
-export { default as GlSkeletonLoader } from './components/base/skeleton_loader/skeleton_loader.vue';
-export { default as GlDrawer } from './components/base/drawer/drawer.vue';
-export { default as GlCard } from './components/base/card/card.vue';
-export { default as GlFilteredSearchSuggestion } from './components/base/filtered_search/filtered_search_suggestion.vue';
-export { default as GlFilteredSearchSuggestionList } from './components/base/filtered_search/filtered_search_suggestion_list.vue';
-export { default as GlFilteredSearchTerm } from './components/base/filtered_search/filtered_search_term.vue';
-export { default as GlFilteredSearchToken } from './components/base/filtered_search/filtered_search_token.vue';
-export { default as GlFilteredSearchTokenSegment } from './components/base/filtered_search/filtered_search_token_segment.vue';
-export { default as GlFilteredSearch } from './components/base/filtered_search/filtered_search.vue';
-export { default as GlBroadcastMessage } from './components/base/broadcast_message/broadcast_message.vue';
-export { default as GlCollapse } from './components/base/collapse/collapse.vue';
-export { default as GlAccordion } from './components/base/accordion/accordion.vue';
-export { default as GlAccordionItem } from './components/base/accordion/accordion_item.vue';
-
-// Dashboards
-export { default as GlDashboardPanel } from './components/dashboards/dashboard_panel/dashboard_panel.vue';
-
-// Experimental
-export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge.vue';
-
-// Utilities
-export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number.vue';
-export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/friendly_wrap.vue';
-export { default as GlIntersperse } from './components/utilities/intersperse/intersperse.vue';
-export { default as GlSprintf } from './components/utilities/sprintf/sprintf.vue';
-export { default as GlTruncate } from './components/utilities/truncate/truncate.vue';
-export { default as GlTruncateText } from './components/utilities/truncate_text/truncate_text.vue';
-
-// Directives
-export { GlModalDirective } from './directives/modal';
-export { GlTooltipDirective } from './directives/tooltip/tooltip';
-export { setGlTooltipDefaultContainer } from './directives/tooltip/container';
-export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
-export { SafeLinkDirective as GlSafeLinkDirective } from './directives/safe_link/safe_link';
-export { SafeHtmlDirective as GlSafeHtmlDirective } from './directives/safe_html/safe_html';
-export { OutsideDirective as GlOutsideDirective } from './directives/outside/outside';
-export { HoverLoadDirective as GlHoverLoadDirective } from './directives/hover_load/hover_load';
+export * from './components';
+export * from './directives';