@uxf/ui 10.0.0-beta.9 → 10.0.0

package/create-component-preview-page/ui-components.js

@@ -0,0 +1,263 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uiComponents = void 0;
+const AvatarFileInputStories = __importStar(require("@uxf/ui/avatar-file-input/avatar-file-input.stories"));
+const AvatarStories = __importStar(require("@uxf/ui/avatar/avatar.stories"));
+const BadgeStories = __importStar(require("@uxf/ui/badge/badge.stories"));
+const ButtonGroupStories = __importStar(require("@uxf/ui/button-group/button-group.stories"));
+const ButtonListStories = __importStar(require("@uxf/ui/button-list/button-list.stories"));
+const ButtonStories = __importStar(require("@uxf/ui/button/button.stories"));
+const CalendarStories = __importStar(require("@uxf/ui/calendar/calendar.stories"));
+const CheckboxButtonStories = __importStar(require("@uxf/ui/checkbox-button/checkbox-button.stories"));
+const CheckboxInputStories = __importStar(require("@uxf/ui/checkbox-input/checkbox-input.stories"));
+const CheckboxStories = __importStar(require("@uxf/ui/checkbox/checkbox.stories"));
+const ChipStories = __importStar(require("@uxf/ui/chip/chip.stories"));
+const ColorRadioGroupStories = __importStar(require("@uxf/ui/color-radio-group/color-radio-group.stories"));
+const ColorRadioStories = __importStar(require("@uxf/ui/color-radio/color-radio.stories"));
+const ComboboxStories = __importStar(require("@uxf/ui/combobox/combobox.stories"));
+const DatePickerInputStories = __importStar(require("@uxf/ui/date-picker-input/date-picker-input.stories"));
+const DatePickerStories = __importStar(require("@uxf/ui/date-picker/date-picker.stories"));
+const DatetimePickerInputStories = __importStar(require("@uxf/ui/datetime-picker-input/datetime-picker-input.stories"));
+const DatetimePickerStories = __importStar(require("@uxf/ui/datetime-picker/datetime-picker.stories"));
+const DropdownStories = __importStar(require("@uxf/ui/dropdown/dropdown.stories"));
+const DropzoneStories = __importStar(require("@uxf/ui/dropzone/dropzone.stories"));
+const ErrorMessageStories = __importStar(require("@uxf/ui/error-message/error-message.stories"));
+const FileInputStories = __importStar(require("@uxf/ui/file-input/file-input.stories"));
+const FlashMessagesStories = __importStar(require("@uxf/ui/flash-messages/flash-messages.stories"));
+const FormComponentStories = __importStar(require("@uxf/ui/form-component/form-component.stories"));
+const IconStories = __importStar(require("@uxf/ui/icon/icon.stories"));
+const InputStories = __importStar(require("@uxf/ui/input/input.stories"));
+const LabelStories = __importStar(require("@uxf/ui/label/label.stories"));
+const ListItemStories = __importStar(require("@uxf/ui/list-item/list-item.stories"));
+const LoaderStories = __importStar(require("@uxf/ui/loader/loader.stories"));
+const ModalStories = __importStar(require("@uxf/ui/modal/modal.stories"));
+const MultiComboboxStories = __importStar(require("@uxf/ui/multi-combobox/multi-combobox.stories"));
+const MultiSelectStories = __importStar(require("@uxf/ui/multi-select/multi-select.stories"));
+const PaginationStories = __importStar(require("@uxf/ui/pagination/pagination.stories"));
+const PaperStories = __importStar(require("@uxf/ui/paper/paper.stories"));
+const RadioGroupStories = __importStar(require("@uxf/ui/radio-group/radio-group.stories"));
+const RadioStories = __importStar(require("@uxf/ui/radio/radio.stories"));
+const RasterImageStories = __importStar(require("@uxf/ui/raster-image/raster-image.stories"));
+const SelectStories = __importStar(require("@uxf/ui/select/select.stories"));
+const TabsStories = __importStar(require("@uxf/ui/tabs/tabs.stories"));
+const TextInputStories = __importStar(require("@uxf/ui/text-input/text-input.stories"));
+const TextLinkStories = __importStar(require("@uxf/ui/text-link/text-link.stories"));
+const TextareaStories = __importStar(require("@uxf/ui/textarea/textarea.stories"));
+const TimePickerInputStories = __importStar(require("@uxf/ui/time-picker-input/time-picker-input.stories"));
+const TimePickerStories = __importStar(require("@uxf/ui/time-picker/time-picker-input.stories"));
+const ToggleStories = __importStar(require("@uxf/ui/toggle/toggle.stories"));
+const TooltipStories = __importStar(require("@uxf/ui/tooltip/tooltip.stories"));
+const TypographyStories = __importStar(require("@uxf/ui/typography/typography.stories"));
+exports.uiComponents = {
+    avatar: {
+        title: "Avatar",
+        stories: AvatarStories,
+    },
+    "avatar-file-input": {
+        title: "AvatarFileInput",
+        stories: AvatarFileInputStories,
+    },
+    badge: {
+        title: "Badge",
+        stories: BadgeStories,
+    },
+    button: {
+        title: "Button",
+        stories: ButtonStories,
+    },
+    "button-group": {
+        title: "ButtonGroup",
+        stories: ButtonGroupStories,
+    },
+    "button-list": {
+        title: "ButtonList",
+        stories: ButtonListStories,
+    },
+    calendar: {
+        title: "Calendar",
+        stories: CalendarStories,
+    },
+    checkbox: {
+        title: "Checkbox",
+        stories: CheckboxStories,
+    },
+    "checkbox-button": {
+        title: "CheckboxButton",
+        stories: CheckboxButtonStories,
+    },
+    "checkbox-input": {
+        title: "CheckboxInput",
+        stories: CheckboxInputStories,
+    },
+    chip: {
+        title: "Chip",
+        stories: ChipStories,
+    },
+    "color-radio": {
+        title: "ColorRadio",
+        stories: ColorRadioStories,
+    },
+    "color-radio-group": {
+        title: "ColorRadioGroup",
+        stories: ColorRadioGroupStories,
+    },
+    combobox: {
+        title: "Combobox",
+        stories: ComboboxStories,
+    },
+    "date-picker": {
+        title: "DatePicker",
+        stories: DatePickerStories,
+    },
+    "date-picker-input": {
+        title: "DatePickerInput",
+        stories: DatePickerInputStories,
+    },
+    "datetime-picker": {
+        title: "DatetimePicker",
+        stories: DatetimePickerStories,
+    },
+    "datetime-picker-input": {
+        title: "DatetimePickerInput",
+        stories: DatetimePickerInputStories,
+    },
+    dropdown: {
+        title: "Dropdown",
+        stories: DropdownStories,
+    },
+    dropzone: {
+        title: "Dropzone",
+        stories: DropzoneStories,
+    },
+    "error-message": {
+        title: "ErrorMessage",
+        stories: ErrorMessageStories,
+    },
+    "file-input": {
+        title: "FileInput",
+        stories: FileInputStories,
+    },
+    "flash-messages": {
+        title: "FlashMessages",
+        stories: FlashMessagesStories,
+    },
+    "form-component": {
+        title: "FormComponent",
+        stories: FormComponentStories,
+    },
+    icon: {
+        title: "Icon",
+        stories: IconStories,
+    },
+    input: {
+        title: "Input",
+        stories: InputStories,
+    },
+    label: {
+        title: "Label",
+        stories: LabelStories,
+    },
+    "list-item": {
+        title: "ListItem",
+        stories: ListItemStories,
+    },
+    loader: {
+        title: "Loader",
+        stories: LoaderStories,
+    },
+    modal: {
+        title: "Modal",
+        stories: ModalStories,
+    },
+    "multi-combobox": {
+        title: "MultiCombobox",
+        stories: MultiComboboxStories,
+    },
+    "multi-select": {
+        title: "MultiSelect",
+        stories: MultiSelectStories,
+    },
+    pagination: {
+        title: "Pagination",
+        stories: PaginationStories,
+    },
+    paper: {
+        title: "Paper",
+        stories: PaperStories,
+    },
+    radio: {
+        title: "Radio",
+        stories: RadioStories,
+    },
+    "radio-group": {
+        title: "RadioGroup",
+        stories: RadioGroupStories,
+    },
+    "raster-image": {
+        title: "RasterImage",
+        stories: RasterImageStories,
+    },
+    select: {
+        title: "Select",
+        stories: SelectStories,
+    },
+    tabs: {
+        title: "Tabs",
+        stories: TabsStories,
+    },
+    "text-input": {
+        title: "TextInput",
+        stories: TextInputStories,
+    },
+    "text-link": {
+        title: "TextLink",
+        stories: TextLinkStories,
+    },
+    textarea: {
+        title: "Textarea",
+        stories: TextareaStories,
+    },
+    "time-picker": {
+        title: "TimePicker",
+        stories: TimePickerStories,
+    },
+    "time-picker-input": {
+        title: "TimePickerInput",
+        stories: TimePickerInputStories,
+    },
+    toggle: {
+        title: "Toggle",
+        stories: ToggleStories,
+    },
+    tooltip: {
+        title: "Tooltip",
+        stories: TooltipStories,
+    },
+    typography: {
+        title: "Typography",
+        stories: TypographyStories,
+    },
+};

