@dmsi/wedgekit-react 0.0.229 → 0.0.230

package/dist/components/Upload.cjs

@@ -62,7 +62,7 @@ __export(Upload_exports, {
   Upload: () => Upload
 });
 module.exports = __toCommonJS(Upload_exports);
-var import_clsx5 = __toESM(require("clsx"), 1);
+var import_clsx6 = __toESM(require("clsx"), 1);
 
 // src/classNames.ts
 var import_clsx = __toESM(require("clsx"), 1);
@@ -417,8 +417,288 @@ var Button = (_a) => {
 };
 Button.displayName = "Button";
 
-// src/components/Upload.tsx
+// src/components/Stack.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx5.default)(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  justify === "between" && "justify-between",
+  justify === "around" && "justify-around"
+);
+var useGapClassNames = (sizing) => {
+  return (0, import_clsx5.default)(
+    sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+    sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+    sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+    sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
+  );
+};
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    minHeight,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id,
+    noGap,
+    marginTop,
+    marginBottom,
+    testid
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "margin",
+    "marginX",
+    "marginY",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "minHeight",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id",
+    "noGap",
+    "marginTop",
+    "marginBottom",
+    "testid"
+  ]);
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
+  const gapClassNames = useGapClassNames(sizing);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      id,
+      "data-testid": testid
+    }, props), {
+      style: {
+        height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
+        minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
+        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
+        width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
+        minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
+        border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
+        position: position !== void 0 ? position : void 0,
+        top: top !== void 0 ? `${top}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0
+      },
+      className: (0, import_clsx5.default)(
+        "scrollbar-thin",
+        "max-w-screen",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        width === "max" && "w-max",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+        margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
+        marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
+        marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
+        marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
+        marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        !noGap && gapClassNames,
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded"
+      ),
+      children
+    })
+  );
+};
+
+// src/components/Spinner.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "animate-spin",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "0s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.875s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.75s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.625s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.5s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.375s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.25s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.125s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/Upload.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Upload(props) {
   const _a = props, {
     isLoading,
@@ -437,11 +717,11 @@ function Upload(props) {
     "onRemove",
     "testid"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "label",
     {
       style: __spreadValues({}, style),
-      className: (0, import_clsx5.default)(
+      className: (0, import_clsx6.default)(
         "border border-dashed border-border-primary-normal",
         "flex flex-col items-center justify-center",
         "p-6",
@@ -452,7 +732,7 @@ function Upload(props) {
       ),
       "data-testid": testid,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           __spreadProps(__spreadValues({}, rest), {
             type: "file",
@@ -460,16 +740,37 @@ function Upload(props) {
             "data-testid": testid ? `${testid}-file-input` : void 0
           })
         ),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { testid: testid ? `${testid}-loading-icon` : void 0, name: "cached", className: "text-icon-primary-normal animate-spin" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { testid: testid ? `${testid}-loading-text` : void 0, color: "text-secondary-normal", children: "Loading..." })
-        ] }),
-        !value && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { testid: testid ? `${testid}-icon` : void 0, name: "cloud_upload", className: "text-icon-primary-normal" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { testid: testid ? `${testid}-text` : void 0, color: errorText ? "text-primary-error" : "text-secondary-normal", children: errorText ? errorText : text })
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Stack,
+          {
+            centered: true,
+            items: "center",
+            justify: "center",
+            sizing: "container",
+            padding: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spinner, { size: "large" })
+          }
+        ),
+        !value && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Icon,
+            {
+              testid: testid ? `${testid}-icon` : void 0,
+              name: "cloud_upload",
+              className: "text-icon-primary-normal"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Paragraph,
+            {
+              testid: testid ? `${testid}-text` : void 0,
+              color: errorText ? "text-primary-error" : "text-secondary-normal",
+              children: errorText ? errorText : text
+            }
+          )
         ] }),
-        value && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        value && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "img",
             {
               "data-testid": testid ? `${testid}-uploaded-image` : void 0,
@@ -478,7 +779,7 @@ function Upload(props) {
               className: "absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Button,
             {
               testid: testid ? `${testid}-remove-image-button` : void 0,
@@ -488,7 +789,7 @@ function Upload(props) {
                 onRemove == null ? void 0 : onRemove();
               },
               iconOnly: true,
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "delete" })
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "delete" })
             }
           ) })
         ] })

package/dist/components/Upload.js

@@ -1,3 +1,9 @@
+import {
+  Spinner
+} from "../chunk-PLMGI5K5.js";
+import {
+  Stack
+} from "../chunk-BOWQUDUU.js";
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
@@ -60,13 +66,34 @@ function Upload(props) {
             "data-testid": testid ? `${testid}-file-input` : void 0
           })
         ),
-        isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Icon, { testid: testid ? `${testid}-loading-icon` : void 0, name: "cached", className: "text-icon-primary-normal animate-spin" }),
-          /* @__PURE__ */ jsx(Paragraph, { testid: testid ? `${testid}-loading-text` : void 0, color: "text-secondary-normal", children: "Loading..." })
-        ] }),
+        isLoading && /* @__PURE__ */ jsx(
+          Stack,
+          {
+            centered: true,
+            items: "center",
+            justify: "center",
+            sizing: "container",
+            padding: true,
+            children: /* @__PURE__ */ jsx(Spinner, { size: "large" })
+          }
+        ),
         !value && !isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Icon, { testid: testid ? `${testid}-icon` : void 0, name: "cloud_upload", className: "text-icon-primary-normal" }),
-          /* @__PURE__ */ jsx(Paragraph, { testid: testid ? `${testid}-text` : void 0, color: errorText ? "text-primary-error" : "text-secondary-normal", children: errorText ? errorText : text })
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              testid: testid ? `${testid}-icon` : void 0,
+              name: "cloud_upload",
+              className: "text-icon-primary-normal"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Paragraph,
+            {
+              testid: testid ? `${testid}-text` : void 0,
+              color: errorText ? "text-primary-error" : "text-secondary-normal",
+              children: errorText ? errorText : text
+            }
+          )
         ] }),
         value && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.229",
+  "version": "0.0.230",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Upload.tsx

@@ -4,88 +4,104 @@ import { componentGap } from "../classNames";
 import { Icon } from "./Icon";
 import { Paragraph } from "./Paragraph";
 import { Button } from "./Button";
+import { Stack } from "./Stack";
+import { Spinner } from "./Spinner";
 
 export type UploadProps = {
-    isLoading?: boolean;
-    text?: string;
-    errorText?: string;
-    onRemove?: () => void;
-    testid?: string;
+  isLoading?: boolean;
+  text?: string;
+  errorText?: string;
+  onRemove?: () => void;
+  testid?: string;
 } & ComponentProps<"input">;
 
 export function Upload(props: UploadProps) {
-    const {
-        isLoading,
-        style,
-        errorText,
-        text = 'Upload your file',
-        value,
-        onRemove,
-        testid,
-        ...rest
-    } = props;
+  const {
+    isLoading,
+    style,
+    errorText,
+    text = "Upload your file",
+    value,
+    onRemove,
+    testid,
+    ...rest
+  } = props;
 
-    return (
-        <label
-            style={{
-                ...style,
-            }}
-            className={clsx(
-                "border border-dashed border-border-primary-normal",
-                "flex flex-col items-center justify-center",
-                "p-6",
-                "cursor-pointer",
-                "relative",
-                "w-full h-[166px] desktop:w-[340px] desktop:h-[190px]",
-                componentGap,
-            )}
-            data-testid={testid}
+  return (
+    <label
+      style={{
+        ...style,
+      }}
+      className={clsx(
+        "border border-dashed border-border-primary-normal",
+        "flex flex-col items-center justify-center",
+        "p-6",
+        "cursor-pointer",
+        "relative",
+        "w-full h-[166px] desktop:w-[340px] desktop:h-[190px]",
+        componentGap,
+      )}
+      data-testid={testid}
+    >
+      <input
+        {...rest}
+        type="file"
+        className="sr-only"
+        data-testid={testid ? `${testid}-file-input` : undefined}
+      />
+
+      {isLoading && (
+        <Stack
+          centered
+          items="center"
+          justify="center"
+          sizing="container"
+          padding
         >
-            <input
-                {...rest}
-                type="file"
-                className="sr-only"
-                data-testid={testid ? `${testid}-file-input` : undefined}
-            />
+          <Spinner size="large" />
+        </Stack>
+      )}
 
-            {isLoading && (
-                <>
-                    <Icon testid={testid ? `${testid}-loading-icon` : undefined} name="cached" className="text-icon-primary-normal animate-spin" />
-                    <Paragraph testid={testid ? `${testid}-loading-text` : undefined} color="text-secondary-normal">Loading...</Paragraph>
-                </>
-            )}
-            
-            {!value && !isLoading && (
-                <>
-                    <Icon testid={testid ? `${testid}-icon` : undefined} name="cloud_upload" className="text-icon-primary-normal" />
-                    <Paragraph testid={testid ? `${testid}-text` : undefined} color={errorText ? 'text-primary-error' : 'text-secondary-normal'}>{errorText ? errorText : text}</Paragraph>
-                </>
-            )}
+      {!value && !isLoading && (
+        <>
+          <Icon
+            testid={testid ? `${testid}-icon` : undefined}
+            name="cloud_upload"
+            className="text-icon-primary-normal"
+          />
+          <Paragraph
+            testid={testid ? `${testid}-text` : undefined}
+            color={errorText ? "text-primary-error" : "text-secondary-normal"}
+          >
+            {errorText ? errorText : text}
+          </Paragraph>
+        </>
+      )}
 
-            {value && (
-                <>
-                    <img
-                        data-testid={testid ? `${testid}-uploaded-image` : undefined}
-                        src={value as string}
-                        alt=""
-                        className="absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
-                    />
+      {value && (
+        <>
+          <img
+            data-testid={testid ? `${testid}-uploaded-image` : undefined}
+            src={value as string}
+            alt=""
+            className="absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
+          />
 
-                    <div className="absolute right-2 top-2">
-                        <Button
-                            testid={testid ? `${testid}-remove-image-button` : undefined}
-                            onClick={(e: MouseEvent) => {
-                                e.preventDefault();
-                                e.stopPropagation();
+          <div className="absolute right-2 top-2">
+            <Button
+              testid={testid ? `${testid}-remove-image-button` : undefined}
+              onClick={(e: MouseEvent) => {
+                e.preventDefault();
+                e.stopPropagation();
 
-                                onRemove?.();
-                            }}
-                            iconOnly
-                            leftIcon={<Icon name="delete" />}
-                        />
-                    </div>
-                </>
-            )}
-        </label>
-    )
-}
+                onRemove?.();
+              }}
+              iconOnly
+              leftIcon={<Icon name="delete" />}
+            />
+          </div>
+        </>
+      )}
+    </label>
+  );
+}