@gitlab/ui 121.0.1 → 122.0.0

package/dist/vendor/bootstrap-vue/src/components/modal/helpers/modal-manager.js

@@ -159,7 +159,7 @@ const ModalManager = /*#__PURE__*/extend({
           setStyle(el, 'marginRight', `${toFloat(getCS(el).marginRight, 0) - scrollbarWidth}px`);
           body._marginChangedForModal.push(el);
         });
-        // Adjust <b-navbar-toggler> margin
+        // Adjust .navbar-toggler margin
         /* istanbul ignore next: difficult to test in JSDOM */
         selectAll(SELECTOR_NAVBAR_TOGGLER).forEach(el => /* istanbul ignore next */{
           const actualMargin = getStyle(el, 'marginRight') || '';

package/dist/vendor/bootstrap-vue/src/components/tabs/tabs.js

@@ -15,14 +15,13 @@ import { looseEqual } from '../../utils/loose-equal';
 import { mathMax } from '../../utils/math';
 import { makeModelMixin } from '../../utils/model';
 import { toInteger } from '../../utils/number';
-import { omit, sortKeys } from '../../utils/object';
+import { sortKeys } from '../../utils/object';
 import { observeDom } from '../../utils/observe-dom';
 import { makeProp, makePropsConfigurable } from '../../utils/props';
 import { stableSort } from '../../utils/stable-sort';
-import { props as props$2, idMixin } from '../../mixins/id';
+import { props as props$1, idMixin } from '../../mixins/id';
 import { normalizeSlotMixin } from '../../mixins/normalize-slot';
 import { BLink } from '../link/link';
-import { props as props$1, BNav } from '../nav/nav';
 
 // --- Constants ---
 
@@ -164,13 +163,18 @@ const BVTabButton = /*#__PURE__*/extend({
 });
 
 // --- Props ---
-
-const navProps = omit(props$1, ['tabs', 'cardHeader']);
+const navProps = {
+  align: makeProp(PROP_TYPE_STRING),
+  fill: makeProp(PROP_TYPE_BOOLEAN, false),
+  justified: makeProp(PROP_TYPE_BOOLEAN, false),
+  pills: makeProp(PROP_TYPE_BOOLEAN, false),
+  small: makeProp(PROP_TYPE_BOOLEAN, false)
+};
 const props = makePropsConfigurable(sortKeys({
-  ...props$2,
+  ...props$1,
   ...modelProps,
   ...navProps,
-  // Only applied to the currently active `<b-nav-item>`
+  // Only applied to the currently active `li`
   activeNavItemClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   // Only applied to the currently active `<b-tab>`
   // This prop is sniffed by the `<b-tab>` child
@@ -542,20 +546,24 @@ const BTabs = /*#__PURE__*/extend({
         [REF_FOR_KEY]: true
       });
     });
-    let $nav = h(BNav, {
-      class: this.navClass,
+    const computeJustifyContent = value => {
+      value = value === 'left' ? 'start' : value === 'right' ? 'end' : value;
+      return `justify-content-${value}`;
+    };
+    let $nav = h('ul', {
+      staticClass: 'nav',
+      class: [this.navClass, {
+        'nav-tabs': !noNavStyle && !pills,
+        'nav-pills': !noNavStyle && pills,
+        'nav-fill': fill,
+        'nav-justified': justified,
+        [computeJustifyContent(align)]: align,
+        small
+      }],
       attrs: {
         role: 'tablist',
         id: this.safeId('_BV_tab_controls_')
       },
-      props: {
-        fill,
-        justified,
-        align,
-        tabs: !noNavStyle && !pills,
-        pills: !noNavStyle && pills,
-        small
-      },
       ref: 'nav'
     }, [this.normalizeSlot(SLOT_NAME_TABS_START) || h(), $buttons, this.normalizeSlot(SLOT_NAME_TABS_END) || h()]);
     $nav = h('div', {

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

@@ -26,8 +26,6 @@ const NAME_FORM_TEXTAREA = 'BFormTextarea';
 const NAME_FORM_VALID_FEEDBACK = 'BFormValidFeedback';
 const NAME_LINK = 'BLink';
 const NAME_MODAL = 'BModal';
-const NAME_NAV = 'BNav';
-const NAME_NAV_ITEM = 'BNavItem';
 const NAME_POPOVER = 'BPopover';
 const NAME_TAB = 'BTab';
 const NAME_TABLE = 'BTable';
@@ -58,4 +56,4 @@ const NAME_TRANSITION = 'BVTransition';
 const NAME_TRANSPORTER = 'BVTransporter';
 const NAME_TRANSPORTER_TARGET = 'BVTransporterTarget';
 
-export { NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_COL, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAV_ITEM, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };
+export { NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_COL, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_LINK, NAME_MODAL, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "121.0.1",
+  "version": "122.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -103,8 +103,8 @@
     "@babel/preset-react": "^7.27.1",
     "@cypress/grep": "^4.1.1",
     "@gitlab/fonts": "^1.3.1",
-    "@gitlab/svgs": "3.145.0",
-    "@jest/test-sequencer": "30.0.5",
+    "@gitlab/svgs": "3.146.0",
+    "@jest/test-sequencer": "30.1.2",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
@@ -138,7 +138,7 @@
     "cypress": "14.5.4",
     "cypress-real-events": "^1.14.0",
     "dompurify": "^3.1.2",
-    "emoji-regex": "^10.4.0",
+    "emoji-regex": "^10.5.0",
     "esbuild": "^0.25.9",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.0.3",
@@ -155,7 +155,7 @@
     "playwright": "^1.55.0",
     "playwright-core": "^1.55.0",
     "postcss": "8.5.6",
-    "postcss-loader": "8.1.1",
+    "postcss-loader": "8.2.0",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -171,7 +171,7 @@
     "start-server-and-test": "^2.0.13",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.0.2",
+    "style-dictionary": "^5.0.4",
     "style-loader": "^4",
     "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.17",

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -23,6 +23,16 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Attributes to pass to the label link
+     */
+    labelLinkAttrs: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      },
+    },
     subLabelLink: {
       type: String,
       required: false,
@@ -76,6 +86,7 @@ export default {
       <div class="-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left">
         <gl-link
           v-if="hasLabelLink"
+          v-bind="labelLinkAttrs"
           ref="labelLink"
           :href="labelLink"
           class="gl-avatar-link"

package/src/vendor/bootstrap/scss/_card.scss

@@ -149,116 +149,6 @@
 }
 
 
-// Card deck
-
-.card-deck {
-  .card {
-    margin-bottom: $card-deck-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: -$card-deck-margin;
-    margin-left: -$card-deck-margin;
-
-    .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-right: $card-deck-margin;
-      margin-bottom: 0; // Override the default
-      margin-left: $card-deck-margin;
-    }
-  }
-}
-
-
-//
-// Card groups
-//
-
-.card-group {
-  // The child selector allows nested `.card` within `.card-group`
-  // to display properly.
-  > .card {
-    margin-bottom: $card-group-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    // The child selector allows nested `.card` within `.card-group`
-    // to display properly.
-    > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-bottom: 0;
-
-      + .card {
-        margin-left: 0;
-        border-left: 0;
-      }
-
-      // Handle rounded corners
-      @if $enable-rounded {
-        &:not(:last-child) {
-          @include border-right-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-right-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-right-radius: 0;
-          }
-        }
-
-        &:not(:first-child) {
-          @include border-left-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-left-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-left-radius: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-//
-// Columns
-//
-
-.card-columns {
-  .card {
-    margin-bottom: $card-columns-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    column-count: $card-columns-count;
-    column-gap: $card-columns-gap;
-    orphans: 1;
-    widows: 1;
-
-    .card {
-      display: inline-block; // Don't let them vertically span multiple columns
-      width: 100%; // Don't let their width change
-    }
-  }
-}
-
-
 //
 // Accordion
 //

package/src/vendor/bootstrap/scss/_dropdown.scss

@@ -36,20 +36,14 @@
   @include box-shadow($dropdown-box-shadow);
 }
 
-@each $breakpoint in map.keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .dropdown-menu#{$infix}-left {
-      right: auto;
-      left: 0;
-    }
+.dropdown-menu-left {
+  right: auto;
+  left: 0;
+}
 
-    .dropdown-menu#{$infix}-right {
-      right: 0;
-      left: auto;
-    }
-  }
+.dropdown-menu-right {
+  right: 0;
+  left: auto;
 }
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)

package/src/vendor/bootstrap/scss/_list-group.scss

@@ -86,47 +86,6 @@
 }
 
 
-// Horizontal
-//
-// Change the layout of list group items from vertical (default) to horizontal.
-
-@each $breakpoint in map.keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .list-group-horizontal#{$infix} {
-      flex-direction: row;
-
-      > .list-group-item {
-        &:first-child {
-          @include border-bottom-left-radius($list-group-border-radius);
-          @include border-top-right-radius(0);
-        }
-
-        &:last-child {
-          @include border-top-right-radius($list-group-border-radius);
-          @include border-bottom-left-radius(0);
-        }
-
-        &.active {
-          margin-top: 0;
-        }
-
-        + .list-group-item {
-          border-top-width: $list-group-border-width;
-          border-left-width: 0;
-
-          &.active {
-            margin-left: -$list-group-border-width;
-            border-left-width: $list-group-border-width;
-          }
-        }
-      }
-    }
-  }
-}
-
-
 // Flush list items
 //
 // Remove borders and border-radius to keep list group items edge-to-edge. Most