package/create-component-preview-page/ui-readmes.d.ts

@@ -0,0 +1,2 @@
+import { uiComponents } from "./ui-components";
+export declare const uiReadmes: Record<keyof typeof uiComponents, any>;

package/create-component-preview-page/ui-readmes.js

@@ -0,0 +1,102 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uiReadmes = void 0;
+const README_md_1 = __importDefault(require("@uxf/ui/avatar-file-input/README.md"));
+const README_md_2 = __importDefault(require("@uxf/ui/avatar/README.md"));
+const README_md_3 = __importDefault(require("@uxf/ui/badge/README.md"));
+const README_md_4 = __importDefault(require("@uxf/ui/button-group/README.md"));
+const README_md_5 = __importDefault(require("@uxf/ui/button-list/README.md"));
+const README_md_6 = __importDefault(require("@uxf/ui/button/README.md"));
+const README_md_7 = __importDefault(require("@uxf/ui/calendar/README.md"));
+const README_md_8 = __importDefault(require("@uxf/ui/checkbox-button/README.md"));
+const README_md_9 = __importDefault(require("@uxf/ui/checkbox-input/README.md"));
+const README_md_10 = __importDefault(require("@uxf/ui/checkbox/README.md"));
+const README_md_11 = __importDefault(require("@uxf/ui/chip/README.md"));
+const README_md_12 = __importDefault(require("@uxf/ui/color-radio-group/README.md"));
+const README_md_13 = __importDefault(require("@uxf/ui/color-radio/README.md"));
+const README_md_14 = __importDefault(require("@uxf/ui/combobox/README.md"));
+const README_md_15 = __importDefault(require("@uxf/ui/date-picker-input/README.md"));
+const README_md_16 = __importDefault(require("@uxf/ui/date-picker/README.md"));
+const README_md_17 = __importDefault(require("@uxf/ui/datetime-picker-input/README.md"));
+const README_md_18 = __importDefault(require("@uxf/ui/datetime-picker/README.md"));
+const README_md_19 = __importDefault(require("@uxf/ui/dropdown/README.md"));
+const README_md_20 = __importDefault(require("@uxf/ui/dropzone/README.md"));
+const README_md_21 = __importDefault(require("@uxf/ui/error-message/README.md"));
+const README_md_22 = __importDefault(require("@uxf/ui/file-input/README.md"));
+const README_md_23 = __importDefault(require("@uxf/ui/flash-messages/README.md"));
+const README_md_24 = __importDefault(require("@uxf/ui/form-component/README.md"));
+const README_md_25 = __importDefault(require("@uxf/ui/icon/README.md"));
+const README_md_26 = __importDefault(require("@uxf/ui/input/README.md"));
+const README_md_27 = __importDefault(require("@uxf/ui/label/README.md"));
+const README_md_28 = __importDefault(require("@uxf/ui/list-item/README.md"));
+const README_md_29 = __importDefault(require("@uxf/ui/loader/README.md"));
+const README_md_30 = __importDefault(require("@uxf/ui/modal/README.md"));
+const README_md_31 = __importDefault(require("@uxf/ui/multi-combobox/README.md"));
+const README_md_32 = __importDefault(require("@uxf/ui/multi-select/README.md"));
+const README_md_33 = __importDefault(require("@uxf/ui/pagination/README.md"));
+const README_md_34 = __importDefault(require("@uxf/ui/paper/README.md"));
+const README_md_35 = __importDefault(require("@uxf/ui/radio-group/README.md"));
+const README_md_36 = __importDefault(require("@uxf/ui/radio/README.md"));
+const README_md_37 = __importDefault(require("@uxf/ui/raster-image/README.md"));
+const README_md_38 = __importDefault(require("@uxf/ui/select/README.md"));
+const README_md_39 = __importDefault(require("@uxf/ui/tabs/README.md"));
+const README_md_40 = __importDefault(require("@uxf/ui/text-input/README.md"));
+const README_md_41 = __importDefault(require("@uxf/ui/text-link/README.md"));
+const README_md_42 = __importDefault(require("@uxf/ui/textarea/README.md"));
+const README_md_43 = __importDefault(require("@uxf/ui/time-picker-input/README.md"));
+const README_md_44 = __importDefault(require("@uxf/ui/time-picker/README.md"));
+const README_md_45 = __importDefault(require("@uxf/ui/toggle/README.md"));
+const README_md_46 = __importDefault(require("@uxf/ui/tooltip/README.md"));
+const README_md_47 = __importDefault(require("@uxf/ui/typography/README.md"));
+exports.uiReadmes = {
+    avatar: README_md_2.default,
+    "avatar-file-input": README_md_1.default,
+    badge: README_md_3.default,
+    button: README_md_6.default,
+    "button-group": README_md_4.default,
+    "button-list": README_md_5.default,
+    calendar: README_md_7.default,
+    checkbox: README_md_10.default,
+    "checkbox-button": README_md_8.default,
+    "checkbox-input": README_md_9.default,
+    chip: README_md_11.default,
+    "color-radio": README_md_13.default,
+    "color-radio-group": README_md_12.default,
+    combobox: README_md_14.default,
+    "date-picker": README_md_16.default,
+    "date-picker-input": README_md_15.default,
+    "datetime-picker": README_md_18.default,
+    "datetime-picker-input": README_md_17.default,
+    dropdown: README_md_19.default,
+    dropzone: README_md_20.default,
+    "error-message": README_md_21.default,
+    "file-input": README_md_22.default,
+    "flash-messages": README_md_23.default,
+    "form-component": README_md_24.default,
+    icon: README_md_25.default,
+    input: README_md_26.default,
+    label: README_md_27.default,
+    "list-item": README_md_28.default,
+    loader: README_md_29.default,
+    modal: README_md_30.default,
+    "multi-combobox": README_md_31.default,
+    "multi-select": README_md_32.default,
+    pagination: README_md_33.default,
+    paper: README_md_34.default,
+    radio: README_md_36.default,
+    "radio-group": README_md_35.default,
+    "raster-image": README_md_37.default,
+    select: README_md_38.default,
+    tabs: README_md_39.default,
+    "text-input": README_md_40.default,
+    "text-link": README_md_41.default,
+    textarea: README_md_42.default,
+    "time-picker": README_md_44.default,
+    "time-picker-input": README_md_43.default,
+    toggle: README_md_45.default,
+    tooltip: README_md_46.default,
+    typography: README_md_47.default,
+};

