@uxf/ui 1.0.0-beta.57 → 1.0.0-beta.59

package/css/radio-group.css

@@ -23,6 +23,18 @@
         .uxf-radio-group__option {
             @apply focus-visible:ring-blue-500 focus-visible:ring-offset-white;
         }
+
+        .uxf-radio-group__option__label {
+            @apply text-gray-600;
+        }
+
+        .uxf-radio-group__option__wrapper {
+            &.is-selected {
+                .uxf-radio-group__option__label {
+                    @apply text-gray-900;
+                }
+            }
+        }
     }
 
     :root .dark & {
@@ -31,14 +43,22 @@
         }
 
         .uxf-radio-group__option__label {
-            @apply text-white;
+            @apply text-white/80;
+        }
+
+        .uxf-radio-group__option__wrapper {
+            &.is-selected {
+                .uxf-radio-group__option__label {
+                    @apply text-white;
+                }
+            }
         }
     }
 }
 
 .uxf-radio-group--list {
     .uxf-radio-group__options-wrapper {
-        @apply divide-y divide-gray-200;
+        @apply divide-y;
     }
 
     .uxf-radio-group__option__wrapper {
@@ -50,12 +70,20 @@
     }
 
     :root .light & {
+        .uxf-radio-group__options-wrapper {
+            @apply divide-gray-200;
+        }
+
         .uxf-radio-group--list__option {
             @apply focus-visible:ring-blue-500 focus-visible:ring-offset-white;
         }
     }
 
     :root .dark & {
+        .uxf-radio-group__options-wrapper {
+            @apply divide-gray-800;
+        }
+
         .uxf-radio-group--list__option {
             @apply focus-visible:ring-blue-500 focus-visible:ring-offset-gray-900;
         }
@@ -68,27 +96,32 @@
 
 .uxf-radio-group--radioButton {
     .uxf-radio-group__options-wrapper {
-        @apply flex flex-wrap space-x-2;
+        @apply flex flex-wrap gap-2;
     }
 
     .uxf-radio-group__option__wrapper {
-        @apply flex-col-reverse h-[82px] min-w-[112px] p-3 border rounded-lg;
+        @apply flex-col-reverse min-w-[112px] p-3 relative
+        before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
 
         &.is-selected {
-            @apply border-2;
+            @apply before:border-2;
         }
     }
 
+    .uxf-radio-group__option__label {
+        @apply pt-4 text-sm;
+    }
+
     :root .light & {
         .uxf-radio-group__option {
             @apply focus-visible:ring-blue-500;
         }
 
         .uxf-radio-group__option__wrapper {
-            @apply border-gray-400;
+            @apply before:border-gray-400;
 
             &.is-selected {
-                @apply border-blue-500;
+                @apply before:border-blue-500;
             }
         }
     }
@@ -102,13 +135,9 @@
             @apply border-gray-400;
 
             &.is-selected {
-                @apply border-blue-500;
+                @apply before:border-blue-500;
             }
         }
-
-        .uxf-radio-group__option__label {
-            @apply text-white;
-        }
     }
 }
 

package/css/radio.css

