@plone/components
Version:
ReactJS components for Plone
1,469 lines (1,344 loc) • 119 kB
JavaScript
"use client"
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/quanta/index.ts
var quanta_exports = {};
__export(quanta_exports, {
Accordion: () => Accordion,
AccordionItem: () => AccordionItem,
AccordionItemTrigger: () => AccordionItemTrigger,
AccordionPanel: () => AccordionPanel,
AlignWidget: () => AlignWidget,
Breadcrumb: () => Breadcrumb,
Breadcrumbs: () => Breadcrumbs,
Button: () => Button,
Calendar: () => Calendar,
CalendarGridHeader: () => CalendarGridHeader,
CalendarHeader: () => CalendarHeader,
Checkbox: () => Checkbox,
CheckboxGroup: () => CheckboxGroup,
Container: () => Container,
CustomRadio: () => CustomRadio,
DateInput: () => DateInput,
DatePicker: () => DatePicker,
DateTimePicker: () => DateTimePicker,
Description: () => Description,
Field: () => Field,
FieldError: () => FieldError,
FieldGroup: () => FieldGroup,
FieldWrapper: () => FieldWrapper,
GridList: () => GridList,
GridListItem: () => GridListItem,
Input: () => Input,
Label: () => Label,
Link: () => Link,
Menu: () => Menu,
MenuItem: () => MenuItem,
MenuSection: () => MenuSection,
MenuSectionHeader: () => MenuSectionHeader,
MenuSeparator: () => MenuSeparator,
MenuTrigger: () => MenuTrigger,
MultiSelect: () => MultiSelect,
Popover: () => Popover,
Radio: () => Radio,
RadioGroup: () => RadioGroup,
Select: () => Select,
SelectItem: () => SelectItem,
SelectListBox: () => SelectListBox,
SelectSection: () => SelectSection,
SelectSectionHeader: () => SelectSectionHeader,
Separator: () => Separator,
SizeWidget: () => SizeWidget,
Spinner: () => Spinner,
SubmenuTrigger: () => SubmenuTrigger,
Tab: () => Tab,
TabList: () => TabList,
TabPanel: () => TabPanel,
Tabs: () => Tabs,
Tag: () => Tag2,
TagGroup: () => TagGroup2,
TextField: () => TextField,
TimeField: () => TimeField,
Toolbar: () => Toolbar,
WidthWidget: () => WidthWidget,
fieldBorderStyles: () => fieldBorderStyles,
fieldGroupStyles: () => fieldGroupStyles,
inputStyles: () => inputStyles
});
module.exports = __toCommonJS(quanta_exports);
// src/components/Button/Button.quanta.tsx
var import_react2 = require("react");
var import_react_aria_components2 = require("react-aria-components");
var import_tailwind_variants2 = require("tailwind-variants");
// src/components/utils.ts
var import_react = require("react");
var import_react_aria_components = require("react-aria-components");
var import_tailwind_merge = require("tailwind-merge");
var import_tailwind_variants = require("tailwind-variants");
var focusRing = (0, import_tailwind_variants.tv)({
base: "outline-quanta-cobalt outline forced-colors:outline-[Highlight]",
variants: {
isFocusVisible: {
false: "outline-0",
true: "outline-3"
}
}
});
function composeTailwindRenderProps(className, tw) {
return (0, import_react_aria_components.composeRenderProps)(className, (className2) => (0, import_tailwind_merge.twMerge)(tw, className2));
}
function useSlot(initialState = true) {
const [hasSlot, setHasSlot] = (0, import_react.useState)(initialState);
const hasRun = (0, import_react.useRef)(false);
const ref = (0, import_react.useCallback)((el) => {
hasRun.current = true;
setHasSlot(!!el);
}, []);
(0, import_react.useLayoutEffect)(() => {
if (!hasRun.current) {
setHasSlot(false);
}
}, []);
return [ref, hasSlot];
}
// src/components/Button/Button.quanta.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var button = (0, import_tailwind_variants2.tv)({
extend: focusRing,
base: `
cursor-default rounded-md px-3 py-1.5 text-center text-base font-medium transition
hover:shadow-sm
focus:shadow-sm
active:shadow-md
has-[svg]:rounded-full has-[svg]:p-1.5 has-[svg]:text-xs
`,
variants: {
variant: {
neutral: `
bg-quanta-air text-quanta-iron
hover:bg-quanta-snow
focus:bg-quanta-snow
active:bg-quanta-silver
has-[svg]:text-quanta-iron
pressed:bg-quanta-silver
`,
primary: `
focus:bg-quanta-artic focus:text-quanta-royal
bg-quanta-air text-quanta-sapphire
hover:bg-quanta-arctic hover:text-quanta-royal
active:bg-quanta-sky active:text-quanta-royal
pressed:bg-quanta-cobalt
`,
destructive: `
bg-quanta-air text-quanta-candy
hover:bg-quanta-ballet hover:text-quanta-wine
focus:bg-quanta-ballet focus:text-quanta-wine
active:bg-quanta-flamingo active:text-quanta-wine
pressed:bg-quanta-rose
`,
icon: `
focus:bg-quanta-artic
flex items-center justify-center border-0 bg-quanta-air p-1 text-quanta-iron
hover:bg-quanta-snow
active:bg-quanta-silver
has-[svg]:text-quanta-iron
pressed:bg-quanta-cobalt pressed:[&_svg]:text-white
`
},
accent: {
true: ""
},
size: {
S: `
text-xs
has-[svg]:p-1.5
[&_svg]:size-5
`,
L: `
px-4.5 py-3 text-xl/6
has-[svg]:p-3 has-[svg]:text-xs
`
},
isDisabled: {
true: `
cursor-not-allowed bg-quanta-air text-quanta-smoke
hover:bg-quanta-air hover:text-quanta-silver
has-[svg]:text-quanta-smoke has-[svg]:hover:text-quanta-silver
`
}
},
compoundVariants: [
{
variant: "neutral",
accent: true,
class: `
bg-quanta-snow text-quanta-iron
hover:bg-quanta-smoke
focus:bg-quanta-smoke
active:bg-quanta-silver
pressed:bg-quanta-smoke
`
},
{
variant: "primary",
accent: true,
class: `
bg-quanta-sapphire text-quanta-air
hover:bg-quanta-royal hover:text-quanta-air
focus:bg-quanta-royal focus:text-quanta-air
active:bg-quanta-cobalt active:text-quanta-air
pressed:bg-quanta-cobalt
`
},
{
variant: "icon",
accent: true,
class: `
focus:bg-quanta-artic
flex items-center justify-center border-0 bg-quanta-air p-1 text-quanta-iron
hover:bg-quanta-snow
active:bg-quanta-silver
has-[svg]:text-quanta-iron
pressed:bg-quanta-cobalt pressed:[&_svg]:text-white
`
},
{
variant: "destructive",
accent: true,
class: `
bg-quanta-candy text-quanta-air
hover:bg-quanta-wine hover:text-quanta-air
focus:bg-quanta-wine focus:text-quanta-air
active:bg-quanta-rose active:text-quanta-air
pressed:bg-quanta-rose
`
},
{
isDisabled: true,
accent: true,
class: `
bg-quanta-snow text-quanta-silver
hover:bg-quanta-smoke
`
}
],
defaultVariants: {
variant: "neutral"
}
});
function Button(props) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components2.Button,
{
...props,
className: (0, import_react_aria_components2.composeRenderProps)(
props.className,
(className, renderProps) => button({
...renderProps,
variant: props.variant,
size: props.size,
accent: props.accent,
className
})
)
}
);
}
// src/components/Breadcrumbs/Breadcrumbs.quanta.tsx
var import_react115 = require("react");
// src/components/icons/AddIcon.tsx
var import_react4 = require("react");
// src/components/Icon/Icon.tsx
var import_react3 = __toESM(require("react"), 1);
var import_utils2 = require("@react-spectrum/utils");
var import_utils3 = require("@react-aria/utils");
var import_clsx = __toESM(require("clsx"), 1);
var import_tailwind_variants3 = require("tailwind-variants");
var icon = (0, import_tailwind_variants3.tv)({
base: "q icon",
variants: {
size: {
"2xs": "icon-2xs",
xs: "icon-xs",
sm: "icon-sm",
base: "icon-base",
lg: "icon-lg",
xl: "icon-xl",
"2xl": "icon-2xl",
"3xl": "icon-3xl"
}
}
});
function Icon(props) {
props = (0, import_utils2.useSlotProps)(props, "icon");
const { children, size, "aria-label": ariaLabel, ...otherProps } = props;
let { "aria-hidden": ariaHidden } = props;
if (!ariaHidden) {
ariaHidden = void 0;
}
const color = props.color?.startsWith("--") ? `var(${props.color})` : props.color || "currentColor";
return import_react3.default.cloneElement(children, {
...(0, import_utils3.filterDOMProps)(otherProps),
focusable: "false",
"aria-label": ariaLabel,
"aria-hidden": ariaLabel ? ariaHidden || void 0 : true,
role: "img",
className: icon({
size,
className: (0, import_clsx.default)(children.props.className, props.className)
}),
style: { fill: color, ...otherProps.style }
});
}
// src/components/icons/AddIcon.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
// src/components/icons/AligncenterIcon.tsx
var import_react5 = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var AligncenterIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 7H3V5H21V7ZM17 13H7V11H17V13ZM5 19H19V17H5V19Z" })
}
) });
};
// src/components/icons/AlignleftIcon.tsx
var import_react6 = require("react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var AlignleftIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 7H3V5H21V7ZM13 13H3V11H13V13ZM3 19H17V17H3V19Z" })
}
) });
};
// src/components/icons/AlignrightIcon.tsx
var import_react7 = require("react");
var import_jsx_runtime5 = require("react/jsx-runtime");
var AlignrightIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 7H3V5H21V7ZM21 13H11V11H21V13ZM7 19H21V17H7V19Z" })
}
) });
};
// src/components/icons/ArchiveIcon.tsx
var import_react8 = require("react");
var import_jsx_runtime6 = require("react/jsx-runtime");
// src/components/icons/ArrowdownIcon.tsx
var import_react9 = require("react");
var import_jsx_runtime7 = require("react/jsx-runtime");
// src/components/icons/ArrowleftIcon.tsx
var import_react10 = require("react");
var import_jsx_runtime8 = require("react/jsx-runtime");
// src/components/icons/ArrowrightIcon.tsx
var import_react11 = require("react");
var import_jsx_runtime9 = require("react/jsx-runtime");
// src/components/icons/ArrowtoprightIcon.tsx
var import_react12 = require("react");
var import_jsx_runtime10 = require("react/jsx-runtime");
// src/components/icons/ArrowupIcon.tsx
var import_react13 = require("react");
var import_jsx_runtime11 = require("react/jsx-runtime");
// src/components/icons/AttachmentIcon.tsx
var import_react14 = require("react");
var import_jsx_runtime12 = require("react/jsx-runtime");
// src/components/icons/AutomatedcontentIcon.tsx
var import_react15 = require("react");
var import_jsx_runtime13 = require("react/jsx-runtime");
// src/components/icons/BackgroundIcon.tsx
var import_react16 = require("react");
var import_jsx_runtime14 = require("react/jsx-runtime");
// src/components/icons/BinIcon.tsx
var import_react17 = require("react");
var import_jsx_runtime15 = require("react/jsx-runtime");
// src/components/icons/BlindIcon.tsx
var import_react18 = require("react");
var import_jsx_runtime16 = require("react/jsx-runtime");
// src/components/icons/BoldIcon.tsx
var import_react19 = require("react");
var import_jsx_runtime17 = require("react/jsx-runtime");
// src/components/icons/CalendarIcon.tsx
var import_react20 = require("react");
var import_jsx_runtime18 = require("react/jsx-runtime");
var CalendarIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
"path",
{
fillRule: "evenodd",
d: "M7 2V4H3V21H21V4H17V2H15V4H9V2H7ZM19 6V8H5V6H19ZM5 10V19H19V10H5Z",
clipRule: "evenodd"
}
)
}
) });
};
// src/components/icons/CheckboxIcon.tsx
var import_react21 = require("react");
var import_jsx_runtime19 = require("react/jsx-runtime");
var CheckboxIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
"path",
{
fillRule: "evenodd",
d: "M18.4395 5.25928L20.5608 7.3806L9.50011 18.4413L3.43945 12.3806L5.56077 10.2593L9.50011 14.1986L18.4395 5.25928Z",
clipRule: "evenodd"
}
)
}
) });
};
// src/components/icons/ChevrondownIcon.tsx
var import_react22 = require("react");
var import_jsx_runtime20 = require("react/jsx-runtime");
var ChevrondownIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"path",
{
fill: "currentcolor",
d: "M5.29297 9.70718L6.70718 8.29297L12.0001 13.5859L17.293 8.29297L18.7072 9.70718L12.0001 16.4143L5.29297 9.70718Z",
clipRule: "evenodd"
}
)
}
) });
};
// src/components/icons/ChevronleftIcon.tsx
var import_react23 = require("react");
var import_jsx_runtime21 = require("react/jsx-runtime");
var ChevronleftIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
"path",
{
fillRule: "evenodd",
d: "M14.293 18.7072L15.7073 17.293L10.4144 12.0001L15.7073 6.70718L14.293 5.29297L7.58594 12.0001L14.293 18.7072Z",
clipRule: "evenodd"
}
)
}
) });
};
// src/components/icons/ChevronrightIcon.tsx
var import_react24 = require("react");
var import_jsx_runtime22 = require("react/jsx-runtime");
var ChevronrightIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
"path",
{
fillRule: "evenodd",
d: "M9.70718 18.7072L8.29297 17.293L13.5859 12.0001L8.29297 6.70718L9.70718 5.29297L16.4143 12.0001L9.70718 18.7072Z",
clipRule: "evenodd"
}
)
}
) });
};
// src/components/icons/ChevronupIcon.tsx
var import_react25 = require("react");
var import_jsx_runtime23 = require("react/jsx-runtime");
// src/components/icons/CloseIcon.tsx
var import_react26 = require("react");
var import_jsx_runtime24 = require("react/jsx-runtime");
var CloseIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.0001 13.4143L18.293 19.7072L19.7072 18.293L13.4143 12.0001L19.7072 5.70719L18.293 4.29298L12.0001 10.5859L5.70719 4.29297L4.29298 5.70718L10.5859 12.0001L4.29297 18.293L5.70718 19.7072L12.0001 13.4143Z" })
}
) });
};
// src/components/icons/CodeIcon.tsx
var import_react27 = require("react");
var import_jsx_runtime25 = require("react/jsx-runtime");
// src/components/icons/CollectionIcon.tsx
var import_react28 = require("react");
var import_jsx_runtime26 = require("react/jsx-runtime");
// src/components/icons/ColumnafterIcon.tsx
var import_react29 = require("react");
var import_jsx_runtime27 = require("react/jsx-runtime");
// src/components/icons/ColumnbeforeIcon.tsx
var import_react30 = require("react");
var import_jsx_runtime28 = require("react/jsx-runtime");
// src/components/icons/ColumndeleteIcon.tsx
var import_react31 = require("react");
var import_jsx_runtime29 = require("react/jsx-runtime");
// src/components/icons/ColumnsIcon.tsx
var import_react32 = require("react");
var import_jsx_runtime30 = require("react/jsx-runtime");
// src/components/icons/CopyIcon.tsx
var import_react33 = require("react");
var import_jsx_runtime31 = require("react/jsx-runtime");
// src/components/icons/CutIcon.tsx
var import_react34 = require("react");
var import_jsx_runtime32 = require("react/jsx-runtime");
// src/components/icons/DashIcon.tsx
var import_react35 = require("react");
var import_jsx_runtime33 = require("react/jsx-runtime");
var DashIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M6 10.5H18V13.5H6z" })
}
) });
};
// src/components/icons/DiscussionIcon.tsx
var import_react36 = require("react");
var import_jsx_runtime34 = require("react/jsx-runtime");
// src/components/icons/DraggableIcon.tsx
var import_react37 = require("react");
var import_jsx_runtime35 = require("react/jsx-runtime");
// src/components/icons/EditIcon.tsx
var import_react38 = require("react");
var import_jsx_runtime36 = require("react/jsx-runtime");
// src/components/icons/EyeIcon.tsx
var import_react39 = require("react");
var import_jsx_runtime37 = require("react/jsx-runtime");
// src/components/icons/FilterIcon.tsx
var import_react40 = require("react");
var import_jsx_runtime38 = require("react/jsx-runtime");
// src/components/icons/FolderIcon.tsx
var import_react41 = require("react");
var import_jsx_runtime39 = require("react/jsx-runtime");
// src/components/icons/FooterIcon.tsx
var import_react42 = require("react");
var import_jsx_runtime40 = require("react/jsx-runtime");
// src/components/icons/ForegroundIcon.tsx
var import_react43 = require("react");
var import_jsx_runtime41 = require("react/jsx-runtime");
// src/components/icons/FullscreenIcon.tsx
var import_react44 = require("react");
var import_jsx_runtime42 = require("react/jsx-runtime");
// src/components/icons/HighlightIcon.tsx
var import_react45 = require("react");
var import_jsx_runtime43 = require("react/jsx-runtime");
// src/components/icons/HistoryIcon.tsx
var import_react46 = require("react");
var import_jsx_runtime44 = require("react/jsx-runtime");
// src/components/icons/HomeIcon.tsx
var import_react47 = require("react");
var import_jsx_runtime45 = require("react/jsx-runtime");
// src/components/icons/ImagefitIcon.tsx
var import_react48 = require("react");
var import_jsx_runtime46 = require("react/jsx-runtime");
var ImagefitIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: [
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { d: "M20 3H4V5H20V3Z" }),
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
"path",
{
fillRule: "evenodd",
d: "M4 7V17H20V7H4ZM18 9H6V15H18V9Z",
clipRule: "evenodd"
}
),
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { d: "M4 19H20V21H4V19Z" })
]
}
) });
};
// src/components/icons/ImagefullIcon.tsx
var import_react49 = require("react");
var import_jsx_runtime47 = require("react/jsx-runtime");
var ImagefullIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: [
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M9.70726 7.70712L8.29304 6.29291L4.58594 10L8.29304 13.7071L9.70726 12.2929L8.41435 11H15.5856L14.2927 12.2929L15.707 13.7071L19.4141 9.99999L15.707 6.29288L14.2927 7.70709L15.5857 9H8.41438L9.70726 7.70712Z" }),
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
"path",
{
fillRule: "evenodd",
d: "M2 3V17H22V3H2ZM20 5H4V15H20V5Z",
clipRule: "evenodd"
}
),
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M4 19H20V21H4V19Z" })
]
}
) });
};
// src/components/icons/ImageIcon.tsx
var import_react50 = require("react");
var import_jsx_runtime48 = require("react/jsx-runtime");
var ImageIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: [
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M18 10C18 11.1046 17.1046 12 16 12C14.8954 12 14 11.1046 14 10C14 8.89543 14.8954 8 16 8C17.1046 8 18 8.89543 18 10Z" }),
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
"path",
{
fillRule: "evenodd",
d: "M2 20V4H22V20H2ZM4 6H20V17.5857L16.0001 13.5858L14.0001 15.5858L8.00008 9.58582L4 13.5859V6ZM4 16.4143V18H13.5858L8.00008 12.4142L4 16.4143ZM14.4143 18H17.5858L16.0001 16.4142L14.4143 18Z",
clipRule: "evenodd"
}
)
]
}
) });
};
// src/components/icons/ImageleftIcon.tsx
var import_react51 = require("react");
var import_jsx_runtime49 = require("react/jsx-runtime");
// src/components/icons/ImagenarrowIcon.tsx
var import_react52 = require("react");
var import_jsx_runtime50 = require("react/jsx-runtime");
var ImagenarrowIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
"svg",
{
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M7 9L8 7V17L7 15H17L16 17V7L17 9H7ZM17 7V12V14V16V17H7V7H17Z" }),
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5 21H19V19H5V21Z" }),
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5 5H19V3H5V5Z" })
]
}
) });
};
// src/components/icons/ImagerightIcon.tsx
var import_react53 = require("react");
var import_jsx_runtime51 = require("react/jsx-runtime");
// src/components/icons/ImagewideIcon.tsx
var import_react54 = require("react");
var import_jsx_runtime52 = require("react/jsx-runtime");
var ImagewideIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("g", { fillRule: "evenodd", children: [
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
"path",
{
fillRule: "nonzero",
d: "M2,9 L3,7 L3,17 L2,15 L22,15 L21,17 L21,7 L22,9 L2,9 Z M22,7 L22,17 L2,17 L2,7 L22,7 Z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("polygon", { points: "5 21 19 21 19 19 5 19" }),
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("polygon", { points: "5 5 19 5 19 3 5 3" })
] })
}
) });
};
// src/components/icons/InfoIcon.tsx
var import_react55 = require("react");
var import_jsx_runtime53 = require("react/jsx-runtime");
// src/components/icons/ItalicIcon.tsx
var import_react56 = require("react");
var import_jsx_runtime54 = require("react/jsx-runtime");
// src/components/icons/LanguageIcon.tsx
var import_react57 = require("react");
var import_jsx_runtime55 = require("react/jsx-runtime");
// src/components/icons/LeadingIcon.tsx
var import_react58 = require("react");
var import_jsx_runtime56 = require("react/jsx-runtime");
// src/components/icons/LeadingimageIcon.tsx
var import_react59 = require("react");
var import_jsx_runtime57 = require("react/jsx-runtime");
// src/components/icons/LinkIcon.tsx
var import_react60 = require("react");
var import_jsx_runtime58 = require("react/jsx-runtime");
// src/components/icons/ListIcon.tsx
var import_react61 = require("react");
var import_jsx_runtime59 = require("react/jsx-runtime");
// src/components/icons/ListnumbersIcon.tsx
var import_react62 = require("react");
var import_jsx_runtime60 = require("react/jsx-runtime");
// src/components/icons/MailIcon.tsx
var import_react63 = require("react");
var import_jsx_runtime61 = require("react/jsx-runtime");
// src/components/icons/MandatoryIcon.tsx
var import_react64 = require("react");
var import_jsx_runtime62 = require("react/jsx-runtime");
// src/components/icons/MapIcon.tsx
var import_react65 = require("react");
var import_jsx_runtime63 = require("react/jsx-runtime");
// src/components/icons/MenuIcon.tsx
var import_react66 = require("react");
var import_jsx_runtime64 = require("react/jsx-runtime");
// src/components/icons/MergedIcon.tsx
var import_react67 = require("react");
var import_jsx_runtime65 = require("react/jsx-runtime");
// src/components/icons/MoreoptionsIcon.tsx
var import_react68 = require("react");
var import_jsx_runtime66 = require("react/jsx-runtime");
// src/components/icons/NavigationIcon.tsx
var import_react69 = require("react");
var import_jsx_runtime67 = require("react/jsx-runtime");
// src/components/icons/NewsIcon.tsx
var import_react70 = require("react");
var import_jsx_runtime68 = require("react/jsx-runtime");
// src/components/icons/OutIcon.tsx
var import_react71 = require("react");
var import_jsx_runtime69 = require("react/jsx-runtime");
// src/components/icons/PageIcon.tsx
var import_react72 = require("react");
var import_jsx_runtime70 = require("react/jsx-runtime");
// src/components/icons/ParagraphIcon.tsx
var import_react73 = require("react");
var import_jsx_runtime71 = require("react/jsx-runtime");
// src/components/icons/PasteIcon.tsx
var import_react74 = require("react");
var import_jsx_runtime72 = require("react/jsx-runtime");
// src/components/icons/PauseIcon.tsx
var import_react75 = require("react");
var import_jsx_runtime73 = require("react/jsx-runtime");
// src/components/icons/PencilIcon.tsx
var import_react76 = require("react");
var import_jsx_runtime74 = require("react/jsx-runtime");
// src/components/icons/PlayIcon.tsx
var import_react77 = require("react");
var import_jsx_runtime75 = require("react/jsx-runtime");
// src/components/icons/PropertiesIcon.tsx
var import_react78 = require("react");
var import_jsx_runtime76 = require("react/jsx-runtime");
// src/components/icons/QuotesIcon.tsx
var import_react79 = require("react");
var import_jsx_runtime77 = require("react/jsx-runtime");
// src/components/icons/RadiobuttonIcon.tsx
var import_react80 = require("react");
var import_jsx_runtime78 = require("react/jsx-runtime");
// src/components/icons/RedoIcon.tsx
var import_react81 = require("react");
var import_jsx_runtime79 = require("react/jsx-runtime");
// src/components/icons/RenameIcon.tsx
var import_react82 = require("react");
var import_jsx_runtime80 = require("react/jsx-runtime");
// src/components/icons/ReverseIcon.tsx
var import_react83 = require("react");
var import_jsx_runtime81 = require("react/jsx-runtime");
// src/components/icons/ReviewIcon.tsx
var import_react84 = require("react");
var import_jsx_runtime82 = require("react/jsx-runtime");
// src/components/icons/RowafterIcon.tsx
var import_react85 = require("react");
var import_jsx_runtime83 = require("react/jsx-runtime");
// src/components/icons/RowbeforeIcon.tsx
var import_react86 = require("react");
var import_jsx_runtime84 = require("react/jsx-runtime");
// src/components/icons/RowdeleteIcon.tsx
var import_react87 = require("react");
var import_jsx_runtime85 = require("react/jsx-runtime");
// src/components/icons/SearchIcon.tsx
var import_react88 = require("react");
var import_jsx_runtime86 = require("react/jsx-runtime");
// src/components/icons/SecurityIcon.tsx
var import_react89 = require("react");
var import_jsx_runtime87 = require("react/jsx-runtime");
// src/components/icons/SettingsIcon.tsx
var import_react90 = require("react");
var import_jsx_runtime88 = require("react/jsx-runtime");
// src/components/icons/ShareIcon.tsx
var import_react91 = require("react");
var import_jsx_runtime89 = require("react/jsx-runtime");
// src/components/icons/SliderIcon.tsx
var import_react92 = require("react");
var import_jsx_runtime90 = require("react/jsx-runtime");
// src/components/icons/SocialIcon.tsx
var import_react93 = require("react");
var import_jsx_runtime91 = require("react/jsx-runtime");
// src/components/icons/SpacerIcon.tsx
var import_react94 = require("react");
var import_jsx_runtime92 = require("react/jsx-runtime");
// src/components/icons/StateIcon.tsx
var import_react95 = require("react");
var import_jsx_runtime93 = require("react/jsx-runtime");
// src/components/icons/SubtitleIcon.tsx
var import_react96 = require("react");
var import_jsx_runtime94 = require("react/jsx-runtime");
// src/components/icons/TableIcon.tsx
var import_react97 = require("react");
var import_jsx_runtime95 = require("react/jsx-runtime");
// src/components/icons/TagIcon.tsx
var import_react98 = require("react");
var import_jsx_runtime96 = require("react/jsx-runtime");
// src/components/icons/TextIcon.tsx
var import_react99 = require("react");
var import_jsx_runtime97 = require("react/jsx-runtime");
// src/components/icons/ThumbnailsIcon.tsx
var import_react100 = require("react");
var import_jsx_runtime98 = require("react/jsx-runtime");
// src/components/icons/TitleIcon.tsx
var import_react101 = require("react");
var import_jsx_runtime99 = require("react/jsx-runtime");
// src/components/icons/TocIcon.tsx
var import_react102 = require("react");
var import_jsx_runtime100 = require("react/jsx-runtime");
// src/components/icons/UndoIcon.tsx
var import_react103 = require("react");
var import_jsx_runtime101 = require("react/jsx-runtime");
// src/components/icons/UploadIcon.tsx
var import_react104 = require("react");
var import_jsx_runtime102 = require("react/jsx-runtime");
// src/components/icons/UserIcon.tsx
var import_react105 = require("react");
var import_jsx_runtime103 = require("react/jsx-runtime");
// src/components/icons/VideoIcon.tsx
var import_react106 = require("react");
var import_jsx_runtime104 = require("react/jsx-runtime");
// src/components/icons/VoltoIcon.tsx
var import_react107 = require("react");
var import_jsx_runtime105 = require("react/jsx-runtime");
// src/components/icons/WidthDefaultIcon.tsx
var import_react108 = require("react");
var import_jsx_runtime106 = require("react/jsx-runtime");
// src/components/icons/WidthFullIcon.tsx
var import_react109 = require("react");
var import_jsx_runtime107 = require("react/jsx-runtime");
// src/components/icons/WidthLayoutIcon.tsx
var import_react110 = require("react");
var import_jsx_runtime108 = require("react/jsx-runtime");
// src/components/icons/WidthNarrowIcon.tsx
var import_react111 = require("react");
var import_jsx_runtime109 = require("react/jsx-runtime");
// src/components/icons/WindowedIcon.tsx
var import_react112 = require("react");
var import_jsx_runtime110 = require("react/jsx-runtime");
// src/components/icons/WorldIcon.tsx
var import_react113 = require("react");
var import_jsx_runtime111 = require("react/jsx-runtime");
// src/components/Breadcrumbs/Breadcrumbs.quanta.tsx
var import_react_aria_components4 = require("react-aria-components");
var import_tailwind_merge2 = require("tailwind-merge");
// src/components/Link/Link.quanta.tsx
var import_react114 = require("react");
var import_react_aria_components3 = require("react-aria-components");
var import_tailwind_variants4 = require("tailwind-variants");
var import_jsx_runtime112 = require("react/jsx-runtime");
var styles = (0, import_tailwind_variants4.tv)({
extend: focusRing,
base: `
rounded-xs underline transition
disabled:cursor-default disabled:no-underline
forced-colors:disabled:text-[GrayText]
`,
variants: {
variant: {
primary: `
text-quanta-sapphire underline decoration-quanta-sapphire/40
hover:text-quanta-royal hover:decoration-quanta-royal
focus:text-quanta-royal focus:decoration-quanta-royal
active:text-quanta-cobalt active:decoration-quanta-cobalt
`,
secondary: `
text-gray-700 underline decoration-gray-700/50
hover:decoration-gray-700
`
}
},
defaultVariants: {
variant: "primary"
}
});
function Link(props) {
return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
import_react_aria_components3.Link,
{
...props,
className: (0, import_react_aria_components3.composeRenderProps)(
props.className,
(className, renderProps) => styles({ ...renderProps, className, variant: props.variant })
)
}
);
}
// src/components/Breadcrumbs/Breadcrumbs.quanta.tsx
var import_jsx_runtime113 = require("react/jsx-runtime");
function Breadcrumb(props) {
return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
import_react_aria_components4.Breadcrumb,
{
...props,
className: composeTailwindRenderProps(
props.className,
`
flex items-center gap-1
[&_a>svg]:mx-1 [&_a>svg]:inline [&_a>svg]:align-text-top
`
),
children: ({ isCurrent }) => /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
props.value?.icon && props.value?.icon,
/* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Link, { variant: "secondary", ...props }),
!isCurrent && (props.separator ?? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(ChevronrightIcon, { className: "h-3 w-3 text-gray-600" }))
] })
}
);
}
function Breadcrumbs(props) {
const { root, items, homeIcon } = props;
let itemsWithRoot;
if (root && items) {
const icon2 = null;
const rootItem = {
"@id": root["@id"] || "/",
title: "Home",
icon: icon2
};
itemsWithRoot = [rootItem, ...items];
}
return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
import_react_aria_components4.Breadcrumbs,
{
...props,
items: itemsWithRoot || items,
className: (0, import_tailwind_merge2.twMerge)("flex gap-1", props.className)
}
);
}
// src/components/Accordion/Accordion.quanta.tsx
var React115 = require("react");
var import_react_aria_components5 = require("react-aria-components");
var import_jsx_runtime114 = require("react/jsx-runtime");
var Accordion = ({ children, ref, className, ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
import_react_aria_components5.DisclosureGroup,
{
ref,
"data-slot": "disclosure-group",
...props,
className: composeTailwindRenderProps(
className,
`
peer cursor-pointer
disabled:cursor-not-allowed disabled:opacity-75
`
),
children: (values) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { "data-slot": "disclosure-content", children: typeof children === "function" ? children(values) : children })
}
);
};
var AccordionItem = ({ className, ref, ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
import_react_aria_components5.Disclosure,
{
ref,
"data-slot": "disclosure",
...props,
className: composeTailwindRenderProps(
className,
`
peer group/disclosure w-full min-w-60 border-b border-border
disabled:opacity-60
`
),
children: props.children
}
);
};
var AccordionItemTrigger = ({
className,
ref,
...props
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_react_aria_components5.Heading, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
import_react_aria_components5.Button,
{
ref,
slot: "trigger",
className: composeTailwindRenderProps(
className,
`
group/trigger flex w-full items-center justify-between gap-x-2 py-3 text-left
font-medium
open:text-fg
focus:text-fg focus:outline-hidden
**:data-[slot=icon]:text-muted-fg **:data-[slot=icon]:-mx-0.5
**:data-[slot=icon]:shrink-0
disabled:cursor-default disabled:opacity-50
**:data-[slot=disclosure-chevron]:size-5
sm:text-sm
forced-colors:disabled:text-[GrayText]
**:[span]:flex **:[span]:items-center **:[span]:gap-x-1
**:[span]:*:data-[slot=icon]:mr-1
[&[aria-expanded=true]_[data-slot=disclosure-chevron]]:-rotate-90
`
),
...props,
children: (values) => /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
typeof props.children === "function" ? props.children(values) : props.children,
/* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
ChevronleftIcon,
{
"data-slot": "disclosure-chevron",
className: "internal-chevron ml-auto size-4 shrink-0 transition duration-300"
}
)
] })
}
) });
};
var AccordionPanel = ({ className, ref, ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
import_react_aria_components5.DisclosurePanel,
{
ref,
"data-slot": "disclosure-panel",
className: composeTailwindRenderProps(
className,
`
text-muted-fg overflow-hidden text-sm transition-all
**:data-[slot=disclosure-group]:border-t
**:data-[slot=disclosure-group]:**:[.internal-chevron]:hidden
has-data-[slot=disclosure-group]:**:[button]:px-4
`
),
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
"div",
{
"data-slot": "disclosure-panel-content",
className: `
pt-0
not-has-data-[slot=disclosure-group]:group-data-expanded/disclosure:pb-3
[&:has([data-slot=disclosure-group])_&]:px-11
`,
children: props.children
}
)
}
);
};
// src/components/Calendar/Calendar.quanta.tsx
var import_react116 = require("react");
var import_react_aria_components6 = require("react-aria-components");
var import_tailwind_variants5 = require("tailwind-variants");
var import_jsx_runtime115 = require("react/jsx-runtime");
var cellStyles = (0, import_tailwind_variants5.tv)({
extend: focusRing,
base: `
m-px flex h-9 w-9 cursor-default items-center justify-center rounded-full text-sm
forced-color-adjust-none
`,
variants: {
isSelected: {
false: `
text-zinc-900
hover:bg-gray-100
dark:text-zinc-200 dark:hover:bg-zinc-700
pressed:bg-gray-200
dark:pressed:bg-zinc-600
`,
true: `
bg-blue-600 text-white
invalid:bg-red-600
forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]
forced-colors:invalid:bg-[Mark]
`
},
isDisabled: {
true: `
text-gray-300
dark:text-zinc-600
forced-colors:text-[GrayText]
`
}
}
});
function Calendar({
errorMessage,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_react_aria_components6.Calendar, { ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(CalendarHeader, {}),
/* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_react_aria_components6.CalendarGrid, { children: [
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(CalendarGridHeader, {}),
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria_components6.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria_components6.CalendarCell, { date, className: cellStyles }) })
] }),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria_components6.Text, { slot: "errorMessage", className: "text-sm text-red-600", children: errorMessage })
] });
}
function CalendarHeader() {
const { direction } = (0, import_react_aria_components6.useLocale)();
return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("header", { className: "flex w-full items-center gap-1 px-1 pb-4", children: [
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Button, { slot: "previous", children: direction === "rtl" ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ChevronrightIcon, { "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ChevronleftIcon, { "aria-hidden": true }) }),
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
import_react_aria_components6.Heading,
{
className: `
mx-2 flex-1 text-center text-xl font-semibold text-zinc-900
dark:text-zinc-200
`
}
),
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Button, { slot: "next", children: direction === "rtl" ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ChevronleftIcon, { "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ChevronrightIcon, { "aria-hidden": true }) })
] });
}
function CalendarGridHeader() {
return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria_components6.CalendarGridHeader, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria_components6.CalendarHeaderCell, { className: "text-xs font-semibold text-gray-500", children: day }) });
}
// src/components/Checkbox/Checkbox.quanta.tsx
var import_react118 = require("react");
var import_react_aria_components8 = require("react-aria-components");
var import_tailwind_variants7 = require("tailwind-variants");
// src/components/Field/Field.quanta.tsx
var import_react117 = __toESM(require("react"), 1);
var import_react_aria_components7 = require("react-aria-components");
var import_tailwind_merge3 = require("tailwind-merge");
var import_tailwind_variants6 = require("tailwind-variants");
var import_react_aria = require("react-aria");
var import_utils9 = require("@react-aria/utils");
var import_jsx_runtime116 = require("react/jsx-runtime");
function Label(props) {
return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
import_react_aria_components7.Label,
{
...props,
className: (0, import_tailwind_merge3.twMerge)(
`
w-fit cursor-default text-xs font-medium text-quanta-pigeon
group-data-disabled:text-quanta-silver
group-data-invalid:text-quanta-candy
after:bg-quanta-candy
group-data-required:after:mx-1 group-data-required:after:inline-block
group-data-required:after:h-2 group-data-required:after:w-2
group-data-required:after:rounded-4xl
not-group-data-invalid:not-group-data-readonly:has-[+input:focus]:text-quanta-sapphire
`,
props.className
)
}
);
}
function Description(props) {
return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
import_react_aria_components7.Text,
{
...props,
slot: "description",
className: (0, import_tailwind_merge3.twMerge)(
`
text-xs font-normal text-quanta-pigeon
group-data-disabled:text-quanta-silver
`,
props.className
)
}
);
}
function FieldError(props) {
return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
import_react_aria_components7.FieldError,
{
...props,
className: composeTailwindRenderProps(
props.className,
`
text-xs font-normal text-quanta-candy
forced-colors:text-[Mark]
`
)
}
);
}
var fieldBorderStyles = (0, import_tailwind_variants6.tv)({
variants: {
isFocusWithin: {
false: `forced-colors:border-[ButtonBorder]`,
true: `
bg-quanta-air inset-ring-quanta-sapphire outline-2
group-data-readonly:inset-ring-0
hover:bg-quanta-air
forced-colors:border-[Highlight]
`
},
isInvalid: {
true: `
bg-quanta-ballet outline-2
hover:bg-quanta-flamingo
focus:inset-ring-quanta-candy
forced-colors:border-[Mark]
`
},
isDisabled: {
true: `
bg-quanta-air text-quanta-silver
hover:bg-quanta-air
forced-colors:border-[GrayText]
`
}
}
});
var fieldGroupStyles = (0, import_tailwind_variants6.tv)({
extend: focusRing,
base: `
group flex h-11 items-center overflow-hidden rounded-lg bg-quanta-snow text-quanta-space
hover:bg-quanta-smoke
read-only:hover:bg-quanta-air
focus:bg-quanta-air
active:bg-quanta-air
forced-colors:bg-[Field]
`,
variants: {
...fieldBorderStyles.variants,
isFocusWithin: {
...fieldBorderStyles.variants.isFocusWithin,
true: (0, import_tailwind_merge3.twMerge)(
fieldBorderStyles.variants.isFocusWithin.true,
`inset-ring-2`
)
},
isInvalid: {
...fieldBorderStyles.variants.isInvalid,
true: (0, import_tailwind_merge3.twMerge)(
fieldBorderStyles.variants.isInvalid.true,
`focus:inset-ring-2`
)
}
}
});
function FieldGroup(props) {
return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
import_react_aria_components7.Group,
{
...props,
className: (0, import_react_aria_components7.composeRenderProps)(
props.className,
(className, renderProps) => fieldGroupStyles({ ...renderProps, className })
)
}
);
}
var inputStyles = (0, import_tailwind_variants6.tv)({
extend: focusRing,
base: "rounded-md p-3",
variants: {
isFocused: {
...fieldBorderStyles.variants.isFocusWithin,
true: (0, import_tailwind_merge3.twMerge)(
fieldBorderStyles.variants.isFocusWithin.true,
`inset-ring-2`
)
},
isInvalid: {
...fieldBorderStyles.variants.isInvalid,
true: (0, import_tailwind_merge3.twMerge)(
fieldBorderStyles.variants.isInvalid.true,
`focus:inset-ring-2`
)
},
isDisabled: fieldBorderStyles.variants.isDisabled
}
});
function Input(props) {
return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
import_react_aria_components7.Input,
{
...props,
className: composeTailwindRenderProps(
props.className,
`
min-w-0 flex-1 bg-quanta-snow px-2 py-1.5 text-sm text-quanta-space outline
not-group-data-focus-within:outline-0
group-data-focus-within:outline-0
group-data-hovered:bg-quanta-smoke
read-only:border-1 read-only:border-dashed read-only:bg-quanta-air
hover:bg-quanta-smoke