package/css/alert-bubble.css

@@ -0,0 +1,100 @@
+.uxf-alert-bubble {
+    --bg-color: unset;
+    --icon-color: unset;
+    --icon-size: unset;
+    --size: unset;
+
+    align-items: center;
+    background-color: var(--bg-color);
+    border-radius: 999px;
+    display: flex;
+    flex-shrink: 0;
+    height: var(--size);
+    justify-content: center;
+    width: var(--size);
+
+    &__icon {
+        color: var(--icon-color);
+        flex-shrink: 0;
+        height: var(--icon-size);
+        width: var(--icon-size);
+    }
+
+    &--color-default {
+        :root .light & {
+            --bg-color: theme("backgroundColor.primary.100");
+            --icon-color: theme("colors.primary.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.primary.600");
+            --icon-color: theme("colors.primary.100");
+        }
+    }
+
+    &--color-warning {
+        :root .light & {
+            --bg-color: theme("backgroundColor.warning.100");
+            --icon-color: theme("colors.warning.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.warning.600");
+            --icon-color: theme("colors.warning.100");
+        }
+    }
+
+    &--color-success {
+        :root .light & {
+            --bg-color: theme("backgroundColor.success.100");
+            --icon-color: theme("colors.success.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.success.600");
+            --icon-color: theme("colors.success.100");
+        }
+    }
+
+    &--color-error {
+        :root .light & {
+            --bg-color: theme("backgroundColor.error.100");
+            --icon-color: theme("colors.error.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.error.600");
+            --icon-color: theme("colors.error.100");
+        }
+    }
+
+    &--size-xs {
+        --size: theme("alertBubbleSize.xs");
+        --icon-size: 20px;
+    }
+
+    &--size-sm {
+        --size: theme("alertBubbleSize.sm");
+        --icon-size: 24px;
+    }
+
+    &--size-default {
+        --size: theme("alertBubbleSize.default");
+        --icon-size: 24px;
+    }
+
+    &--size-lg {
+        --size: theme("alertBubbleSize.lg");
+        --icon-size: 30px;
+    }
+
+    &--size-xl {
+        --size: theme("alertBubbleSize.xl");
+        --icon-size: 30px;
+    }
+
+    &--size-2xl {
+        --size: theme("alertBubbleSize.2xl");
+        --icon-size: 40px;
+    }
+}

