@gitlab/ui 92.2.0 → 92.3.0

package/dist/vendor/bootstrap-vue/src/constants/slots.js

@@ -1,35 +1,15 @@
-const SLOT_NAME_ADD_BUTTON_TEXT = 'add-button-text';
 const SLOT_NAME_APPEND = 'append';
-const SLOT_NAME_ASIDE = 'aside';
-const SLOT_NAME_BADGE = 'badge';
 const SLOT_NAME_BOTTOM_ROW = 'bottom-row';
 const SLOT_NAME_BUTTON_CONTENT = 'button-content';
 const SLOT_NAME_CUSTOM_FOOT = 'custom-foot';
-const SLOT_NAME_DECREMENT = 'decrement';
 const SLOT_NAME_DEFAULT = 'default';
 const SLOT_NAME_DESCRIPTION = 'description';
-const SLOT_NAME_DISMISS = 'dismiss';
-const SLOT_NAME_DROP_PLACEHOLDER = 'drop-placeholder';
-const SLOT_NAME_ELLIPSIS_TEXT = 'ellipsis-text';
 const SLOT_NAME_EMPTY = 'empty';
 const SLOT_NAME_EMPTYFILTERED = 'emptyfiltered';
-const SLOT_NAME_FILE_NAME = 'file-name';
 const SLOT_NAME_FIRST = 'first';
-const SLOT_NAME_FIRST_TEXT = 'first-text';
-const SLOT_NAME_FOOTER = 'footer';
 const SLOT_NAME_HEADER = 'header';
-const SLOT_NAME_HEADER_CLOSE = 'header-close';
-const SLOT_NAME_ICON_CLEAR = 'icon-clear';
-const SLOT_NAME_ICON_EMPTY = 'icon-empty';
-const SLOT_NAME_ICON_FULL = 'icon-full';
-const SLOT_NAME_ICON_HALF = 'icon-half';
-const SLOT_NAME_IMG = 'img';
-const SLOT_NAME_INCREMENT = 'increment';
 const SLOT_NAME_INVALID_FEEDBACK = 'invalid-feedback';
 const SLOT_NAME_LABEL = 'label';
-const SLOT_NAME_LAST_TEXT = 'last-text';
-const SLOT_NAME_LEAD = 'lead';
-const SLOT_NAME_LOADING = 'loading';
 const SLOT_NAME_MODAL_BACKDROP = 'modal-backdrop';
 const SLOT_NAME_MODAL_CANCEL = 'modal-cancel';
 const SLOT_NAME_MODAL_FOOTER = 'modal-footer';
@@ -37,19 +17,7 @@ const SLOT_NAME_MODAL_HEADER = 'modal-header';
 const SLOT_NAME_MODAL_HEADER_CLOSE = 'modal-header-close';
 const SLOT_NAME_MODAL_OK = 'modal-ok';
 const SLOT_NAME_MODAL_TITLE = 'modal-title';
-const SLOT_NAME_NAV_NEXT_DECADE = 'nav-next-decade';
-const SLOT_NAME_NAV_NEXT_MONTH = 'nav-next-month';
-const SLOT_NAME_NAV_NEXT_YEAR = 'nav-next-year';
-const SLOT_NAME_NAV_PEV_DECADE = 'nav-prev-decade';
-const SLOT_NAME_NAV_PEV_MONTH = 'nav-prev-month';
-const SLOT_NAME_NAV_PEV_YEAR = 'nav-prev-year';
-const SLOT_NAME_NAV_THIS_MONTH = 'nav-this-month';
-const SLOT_NAME_NEXT_TEXT = 'next-text';
-const SLOT_NAME_OVERLAY = 'overlay';
-const SLOT_NAME_PAGE = 'page';
-const SLOT_NAME_PLACEHOLDER = 'placeholder';
 const SLOT_NAME_PREPEND = 'prepend';
-const SLOT_NAME_PREV_TEXT = 'prev-text';
 const SLOT_NAME_ROW_DETAILS = 'row-details';
 const SLOT_NAME_TABLE_BUSY = 'table-busy';
 const SLOT_NAME_TABLE_CAPTION = 'table-caption';
@@ -63,4 +31,4 @@ const SLOT_NAME_TOAST_TITLE = 'toast-title';
 const SLOT_NAME_TOP_ROW = 'top-row';
 const SLOT_NAME_VALID_FEEDBACK = 'valid-feedback';
 