package/src/vendor/bootstrap/scss/_variables.scss

@@ -826,13 +826,6 @@ $pagination-border-radius-sm:       $border-radius-sm !default;
 $pagination-border-radius-lg:       $border-radius-lg !default;
 
 
-// Jumbotron
-
-$jumbotron-padding:                 2rem !default;
-$jumbotron-color:                   null !default;
-$jumbotron-bg:                      $gray-200 !default;
-
-
 // Cards
 
 $card-spacer-y:                     .75rem !default;
@@ -849,13 +842,6 @@ $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 $grid-gutter-width * .5 !default;
-$card-deck-margin:                  $card-group-margin !default;
-
-$card-columns-count:                3 !default;
-$card-columns-gap:                  1.25rem !default;
-$card-columns-margin:               $card-spacer-y !default;
-
 
 // Tooltips
 

package/src/vendor/bootstrap/scss/bootstrap.scss

@@ -28,7 +28,6 @@
 @import "breadcrumb";
 @import "pagination";
 @import "badge";
-@import "jumbotron";
 @import "alert";
 @import "progress";
 @import "media";

package/src/vendor/bootstrap-vue/src/components/modal/helpers/modal-manager.js

@@ -168,7 +168,7 @@ const ModalManager = /*#__PURE__*/ extend({
           setStyle(el, 'marginRight', `${toFloat(getCS(el).marginRight, 0) - scrollbarWidth}px`)
           body._marginChangedForModal.push(el)
         })