@@ -1,5 +1,5 @@
 .uxf-radio {
-    @apply flex items-center justify-center h-6 w-6 border rounded-full transition;
+    @apply flex items-center justify-center h-6 w-6 border rounded-full transition focus-visible:ring-2;
 
     &__label {
         @apply sr-only;
@@ -16,7 +16,7 @@
     }
 
     :root .light & {
-        @apply border-gray-400 focus-visible:ring-blue-500 focus-visible:ring-2;
+        @apply border-gray-400 focus-visible:ring-blue-500;
 
         &.is-selected {
             @apply bg-blue-500 border-none;

package/css/textarea.css

@@ -1,51 +1,89 @@
 .uxf-textarea {
     &__wrapper {
-        @apply rounded-md shadow-sm sm:text-sm
-        border border-gray-300 p-2;
+        @apply rounded-md text-base
+        border p-2;
+
+        :root .light & {
+            @apply bg-gray-100 text-gray-900 border-gray-200;
+        }
+        :root .dark & {
+            @apply bg-gray-800 text-gray-300 border-gray-700;
+        }
     }
 
     &__element {
         @apply bg-transparent outline-none resize-none;
+
+        :root .light & {
+            @apply placeholder:text-gray-400;
+        }
+        :root .dark & {
+            @apply placeholder:text-gray-400;
+        }
     }
 
     &.is-focused {
         .uxf-textarea__wrapper {
-            @apply border-primary-500 ring-1 ring-inset ring-primary-500 ring-offset-0;
+            @apply ring-2 ring-inset ring-offset-0;
+
+            :root .light & {
+                @apply ring-primary-500;
+            }
+            :root .dark & {
+                @apply ring-primary-500;
+            }
         }
     }
 
     &.is-disabled {
         @apply cursor-not-allowed;
         .uxf-textarea__wrapper {
-            @apply bg-gray-50;
+            :root .light & {
+                @apply bg-gray-300;
+            }
+            :root .dark & {
+                @apply bg-gray-600;
+            }
         }
 
         .uxf-textarea__element {
-            @apply cursor-not-allowed text-gray-500;
+            @apply cursor-not-allowed;
         }
     }
 
     &.is-readonly {
-        @apply cursor-not-allowed;
+        @apply cursor-text;
+
+        .uxf-textarea__element {
+            @apply cursor-text;
+        }
 
         .uxf-textarea__wrapper {
-            @apply ring-0 border-gray-300;
+            @apply ring-0;
+
+            :root .light & {
+                @apply border-gray-300;
+            }
+
+            :root .dark & {
+                @apply border-gray-500;
+            }
         }
 
         .uxf-textarea__element {
-            @apply cursor-not-allowed;
+            @apply cursor-not-allowed pointer-events-none;
         }
     }
 
     &.is-invalid {
         &.is-focused {
             .uxf-textarea__wrapper {
-                @apply ring-1 ring-inset ring-error-500 border-error-500 ring-offset-0;
+                @apply ring-0;
             }
         }
 
         .uxf-textarea__wrapper {
-            @apply border-error-500 placeholder-error-300;
+            @apply border-error-500;
 
             .uxf-textarea__element {
                 @apply text-error-900 placeholder-error-300;

package/dropdown/dropdown.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
 const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_1 = __importDefault(require("react"));
-const forward_ref_1 = require("../utils/forward-ref");
-function Item(props, ref) {
+const Item = (0, forwardRef_1.forwardRef)("Item.", (props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
     const { children, className, ...restProps } = props;
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
@@ -17,11 +17,11 @@ function Item(props, ref) {
         ...restProps,
     });
     return (react_1.default.createElement("a", { ref: ref, ...anchorProps }, children));
-}
-function Items(props, ref) {
+});
+const Items = (0, forwardRef_1.forwardRef)("Items", (props, ref) => {
     return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropdown__items", props.className), ref: ref, role: props.role }, props.children));
-}
+});
 exports.Dropdown = {
-    Item: (0, forward_ref_1.forwardRef)("Item.", Item),
-    Items: (0, forward_ref_1.forwardRef)("Items", Items),
+    Item,
+    Items,
 };

package/dropdown/index.d.ts

@@ -1 +1 @@
-export { Dropdown } from "./dropdown";
+export * from "./dropdown";

package/dropdown/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.Dropdown = void 0;
-var dropdown_1 = require("./dropdown");
-Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return dropdown_1.Dropdown; } });
+__exportStar(require("./dropdown"), exports);

package/error-message/error-message.d.ts

@@ -3,5 +3,5 @@ interface Props {
     id?: string | undefined;
     children?: ReactNode;
 }
-declare function ErrorMessage(props: Props): JSX.Element;
-export default ErrorMessage;
+export declare function ErrorMessage(props: Props): JSX.Element;
+export {};

package/error-message/error-message.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
 const react_1 = __importDefault(require("react"));
 function ErrorMessage(props) {
     return (react_1.default.createElement("p", { id: props.id, className: "uxf-error-message" }, props.children));
 }
-exports.default = ErrorMessage;
+exports.ErrorMessage = ErrorMessage;

package/error-message/index.d.ts

@@ -1 +1 @@
-export { default as ErrorMessage } from "./error-message";
+export * from "./error-message";

package/error-message/index.js

@@ -1,8 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.ErrorMessage = void 0;
-var error_message_1 = require("./error-message");
-Object.defineProperty(exports, "ErrorMessage", { enumerable: true, get: function () { return __importDefault(error_message_1).default; } });
+__exportStar(require("./error-message"), exports);

package/form-control/form-control.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormControl = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_1 = __importDefault(require("react"));
 const label_1 = require("../label");
-const forward_ref_1 = require("../utils/forward-ref");
 // TODO - tohle asi ještě nějak předělám (ten interface je trochu nelogickej)
-exports.FormControl = (0, forward_ref_1.forwardRef)("FormControl", (props, ref) => {
+exports.FormControl = (0, forwardRef_1.forwardRef)("FormControl", (props, ref) => {
     const helperTextClassName = (0, cx_1.cx)("uxf-helper-text", props.errorId && classes_1.CLASSES.IS_INVALID);
     return (react_1.default.createElement("div", { className: props.className, ref: ref },
         react_1.default.createElement(label_1.Label, { isRequired: props.isRequired, htmlFor: props.inputId, form: props.form }, props.label),

package/hooks/use-dropdown.js

@@ -20,7 +20,9 @@ function useDropdown(placement, matchWidth = false) {
                 },
             }),
         ],
-        whileElementsMounted: react_dom_1.autoUpdate,
+        whileElementsMounted: (reference, floating, update) => (0, react_dom_1.autoUpdate)(reference, floating, update, {
+            elementResize: typeof ResizeObserver !== "undefined",
+        }),
     });
 }
 exports.useDropdown = useDropdown;

package/icon/icon.d.ts

@@ -13,5 +13,5 @@ export declare type IconProps = {
     size?: number;
     style?: Partial<CSSProperties>;
 } & NameOrComponentType;
-declare const _default: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
-export default _default;
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+export {};

package/icon/icon.js

@@ -3,12 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const rem_1 = require("@uxf/styles/units/rem");
 const react_1 = __importDefault(require("react"));
 const context_1 = require("../context");
-const cx_1 = require("../utils/cx");
-const forward_ref_1 = require("../utils/forward-ref");
-const rem_1 = require("../utils/rem");
-function Icon(props, ref) {
+exports.Icon = (0, forwardRef_1.forwardRef)("Icon", (props, ref) => {
     var _a, _b;
     const componentContext = (0, context_1.useComponentContext)("icon");
     const CustomComponent = props.Component;
@@ -21,7 +22,10 @@ function Icon(props, ref) {
             ...((_b = props.style) !== null && _b !== void 0 ? _b : {}),
         }
         : props.style;
-    return CustomComponent ? (react_1.default.createElement(CustomComponent, { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style })) : (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style, viewBox: `0 0 ${componentContext.iconsConfig[props.name].w} ${componentContext.iconsConfig[props.name].h}` },
+    if (CustomComponent) {
+        return (react_1.default.createElement(CustomComponent, { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style }));
+    }
+    const icon = componentContext.iconsConfig[props.name];
+    return (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style, viewBox: `0 0 ${icon.w} ${icon.h}` },
         react_1.default.createElement("use", { xlinkHref: `${componentContext.spriteFilePath}#icon-sprite--${props.name}` })));
-}
-exports.default = (0, forward_ref_1.forwardRef)("Icon", Icon);
+});

package/icon/icon.stories.js

@@ -4,11 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-const index_1 = require("./index");
+const icon_1 = require("./icon");
 const react_1 = __importDefault(require("react"));
+function PinIcon(props) {
+    return (react_1.default.createElement("svg", { viewBox: "0 0 29.65 40", ...props },
+        react_1.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", clipRule: "evenodd" })));
+}
 exports.default = {
     title: "UI/Icon",
-    component: index_1.Icon,
+    component: icon_1.Icon,
 };
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-2" },
@@ -20,7 +24,7 @@ function Default() {
             react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
             ", Size: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "16")),
-        react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 16, className: "text-red-600" }),
+        react_1.default.createElement(icon_1.Icon, { Component: PinIcon, size: 16, className: "text-red-600" }),
         react_1.default.createElement("div", { className: "mb-2 text-sm" },
             "Type: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
@@ -29,7 +33,7 @@ function Default() {
             react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
             ", Size: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "24")),
-        react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 24, className: "text-blue-600" }),
+        react_1.default.createElement(icon_1.Icon, { Component: PinIcon, size: 24, className: "text-blue-600" }),
         react_1.default.createElement("div", { className: "mb-2 text-sm" },
             "Type: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
@@ -38,7 +42,7 @@ function Default() {
             react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
             ", Size: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "48")),
-        react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 48, className: "text-green-600" }),
+        react_1.default.createElement(icon_1.Icon, { Component: PinIcon, size: 48, className: "text-green-600" }),
         react_1.default.createElement("div", { className: "mb-2 text-sm" },
             "Type: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
@@ -47,7 +51,7 @@ function Default() {
             react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
             ", Size: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "16")),
-        react_1.default.createElement(index_1.Icon, { name: "test", size: 16, className: "text-red-600" }),
+        react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16, className: "text-red-600" }),
         react_1.default.createElement("div", { className: "mb-2 text-sm" },
             "Type: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
@@ -56,7 +60,7 @@ function Default() {
             react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
             ", Size: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "24")),
-        react_1.default.createElement(index_1.Icon, { name: "test", size: 24, className: "text-blue-600" }),
+        react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 24, className: "text-blue-600" }),
         react_1.default.createElement("div", { className: "mb-2 text-sm" },
             "Type: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
@@ -65,6 +69,6 @@ function Default() {
             react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
             ", Size: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "48")),
-        react_1.default.createElement(index_1.Icon, { name: "test", size: 48, className: "text-green-600" })));
+        react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 48, className: "text-green-600" })));
 }
 exports.Default = Default;

