@asdp/ferryui 0.1.22-dev.9630 → 0.1.22-dev.9698

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Label, Text, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea, Link } from '@fluentui/react-components';
+import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, InfoLabel, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Label, Text, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea, Link } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
 import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular } from '@fluentui/react-icons';
@@ -15890,8 +15890,8 @@ var uploadStyles = makeStyles({
     pointerEvents: "none"
   },
   filePreviewImage: {
-    width: "48px",
-    height: "48px",
+    width: "32px",
+    height: "32px",
     borderRadius: tokens.borderRadiusSmall,
     objectFit: "cover"
   },
@@ -15899,6 +15899,18 @@ var uploadStyles = makeStyles({
     maxWidth: "100%",
     maxHeight: "70vh",
     objectFit: "contain"
+  },
+  infoLabel: {
+    '& [role="note"]': {
+      backgroundColor: "black",
+      color: "white"
+    }
+  },
+  label: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "block"
   }
 });
 var FileUpload = React.forwardRef(
@@ -15914,7 +15926,8 @@ var FileUpload = React.forwardRef(
     language = "id",
     labels: customLabels,
     pdfIcon,
-    downloadTemplateDocument = false
+    downloadTemplateDocument = false,
+    infoLabel
   }, ref) => {
     const mergedLabels = { ...DEFAULT_LABELS39[language], ...customLabels };
     const styles = uploadStyles();
@@ -16047,8 +16060,11 @@ var FileUpload = React.forwardRef(
             return /* @__PURE__ */ jsxs(
               Field,
               {
+                ref,
                 required,
-                label: /* @__PURE__ */ jsx(Body1, { children: label }),
+                label: {
+                  children: (_, slotProps) => infoLabel ? /* @__PURE__ */ jsx(InfoLabel, { ...slotProps, info: infoLabel, className: styles.infoLabel, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: label }) }) : /* @__PURE__ */ jsx(Body1, { className: styles.label, children: label })
+                },
                 className: styles.fieldContainer,
                 children: [
                   /* @__PURE__ */ jsx(
@@ -16128,8 +16144,10 @@ var FileUpload = React.forwardRef(
               {
                 ref,
                 required,
-                label: /* @__PURE__ */ jsx(Body1, { children: label }),
                 className: styles.fieldContainer,
+                label: {
+                  children: (_, slotProps) => infoLabel ? /* @__PURE__ */ jsx(InfoLabel, { ...slotProps, info: infoLabel, className: styles.infoLabel, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: label }) }) : /* @__PURE__ */ jsx(Body1, { className: styles.label, children: label })
+                },
                 children: [
                   /* @__PURE__ */ jsxs(
                     Container,