@uxf/ui 1.0.0-beta.81 → 1.0.0-beta.83

package/avatar/index.d.ts

@@ -1 +1 @@
-export { Avatar } from "./avatar";
+export * from "./avatar";

package/avatar/index.js

@@ -1,5 +1,17 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-var avatar_1 = require("./avatar");
-Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });
+__exportStar(require("./avatar"), exports);

package/badge/index.d.ts

@@ -1 +1 @@
-export { Badge } from "./badge";
+export * from "./badge";

package/badge/index.js

@@ -1,5 +1,17 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Badge = void 0;
-var badge_1 = require("./badge");
-Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return badge_1.Badge; } });
+__exportStar(require("./badge"), exports);

package/chip/chip.d.ts

@@ -1,7 +1,10 @@
 import React, { HTMLAttributes } from "react";
-import { ChipColors } from "@uxf/ui/chip/theme";
+import { ChipColors, ChipSizes } from "@uxf/ui/chip/theme";
 export declare type ChipColor = keyof ChipColors;
+export declare type ChipSize = keyof ChipSizes;
 export interface ChipProps extends HTMLAttributes<HTMLDivElement> {
     color?: ChipColor;
+    size?: ChipSize;
+    onClose?: () => void;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;

package/chip/chip.js

@@ -8,7 +8,12 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 exports.Chip = (0, forwardRef_1.forwardRef)("Chip", (props, ref) => {
-    var _a;
-    const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "success"}`, props.className);
-    return (react_1.default.createElement("div", { ref: ref, className: chipClassName }, typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-chip__text" }, props.children)) : (props.children)));
+    var _a, _b;
+    const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-chip--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, props.onClose && "has-button", props.className);
+    return (react_1.default.createElement("div", { ref: ref, className: chipClassName },
+        typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-chip__text" }, props.children)) : (props.children),
+        props.onClose && (react_1.default.createElement("button", { type: "button", onClick: props.onClose, className: "uxf-chip__button" },
+            react_1.default.createElement("span", { className: "sr-only" }, "Remove option"),
+            react_1.default.createElement("svg", { stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" },
+                react_1.default.createElement("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" }))))));
 });

package/chip/chip.stories.d.ts

@@ -1,7 +1,14 @@
+/// <reference types="mdx" />
 import React from "react";
+import Docs from "./chip.docs.mdx";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./chip").ChipProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("@uxf/ui/chip").ChipProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            page: typeof Docs;
+        };
+    };
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/chip/chip.stories.js

@@ -6,17 +6,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
 const chip_1 = require("@uxf/ui/chip");
+const storybook_config_1 = require("../utils/storybook-config");
+const chip_docs_mdx_1 = __importDefault(require("./chip.docs.mdx"));
 exports.default = {
     title: "UI/Chip",
     component: chip_1.Chip,
+    parameters: {
+        docs: {
+            page: chip_docs_mdx_1.default,
+        },
+    },
 };
 function Default() {
-    const allChips = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(chip_1.Chip, { color: "success" }, "Success"),
-        react_1.default.createElement(chip_1.Chip, { color: "warning" }, "Warning"),
-        react_1.default.createElement(chip_1.Chip, { color: "error" }, "Error")));
+    const config = (0, storybook_config_1.useStorybookConfig)("Chip");
+    const allChips = config.colors.map((color) => (react_1.default.createElement(chip_1.Chip, { key: color, color: color, onClose: () => null }, color)));
+    const allChipsLarge = config.colors.map((color) => (react_1.default.createElement(chip_1.Chip, { key: color, color: color, size: "large" }, color)));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-x-4 rounded bg-white p-8" }, allChips),
-        react_1.default.createElement("div", { className: "dark space-x-4 rounded bg-gray-900 p-8 text-white" }, allChips)));
+        react_1.default.createElement("div", { className: "light space-y-4 rounded bg-white p-8" },
+            react_1.default.createElement("div", { className: "space-x-4" }, allChips),
+            react_1.default.createElement("div", { className: "space-x-4" }, allChipsLarge)),
+        react_1.default.createElement("div", { className: "dark space-y-4 rounded bg-gray-900 p-8" },
+            react_1.default.createElement("div", { className: "space-x-4" }, allChips),
+            react_1.default.createElement("div", { className: "space-x-4" }, allChipsLarge))));
 }
 exports.Default = Default;

package/chip/index.d.ts

@@ -1 +1 @@
-export { Chip } from "./chip";
+export * from "./chip";

package/chip/index.js

@@ -1,5 +1,17 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chip = void 0;
-var chip_1 = require("./chip");
-Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return chip_1.Chip; } });
+__exportStar(require("./chip"), exports);

package/chip/theme.d.ts

@@ -1,5 +1,14 @@
 export interface ChipColors {
-    success: true;
-    warning: true;
-    error: true;
+    default: true;
+    red: true;
+    yellow: true;
+    green: true;
+    blue: true;
+    indigo: true;
+    purple: true;
+    pink: true;
+}
+export interface ChipSizes {
+    default: true;
+    large: true;
 }

package/combobox/combobox.d.ts

@@ -14,7 +14,6 @@ export interface ComboboxProps<Value = ComboboxValue, Option = ComboboxOption<Va
     helperText?: ReactNode;
     hiddenLabel?: boolean;
     iconName?: keyof IconsSet;
-    iconSize?: number;
     id?: string;
     keyExtractor?: (option: Option) => string | number;
     label: string;

package/combobox/combobox.js

@@ -36,7 +36,7 @@ const use_dropdown_1 = require("../hooks/use-dropdown");
 const icon_1 = require("../icon");
 const label_1 = require("../label");
 exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const [query, setQuery] = (0, react_2.useState)("");
@@ -47,14 +47,12 @@ exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", true);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
-    const getIconClassName = (open) => (0, cx_1.cx)("uxf-select__button-icon", open && "is-open");
-    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "caretDown";
-    const iconSize = (_d = props.iconSize) !== null && _d !== void 0 ? _d : 24;
+    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "chevronDown";
     return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Combobox.Button, { as: "div", className: (0, cx_1.cx)("uxf-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("uxf-combobox__input"), displayValue: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }, onBlur: props.onBlur, onChange: (event) => setQuery(event.target.value), placeholder: props.placeholder, ref: stableRef, type: "text" }),
-            react_2.default.createElement(icon_1.Icon, { className: getIconClassName(renderProps.open), name: iconName, size: iconSize })),
+            react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select__button-icon", renderProps.open && "is-open"), name: iconName })),
         react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.floating }, filteredData.map((option) => {
             var _a, _b, _c, _d;
             return (react_2.default.createElement(react_1.Combobox.Option, { key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, value: option, className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED) }, (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label));

package/css/button.css

@@ -5,7 +5,8 @@
 }
 
 .uxf-button {
-    @apply inline-flex items-center justify-center rounded-md font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
+    @apply inline-flex items-center justify-center rounded-md font-medium shadow-sm
+        focus:outline-none focus:ring-2 focus:ring-offset-2;
 
     .uxf-icon {
         @apply h-6;
@@ -25,7 +26,7 @@
 
     &.uxf-button--icon-button.is-loading {
         &::after {
-            @apply ml-0
+            @apply ml-0;
         }
     }
 
@@ -53,7 +54,7 @@
     }
 
     &--size-xs {
-        @apply px-2.5 py-1.5 text-xs rounded;
+        @apply px-2.5 h-7 text-xs rounded;
 
         &.is-loading::after {
             height: 14px;
@@ -61,7 +62,7 @@
         }
 
         &.uxf-button--icon-button {
-            @apply p-0 h-7 w-7;
+            @apply p-0 w-7;
         }
 
         .uxf-icon {
@@ -70,7 +71,7 @@
     }
 
     &--size-sm {
-        @apply px-3 py-2 text-sm leading-4;
+        @apply px-3 h-8 text-sm leading-4;
 
         &.is-loading::after {
             height: 16px;
@@ -78,7 +79,7 @@
         }
 
         &.uxf-button--icon-button {
-            @apply p-0 h-8 w-8;
+            @apply p-0 w-8;
         }
 
         .uxf-icon {
@@ -87,26 +88,26 @@
     }
 
     &--size-default {
-        @apply px-4 py-2 text-sm;
+        @apply px-4 h-9 text-sm;
 
         &.uxf-button--icon-button {
-            @apply p-0 h-12 w-12;
+            @apply p-0 w-9;
         }
     }
 
     &--size-lg {
-        @apply px-4 py-2 text-base;
+        @apply px-4 h-10 text-base;
 
         &.uxf-button--icon-button {
-            @apply p-0 h-10 w-10;
+            @apply p-0 w-10;
         }
     }
 
     &--size-xl {
-        @apply px-6 py-3 text-base;
+        @apply px-6 h-11 text-base;
 
         &.uxf-button--icon-button {
-            @apply p-0 h-[48px] w-[48px];
+            @apply p-0 w-11;
         }
     }
 

package/css/button.old.css

@@ -6,8 +6,8 @@
 
 .uxf-button {
     @apply inline-flex items-center justify-center text-center rounded-lg before:rounded-lg font-semibold
-    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition
-    before:transition;
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition
+        before:transition;
 
     &__text {
         @apply truncate;
@@ -88,11 +88,11 @@
 
     &--variant-outlined {
         @apply before:absolute before:pointer-events-none before:inset-0 before:border is-hoverable:before:border-2
-        bg-transparent;
+            bg-transparent;
 
         :root .light & {
             @apply before:border-gray-300 is-hoverable:bg-primary-100 is-hoverable:before:border-primary-400
-            focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+                focus-visible:ring-primary-500 focus-visible:ring-offset-white;
 
             &.is-disabled {
                 @apply before:border-gray-100 text-gray-400;
@@ -101,7 +101,7 @@
 
         :root .dark & {
             @apply before:border-gray-300 is-hoverable:bg-white/10 focus-visible:ring-primary-500
-            focus-visible:ring-offset-gray-900;
+                focus-visible:ring-offset-gray-900;
 
             &.is-disabled {
                 @apply before:border-gray-700 text-gray-600;
@@ -123,7 +123,7 @@
 
             :root .dark & {
                 @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500
-                focus-visible:ring-offset-gray-900;
+                    focus-visible:ring-offset-gray-900;
 
                 &.is-disabled {
                     @apply bg-gray-700 text-gray-400;
@@ -162,7 +162,7 @@
 
             :root .dark & {
                 @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500
-                focus-visible:ring-offset-gray-900;
+                    focus-visible:ring-offset-gray-900;
 
                 &.is-disabled {
                     @apply bg-gray-700 text-gray-400;
@@ -181,7 +181,7 @@
 
             :root .dark & {
                 @apply text-white bg-warning-500 is-hoverable:bg-warning-400 focus-visible:ring-warning-500
-                focus-visible:ring-offset-gray-900;
+                    focus-visible:ring-offset-gray-900;
 
                 &.is-disabled {
                     @apply bg-gray-700 text-gray-400;
@@ -200,7 +200,7 @@
 
             :root .dark & {
                 @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500
-                focus-visible:ring-offset-gray-900;
+                    focus-visible:ring-offset-gray-900;
 
                 &.is-disabled {
                     @apply bg-gray-700 text-gray-400;

package/css/chip.css

@@ -1,37 +1,171 @@
 .uxf-chip {
-    @apply inline-block rounded-lg py-1 px-2 text-xs h-fit;
+    @apply inline-block rounded py-0.5 px-2 text-xs font-medium;
+
+    &.has-button {
+        @apply pr-1;
+    }
+
+    &--size-large {
+        @apply text-sm rounded-md px-2.5;
+
+        .uxf-chip__button {
+            @apply h-4 w-4;
+        }
+    }
 
     &__text {
         @apply truncate;
     }
 
-    &--color-success {
+    &__button {
+        @apply ml-1 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded;
+
+        svg {
+            @apply h-2 w-2;
+        }
+    }
+
+    &--color-default {
         :root .light & {
-            @apply text-success-600 bg-success-100;
+            @apply text-gray-600 bg-gray-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-gray-200;
+            }
         }
 
         :root .dark & {
-            @apply text-white bg-success-600;
+            @apply text-white bg-gray-600;
+
+            .uxf-chip__button {
+                @apply hover:bg-gray-700;
+            }
         }
     }
 
-    &--color-warning {
+    &--color-red {
         :root .light & {
-            @apply text-warning-600 bg-warning-100;
+            @apply text-red-600 bg-red-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-red-200;
+            }
         }
 
         :root .dark & {
-            @apply text-white bg-warning-600;
+            @apply text-white bg-red-600;
+
+            .uxf-chip__button {
+                @apply hover:bg-red-700;
+            }
         }
     }
 
-    &--color-error {
+    &--color-yellow {
         :root .light & {
-            @apply text-error-600 bg-error-100;
+            @apply text-yellow-600 bg-yellow-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-yellow-200;
+            }
         }
 
         :root .dark & {
-            @apply text-white bg-error-600;
+            @apply text-white bg-yellow-600;
+
+            .uxf-chip__button {
+                @apply hover:bg-yellow-700;
+            }
+        }
+    }
+
+    &--color-green {
+        :root .light & {
+            @apply text-green-600 bg-green-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-green-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-white bg-green-600;
+
+            .uxf-chip__button {
+                @apply hover:bg-green-700;
+            }
+        }
+    }
+
+    &--color-blue {
+        :root .light & {
+            @apply text-blue-600 bg-blue-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-blue-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-white bg-blue-600;
+
+            .uxf-chip__button {
+                @apply hover:bg-blue-700;
+            }
+        }
+    }
+
+    &--color-indigo {
+        :root .light & {
+            @apply text-indigo-600 bg-indigo-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-indigo-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-white bg-indigo-600;
+
+            .uxf-chip__button {
+                @apply hover:bg-indigo-700;
+            }
+        }
+    }
+
+    &--color-purple {
+        :root .light & {
+            @apply text-purple-600 bg-purple-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-purple-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-white bg-purple-600;
+
+            .uxf-chip__button {
+                @apply hover:bg-purple-700;
+            }
+        }
+    }
+
+    &--color-pink {
+        :root .light & {
+            @apply text-pink-600 bg-pink-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-pink-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-white bg-pink-600;
+
+            .uxf-chip__button {
+                @apply hover:bg-pink-700;
+            }
         }
     }
 }

package/css/chip.old.css

@@ -0,0 +1,37 @@
+.uxf-chip {
+    @apply inline-block rounded-lg py-1 px-2 text-xs h-fit;
+
+    &__text {
+        @apply truncate;
+    }
+
+    &--color-success {
+        :root .light & {
+            @apply text-success-600 bg-success-100;
+        }
+
+        :root .dark & {
+            @apply text-white bg-success-600;
+        }
+    }
+
+    &--color-warning {
+        :root .light & {
+            @apply text-warning-600 bg-warning-100;
+        }
+
+        :root .dark & {
+            @apply text-white bg-warning-600;
+        }
+    }
+
+    &--color-error {
+        :root .light & {
+            @apply text-error-600 bg-error-100;
+        }
+
+        :root .dark & {
+            @apply text-white bg-error-600;
+        }
+    }
+}

package/css/combobox.css

@@ -2,11 +2,15 @@
     @apply relative;
 
     &__button {
-        @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left
+        @apply relative flex h-9 w-full cursor-default flex-row items-center rounded-lg px-4 text-left
             outline-none  before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
 
+        .uxf-icon {
+            @apply h-4;
+        }
+
         :root .light & {
-            @apply bg-gray-100 text-lightHigh before:border-gray-200;
+            @apply bg-white text-lightHigh before:border-gray-200;
 
             .is-empty {
                 @apply text-lightLow;