package/icon/index.d.ts

@@ -1,5 +1 @@
-export { default as Icon } from "./icon";
-export { default as PinIcon } from "./pin-icon";
-export { default as ChevronDownIcon } from "./chevron-down-icon";
-export { default as ChevronUpIcon } from "./chevron-up-icon";
-export { default as CameraIcon } from "./camera-icon";
+export * from "./icon";

package/icon/index.js

@@ -1,16 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.CameraIcon = exports.ChevronUpIcon = exports.ChevronDownIcon = exports.PinIcon = exports.Icon = void 0;
-var icon_1 = require("./icon");
-Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
-var pin_icon_1 = require("./pin-icon");
-Object.defineProperty(exports, "PinIcon", { enumerable: true, get: function () { return __importDefault(pin_icon_1).default; } });
-var chevron_down_icon_1 = require("./chevron-down-icon");
-Object.defineProperty(exports, "ChevronDownIcon", { enumerable: true, get: function () { return __importDefault(chevron_down_icon_1).default; } });
-var chevron_up_icon_1 = require("./chevron-up-icon");
-Object.defineProperty(exports, "ChevronUpIcon", { enumerable: true, get: function () { return __importDefault(chevron_up_icon_1).default; } });
-var camera_icon_1 = require("./camera-icon");
-Object.defineProperty(exports, "CameraIcon", { enumerable: true, get: function () { return __importDefault(camera_icon_1).default; } });
+__exportStar(require("./icon"), exports);

