@expcat/tigercat-vue 1.0.7 → 1.2.0

package/README.md

@@ -3,7 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/@expcat/tigercat-vue.svg)](https://www.npmjs.com/package/@expcat/tigercat-vue)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-Vue 3 UI components for [Tigercat](https://github.com/expcats/Tigercat) - A Tailwind CSS based component library.
+Vue 3 UI components for [Tigercat](https://github.com/expcat/Tigercat) - A Tailwind CSS based component library.
 
 ## 📖 Documentation
 

package/dist/chunk-25EYT2CB.js

@@ -0,0 +1,139 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/ConfigProvider.ts
+
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var TigerConfigKey = /* @__PURE__ */ Symbol("TigerConfig");
+function useTigerConfig() {
+  return _vue.inject.call(void 0, 
+    TigerConfigKey,
+    _vue.computed.call(void 0, () => ({}))
+  );
+}
+var configProviderProps = {
+  locale: {
+    type: [Object, Function, Promise],
+    default: void 0
+  },
+  direction: {
+    type: String,
+    default: void 0
+  },
+  theme: {
+    type: String,
+    default: void 0
+  },
+  colorScheme: {
+    type: String,
+    default: void 0
+  }
+};
+var ConfigProvider = _vue.defineComponent.call(void 0, {
+  name: "TigerConfigProvider",
+  props: configProviderProps,
+  setup(props, { slots }) {
+    const parent = useTigerConfig();
+    const resolvedLocale = _vue.ref.call(void 0, 
+      _tigercatcore.isLazyTigerLocale.call(void 0, props.locale) ? void 0 : _tigercatcore.getImmediateTigerLocale.call(void 0, props.locale)
+    );
+    const localeLoading = _vue.ref.call(void 0, _tigercatcore.isLazyTigerLocale.call(void 0, props.locale));
+    let loadId = 0;
+    _vue.watch.call(void 0, 
+      () => props.locale,
+      (locale) => {
+        if (!_tigercatcore.isLazyTigerLocale.call(void 0, locale)) {
+          resolvedLocale.value = _tigercatcore.getImmediateTigerLocale.call(void 0, locale);
+          localeLoading.value = false;
+          return;
+        }
+        const thisId = ++loadId;
+        localeLoading.value = true;
+        _tigercatcore.resolveTigerLocale.call(void 0, locale).then(
+          (result) => {
+            if (thisId === loadId) {
+              resolvedLocale.value = result;
+              localeLoading.value = false;
+            }
+          },
+          () => {
+            if (thisId === loadId) {
+              localeLoading.value = false;
+            }
+          }
+        );
+      },
+      { immediate: true }
+    );
+    const merged = _vue.computed.call(void 0, () => {
+      return {
+        locale: _tigercatcore.mergeTigerLocale.call(void 0, parent.value.locale, resolvedLocale.value),
+        localeLoading: localeLoading.value || parent.value.localeLoading,
+        direction: _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(props.direction, () => ( _optionalChain([resolvedLocale, 'access', _ => _.value, 'optionalAccess', _2 => _2.direction]))), () => ( parent.value.direction)), () => ( (_optionalChain([resolvedLocale, 'access', _3 => _3.value, 'optionalAccess', _4 => _4.locale]) ? _tigercatcore.getLocaleDirection.call(void 0, resolvedLocale.value) : void 0))),
+        theme: _nullishCoalesce(props.theme, () => ( parent.value.theme)),
+        colorScheme: _nullishCoalesce(props.colorScheme, () => ( parent.value.colorScheme))
+      };
+    });
+    _vue.watch.call(void 0, 
+      () => merged.value.theme,
+      (name) => {
+        if (name) _tigercatcore.ThemeManager.setTheme(name);
+      },
+      { immediate: true }
+    );
+    _vue.watch.call(void 0, 
+      () => merged.value.colorScheme,
+      (scheme) => {
+        if (scheme) _tigercatcore.ThemeManager.setColorScheme(scheme);
+      },
+      { immediate: true }
+    );
+    let previousDir = null;
+    let previousDataDir = null;
+    _vue.watch.call(void 0, 
+      () => merged.value.direction,
+      (direction) => {
+        if (!direction || typeof document === "undefined") return;
+        const root = document.documentElement;
+        if (previousDir === null && previousDataDir === null) {
+          previousDir = root.getAttribute("dir");
+          previousDataDir = root.getAttribute("data-tiger-dir");
+        }
+        root.setAttribute("dir", direction);
+        root.setAttribute("data-tiger-dir", direction);
+      },
+      { immediate: true }
+    );
+    _vue.onBeforeUnmount.call(void 0, () => {
+      if (typeof document === "undefined") return;
+      const root = document.documentElement;
+      if (previousDir === null) root.removeAttribute("dir");
+      else root.setAttribute("dir", previousDir);
+      if (previousDataDir === null) root.removeAttribute("data-tiger-dir");
+      else root.setAttribute("data-tiger-dir", previousDataDir);
+    });
+    _vue.provide.call(void 0, TigerConfigKey, merged);
+    return () => _optionalChain([slots, 'access', _5 => _5.default, 'optionalCall', _6 => _6()]);
+  }
+});
+var ConfigProvider_default = ConfigProvider;
+
+
+
+
+
+
+
+exports.TigerConfigKey = TigerConfigKey; exports.useTigerConfig = useTigerConfig; exports.configProviderProps = configProviderProps; exports.ConfigProvider = ConfigProvider; exports.ConfigProvider_default = ConfigProvider_default;

