@stack-spot/citric-react 0.21.0 → 0.23.0

package/dist/components/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../src/components/FieldGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAqBnD,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE,CAAC,CAChH,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,aAAa,EACvB,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,EAAE,SAAS,IAAI,YAAY,CAAC,CAAC,KAC1E,KAAK,YAER,QAAQ,GACO,CACnB,CAAC,CAAA"}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../src/components/FieldGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAqBnD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE,CAAC,CAChH,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,aAAa,EACvB,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,EAAE,SAAS,IAAI,YAAY,CAAC,CAAC,KAC1E,KAAK,YAER,QAAQ,GACO,CACnB,CAAC,CAAA"}

package/dist/components/Form.d.ts

@@ -1,5 +1,23 @@
 export type FormProps = JSX.IntrinsicElements['form'];
 export type ButtonGroupProps = JSX.IntrinsicElements['div'];
+/**
+ * A form, styled to receive rows, form groups and button groups.
+ *
+ * This has the exact same interface as the HTML form.
+ */
 export declare const Form: ({ children, ...props }: FormProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a group of buttons in a form.
+ *
+ * @example
+ * ```
+ * <Form>
+ *   <ButtonGroup>
+ *     <Button>Cancel</Button>
+ *     <Button type="submit">Submit</Button>
+ *   </ButtonGroup>
+ * </Form>
+ * ```
+ */
 export declare const ButtonGroup: ({ className, children, ...props }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Form.d.ts.map

package/dist/components/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,SAAS,GAAG,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,gBAAgB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAE3D,eAAO,MAAM,IAAI,GAAI,wBAAwB,SAAS,4CAIrD,CAAA;AAED,eAAO,MAAM,WAAW,sCAA+C,gBAAgB,4CAIrF,CAAA"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,SAAS,GAAG,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,gBAAgB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAE3D;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,wBAAwB,SAAS,4CAIrD,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,sCAA+C,gBAAgB,4CAIrF,CAAA"}

package/dist/components/Form.js

@@ -2,6 +2,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
+/**
+ * A form, styled to receive rows, form groups and button groups.
+ *
+ * This has the exact same interface as the HTML form.
+ */
 export const Form = ({ children, ...props }) => (_jsx(CitricComponent, { tag: "form", component: "form", ...props, children: children }));
+/**
+ * Renders a group of buttons in a form.
+ *
+ * @example
+ * ```
+ * <Form>
+ *   <ButtonGroup>
+ *     <Button>Cancel</Button>
+ *     <Button type="submit">Submit</Button>
+ *   </ButtonGroup>
+ * </Form>
+ * ```
+ */
 export const ButtonGroup = withRef(({ className, children, ...props }) => (_jsx("div", { className: listToClass([className, 'button-group']), ...props, children: children })));
 //# sourceMappingURL=Form.js.map

package/dist/components/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAKnD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACzD,KAAC,eAAe,IAAC,GAAG,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,KAAK,KAAK,YACnD,QAAQ,GACO,CACnB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE,CAAC,CAC1F,cAAK,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,KAAM,KAAK,YAChE,QAAQ,GACL,CACP,CAAC,CAAA"}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAKnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACzD,KAAC,eAAe,IAAC,GAAG,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,KAAK,KAAK,YACnD,QAAQ,GACO,CACnB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE,CAAC,CAC1F,cAAK,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,KAAM,KAAK,YAChE,QAAQ,GACL,CACP,CAAC,CAAA"}

package/dist/components/FormGroup.d.ts

@@ -17,5 +17,17 @@ export interface BaseFormGroupProps {
     warning?: string;
 }
 export type FormGroupProps = React.JSX.IntrinsicElements['div'] & BaseFormGroupProps;