-export { SLOT_NAME_ADD_BUTTON_TEXT, SLOT_NAME_APPEND, SLOT_NAME_ASIDE, SLOT_NAME_BADGE, SLOT_NAME_BOTTOM_ROW, SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_CUSTOM_FOOT, SLOT_NAME_DECREMENT, SLOT_NAME_DEFAULT, SLOT_NAME_DESCRIPTION, SLOT_NAME_DISMISS, SLOT_NAME_DROP_PLACEHOLDER, SLOT_NAME_ELLIPSIS_TEXT, SLOT_NAME_EMPTY, SLOT_NAME_EMPTYFILTERED, SLOT_NAME_FILE_NAME, SLOT_NAME_FIRST, SLOT_NAME_FIRST_TEXT, SLOT_NAME_FOOTER, SLOT_NAME_HEADER, SLOT_NAME_HEADER_CLOSE, SLOT_NAME_ICON_CLEAR, SLOT_NAME_ICON_EMPTY, SLOT_NAME_ICON_FULL, SLOT_NAME_ICON_HALF, SLOT_NAME_IMG, SLOT_NAME_INCREMENT, SLOT_NAME_INVALID_FEEDBACK, SLOT_NAME_LABEL, SLOT_NAME_LAST_TEXT, SLOT_NAME_LEAD, SLOT_NAME_LOADING, SLOT_NAME_MODAL_BACKDROP, SLOT_NAME_MODAL_CANCEL, SLOT_NAME_MODAL_FOOTER, SLOT_NAME_MODAL_HEADER, SLOT_NAME_MODAL_HEADER_CLOSE, SLOT_NAME_MODAL_OK, SLOT_NAME_MODAL_TITLE, SLOT_NAME_NAV_NEXT_DECADE, SLOT_NAME_NAV_NEXT_MONTH, SLOT_NAME_NAV_NEXT_YEAR, SLOT_NAME_NAV_PEV_DECADE, SLOT_NAME_NAV_PEV_MONTH, SLOT_NAME_NAV_PEV_YEAR, SLOT_NAME_NAV_THIS_MONTH, SLOT_NAME_NEXT_TEXT, SLOT_NAME_OVERLAY, SLOT_NAME_PAGE, SLOT_NAME_PLACEHOLDER, SLOT_NAME_PREPEND, SLOT_NAME_PREV_TEXT, SLOT_NAME_ROW_DETAILS, SLOT_NAME_TABLE_BUSY, SLOT_NAME_TABLE_CAPTION, SLOT_NAME_TABLE_COLGROUP, SLOT_NAME_TABS_END, SLOT_NAME_TABS_START, SLOT_NAME_TEXT, SLOT_NAME_THEAD_TOP, SLOT_NAME_TITLE, SLOT_NAME_TOAST_TITLE, SLOT_NAME_TOP_ROW, SLOT_NAME_VALID_FEEDBACK };
+export { SLOT_NAME_APPEND, SLOT_NAME_BOTTOM_ROW, SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_CUSTOM_FOOT, SLOT_NAME_DEFAULT, SLOT_NAME_DESCRIPTION, SLOT_NAME_EMPTY, SLOT_NAME_EMPTYFILTERED, SLOT_NAME_FIRST, SLOT_NAME_HEADER, SLOT_NAME_INVALID_FEEDBACK, SLOT_NAME_LABEL, SLOT_NAME_MODAL_BACKDROP, SLOT_NAME_MODAL_CANCEL, SLOT_NAME_MODAL_FOOTER, SLOT_NAME_MODAL_HEADER, SLOT_NAME_MODAL_HEADER_CLOSE, SLOT_NAME_MODAL_OK, SLOT_NAME_MODAL_TITLE, SLOT_NAME_PREPEND, SLOT_NAME_ROW_DETAILS, SLOT_NAME_TABLE_BUSY, SLOT_NAME_TABLE_CAPTION, SLOT_NAME_TABLE_COLGROUP, SLOT_NAME_TABS_END, SLOT_NAME_TABS_START, SLOT_NAME_TEXT, SLOT_NAME_THEAD_TOP, SLOT_NAME_TITLE, SLOT_NAME_TOAST_TITLE, SLOT_NAME_TOP_ROW, SLOT_NAME_VALID_FEEDBACK };