-        // Adjust <b-navbar-toggler> margin
+        // Adjust .navbar-toggler margin
         /* istanbul ignore next: difficult to test in JSDOM */
         selectAll(SELECTOR_NAVBAR_TOGGLER).forEach(el => /* istanbul ignore next */ {
           const actualMargin = getStyle(el, 'marginRight') || ''

package/src/vendor/bootstrap-vue/src/components/tabs/tabs.js

@@ -43,14 +43,13 @@ import { looseEqual } from '../../utils/loose-equal'
 import { mathMax } from '../../utils/math'
 import { makeModelMixin } from '../../utils/model'
 import { toInteger } from '../../utils/number'
-import { omit, sortKeys } from '../../utils/object'
+import { sortKeys } from '../../utils/object'
 import { observeDom } from '../../utils/observe-dom'
 import { makeProp, makePropsConfigurable } from '../../utils/props'
 import { stableSort } from '../../utils/stable-sort'
 import { idMixin, props as idProps } from '../../mixins/id'
 import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 import { BLink } from '../link/link'
-import { BNav, props as BNavProps } from '../nav/nav'
 
 // --- Constants ---
 
@@ -188,15 +187,20 @@ const BVTabButton = /*#__PURE__*/ extend({
 })
 
 // --- Props ---
-
-const navProps = omit(BNavProps, ['tabs', 'cardHeader'])
+const navProps = {
+  align: makeProp(PROP_TYPE_STRING),
+  fill: makeProp(PROP_TYPE_BOOLEAN, false),
+  justified: makeProp(PROP_TYPE_BOOLEAN, false),
+  pills: makeProp(PROP_TYPE_BOOLEAN, false),
+  small: makeProp(PROP_TYPE_BOOLEAN, false)
+}
 
 export const props = makePropsConfigurable(
   sortKeys({
     ...idProps,
     ...modelProps,
     ...navProps,
-    // Only applied to the currently active `<b-nav-item>`
+    // Only applied to the currently active `li`
     activeNavItemClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
     // Only applied to the currently active `<b-tab>`
     // This prop is sniffed by the `<b-tab>` child
@@ -594,22 +598,30 @@ export const BTabs = /*#__PURE__*/ extend({
       })
     })
 
+    const computeJustifyContent = value => {
+      value = value === 'left' ? 'start' : value === 'right' ? 'end' : value
+      return `justify-content-${value}`
+    }
+
     let $nav = h(
-      BNav,
+      'ul',
       {
-        class: this.navClass,
+        staticClass: 'nav',
+        class: [
+          this.navClass,
+          {
+            'nav-tabs': !noNavStyle && !pills,
+            'nav-pills': !noNavStyle && pills,
+            'nav-fill': fill,
+            'nav-justified': justified,
+            [computeJustifyContent(align)]: align,
+            small
+          }
+        ],
         attrs: {
           role: 'tablist',
           id: this.safeId('_BV_tab_controls_')
         },
-        props: {
-          fill,
-          justified,
-          align,
-          tabs: !noNavStyle && !pills,
-          pills: !noNavStyle && pills,
-          small
-        },
         ref: 'nav'
       },
       [

package/src/vendor/bootstrap-vue/src/constants/components.js

@@ -26,8 +26,6 @@ export const NAME_FORM_TEXTAREA = 'BFormTextarea'
 export const NAME_FORM_VALID_FEEDBACK = 'BFormValidFeedback'
 export const NAME_LINK = 'BLink'
 export const NAME_MODAL = 'BModal'
-export const NAME_NAV = 'BNav'
-export const NAME_NAV_ITEM = 'BNavItem'
 export const NAME_POPOVER = 'BPopover'
 export const NAME_TAB = 'BTab'
 export const NAME_TABLE = 'BTable'

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

@@ -1,2 +0,0 @@
-export { BNav } from './nav';
-export { BNavItem } from './nav-item';

package/dist/vendor/bootstrap-vue/src/components/nav/nav-item.js

@@ -1,43 +0,0 @@
-import { extend, mergeData } from '../../vue';
-import { NAME_NAV_ITEM } from '../../constants/components';
-import { PROP_TYPE_OBJECT, PROP_TYPE_ARRAY_OBJECT_STRING } from '../../constants/props';
-import { omit, sortKeys } from '../../utils/object';
-import { makePropsConfigurable, makeProp, pluckProps } from '../../utils/props';
-import { props as props$1, BLink } from '../link/link';
-
-// --- Props ---
-
-const linkProps = omit(props$1, ['event', 'routerTag']);
-const props = makePropsConfigurable(sortKeys({
-  ...linkProps,
-  linkAttrs: makeProp(PROP_TYPE_OBJECT, {}),
-  linkClasses: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)
-}), NAME_NAV_ITEM);
-
-// --- Main component ---
-
-// @vue/component
-const BNavItem = /*#__PURE__*/extend({
-  name: NAME_NAV_ITEM,
-  functional: true,
-  props,
-  render(h, _ref) {
-    let {
-      props,
-      data,
-      listeners,
-      children
-    } = _ref;
-    return h('li', mergeData(omit(data, ['on']), {
-      staticClass: 'nav-item'
-    }), [h(BLink, {
-      staticClass: 'nav-link',
-      class: props.linkClasses,
-      attrs: props.linkAttrs,
-      props: pluckProps(linkProps, props),
-      on: listeners
-    }, children)]);
-  }
-});
-
-export { BNavItem, props };

package/dist/vendor/bootstrap-vue/src/components/nav/nav.js

@@ -1,62 +0,0 @@
-import { extend, mergeData } from '../../vue';
-import { NAME_NAV } from '../../constants/components';
-import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
-import { makePropsConfigurable, makeProp } from '../../utils/props';
-
-// --- Helper methods ---
-
-const computeJustifyContent = value => {
-  value = value === 'left' ? 'start' : value === 'right' ? 'end' : value;
-  return `justify-content-${value}`;
-};
-
-// --- Props ---
-
-const props = makePropsConfigurable({
-  align: makeProp(PROP_TYPE_STRING),
-  // Set to `true` if placing in a card header
-  cardHeader: makeProp(PROP_TYPE_BOOLEAN, false),
-  fill: makeProp(PROP_TYPE_BOOLEAN, false),
-  justified: makeProp(PROP_TYPE_BOOLEAN, false),
-  pills: makeProp(PROP_TYPE_BOOLEAN, false),
-  small: makeProp(PROP_TYPE_BOOLEAN, false),
-  tabs: makeProp(PROP_TYPE_BOOLEAN, false),
-  tag: makeProp(PROP_TYPE_STRING, 'ul')
-}, NAME_NAV);
-
-// --- Main component ---
-
-// @vue/component
-const BNav = /*#__PURE__*/extend({
-  name: NAME_NAV,
-  functional: true,
-  props,
-  render(h, _ref) {
-    let {
-      props,
-      data,
-      children
-    } = _ref;
-    const {
-      tabs,
-      pills,
-      align,
-      cardHeader
-    } = props;
-    return h(props.tag, mergeData(data, {
-      staticClass: 'nav',
-      class: {
-        'nav-tabs': tabs,
-        'nav-pills': pills && !tabs,
-        'card-header-tabs': cardHeader && tabs,
-        'card-header-pills': cardHeader && pills && !tabs,
-        'nav-fill': props.fill,
-        'nav-justified': props.justified,
-        [computeJustifyContent(align)]: align,
-        small: props.small
-      }
-    }), children);
-  }
-});
-
-export { BNav, props };