package/icon/theme.d.ts

@@ -1,3 +1,2 @@
-export interface IconsSet {
-    test: true;
+export interface IconsSet extends Record<string, boolean> {
 }

package/image-gallery/components/close-button.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const icon_close_1 = __importDefault(require("./icon-close"));
+const icon_1 = require("../../icon");
 function CloseButton(props) {
-    return (react_1.default.createElement("button", { className: "bg-black bg-opacity-50 p-3", onClick: () => props.onClick() },
-        react_1.default.createElement(icon_close_1.default, null)));
+    return (react_1.default.createElement("button", { className: "bg-black bg-opacity-50 p-5", onClick: () => props.onClick() },
+        react_1.default.createElement(icon_1.Icon, { className: "h-6 w-6 text-white", name: "xmarkLarge" })));
 }
 exports.default = CloseButton;

package/image-gallery/components/next-button.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const icon_chevron_right_1 = __importDefault(require("./icon-chevron-right"));
+const icon_1 = require("../../icon");
 function NextButton(props) {
-    return (react_1.default.createElement("button", { className: "pointer-events-auto rounded-full bg-black bg-opacity-50  p-2", onClick: props.onClick },
-        react_1.default.createElement(icon_chevron_right_1.default, null)));
+    return (react_1.default.createElement("button", { className: "pointer-events-auto rounded-full bg-black bg-opacity-50  p-3", onClick: props.onClick },
+        react_1.default.createElement(icon_1.Icon, { className: "h-8 w-8 text-white", name: "chevronRight" })));
 }
 exports.default = NextButton;

package/image-gallery/components/previous-button.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const icon_chevron_left_1 = __importDefault(require("./icon-chevron-left"));
+const icon_1 = require("../../icon");
 function PreviousButton(props) {
-    return (react_1.default.createElement("button", { className: "pointer-events-auto rounded-full bg-black bg-opacity-50 p-2", onClick: props.onClick },
-        react_1.default.createElement(icon_chevron_left_1.default, null)));
+    return (react_1.default.createElement("button", { className: "pointer-events-auto rounded-full bg-black bg-opacity-50 p-3", onClick: props.onClick },
+        react_1.default.createElement(icon_1.Icon, { className: "h-8 w-8 text-white", name: "chevronLeft" })));
 }
 exports.default = PreviousButton;

package/input/index.d.ts

@@ -1,13 +1,12 @@
 /// <reference types="react" />
-import { Input as RootInput } from "./input";
-import LeftAddon from "./input-left-addon";
-import LeftElement from "./input-left-element";
-import RightAddon from "./input-right-addon";
-import RightElement from "./input-right-element";
-export declare const Input: typeof RootInput & {
+import { InputLeftAddon } from "./input-left-addon";
+import { InputLeftElement } from "./input-left-element";
+import { InputRightAddon } from "./input-right-addon";
+import { InputRightElement } from "./input-right-element";
+export declare const Input: import("react").ForwardRefExoticComponent<import("./input").InputProps & import("react").RefAttributes<HTMLInputElement>> & {
     Element: import("react").ForwardRefExoticComponent<import("./input-element").InputElementProps & import("react").RefAttributes<HTMLInputElement>>;
-    LeftElement: typeof LeftElement;
-    RightElement: typeof RightElement;
-    LeftAddon: typeof LeftAddon;
-    RightAddon: typeof RightAddon;
+    LeftElement: typeof InputLeftElement;
+    RightElement: typeof InputRightElement;
+    LeftAddon: typeof InputLeftAddon;
+    RightAddon: typeof InputRightAddon;
 };

package/input/index.js

@@ -1,19 +1,16 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const input_1 = require("./input");
-const input_element_1 = __importDefault(require("./input-element"));
-const input_left_addon_1 = __importDefault(require("./input-left-addon"));
-const input_left_element_1 = __importDefault(require("./input-left-element"));
-const input_right_addon_1 = __importDefault(require("./input-right-addon"));
-const input_right_element_1 = __importDefault(require("./input-right-element"));
+const input_element_1 = require("./input-element");
+const input_left_addon_1 = require("./input-left-addon");
+const input_left_element_1 = require("./input-left-element");
+const input_right_addon_1 = require("./input-right-addon");
+const input_right_element_1 = require("./input-right-element");
 exports.Input = Object.assign(input_1.Input, {
-    Element: input_element_1.default,
-    LeftElement: input_left_element_1.default,
-    RightElement: input_right_element_1.default,
-    LeftAddon: input_left_addon_1.default,
-    RightAddon: input_right_addon_1.default,
+    Element: input_element_1.InputElement,
+    LeftElement: input_left_element_1.InputLeftElement,
+    RightElement: input_right_element_1.InputRightElement,
+    LeftAddon: input_left_addon_1.InputLeftAddon,
+    RightAddon: input_right_addon_1.InputRightAddon,
 });

package/input/input-element.d.ts

@@ -17,5 +17,5 @@ export interface InputElementProps extends FormControlProps<string> {
     pattern?: string;
     step?: number | string;
 }
-declare const _default: React.ForwardRefExoticComponent<InputElementProps & React.RefAttributes<HTMLInputElement>>;
-export default _default;
+export declare const InputElement: React.ForwardRefExoticComponent<InputElementProps & React.RefAttributes<HTMLInputElement>>;
+export {};