package/dist/vendor/bootstrap-vue/src/directives/toggle/toggle.js

@@ -138,7 +138,7 @@ const addRootListeners = (el, instance) => {
   }
 };
 const setToggleState = (el, state) => {
-  // State refers to the visibility of the collapse/sidebar
+  // State refers to the visibility of the collapse
   if (state) {
     removeClass(el, CLASS_BV_TOGGLE_COLLAPSED);
     addClass(el, CLASS_BV_TOGGLE_NOT_COLLAPSED);

package/dist/vendor/bootstrap-vue/src/index.js

@@ -8,13 +8,6 @@ export { BootstrapVueIcons, IconsPlugin } from './icons/plugin';
 export { BIcon } from './icons/icon';
 export { BIconstack } from './icons/iconstack';
 export * from './icons/icons';
-export { AlertPlugin } from './components/alert';
-export { BAlert } from './components/alert/alert';
-export { AspectPlugin } from './components/aspect';
-export { BAspect } from './components/aspect/aspect';
-export { AvatarPlugin } from './components/avatar';
-export { BAvatar } from './components/avatar/avatar';
-export { BAvatarGroup } from './components/avatar/avatar-group';
 export { BadgePlugin } from './components/badge';
 export { BBadge } from './components/badge/badge';
 export { BreadcrumbPlugin } from './components/breadcrumb';
@@ -25,21 +18,6 @@ export { BButton } from './components/button/button';
 export { BButtonClose } from './components/button/button-close';
 export { ButtonGroupPlugin } from './components/button-group';
 export { BButtonGroup } from './components/button-group/button-group';
-export { ButtonToolbarPlugin } from './components/button-toolbar';
-export { BButtonToolbar } from './components/button-toolbar/button-toolbar';
-export { CalendarPlugin } from './components/calendar';
-export { BCalendar } from './components/calendar/calendar';
-export { CardPlugin } from './components/card';
-export { BCard } from './components/card/card';
-export { BCardBody } from './components/card/card-body';
-export { BCardFooter } from './components/card/card-footer';
-export { BCardGroup } from './components/card/card-group';
-export { BCardHeader } from './components/card/card-header';
-export { BCardImg } from './components/card/card-img';
-export { BCardImgLazy } from './components/card/card-img-lazy';
-export { BCardSubTitle } from './components/card/card-sub-title';
-export { BCardText } from './components/card/card-text';
-export { BCardTitle } from './components/card/card-title';
 export { CollapsePlugin } from './components/collapse';
 export { BCollapse } from './components/collapse/collapse';
 export { DropdownPlugin } from './components/dropdown';
@@ -51,21 +29,14 @@ export { BDropdownForm } from './components/dropdown/dropdown-form';
 export { BDropdownGroup } from './components/dropdown/dropdown-group';
 export { BDropdownHeader } from './components/dropdown/dropdown-header';
 export { BDropdownText } from './components/dropdown/dropdown-text';
-export { EmbedPlugin } from './components/embed';
-export { BEmbed } from './components/embed/embed';
 export { FormPlugin } from './components/form';
 export { BForm } from './components/form/form';
-export { BFormDatalist } from './components/form/form-datalist';
 export { BFormText } from './components/form/form-text';
 export { BFormInvalidFeedback } from './components/form/form-invalid-feedback';
 export { BFormValidFeedback } from './components/form/form-valid-feedback';
 export { FormCheckboxPlugin } from './components/form-checkbox';
 export { BFormCheckbox } from './components/form-checkbox/form-checkbox';
 export { BFormCheckboxGroup } from './components/form-checkbox/form-checkbox-group';
-export { FormDatepickerPlugin } from './components/form-datepicker';
-export { BFormDatepicker } from './components/form-datepicker/form-datepicker';
-export { FormFilePlugin } from './components/form-file';
-export { BFormFile } from './components/form-file/form-file';
 export { FormGroupPlugin } from './components/form-group';
 export { BFormGroup } from './components/form-group/form-group';
 export { FormInputPlugin } from './components/form-input';
@@ -73,80 +44,37 @@ export { BFormInput } from './components/form-input/form-input';
 export { FormRadioPlugin } from './components/form-radio';
 export { BFormRadio } from './components/form-radio/form-radio';
 export { BFormRadioGroup } from './components/form-radio/form-radio-group';
-export { FormRatingPlugin } from './components/form-rating';
-export { BFormRating } from './components/form-rating/form-rating';
-export { FormTagsPlugin } from './components/form-tags';
-export { BFormTags } from './components/form-tags/form-tags';
-export { BFormTag } from './components/form-tags/form-tag';
 export { FormSelectPlugin } from './components/form-select';
 export { BFormSelect } from './components/form-select/form-select';
 export { BFormSelectOption } from './components/form-select/form-select-option';
 export { BFormSelectOptionGroup } from './components/form-select/form-select-option-group';
-export { FormSpinbuttonPlugin } from './components/form-spinbutton';
-export { BFormSpinbutton } from './components/form-spinbutton/form-spinbutton';
 export { FormTextareaPlugin } from './components/form-textarea';
 export { BFormTextarea } from './components/form-textarea/form-textarea';
-export { FormTimepickerPlugin } from './components/form-timepicker';
-export { BFormTimepicker } from './components/form-timepicker/form-timepicker';
-export { ImagePlugin } from './components/image';
-export { BImg } from './components/image/img';
-export { BImgLazy } from './components/image/img-lazy';
 export { InputGroupPlugin } from './components/input-group';
 export { BInputGroup } from './components/input-group/input-group';
 export { BInputGroupAddon } from './components/input-group/input-group-addon';
 export { BInputGroupAppend } from './components/input-group/input-group-append';
 export { BInputGroupPrepend } from './components/input-group/input-group-prepend';
 export { BInputGroupText } from './components/input-group/input-group-text';
-export { JumbotronPlugin } from './components/jumbotron';
-export { BJumbotron } from './components/jumbotron/jumbotron';
 export { LayoutPlugin } from './components/layout';
-export { BContainer } from './components/layout/container';
-export { BRow } from './components/layout/row';
 export { BCol } from './components/layout/col';
 export { BFormRow } from './components/layout/form-row';
 export { LinkPlugin } from './components/link';
 export { BLink } from './components/link/link';
-export { ListGroupPlugin } from './components/list-group';
-export { BListGroup } from './components/list-group/list-group';
-export { BListGroupItem } from './components/list-group/list-group-item';
-export { MediaPlugin } from './components/media';
-export { BMedia } from './components/media/media';
-export { BMediaAside } from './components/media/media-aside';
-export { BMediaBody } from './components/media/media-body';
 export { ModalPlugin } from './components/modal';
 export { BModal } from './components/modal/modal';
 export { NavPlugin } from './components/nav';
 export { BNav } from './components/nav/nav';
-export { BNavForm } from './components/nav/nav-form';
 export { BNavItem } from './components/nav/nav-item';
 export { BNavItemDropdown } from './components/nav/nav-item-dropdown';
-export { BNavText } from './components/nav/nav-text';
 export { NavbarPlugin } from './components/navbar';
 export { BNavbar } from './components/navbar/navbar';
 export { BNavbarBrand } from './components/navbar/navbar-brand';
-export { BNavbarNav } from './components/navbar/navbar-nav';
-export { BNavbarToggle } from './components/navbar/navbar-toggle';
-export { OverlayPlugin } from './components/overlay';
-export { BOverlay } from './components/overlay/overlay';
-export { PaginationPlugin } from './components/pagination';
-export { BPagination } from './components/pagination/pagination';
-export { PaginationNavPlugin } from './components/pagination-nav';
-export { BPaginationNav } from './components/pagination-nav/pagination-nav';
 export { PopoverPlugin } from './components/popover';
 export { BPopover } from './components/popover/popover';
 export { ProgressPlugin } from './components/progress';
 export { BProgress } from './components/progress/progress';
 export { BProgressBar } from './components/progress/progress-bar';
-export { SidebarPlugin } from './components/sidebar';
-export { BSidebar } from './components/sidebar/sidebar';
-export { SkeletonPlugin } from './components/skeleton';
-export { BSkeleton } from './components/skeleton/skeleton';
-export { BSkeletonIcon } from './components/skeleton/skeleton-icon';
-export { BSkeletonImg } from './components/skeleton/skeleton-img';
-export { BSkeletonTable } from './components/skeleton/skeleton-table';
-export { BSkeletonWrapper } from './components/skeleton/skeleton-wrapper';
-export { SpinnerPlugin } from './components/spinner';
-export { BSpinner } from './components/spinner/spinner';
 export { TableLitePlugin, TablePlugin, TableSimplePlugin } from './components/table';
 export { BTable } from './components/table/table';
 export { BTableLite } from './components/table/table-lite';
@@ -160,8 +88,6 @@ export { BTd } from './components/table/td';
 export { TabsPlugin } from './components/tabs';
 export { BTabs } from './components/tabs/tabs';
 export { BTab } from './components/tabs/tab';
-export { TimePlugin } from './components/time';
-export { BTime } from './components/time/time';
 export { ToastPlugin } from './components/toast';
 export { BToast } from './components/toast/toast';
 export { BToaster } from './components/toast/toaster';

package/dist/vendor/bootstrap-vue/src/utils/array.js

@@ -24,7 +24,5 @@ const createArray = (length, fillFn) => {
     length
   }).map(mapFn);
 };