+/**
+ * A form group renders everything a field in a form needs: the input, its label, a tooltip (help), an error and a remark (warning).
+ *
+ * Labels, errors, tooltips and warnings are only rendered when they're strings with at least one character.
+ *
+ * @example
+ * ```
+ * <FormGroup label="Birth Date" help="The date when you were born" error="The date you typed is invalid!">
+ *   <Input type="date" />
+ * </FormGroup>
+ * ```
+ */
 export declare const FormGroup: ({ error, help, label, warning, className, children, ...props }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FormGroup.d.ts.map

package/dist/components/FormGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../../src/components/FormGroup.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,kBAAkB,CAAA;AAEpF,eAAO,MAAM,SAAS,mEAA4E,cAAc,4CAgB9G,CAAA"}
+{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../../src/components/FormGroup.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,kBAAkB,CAAA;AAEpF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,mEAA4E,cAAc,4CAgB9G,CAAA"}

package/dist/components/FormGroup.js

@@ -5,5 +5,17 @@ import { CitricComponent } from './CitricComponent.js';
 import { IconButton } from './IconBox.js';
 import { Text } from './Text.js';
 import { Tooltip } from './Tooltip.js';
+/**
+ * A form group renders everything a field in a form needs: the input, its label, a tooltip (help), an error and a remark (warning).
+ *
+ * Labels, errors, tooltips and warnings are only rendered when they're strings with at least one character.
+ *
+ * @example
+ * ```
+ * <FormGroup label="Birth Date" help="The date when you were born" error="The date you typed is invalid!">
+ *   <Input type="date" />
+ * </FormGroup>
+ * ```
+ */
 export const FormGroup = withRef(({ error, help, label, warning, className, children, ...props }) => (_jsx(CitricComponent, { tag: "div", component: "form-group", className: listToClass([className, error && 'error']), ...props, children: _jsxs("label", { children: [help ? (_jsxs("div", { className: "row", children: [_jsx(Text, { children: label }), _jsx(Tooltip, { content: help, children: _jsx(IconButton, { icon: "InfoCircle", size: "xs" }) })] })) : label, children, _jsx("div", { className: "feedback", children: error }), warning && _jsx("div", { className: "warning", children: warning })] }) })));
 //# sourceMappingURL=FormGroup.js.map

package/dist/components/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sourceRoot":"","sources":["../../src/components/FormGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAuBnC,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EAAE,EAAE,CAAC,CACnH,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,KAAK,IAAI,OAAO,CAAC,CAAC,KAAM,KAAK,YAChH,4BACG,IAAI,CAAC,CAAC,CAAC,CACN,eAAK,SAAS,EAAC,KAAK,aAClB,KAAC,IAAI,cAAE,KAAK,GAAQ,EACpB,KAAC,OAAO,IAAC,OAAO,EAAE,IAAI,YACpB,KAAC,UAAU,IAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,GAClC,IACN,CACP,CAAA,CAAC,CAAC,KAAK,EACP,QAAQ,EACT,cAAK,SAAS,EAAC,UAAU,YAAE,KAAK,GAAO,EACtC,OAAO,IAAI,cAAK,SAAS,EAAC,SAAS,YAAE,OAAO,GAAO,IAC9C,GACQ,CACnB,CAAC,CAAA"}
+{"version":3,"file":"FormGroup.js","sourceRoot":"","sources":["../../src/components/FormGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAuBnC;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EAAE,EAAE,CAAC,CACnH,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,KAAK,IAAI,OAAO,CAAC,CAAC,KAAM,KAAK,YAChH,4BACG,IAAI,CAAC,CAAC,CAAC,CACN,eAAK,SAAS,EAAC,KAAK,aAClB,KAAC,IAAI,cAAE,KAAK,GAAQ,EACpB,KAAC,OAAO,IAAC,OAAO,EAAE,IAAI,YACpB,KAAC,UAAU,IAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,GAClC,IACN,CACP,CAAA,CAAC,CAAC,KAAK,EACP,QAAQ,EACT,cAAK,SAAS,EAAC,UAAU,YAAE,KAAK,GAAO,EACtC,OAAO,IAAI,cAAK,SAAS,EAAC,SAAS,YAAE,OAAO,GAAO,IAC9C,GACQ,CACnB,CAAC,CAAA"}

package/dist/components/IconBox.d.ts

@@ -17,7 +17,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
      * background and foreground colors change on hover or focus.
      * - text: a circle with transparent background. Its size depends on the value of `size`. If this is clickable, the background and
      * foreground colors change on hover or focus (it won't be transparent).
-     * - none: no special styling, its size depend only on the size of the icon (the property `size` is ignored). Even if this is clickable,
+     * - none: no special styling, its size depends only on the size of the icon (the property `size` is ignored). Even if this is clickable,
      * the style doesn't change on hover or focus.
      *
      * @default 'circle'
@@ -51,17 +51,42 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
     analytics?: boolean;
 }
 export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLTag[T], 'children'> & BaseIconBoxProps<T, G>;
-declare function _IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>({ group, icon, tag, appearance, size, className, analytics, onClick, feedback, ...props }: IconBoxProps<T, G>): import("react/jsx-runtime").JSX.Element;
 /**
- * Shortcut to `<IconBox tag="button" />`
+ * Renders a wrapper for an icon. The icon must specified by the properties "icon" and "group", this component accepts no children.
+ *
+ * If you don't need the icon to be rendered within a box, consider using the component "Icon" directly.
+ *
+ * Hover and focus effects are applied if the IconBox is focusable.
+ *
+ * @example
+ * ```
+ * <IconBox icon="Search" colorScheme="primary" />
+ * ```
  */
-declare function _IconButton<G extends IconGroup = 'outline'>({ type, ...props }: Omit<IconBoxProps<'button', G>, 'tag'>): import("react/jsx-runtime").JSX.Element;
+export declare const IconBox: <T extends IconBoxTag = "i", G extends IconGroup = "outline">({ group, icon, tag, appearance, size, className, analytics, onClick, feedback, ...props }: IconBoxProps<T, G>) => import("react/jsx-runtime").JSX.Element;
 /**
- * Shortcut to `<IconBox tag="a" />`
+ * A shortcut for `<IconBox tag="button">`.
+ *
+ * Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <IconButton icon="Search" />
+ * ```
  */
-declare function _IconLink<G extends IconGroup = 'outline'>(props: Omit<IconBoxProps<'a', G>, 'tag'>): import("react/jsx-runtime").JSX.Element;
-export declare const IconBox: typeof _IconBox;
-export declare const IconButton: typeof _IconButton;
-export declare const IconLink: typeof _IconLink;
+export declare const IconButton: <G extends IconGroup = "outline">({ type, ...props }: Omit<IconBoxProps<"button", G>, "tag">) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A shortcut for `<IconBox tag="a">`.
+ *
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <IconLink icon="Search" href="#" />
+ * ```
+ */
+export declare const IconLink: <G extends IconGroup = "outline">(props: Omit<IconBoxProps<"a", G>, "tag">) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=IconBox.d.ts.map

package/dist/components/IconBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGnE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACtI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE3H,iBAAS,QAAQ,CAAC,CAAC,SAAS,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,SAAS,GAAG,SAAS,EAC3E,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,2CAkB9G;AAED;;GAEG;AACH,iBAAS,WAAW,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAE/G;AAED;;GAEG;AACH,iBAAS,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAE3F;AAED,eAAO,MAAM,OAAO,iBAAoB,CAAA;AACxC,eAAO,MAAM,UAAU,oBAAuB,CAAA;AAC9C,eAAO,MAAM,QAAQ,kBAAqB,CAAA"}
+{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGnE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACtI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE3H;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,GACD,CAAC,SAAS,UAAU,QAAQ,CAAC,SAAS,SAAS,yGAC6B,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,4CAoBhH,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,GACD,CAAC,SAAS,SAAS,kCAAkC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,4CAGhH,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,GACD,CAAC,SAAS,SAAS,qBAAqB,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,4CAG5F,CAAA"}

package/dist/components/IconBox.js

@@ -3,7 +3,20 @@ import { listToClass } from '@stack-spot/portal-theme';
 import { useCitricController } from '../context/hooks.js';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
-function _IconBox({ group, icon, tag, appearance, size, className, analytics, onClick, feedback, ...props }) {
+/**
+ * Renders a wrapper for an icon. The icon must specified by the properties "icon" and "group", this component accepts no children.
+ *
+ * If you don't need the icon to be rendered within a box, consider using the component "Icon" directly.
+ *
+ * Hover and focus effects are applied if the IconBox is focusable.
+ *
+ * @example
+ * ```
+ * <IconBox icon="Search" colorScheme="primary" />
+ * ```
+ */
+export const IconBox = withRef(function IconBox({ group, icon, tag, appearance, size, className, analytics, onClick, feedback, ...props }) {
+    props['aria-label'] ||= props.title; // accessibility
     const citric = useCitricController();
     function handleClick(e) {
         onClick?.(e);
@@ -13,20 +26,33 @@ function _IconBox({ group, icon, tag, appearance, size, className, analytics, on
             citric?.onClickLink?.(e, analytics ?? false);
     }
     return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]), "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
-}
+});
 /**
- * Shortcut to `<IconBox tag="button" />`
+ * A shortcut for `<IconBox tag="button">`.
+ *
+ * Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <IconButton icon="Search" />
+ * ```
  */
-function _IconButton({ type, ...props }) {
+export const IconButton = withRef(function IconButton({ type, ...props }) {
     return _jsx(IconBox, { ...props, tag: "button", type: type || 'button' });
-}
+});
 /**
- * Shortcut to `<IconBox tag="a" />`
+ * A shortcut for `<IconBox tag="a">`.
+ *
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <IconLink icon="Search" href="#" />
+ * ```
  */
-function _IconLink(props) {
+export const IconLink = withRef(function IconLink(props) {
     return _jsx(IconBox, { ...props, tag: "a" });
-}
-export const IconBox = withRef(_IconBox);
-export const IconButton = withRef(_IconButton);
-export const IconLink = withRef(_IconLink);
+});
 //# sourceMappingURL=IconBox.js.map

package/dist/components/IconBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAwDnD,SAAS,QAAQ,CACf,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAE7G,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBAC/E,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,WAAW,CAAkC,EAAE,IAAI,EAAE,GAAG,KAAK,EAA0C;IAC9G,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,IAAI,QAAQ,GAAK,CAAA;AACrE,CAAC;AAED;;GAEG;AACH,SAAS,SAAS,CAAkC,KAAwC;IAC1F,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACvC,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAA;AACxC,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA"}
+{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAwDnD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAC5B,SAAS,OAAO,CACd,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAE7G,KAAK,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,KAAK,CAAA,CAAC,gBAAgB;IACpD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBAC/E,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAC/B,SAAS,UAAU,CAAkC,EAAE,IAAI,EAAE,GAAG,KAAK,EAA0C;IAC7G,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,IAAI,QAAQ,GAAK,CAAA;AACrE,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAC7B,SAAS,QAAQ,CAAkC,KAAwC;IACzF,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACvC,CAAC,CACF,CAAA"}

package/dist/components/ImageBox.d.ts

@@ -41,17 +41,41 @@ export interface BaseImageBoxProps<T extends ImageBoxTag> extends WithColorPalet
     analytics?: boolean;
 }
 export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProps<T>;
-declare function _ImageBox<T extends ImageBoxTag = 'div'>({ tag, appearance, size, className, analytics, onClick, feedback, ...props }: ImageBoxProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
- * Shortcut to `<ImageBox tag="button" />`
+ * Renders a wrapper for its child (normally an image). The image will be resized and cropped to fit the container. The image is not cropped
+ * if the property "feedback" is set.
+ *
+ * Hover and focus effects are applied if the ImageBox is focusable.
+ *
+ * @example
+ * ```
+ * <ImageBox><img src="https://images.com/myimage.png" /></ImageBox>
+ * ```
  */
-declare function _ImageButton(props: Omit<ImageBoxProps<'button'>, 'tag'>): import("react/jsx-runtime").JSX.Element;
+export declare const ImageBox: <T extends ImageBoxTag = "div">({ tag, appearance, size, className, analytics, onClick, feedback, ...props }: ImageBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
 /**
- * Shortcut to `<ImageBox tag="a" />`
+ * A shortcut for `<ImageBox tag="button">`.
+ *
+ * Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <ImageButton><img src="https://images.com/myimage.png" /></ImageButton>
+ * ```
  */
-declare function _ImageLink(props: Omit<ImageBoxProps<'a'>, 'tag'>): import("react/jsx-runtime").JSX.Element;
-export declare const ImageBox: typeof _ImageBox;
-export declare const ImageButton: typeof _ImageButton;
-export declare const ImageLink: typeof _ImageLink;
+export declare const ImageButton: (props: Omit<ImageBoxProps<"button">, "tag">) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A shortcut for `<ImageBox tag="a">`.
+ *
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <ImageLink href="#"><img src="https://images.com/myimage.png" /></ImageButton>
+ * ```
+ */
+export declare const ImageLink: (props: Omit<ImageBoxProps<"a">, "tag">) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ImageBox.d.ts.map

package/dist/components/ImageBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IACjG;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAEpF,iBAAS,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAC9C,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,2CAkB/F;AAED;;GAEG;AACH,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,2CAEhE;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,2CAEzD;AAED,eAAO,MAAM,QAAQ,kBAAqB,CAAA;AAC1C,eAAO,MAAM,WAAW,qBAAwB,CAAA;AAChD,eAAO,MAAM,SAAS,mBAAsB,CAAA"}
+{"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IACjG;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAEpF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,GACD,CAAC,SAAS,WAAW,wFACyC,aAAa,CAAC,CAAC,CAAC,4CAoBjG,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,UACM,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,4CAGjE,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,UACM,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,4CAG1D,CAAA"}

package/dist/components/ImageBox.js

@@ -3,7 +3,19 @@ import { listToClass } from '@stack-spot/portal-theme';
 import { useCitricController } from '../context/hooks.js';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
-function _ImageBox({ tag, appearance, size, className, analytics, onClick, feedback, ...props }) {
+/**
+ * Renders a wrapper for its child (normally an image). The image will be resized and cropped to fit the container. The image is not cropped
+ * if the property "feedback" is set.
+ *
+ * Hover and focus effects are applied if the ImageBox is focusable.
+ *
+ * @example
+ * ```
+ * <ImageBox><img src="https://images.com/myimage.png" /></ImageBox>
+ * ```
+ */
+export const ImageBox = withRef(function ImageBox({ tag, appearance, size, className, analytics, onClick, feedback, ...props }) {
+    props['aria-label'] ||= props.title; // accessibility
     const citric = useCitricController();
     function handleClick(e) {
         onClick?.(e);
@@ -13,20 +25,33 @@ function _ImageBox({ tag, appearance, size, className, analytics, onClick, feedb
             citric?.onClickLink?.(e, analytics ?? false);
     }
     return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass([appearance, size, className]), "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
-}
+});
 /**
- * Shortcut to `<ImageBox tag="button" />`
+ * A shortcut for `<ImageBox tag="button">`.
+ *
+ * Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <ImageButton><img src="https://images.com/myimage.png" /></ImageButton>
+ * ```
  */
-function _ImageButton(props) {
+export const ImageButton = withRef(function ImageButton(props) {
     return _jsx(ImageBox, { ...props, tag: "button", type: props.type || 'button' });
-}
+});
 /**
- * Shortcut to `<ImageBox tag="a" />`
+ * A shortcut for `<ImageBox tag="a">`.
+ *
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <ImageLink href="#"><img src="https://images.com/myimage.png" /></ImageButton>
+ * ```
  */
-function _ImageLink(props) {
+export const ImageLink = withRef(function ImageLink(props) {
     return _jsx(ImageBox, { ...props, tag: "a" });
-}
-export const ImageBox = withRef(_ImageBox);
-export const ImageButton = withRef(_ImageButton);
-export const ImageLink = withRef(_ImageLink);
+});
 //# sourceMappingURL=ImageBox.js.map

package/dist/components/ImageBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBox.js","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+CnD,SAAS,SAAS,CAChB,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;IAE9F,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBACtC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,YAAY,CAAC,KAA2C;IAC/D,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,GAAI,CAAA;AAC3E,CAAC;AAED;;GAEG;AACH,SAAS,UAAU,CAAC,KAAsC;IACxD,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACxC,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA;AAC1C,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CAAA;AAChD,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA"}
+{"version":3,"file":"ImageBox.js","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+CnD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAC7B,SAAS,QAAQ,CACf,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;IAE9F,KAAK,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,KAAK,CAAA,CAAC,gBAAgB;IACpD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBACtC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAChC,SAAS,WAAW,CAAC,KAA2C;IAC9D,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,GAAI,CAAA;AAC3E,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAC9B,SAAS,SAAS,CAAC,KAAsC;IACvD,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACxC,CAAC,CACF,CAAA"}

package/dist/components/ImageWithFallback.d.ts

@@ -1,8 +1,26 @@
 import { WithStyleShortcuts } from '../types.js';
 export interface BaseImageWithFallbackProps extends Pick<WithStyleShortcuts, 'w' | 'h' | 'radius' | 'bg'> {
+    /**
+     * The react element to fallback to if the image can't be rendered.
+     */
     fallback: React.ReactNode;
+    /**
+     * Whether or not to show a skeleton when the image is still loading.
+     * @default false
+     */
     showLoading?: boolean;
 }
 export type ImageWithFallbackProps = JSX.IntrinsicElements['img'] & BaseImageWithFallbackProps;
+/**
+ * Attempts to render an image. If it succeeds, the image is displayed, otherwise, a fallback is rendered.
+ *
+ * This is very useful if the value of "src" may be empty or if it may be broken. Instead of rendering nothing or the default browser error,
+ * it renders the fallback passed as parameter.
+ *
+ * @example
+ * ```
+ * <ImageWithFallback src={item.image} fallback={<Icon icon="Agent" />} />
+ * ```
+ */
 export declare const ImageWithFallback: ({ onLoad, onError, className, style: ogStyle, fallback, showLoading, w, h, radius, bg, ...props }: ImageWithFallbackProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ImageWithFallback.d.ts.map

package/dist/components/ImageWithFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageWithFallback.d.ts","sourceRoot":"","sources":["../../src/components/ImageWithFallback.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAI7C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,kBAAkB,EAAE,GAAG,GAAG,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC;IACvG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,sBAAsB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,0BAA0B,CAAA;AAE9F,eAAO,MAAM,iBAAiB,GAC5B,mGAAmG,sBAAsB,4CAgC1H,CAAA"}
+{"version":3,"file":"ImageWithFallback.d.ts","sourceRoot":"","sources":["../../src/components/ImageWithFallback.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAI7C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,kBAAkB,EAAE,GAAG,GAAG,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC;IACvG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,sBAAsB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,0BAA0B,CAAA;AAE9F;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,GAC5B,mGAAmG,sBAAsB,4CAgC1H,CAAA"}

package/dist/components/ImageWithFallback.js

@@ -3,6 +3,17 @@ import { listToClass } from '@stack-spot/portal-theme';
 import { useEffect, useMemo, useState } from 'react';
 import { getStyleFromProps } from '../utils/css.js';
 import { Skeleton } from './Skeleton.js';
+/**
+ * Attempts to render an image. If it succeeds, the image is displayed, otherwise, a fallback is rendered.
+ *
+ * This is very useful if the value of "src" may be empty or if it may be broken. Instead of rendering nothing or the default browser error,
+ * it renders the fallback passed as parameter.
+ *
+ * @example
+ * ```
+ * <ImageWithFallback src={item.image} fallback={<Icon icon="Agent" />} />
+ * ```
+ */
 export const ImageWithFallback = ({ onLoad, onError, className, style: ogStyle, fallback, showLoading, w, h, radius, bg, ...props }) => {
     const [state, setState] = useState(props.src ? 'loading' : 'error');
     const isLoading = state === 'loading' && showLoading;

package/dist/components/ImageWithFallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageWithFallback.js","sourceRoot":"","sources":["../../src/components/ImageWithFallback.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AASrC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,EAA0B,EACzH,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAClG,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,IAAI,WAAW,CAAA;IACpD,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAA;IAEtH,SAAS,UAAU,CAAC,CAAgD;QAClE,IAAI,KAAK,KAAK,SAAS;YAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;QAC1C,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;IACb,CAAC;IAED,SAAS,WAAW,CAAC,CAAgD;QACnE,QAAQ,CAAC,OAAO,CAAC,CAAA;QACjB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;IACd,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,SAAS;YAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IAEf,IAAI,KAAK,KAAK,OAAO;QAAE,OAAO,cAAK,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAO,CAAA;IAChH,OAAO,8BACJ,SAAS,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,EAC9D,cACE,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,iBACzF,SAAS,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,IACD,CAAA;AACL,CAAC,CAAA"}
+{"version":3,"file":"ImageWithFallback.js","sourceRoot":"","sources":["../../src/components/ImageWithFallback.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAgBrC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,EAA0B,EACzH,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAClG,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,IAAI,WAAW,CAAA;IACpD,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAA;IAEtH,SAAS,UAAU,CAAC,CAAgD;QAClE,IAAI,KAAK,KAAK,SAAS;YAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;QAC1C,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;IACb,CAAC;IAED,SAAS,WAAW,CAAC,CAAgD;QACnE,QAAQ,CAAC,OAAO,CAAC,CAAA;QACjB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;IACd,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,SAAS;YAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IAEf,IAAI,KAAK,KAAK,OAAO;QAAE,OAAO,cAAK,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAO,CAAA;IAChH,OAAO,8BACJ,SAAS,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,EAC9D,cACE,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,iBACzF,SAAS,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,IACD,CAAA;AACL,CAAC,CAAA"}

package/dist/components/Input.d.ts

@@ -11,7 +11,19 @@ export interface BaseInputProps<T extends SupportedInputType> extends WithColorS
 export type InputProps<T extends SupportedInputType = 'text'> = ControlledInput & BaseInputProps<T> & {
     type?: T;
 };
-declare function _Input<T extends SupportedInputType = 'text'>({ type, value, onChange, ...props }: InputProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare const Input: typeof _Input;
-export {};
+/**
+ * Renders a input.
+ *
+ * Attention: "onChange" doesn't receive an event, instead, it receives the new value of the input: a string, unless "type" is "number",
+ * in this case, it receives a number.
+ *
+ * @example
+ *
+ * ```
+ * const [value, setValue] = useState('')
+ *
+ * return <Input value={value} onChange={setValue} />
+ * ```
+ */
+export declare const Input: <T extends SupportedInputType = "text">({ type, value, onChange, ...props }: InputProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Input.d.ts.map

package/dist/components/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI3D,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GACjI,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAA;AAElC,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,kBAAkB,CAAE,SAAQ,eAAe;IACnF;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,CAAC,SAAS,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,SAAS,QAAQ,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,GAAG,MAAM,KAAK,IAAI,CAAC;CAChF;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,kBAAkB,GAAG,MAAM,IAC1D,eAAe,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,CAAC,CAAA;CAAE,CAAA;AAEpD,iBAAS,MAAM,CAAC,CAAC,SAAS,kBAAkB,GAAG,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,2CAaxG;AAED,eAAO,MAAM,KAAK,eAAkB,CAAA"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI3D,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GACjI,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAA;AAElC,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,kBAAkB,CAAE,SAAQ,eAAe;IACnF;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,CAAC,SAAS,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,SAAS,QAAQ,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,GAAG,MAAM,KAAK,IAAI,CAAC;CAChF;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,kBAAkB,GAAG,MAAM,IAC1D,eAAe,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,CAAC,CAAA;CAAE,CAAA;AAEpD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,KAAK,GACD,CAAC,SAAS,kBAAkB,gDAAgD,UAAU,CAAC,CAAC,CAAC,4CAczG,CAAA"}

package/dist/components/Input.js

@@ -1,7 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
-function _Input({ type, value, onChange, ...props }) {
+/**
+ * Renders a input.
+ *
+ * Attention: "onChange" doesn't receive an event, instead, it receives the new value of the input: a string, unless "type" is "number",
+ * in this case, it receives a number.
+ *
+ * @example
+ *
+ * ```
+ * const [value, setValue] = useState('')
+ *
+ * return <Input value={value} onChange={setValue} />
+ * ```
+ */
+export const Input = withRef(function Input({ type, value, onChange, ...props }) {
     function handleChange(e) {
         if (!onChange)
             return;
@@ -15,6 +29,5 @@ function _Input({ type, value, onChange, ...props }) {
         }
     }
     return _jsx(CitricComponent, { tag: "input", component: "input", type: type, value: value, onChange: handleChange, ...props });
-}
-export const Input = withRef(_Input);
+});
 //# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAiBnD,SAAS,MAAM,CAAwC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IACvG,SAAS,YAAY,CAAC,CAAsC;QAC1D,IAAI,CAAC,QAAQ;YAAE,OAAM;QACrB,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;QAC/B,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACtB,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YAC1D,QAAQ,CAAC,MAAa,CAAC,CAAA;QACzB,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,QAAe,CAAC,CAAA;QAC3B,CAAC;IACH,CAAC;IAED,OAAO,KAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,KAAM,KAAK,GAAI,CAAA;AACvH,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAiBnD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAC1B,SAAS,KAAK,CAAwC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IACtG,SAAS,YAAY,CAAC,CAAsC;QAC1D,IAAI,CAAC,QAAQ;YAAE,OAAM;QACrB,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;QAC/B,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACtB,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YAC1D,QAAQ,CAAC,MAAa,CAAC,CAAA;QACzB,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,QAAe,CAAC,CAAA;QAC3B,CAAC;IACH,CAAC;IAED,OAAO,KAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,KAAM,KAAK,GAAI,CAAA;AACvH,CAAC,CACF,CAAA"}

package/dist/components/Link.d.ts

@@ -16,5 +16,11 @@ export interface BaseLinkProps extends WithColor {
     analytics?: boolean;
 }
 export type LinkProps = React.JSX.IntrinsicElements['a'] & BaseLinkProps;
+/**
+ * Renders an html anchor by default, the actual component to render may be set on a CitricController, through the function `renderLink`.
+ *
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ */
 export declare const Link: ({ appearance, color, style, className, children, onClick, analytics, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Link.d.ts.map

package/dist/components/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAKpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,aAAa,CAAA;AAExE,eAAO,MAAM,IAAI,oFAA6F,SAAS,4CAerH,CAAA"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAKpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,aAAa,CAAA;AAExE;;;;;GAKG;AACH,eAAO,MAAM,IAAI,oFAA6F,SAAS,4CAerH,CAAA"}

package/dist/components/Link.js

@@ -3,6 +3,12 @@ import { useCitricController } from '../context/hooks.js';
 import { applyColor, applyTextAppearance } from '../utils/css.js';
 import { withRef } from '../utils/react.js';
 import { asCitricProps, CitricComponent } from './CitricComponent.js';
+/**
+ * Renders an html anchor by default, the actual component to render may be set on a CitricController, through the function `renderLink`.
+ *
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ */
 export const Link = withRef(({ appearance, color, style, className, children, onClick, analytics, ...props }) => {
     const citric = useCitricController();
     const linkProps = {

package/dist/components/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAqBlE,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IACzH,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,MAAM;QACjB,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;QAC/B,SAAS,EAAE,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC;QACrD,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;YAClD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;YACZ,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;QAC9C,CAAC;QACD,GAAG,KAAK;KACA,CAAA;IACV,OAAO,MAAM,EAAE,UAAU;QACvB,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC,KAAC,eAAe,IAAC,GAAG,EAAC,GAAG,KAAK,SAAS,YAAG,QAAQ,GAAmB,CAAA;AAC1E,CAAC,CAAC,CAAA"}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAqBlE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IACzH,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,MAAM;QACjB,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;QAC/B,SAAS,EAAE,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC;QACrD,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;YAClD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;YACZ,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;QAC9C,CAAC;QACD,GAAG,KAAK;KACA,CAAA;IACV,OAAO,MAAM,EAAE,UAAU;QACvB,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC,KAAC,eAAe,IAAC,GAAG,EAAC,GAAG,KAAK,SAAS,YAAG,QAAQ,GAAmB,CAAA;AAC1E,CAAC,CAAC,CAAA"}

package/dist/components/MenuOverlay/index.d.ts

@@ -1,3 +1,23 @@
 import { MenuOverlayProps } from './types.js';
+/**
+ * Creates a menu overlay for its child element. Whenever the child element is clicked, the menu appears. Closing the menu is also handled
+ * by this component.
+ *
+ * The menu is defined by the property "items" and can contain sections and sub menus.
+ *
+ * If no child is provided, a button with the vertical ellipsis icon is rendered.
+ *
+ * @example
+ *
+ * ```
+ * const items: MenuItem[] = useMemo([
+ *   { label: 'View', href: `/resource/${id}` },
+ *   { label: 'Edit', onClick: () => editResource(id) },
+ *   { label: 'Remove', onClick: () => removeResource(id), style: { color: theme.color.danger[500] } },
+ * ], [id])
+ *
+ * return <MenuOverlay items={items}><IconButton icon="Plus" /></MenuOverlay>
+ * ```
+ */
 export declare const MenuOverlay: ({ id, items, appearance, bgLevel, header, roundedItems, showBorders, showShadows, spaced, menuClass, menuStyle, children, ...props }: MenuOverlayProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/MenuOverlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C,eAAO,MAAM,WAAW,GAAI,sIAEzB,gBAAgB,4CAgBlB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,WAAW,GAAI,sIAEzB,gBAAgB,4CAgBlB,CAAA"}