package/css/avatar-file-input.css

@@ -1,82 +1,116 @@
 .uxf-avatar-file-input {
+    align-items: center;
+    display: flex;
+    gap: theme("spacing.4");
+
     &__input {
-        @apply hidden;
+        display: none;
+    }
+
+    &--variant-default {
+        .uxf-avatar-file-input__label {
+            border-radius: theme("borderRadius.full");
+        }
     }
 
     &__label {
-        @apply cursor-pointer h-20 w-20 rounded-full flex items-center justify-center border-2 border-dashed
-            transition-all duration-75 ease-in-out;
+        @apply transition-all duration-75;
+
+        align-items: center;
+        border-style: dashed;
+        border-width: theme("borderWidth.2");
+        cursor: pointer;
+        display: flex;
+        height: theme("height.20");
+        justify-content: center;
+        width: theme("width.20");
 
         :root .light & {
-            @apply border-lightLow;
+            border-color: theme("colors.lightBorder");
         }
 
         :root .dark & {
-            @apply border-lightBorder;
+            border-color: theme("colors.darkBorder");
         }
 
-        &__icon {
+        &-wrapper {
+            align-items: center;
+            display: flex;
+            gap: theme("spacing.4");
+        }
+
+        &-icon {
             :root .light & {
-                @apply text-lightLow;
+                color: theme("colors.lightLow");
             }
 
             :root .dark & {
-                @apply text-lightBorder;
+                color: theme("colors.lightBorder");
             }
 
             &.is-invalid {
                 :root .light & {
-                    @apply text-error;
+                    color: theme("colors.error.DEFAULT");
                 }
 
                 :root .dark & {
-                    @apply text-error;
+                    color: theme("colors.error.DEFAULT");
                 }
             }
         }
 
         &:hover {
-            @apply border-4;
+            border-width: theme("borderWidth.4");
         }
 
         &.is-invalid {
             :root .light & {
-                @apply border-error;
+                border-color: theme("colors.error.DEFAULT");
             }
 
             :root .dark & {
-                @apply border-error;
+                border-color: theme("colors.error.DEFAULT");
             }
         }
 
         &.is-disabled {
-            @apply cursor-not-allowed bg-lightLow/20;
+            background-color: theme("colors.lightLow/.20");
+            cursor: not-allowed;
 
             &:hover {
-                @apply border-2;
+                border-width: theme("borderWidth.2");
             }
         }
     }
 
     &__label-text {
-        @apply text-sm text-center;
+        @apply text-sm shadow-sm;
+
+        border: theme("borderWidth.DEFAULT") solid theme("colors.gray.300");
+        padding: theme("spacing[1.5]") theme("spacing.3");
+        text-align: center;
 
         :root .light & {
-            @apply text-lightLow;
+            color: theme("colors.lightHigh");
         }
 
         :root .dark & {
-            @apply text-lightBorder;
+            color: theme("colors.lightBorder");
         }
 
         &.is-invalid {
             :root .light & {
-                @apply text-error;
+                color: theme("colors.error.DEFAULT");
             }
 
             :root .dark & {
-                @apply text-error;
+                color: theme("colors.error.DEFAULT");
             }
         }
     }
+
+    &__image {
+        height: theme("height.20");
+        width: theme("width.20");
+    }
 }

package/css/avatar.css

@@ -1,15 +1,15 @@
 .uxf-avatar {
-    @apply relative inline-flex items-center justify-center h-10 w-10 rounded-full;
+    @apply relative inline-flex h-10 w-10 items-center justify-center rounded-full;
 
     &__image {
-        @apply absolute left-0 top-0 block h-full w-full rounded-inherit object-cover;
+        @apply rounded-inherit absolute left-0 top-0 block h-full w-full object-cover;
     }
 
     :root .light & {
-        @apply text-gray-700 bg-gray-200;
+        @apply bg-gray-200 text-gray-700;
     }
 
     :root .dark & {
-        @apply text-gray-200 bg-gray-800;
+        @apply bg-gray-800 text-gray-200;
     }
 }

package/css/badge.css

@@ -2,22 +2,22 @@
     @apply inline-flex items-center justify-center font-bold;
 
     &--size-small {
-        @apply h-6 min-w-[24px] text-sm rounded-[12px] px-1.5;
+        @apply h-6 min-w-[24px] rounded-[12px] px-1.5 text-sm;
     }
 
     &--size-medium {
-        @apply h-8 min-w-[32px] text-base rounded-[16px] px-2;
+        @apply h-8 min-w-[32px] rounded-[16px] px-2 text-base;
     }
 
     &--size-large {
-        @apply h-10 min-w-[40px] text-lg rounded-[20px] px-2;
+        @apply h-10 min-w-[40px] rounded-[20px] px-2 text-lg;
     }
 
     :root .light & {
-        @apply text-white bg-primary;
+        @apply bg-primary text-white;
     }
 
     :root .dark & {
-        @apply text-gray-900 bg-white;
+        @apply bg-white text-gray-900;
     }
 }

package/css/button-group.css

@@ -1,6 +1,6 @@
 .uxf-button-group {
-    display: flex;
     align-items: center;
+    display: flex;
 
     .uxf-button {
         &:focus {

package/css/button-list.css

@@ -6,7 +6,7 @@
     }
 
     &__menu-items {
-        @apply absolute right-0 mt-2 w-40 divide-y rounded-md shadow-lg ring-1 focus:outline-none z-dropdown;
+        @apply z-dropdown absolute right-0 mt-2 w-40 divide-y rounded-md shadow-lg ring-1 focus:outline-none;
 
         :root .light & {
             @apply divide-gray-100 bg-white ring-black/5;
@@ -26,7 +26,7 @@
     }
 
     &__menu-button {
-        @apply flex px-3 py-2 space-x-3 text-sm is-hoverable:hover:cursor-pointer;
+        @apply is-hoverable:hover:cursor-pointer flex space-x-3 px-3 py-2 text-sm;
 
         :root .light & {
             @apply text-black hover:text-gray-800;