-const flatten = array => array.reduce((result, item) => concat(result, item), []);
-const flattenDeep = array => array.reduce((result, item) => concat(result, Array.isArray(item) ? flattenDeep(item) : item), []);
 
-export { arrayIncludes, concat, createArray, flatten, flattenDeep, from };
+export { arrayIncludes, concat, createArray, from };

package/dist/vendor/bootstrap-vue/src/utils/inspect.js

@@ -8,9 +8,7 @@ const toRawType = value => Object.prototype.toString.call(value).slice(8, -1);
 const toRawTypeLC = value => toRawType(value).toLowerCase();
 const isUndefined = value => value === undefined;
 const isNull = value => value === null;
-const isEmptyString = value => value === '';
 const isUndefinedOrNull = value => isUndefined(value) || isNull(value);
-const isUndefinedOrNullOrEmpty = value => isUndefinedOrNull(value) || isEmptyString(value);
 const isFunction = value => toType(value) === 'function';
 const isBoolean = value => toType(value) === 'boolean';
 const isString = value => toType(value) === 'string';
@@ -34,4 +32,4 @@ const isFile = value => value instanceof File;
 const isRegExp = value => toRawType(value) === 'RegExp';
 const isPromise = value => !isUndefinedOrNull(value) && isFunction(value.then) && isFunction(value.catch);
 