package/dist/chunk-27T3QDSF.js

@@ -1,10 +1,21 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/components/Timeline.ts
+var _vue = require('vue');
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/Timeline.ts
-var Timeline = vue.defineComponent({
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var Timeline = _vue.defineComponent.call(void 0, {
   name: "TigerTimeline",
   inheritAttrs: false,
   props: {
@@ -53,7 +64,7 @@ var Timeline = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const processedItems = vue.computed(() => {
+    const processedItems = _vue.computed.call(void 0, () => {
       let items = [...props.items];
       if (props.reverse) {
         items = items.reverse();
@@ -66,69 +77,69 @@ var Timeline = vue.defineComponent({
       }
       return items;
     });
-    const containerClasses = vue.computed(() => {
-      return tigercatCore.classNames(
-        tigercatCore.getTimelineContainerClasses(props.mode),
-        tigercatCore.timelineListClasses,
+    const containerClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getTimelineContainerClasses.call(void 0, props.mode),
+        _tigercatcore.timelineListClasses,
         props.className,
-        tigercatCore.coerceClassValue(attrs.class)
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       );
     });
-    const containerStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style));
+    const containerStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style));
     function getItemKey(item, index) {
       return item.key || index;
     }
     function renderDot(item, isPending = false) {
       if (slots.dot) {
-        return vue.h("div", { class: tigercatCore.getTimelineDotClasses(void 0, true) }, slots.dot({ item }));
+        return _vue.h.call(void 0, "div", { class: _tigercatcore.getTimelineDotClasses.call(void 0, void 0, true) }, slots.dot({ item }));
       }
       if (item.dot) {
-        return vue.h(
+        return _vue.h.call(void 0, 
           "div",
-          { class: tigercatCore.getTimelineDotClasses(void 0, true) },
+          { class: _tigercatcore.getTimelineDotClasses.call(void 0, void 0, true) },
           item.dot
         );
       }
       if (isPending) {
         if (props.pendingDot) {
-          return vue.h(
+          return _vue.h.call(void 0, 
             "div",
-            { class: tigercatCore.getTimelineDotClasses(void 0, true) },
+            { class: _tigercatcore.getTimelineDotClasses.call(void 0, void 0, true) },
             props.pendingDot
           );
         }
-        return vue.h("div", { class: tigercatCore.getPendingDotClasses() });
+        return _vue.h.call(void 0, "div", { class: _tigercatcore.getPendingDotClasses.call(void 0, ) });
       }
-      const dotClasses = tigercatCore.getTimelineDotClasses(item.color);
+      const dotClasses = _tigercatcore.getTimelineDotClasses.call(void 0, item.color);
       const dotStyle = item.color ? { backgroundColor: item.color } : {};
-      return vue.h("div", { class: dotClasses, style: dotStyle });
+      return _vue.h.call(void 0, "div", { class: dotClasses, style: dotStyle });
     }
     function renderTimelineItem(item, index) {
       const key = getItemKey(item, index);
       const isLast = index === processedItems.value.length - 1 && !props.pending;
       const position = item.position;
-      const itemClasses = tigercatCore.getTimelineItemClasses(props.mode, position, isLast);
-      const tailClasses = tigercatCore.getTimelineTailClasses(props.mode, isLast);
-      const headClasses = tigercatCore.getTimelineHeadClasses(props.mode);
-      const contentClasses = tigercatCore.getTimelineContentClasses(props.mode, position);
+      const itemClasses = _tigercatcore.getTimelineItemClasses.call(void 0, props.mode, position, isLast);
+      const tailClasses = _tigercatcore.getTimelineTailClasses.call(void 0, props.mode, isLast);
+      const headClasses = _tigercatcore.getTimelineHeadClasses.call(void 0, props.mode);
+      const contentClasses = _tigercatcore.getTimelineContentClasses.call(void 0, props.mode, position);
       if (slots.item) {
-        return vue.h("li", { key, class: itemClasses }, [
-          vue.h("div", { class: tailClasses }),
-          vue.h("div", { class: headClasses }, [renderDot(item)]),
-          vue.h("div", { class: contentClasses }, slots.item({ item, index }))
+        return _vue.h.call(void 0, "li", { key, class: itemClasses }, [
+          _vue.h.call(void 0, "div", { class: tailClasses }),
+          _vue.h.call(void 0, "div", { class: headClasses }, [renderDot(item)]),
+          _vue.h.call(void 0, "div", { class: contentClasses }, slots.item({ item, index }))
         ]);
       }
       const contentChildren = [];
       if (item.label) {
-        contentChildren.push(vue.h("div", { class: tigercatCore.timelineLabelClasses }, item.label));
+        contentChildren.push(_vue.h.call(void 0, "div", { class: _tigercatcore.timelineLabelClasses }, item.label));
       }
       if (item.content) {
-        contentChildren.push(vue.h("div", { class: tigercatCore.timelineDescriptionClasses }, item.content));
+        contentChildren.push(_vue.h.call(void 0, "div", { class: _tigercatcore.timelineDescriptionClasses }, item.content));
       }
-      return vue.h("li", { key, class: itemClasses }, [
-        vue.h("div", { class: tailClasses }),
-        vue.h("div", { class: headClasses }, [renderDot(item)]),
-        vue.h("div", { class: contentClasses }, contentChildren)
+      return _vue.h.call(void 0, "li", { key, class: itemClasses }, [
+        _vue.h.call(void 0, "div", { class: tailClasses }),
+        _vue.h.call(void 0, "div", { class: headClasses }, [renderDot(item)]),
+        _vue.h.call(void 0, "div", { class: contentClasses }, contentChildren)
       ]);
     }
     function renderPendingItem() {
@@ -137,30 +148,30 @@ var Timeline = vue.defineComponent({
       }
       const index = processedItems.value.length;
       const position = props.mode === "alternate" ? index % 2 === 0 ? "left" : "right" : void 0;
-      const itemClasses = tigercatCore.getTimelineItemClasses(props.mode, position, true);
-      const headClasses = tigercatCore.getTimelineHeadClasses(props.mode);
-      const contentClasses = tigercatCore.getTimelineContentClasses(props.mode, position);
+      const itemClasses = _tigercatcore.getTimelineItemClasses.call(void 0, props.mode, position, true);
+      const headClasses = _tigercatcore.getTimelineHeadClasses.call(void 0, props.mode);
+      const contentClasses = _tigercatcore.getTimelineContentClasses.call(void 0, props.mode, position);
       if (slots.pending) {
-        return vue.h("li", { key: "pending", class: itemClasses }, [
-          vue.h("div", { class: headClasses }, [renderDot({}, true)]),
-          vue.h("div", { class: contentClasses }, slots.pending())
+        return _vue.h.call(void 0, "li", { key: "pending", class: itemClasses }, [
+          _vue.h.call(void 0, "div", { class: headClasses }, [renderDot({}, true)]),
+          _vue.h.call(void 0, "div", { class: contentClasses }, slots.pending())
         ]);
       }
-      return vue.h("li", { key: "pending", class: itemClasses }, [
-        vue.h("div", { class: headClasses }, [renderDot({}, true)]),
-        vue.h("div", { class: contentClasses }, [
-          vue.h("div", { class: tigercatCore.timelineDescriptionClasses }, "Loading...")
+      return _vue.h.call(void 0, "li", { key: "pending", class: itemClasses }, [
+        _vue.h.call(void 0, "div", { class: headClasses }, [renderDot({}, true)]),
+        _vue.h.call(void 0, "div", { class: contentClasses }, [
+          _vue.h.call(void 0, "div", { class: _tigercatcore.timelineDescriptionClasses }, "Loading...")
         ])
       ]);
     }
     return () => {
-      return vue.h(
+      return _vue.h.call(void 0, 
         "ul",
         {
           ...attrs,
           class: containerClasses.value,
           style: containerStyle.value,
-          "aria-busy": attrs["aria-busy"] ?? (props.pending ? "true" : void 0)
+          "aria-busy": _nullishCoalesce(attrs["aria-busy"], () => ( (props.pending ? "true" : void 0)))
         },
         [
           ...processedItems.value.map((item, index) => renderTimelineItem(item, index)),
@@ -172,5 +183,7 @@ var Timeline = vue.defineComponent({
 });
 var Timeline_default = Timeline;
 
-exports.Timeline = Timeline;
-exports.Timeline_default = Timeline_default;
+
+
+
+exports.Timeline = Timeline; exports.Timeline_default = Timeline_default;

package/dist/chunk-2BNQGU7E.mjs

@@ -1,7 +1,22 @@
-import { CheckboxGroupKey } from './chunk-CPV7INZ4.mjs';
-import { defineComponent, inject, computed, ref, watch, h } from 'vue';
-import { getCheckboxClasses, classNames, coerceClassValue, getCheckboxLabelClasses } from '@expcat/tigercat-core';
+import {
+  CheckboxGroupKey
+} from "./chunk-CPV7INZ4.mjs";
 
+// src/components/Checkbox.ts
+import {
+  defineComponent,
+  computed,
+  h,
+  ref,
+  watch,
+  inject
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getCheckboxClasses,
+  getCheckboxLabelClasses
+} from "@expcat/tigercat-core";
 var Checkbox = defineComponent({
   name: "TigerCheckbox",
   inheritAttrs: false,
@@ -143,4 +158,7 @@ var Checkbox = defineComponent({
 });
 var Checkbox_default = Checkbox;
 
-export { Checkbox, Checkbox_default };
+export {
+  Checkbox,
+  Checkbox_default
+};

package/dist/{chunk-WBY2ILFK.js → chunk-2C5TOAYI.js}

@@ -1,9 +1,10 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var chunkO2Q4UYDA_js = require('./chunk-O2Q4UYDA.js');
-var vue = require('vue');
+var _chunkBGMQIUPPjs = require('./chunk-BGMQIUPP.js');
 
-var Kanban = vue.defineComponent({
+// src/components/Kanban.ts
+var _vue = require('vue');
+var Kanban = _vue.defineComponent.call(void 0, {
   name: "TigerKanban",
   inheritAttrs: false,
   props: {
@@ -51,11 +52,11 @@ var Kanban = vue.defineComponent({
   emits: ["card-move", "column-move", "update:columns", "card-add", "column-add"],
   setup(props, { emit, attrs, slots }) {
     const handleCardAdd = (colId) => {
-      props.onCardAdd?.(colId);
+      _optionalChain([props, 'access', _ => _.onCardAdd, 'optionalCall', _2 => _2(colId)]);
       emit("card-add", colId);
     };
-    return () => vue.h(
-      chunkO2Q4UYDA_js.TaskBoard,
+    return () => _vue.h.call(void 0, 
+      _chunkBGMQIUPPjs.TaskBoard,
       {
         ...attrs,
         columns: props.columns,
@@ -86,5 +87,7 @@ var Kanban = vue.defineComponent({
 });
 var Kanban_default = Kanban;
 
-exports.Kanban = Kanban;
-exports.Kanban_default = Kanban_default;
+
+
+
+exports.Kanban = Kanban; exports.Kanban_default = Kanban_default;

package/dist/{chunk-YFD6RD7P.mjs → chunk-2GQE47OY.mjs}

@@ -1,7 +1,48 @@
-import { useVueEscapeKey } from './chunk-CU4M5ABS.mjs';
-import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, h, Teleport } from 'vue';
-import { captureActiveElement, focusFirst, restoreFocus, ANIMATION_DURATION_MS, classNames, getDrawerContainerClasses, getDrawerMaskClasses, getDrawerPanelClasses, coerceClassValue, mergeStyleValues, getDrawerHeaderClasses, getDrawerBodyClasses, getDrawerFooterClasses, getDrawerCloseButtonClasses, getDrawerTitleClasses, resolveLocaleText, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, getFocusableElements, getFocusTrapNavigation } from '@expcat/tigercat-core';
+import {
+  renderVueBodyTeleport,
+  useVueBodyScrollLock,
+  useVueEscapeKey,
+  useVueFocusTrap
+} from "./chunk-7RIWAO2A.mjs";
 
+// src/components/Drawer.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  h,
+  onMounted,
+  onBeforeUnmount,
+  nextTick
+} from "vue";
+import {
+  ANIMATION_DURATION_MS,
+  captureActiveElement,
+  classNames,
+  coerceClassValue,
+  closeIconViewBox,
+  closeIconPathD,
+  closeIconPathStrokeLinecap,
+  closeIconPathStrokeLinejoin,
+  closeIconPathStrokeWidth,
+  focusFirst,
+  resolveLocaleText,
+  mergeStyleValues,
+  getDrawerMaskClasses,
+  getDrawerContainerClasses,
+  getDrawerPanelClasses,
+  getDrawerHeaderClasses,
+  getDrawerBodyClasses,
+  getDrawerFooterClasses,
+  getDrawerCloseButtonClasses,
+  getDrawerTitleClasses,
+  getGestureTouchPoint,
+  isDrawerSwipeCloseGesture,
+  restoreFocus,
+  resolveSwipeGesture,
+  shouldCloseOnMaskClick
+} from "@expcat/tigercat-core";
 var drawerIdCounter = 0;
 var createDrawerId = () => `tiger-drawer-${++drawerIdCounter}`;
 var Drawer = defineComponent({
@@ -139,6 +180,8 @@ var Drawer = defineComponent({
     const dialogRef = ref(null);
     const closeButtonRef = ref(null);
     const previousActiveElement = ref(null);
+    let touchStartPoint = null;
+    let touchCurrentPoint = null;
     const titleId = computed(() => `${instanceId.value}-title`);
     const shouldRender = computed(() => {
       if (props.open) {
@@ -153,33 +196,50 @@ var Drawer = defineComponent({
       emit("close");
     };
     const handleMaskClick = (event) => {
-      if (!props.maskClosable) return;
-      if (event.target === event.currentTarget) {
+      if (shouldCloseOnMaskClick(event, props.maskClosable)) {
         handleClose();
       }
     };
-    const escapeEnabled = computed(() => props.open);
-    let cleanupEscape;
-    const handleKeyDown = (event) => {
-      if (event.key === "Tab" && props.open && dialogRef.value) {
-        const focusables = getFocusableElements(dialogRef.value);
-        const result = getFocusTrapNavigation(event, focusables, document.activeElement);
-        if (result.shouldHandle && result.next) {
-          event.preventDefault();
-          result.next.focus();
-        }
+    const resetTouchGesture = () => {
+      touchStartPoint = null;
+      touchCurrentPoint = null;
+    };
+    const handleTouchStart = (event) => {
+      if (!props.open) return;
+      const point = getGestureTouchPoint(event.touches);
+      touchStartPoint = point;
+      touchCurrentPoint = point;
+    };
+    const handleTouchMove = (event) => {
+      if (!touchStartPoint) return;
+      const point = getGestureTouchPoint(event.touches);
+      if (point) {
+        touchCurrentPoint = point;
       }
     };
+    const handleTouchEnd = (event) => {
+      const gesture = resolveSwipeGesture(
+        touchStartPoint,
+        getGestureTouchPoint(event.changedTouches) ?? touchCurrentPoint,
+        { minDistance: 48, minVelocity: 0.15 }
+      );
+      resetTouchGesture();
+      if (isDrawerSwipeCloseGesture(props.placement, gesture)) {
+        handleClose();
+      }
+    };
+    const escapeEnabled = computed(() => props.open);
+    let cleanupEscape;
+    useVueBodyScrollLock(escapeEnabled);
+    useVueFocusTrap({ enabled: escapeEnabled, containerRef: dialogRef });
     onMounted(() => {
       cleanupEscape = useVueEscapeKey({
         enabled: escapeEnabled,
         onEscape: handleClose
       });
-      document.addEventListener("keydown", handleKeyDown);
     });
     onBeforeUnmount(() => {
       cleanupEscape?.();
-      document.removeEventListener("keydown", handleKeyDown);
     });
     watch(
       () => props.open,
@@ -297,6 +357,10 @@ var Drawer = defineComponent({
           "aria-labelledby": ariaLabelledby,
           tabindex: -1,
           ref: dialogRef,
+          onTouchstart: handleTouchStart,
+          onTouchmove: handleTouchMove,
+          onTouchend: handleTouchEnd,
+          onTouchcancel: resetTouchGesture,
           "data-tiger-drawer": ""
         },
         [header, body, footer]
@@ -312,10 +376,13 @@ var Drawer = defineComponent({
         },
         [mask, panel]
       );
-      return h(Teleport, { to: "body", disabled: props.disableTeleport }, [root]);
+      return renderVueBodyTeleport([root], props.disableTeleport);
     };
   }
 });
 var Drawer_default = Drawer;
 
-export { Drawer, Drawer_default };
+export {
+  Drawer,
+  Drawer_default
+};