-export { isArray, isBoolean, isDate, isEmptyString, isEvent, isFile, isFunction, isNull, isNumber, isNumeric, isObject, isPlainObject, isPrimitive, isPromise, isRegExp, isString, isUndefined, isUndefinedOrNull, isUndefinedOrNullOrEmpty, toRawType, toRawTypeLC, toType };
+export { isArray, isBoolean, isDate, isEvent, isFile, isFunction, isNull, isNumber, isNumeric, isObject, isPlainObject, isPrimitive, isPromise, isRegExp, isString, isUndefined, isUndefinedOrNull, toRawType, toRawTypeLC, toType };

package/dist/vendor/bootstrap-vue/src/utils/math.js

@@ -2,10 +2,8 @@
 
 const mathMin = Math.min;
 const mathMax = Math.max;
-const mathAbs = Math.abs;
 const mathCeil = Math.ceil;
-const mathFloor = Math.floor;
 const mathPow = Math.pow;
 const mathRound = Math.round;
 
-export { mathAbs, mathCeil, mathFloor, mathMax, mathMin, mathPow, mathRound };
+export { mathCeil, mathMax, mathMin, mathPow, mathRound };

package/dist/vendor/bootstrap-vue/src/utils/object.js

@@ -8,13 +8,8 @@ const assign = function () {
 const create = (proto, optionalProps) => Object.create(proto, optionalProps);
 const defineProperties = (obj, props) => Object.defineProperties(obj, props);
 const defineProperty = (obj, prop, descriptor) => Object.defineProperty(obj, prop, descriptor);
-const freeze = obj => Object.freeze(obj);
 const getOwnPropertyNames = obj => Object.getOwnPropertyNames(obj);
-const getOwnPropertyDescriptor = (obj, prop) => Object.getOwnPropertyDescriptor(obj, prop);
-const getOwnPropertySymbols = obj => Object.getOwnPropertySymbols(obj);
-const getPrototypeOf = obj => Object.getPrototypeOf(obj);
 const is = (value1, value2) => Object.is(value1, value2);
-const isFrozen = obj => Object.isFrozen(obj);
 const keys = obj => Object.keys(obj);
 
 // --- "Instance" ---
@@ -76,4 +71,4 @@ const readonlyDescriptor = () => ({
   writable: false
 });
 
-export { assign, clone, create, defineProperties, defineProperty, freeze, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf, hasOwnProperty, is, isFrozen, keys, mergeDeep, omit, pick, readonlyDescriptor, sortKeys, toString };
+export { assign, clone, create, defineProperties, defineProperty, getOwnPropertyNames, hasOwnProperty, is, keys, mergeDeep, omit, pick, readonlyDescriptor, sortKeys, toString };

package/dist/vendor/bootstrap-vue/src/utils/props.js

@@ -4,13 +4,7 @@ import { getComponentConfig } from './config';
 import { identity } from './identity';
 import { isFunction, isUndefined, isObject, isArray } from './inspect';
 import { hasOwnProperty, clone, keys } from './object';
-import { upperFirst, lowerFirst } from './string';
-
-// Prefix a property
-const prefixPropName = (prefix, value) => prefix + upperFirst(value);
-
-// Remove a prefix from a property
-const unprefixPropName = (prefix, value) => lowerFirst(value.replace(prefix, ''));
+import { upperFirst } from './string';
 
 // Suffix can be a falsey value so nothing is appended to string
 // (helps when looping over props & some shouldn't change)
@@ -100,4 +94,4 @@ const configurablePropDefaultFnName = makePropConfigurable({}, '', '').default.n
 // and isn't the props default function
 const hasPropFunction = fn => isFunction(fn) && fn.name && fn.name !== configurablePropDefaultFnName;
 
-export { copyProps, hasPropFunction, makeProp, makePropConfigurable, makePropsConfigurable, pluckProps, prefixPropName, suffixPropName, unprefixPropName };
+export { copyProps, hasPropFunction, makeProp, makePropConfigurable, makePropsConfigurable, pluckProps, suffixPropName };

package/dist/vendor/bootstrap-vue/src/utils/string.js

@@ -21,12 +21,6 @@ const pascalCase = str => {
 // https://github.com/UrbanCompass/to-start-case
 const startCase = str => str.replace(RX_UNDERSCORE, ' ').replace(RX_LOWER_UPPER, (str, $1, $2) => $1 + ' ' + $2).replace(RX_START_SPACE_WORD, (str, $1, $2) => $1 + $2.toUpperCase());
 
-// Lowercases the first letter of a string and returns a new string
-const lowerFirst = str => {
-  str = isString(str) ? str.trim() : String(str);
-  return str.charAt(0).toLowerCase() + str.slice(1);
-};
-
 // Uppercases the first letter of a string and returns a new string
 const upperFirst = str => {
   str = isString(str) ? str.trim() : String(str);
@@ -56,7 +50,4 @@ const trim = str => toString(str).trim();
 // Lower case a string
 const lowerCase = str => toString(str).toLowerCase();
 
-// Upper case a string
-const upperCase = str => toString(str).toUpperCase();
-
-export { escapeRegExp, kebabCase, lowerCase, lowerFirst, pascalCase, startCase, toString, trim, trimLeft, trimRight, upperCase, upperFirst };
+export { escapeRegExp, kebabCase, lowerCase, pascalCase, startCase, toString, trim, trimLeft, trimRight, upperFirst };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "92.2.0",
+  "version": "92.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/accordion/accordion_item.scss

@@ -1,13 +1,13 @@
 .gl-accordion-item {
-  @include gl-mb-5;
+  @apply gl-mb-5;
 
   .gl-accordion-item-header {
-    @include gl-m-0;
+    @apply gl-m-0;
     @include gl-line-height-normal;
   }
 
   &:last-child {
-    @include gl-mb-0;
+    @apply gl-mb-0;
   }
 
   .collapse {

package/src/components/base/alert/alert.scss

@@ -41,7 +41,7 @@ $gl-alert-top-border-size: 2px;
   @include gl-font-base;
   position: relative;
   padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
-  @include gl-py-5;
+  @apply gl-py-5;
   @apply gl-rounded-base;
 
   @media (forced-colors: active) {
@@ -105,11 +105,11 @@ $gl-alert-top-border-size: 2px;
 
 .gl-alert-actions {
   @include gl-display-flex;
-  @include gl-mt-3;
+  @apply gl-mt-3;
 }
 
 .gl-alert-action {
-  @include gl-mr-3;
+  @apply gl-mr-3;
   @include gl-font-base;
   @include gl-line-height-normal;
 }

package/src/components/base/avatar_labeled/avatar_labeled.scss

@@ -2,7 +2,7 @@
   @include gl-display-inline-flex;
 
   &-labels {
-    @include gl-ml-3;
+    @apply gl-ml-3;
     @include gl-display-flex;
     @include gl-flex-direction-column;
     @include gl-justify-content-center;
@@ -19,7 +19,7 @@
 
   &-label {
     @include gl-font-weight-bold;
-    @include gl-p-1;
+    @apply gl-p-1;
     color: var(--gl-text-color-strong);
   }
 

package/src/components/base/avatars_inline/avatars_inline.scss

@@ -49,7 +49,7 @@
   @include gl-align-items-center;
   @include gl-justify-content-center;
   @include gl-font-sm;
-  @include gl-px-2;
+  @apply gl-px-2;
   @include gl-line-height-normal;
   @include gl-rounded-pill;
   background-color: var(--gl-status-neutral-background-color);

package/src/components/base/badge/badge.scss

@@ -241,8 +241,8 @@ $badge-min-width: $gl-spacing-scale-3;
 // overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise
 .gl-button .gl-badge {
   top: 0;
-  @include gl-py-0;
-  @include gl-px-2;
+  @apply gl-py-0;
+  @apply gl-px-2;
 }
 
 .gl-new-dropdown-contents .gl-badge,

package/src/components/base/banner/banner.scss

@@ -5,7 +5,7 @@
 
 .gl-banner-illustration {
   @include gl-flex-shrink-0;
-  @include gl-mr-6;
+  @apply gl-mr-6;
 
   img {
     max-width: $grid-size * 15;
@@ -18,7 +18,7 @@
 
 .gl-banner-title {
   @include gl-heading-scale-500;
-  @include gl-mb-3;
+  @apply gl-mb-3;
   color: var(--gl-text-color-heading);
 }
 

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -7,10 +7,10 @@ $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumb-list {
   @include gl-bg-transparent;
-  @include gl-p-0;
+  @apply gl-p-0;
   @include gl-align-items-center;
   @include gl-line-height-normal;
-  @include gl-m-0;
+  @apply gl-m-0;
   @include gl-flex-nowrap;
   @include gl-max-w-full;
 }
@@ -23,7 +23,7 @@ $breadcrumb-max-width: $grid-size * 16;
 
   &:not(:last-child)::after {
     color: var(--gl-breadcrumb-separator-color);
-    @include gl-px-3;
+    @apply gl-px-3;
     content: '/';
   }
 

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -16,7 +16,7 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
   @include gl-line-height-20;
   padding-left: calc(#{$gl-spacing-scale-5} + #{$gl-broadcast-message-padding-x});
   padding-right: calc(#{$gl-spacing-scale-4} + #{$gl-broadcast-message-padding-x});
-  @include gl-py-5;
+  @apply gl-py-5;
 
   &.indigo {
     --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-indigo);
@@ -113,7 +113,7 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
   }
 
   &-icon {
-    @include gl-mr-5;
+    @apply gl-mr-5;
     line-height: $gl-line-height-16;
 
     > svg {
@@ -129,6 +129,6 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
 
   &-dismiss {
     @include gl-my-n2;
-    @include gl-ml-5;
+    @apply gl-ml-5;
   }
 }

package/src/components/base/button/button.scss

@@ -76,8 +76,8 @@
 .gl-button.gl-button {
   @apply gl-border-0;
   @apply gl-rounded-base;
-  @include gl-py-3;
-  @include gl-px-4;
+  @apply gl-py-3;
+  @apply gl-px-4;
   background-color: var(--gl-button-default-primary-background-color-default);
   @include gl-line-height-normal;
   color: var(--gl-button-default-primary-foreground-color-default);
@@ -106,12 +106,12 @@
     @include gl-h-5;
     @include gl-w-5;
     @include gl-flex-shrink-0;
-    @include gl-mr-2;
+    @apply gl-mr-2;
     top: auto;
   }
 
   gl-emoji {
-    @include gl-mr-2;
+    @apply gl-mr-2;
     position: relative;
     @include gl-font-lg;
   }
@@ -398,8 +398,8 @@
   }
 
   &.btn-sm {
-    @include gl-py-2;
-    @include gl-px-3;
+    @apply gl-py-2;
+    @apply gl-px-3;
     @include gl-line-height-normal;
     @include gl-font-base;
 
@@ -441,27 +441,27 @@
   }
 
   &.btn-icon {
-    @include gl-p-3;
+    @apply gl-p-3;
     @include gl-line-height-normal;
 
     .gl-button-icon {
-      @include gl-mr-0;
+      @apply gl-mr-0;
     }
 
     &.btn-sm {
-      @include gl-p-2;
+      @apply gl-p-2;
     }
   }
 
   &.button-ellipsis-horizontal,
   &.button-ellipsis-horizontal.btn-sm {
-    @include gl-py-0;
-    @include gl-px-2;
+    @apply gl-py-0;
+    @apply gl-px-2;
 
     svg {
       @include gl-h-5;
       @include gl-w-5;
-      @include gl-m-0;
+      @apply gl-m-0;
     }
   }
 
@@ -480,8 +480,8 @@
     @include gl-font-base;
     @include gl-line-height-normal;
     color: var(--gl-button-link-text-color-default);
-    @include gl-py-0;
-    @include gl-px-0;
+    @apply gl-py-0;
+    @apply gl-px-0;
     @include gl-shadow-none;
 
     &:hover {

package/src/components/base/card/card.scss

@@ -19,7 +19,7 @@
 .gl-card-header,
 .gl-card-body,
 .gl-card-footer {
-  @include gl-p-5;
+  @apply gl-p-5;
 }
 
 .gl-card-header {

package/src/components/base/datepicker/datepicker.scss

@@ -29,7 +29,7 @@ $pd-week-color: var(--gl-text-color-subtle);
   @include gl-justify-content-center;
   @include gl-align-items-center;
   @include gl-pointer-events-none;
-  @include gl-px-2;
+  @apply gl-px-2;
 
   .gl-button.gl-button {
     border-radius: 0.0075rem;
@@ -40,7 +40,7 @@ $pd-week-color: var(--gl-text-color-subtle);
   @include gl-font-regular;
   @apply gl-border-none;
   @apply gl-rounded-base;
-  @include gl-mt-3;
+  @apply gl-mt-3;
   background-color: var(--gl-datepicker-background-color);
 
   &.is-bound {
@@ -52,16 +52,16 @@ $pd-week-color: var(--gl-text-color-subtle);
   }
 
   .pika-lendar {
-    @include gl-m-0;
-    @include gl-pt-5;
-    @include gl-px-3;
-    @include gl-pb-3;
+    @apply gl-m-0;
+    @apply gl-pt-5;
+    @apply gl-px-3;
+    @apply gl-pb-3;
     @apply gl-rounded-base;
   }
 
   .pika-title {
     @include gl-line-height-normal;
-    @include gl-mb-5;
+    @apply gl-mb-5;
     @include gl-h-5;
   }
 
@@ -153,7 +153,7 @@ $pd-week-color: var(--gl-text-color-subtle);
   .pika-label {
     @apply gl-rounded-small;
     @include gl-font-base;
-    @include gl-py-0;
+    @apply gl-py-0;
 
     background-color: var(--gl-action-neutral-background-color-default);
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
@@ -176,7 +176,7 @@ $pd-week-color: var(--gl-text-color-subtle);
   }
 
   th {
-    @include gl-pb-3;
+    @apply gl-pb-3;
     @include gl-font-weight-bold;
     @include gl-line-height-normal;
   }
@@ -189,7 +189,7 @@ $pd-week-color: var(--gl-text-color-subtle);
   .pika-button {
     @apply gl-rounded-base;
     @include gl-shadow-none;
-    @include gl-py-3;
+    @apply gl-py-3;
     @include gl-text-center;
     @include gl-line-height-normal;
     @include gl-w-7;