@stack-spot/citric-react 0.11.1 → 0.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG9D,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG,iBAAiB,CAAA;AAElE,eAAO,MAAM,QAAQ,GAAI,+BAA+B,aAAa,4CACwD,CAAA"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI9D,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;CAC1D;AAED,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG,iBAAiB,CAAA;AAElE,eAAO,MAAM,SAAS,GAAI,+BAA+B,aAAa,4CACuD,CAAA;AAE7H,eAAO,MAAM,QAAQ,kCAHoC,aAAa,4CAG5B,CAAA"}

package/dist/components/Textarea.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
-export const Textarea = ({ value, onChange, ...props }) => _jsx(CitricComponent, { tag: "textarea", component: "textarea", value: value, onChange: e => onChange?.(e.target.value), ...props });
+export const _Textarea = ({ value, onChange, ...props }) => _jsx(CitricComponent, { tag: "textarea", component: "textarea", value: value, onChange: e => onChange?.(e.target.value), ...props });
+export const Textarea = withRef(_Textarea);
 //# sourceMappingURL=Textarea.js.map

package/dist/components/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AASnD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CACvE,KAAC,eAAe,IAAC,GAAG,EAAC,UAAU,EAAC,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI,CAAA"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAUnD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CACxE,KAAC,eAAe,IAAC,GAAG,EAAC,UAAU,EAAC,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI,CAAA;AAE7H,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA"}

package/dist/components/layout.d.ts

@@ -31,16 +31,20 @@ export interface BaseColumnProps<T extends keyof HTMLTag> extends BaseLayoutProp
 export type CenterProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseLayoutProps<T>;
 export type RowProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseRowProps<T>;
 export type ColumnProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseColumnProps<T>;
-export declare function Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>): import("react").ReactElement<{
+declare function _Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>): import("react").ReactElement<{
     style: Partial<import("react").CSSProperties>;
     className: string;
 }, string | import("react").JSXElementConstructor<any>>;
-export declare function Row<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: RowProps<T>): import("react").ReactElement<{
+declare function _Row<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: RowProps<T>): import("react").ReactElement<{
     style: Partial<import("react").CSSProperties>;
     className: string;
 }, string | import("react").JSXElementConstructor<any>>;
-export declare function Column<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: ColumnProps<T>): import("react").ReactElement<{
+declare function _Column<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: ColumnProps<T>): import("react").ReactElement<{
     style: Partial<import("react").CSSProperties>;
     className: string;
 }, string | import("react").JSXElementConstructor<any>>;
+export declare const Center: typeof _Center;
+export declare const Row: typeof _Row;
+export declare const Column: typeof _Column;
+export {};
 //# sourceMappingURL=layout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGtD,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,kBAAkB;IAClF;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC/E;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAClF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAElF,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAEnG;AAED,wBAAgB,GAAG,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;;;wDAErG;AAED,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAE3G"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAItD,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,kBAAkB;IAClF;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC/E;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAClF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAElF,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAE7F;AAED,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;;;wDAE/F;AAED,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAErG;AAED,eAAO,MAAM,MAAM,gBAAmB,CAAA;AACtC,eAAO,MAAM,GAAG,aAAgB,CAAA;AAChC,eAAO,MAAM,MAAM,gBAAmB,CAAA"}

package/dist/components/layout.js

@@ -1,18 +1,22 @@
 import { listToClass } from '@stack-spot/portal-theme';
 import { createElement } from 'react';
 import { applyStyles } from '../utils/css.js';
+import { withRef } from '../utils/react.js';
 export const layout = {
     center: 'center',
     row: 'row',
     column: 'column',
 };
-export function Center({ tag, className, ...props }) {
+function _Center({ tag, className, ...props }) {
     return createElement(tag || 'div', { className: listToClass(['center', className]), ...applyStyles(props) });
 }
-export function Row({ tag, className, center, ...props }) {
+function _Row({ tag, className, center, ...props }) {
     return createElement(tag || 'div', { className: listToClass(['row', center === false && 'no-center', className]), ...applyStyles(props) });
 }
-export function Column({ tag, className, center, ...props }) {
+function _Column({ tag, className, center, ...props }) {
     return createElement(tag || 'div', { className: listToClass(['column', center && 'center', className]), ...applyStyles(props) });
 }
+export const Center = withRef(_Center);
+export const Row = withRef(_Row);
+export const Column = withRef(_Column);
 //# sourceMappingURL=layout.js.map

package/dist/components/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;CACjB,CAAA;AAiCD,MAAM,UAAU,MAAM,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IAClG,OAAO,aAAa,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;AAC9G,CAAC;AAED,MAAM,UAAU,GAAG,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAe;IACpG,OAAO,aAAa,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,IAAI,WAAW,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;AAC5I,CAAC;AAED,MAAM,UAAU,MAAM,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAkB;IAC1G,OAAO,aAAa,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,EAAE,MAAM,IAAI,QAAQ,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;AAClI,CAAC"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;CACjB,CAAA;AAiCD,SAAS,OAAO,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IAC5F,OAAO,aAAa,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;AAC9G,CAAC;AAED,SAAS,IAAI,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAe;IAC9F,OAAO,aAAa,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,IAAI,WAAW,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;AAC5I,CAAC;AAED,SAAS,OAAO,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAkB;IACpG,OAAO,aAAa,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,EAAE,MAAM,IAAI,QAAQ,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;AAClI,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;AACtC,MAAM,CAAC,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;AAChC,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA"}

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export * from './components/FieldGroup.js';
 export * from './components/Form.js';
 export * from './components/FormGroup.js';
 export * from './components/IconBox.js';
+export * from './components/ImageBox.js';
 export * from './components/Input.js';
 export * from './components/layout.js';
 export * from './components/Link.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,yBAAyB,CAAA"}

package/dist/index.js

@@ -20,6 +20,7 @@ export * from './components/FieldGroup.js';
 export * from './components/Form.js';
 export * from './components/FormGroup.js';
 export * from './components/IconBox.js';
+export * from './components/ImageBox.js';
 export * from './components/Input.js';
 export * from './components/layout.js';
 export * from './components/Link.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,yBAAyB,CAAA"}

package/dist/utils/react.d.ts

@@ -0,0 +1,2 @@
+export declare function withRef<T extends (...args: any[]) => any>(fc: T): T;
+//# sourceMappingURL=react.d.ts.map

package/dist/utils/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/utils/react.ts"],"names":[],"mappings":"AAGA,wBAAgB,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAEnE"}

package/dist/utils/react.js

@@ -0,0 +1,6 @@
+/* eslint-disable react/display-name */
+import { forwardRef } from 'react';
+export function withRef(fc) {
+    return forwardRef((props, ref) => fc({ ...props, ref }));
+}
+//# sourceMappingURL=react.js.map

package/dist/utils/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../src/utils/react.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,MAAM,UAAU,OAAO,CAAoC,EAAK;IAC9D,OAAO,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,CAAC,CAAQ,CAAA;AACjE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Accordion.tsx

@@ -1,6 +1,7 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { useEffect, useMemo, useState } from 'react'
 import { applyCSSVariable } from '../utils/css'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseAccordionProps {
@@ -35,7 +36,7 @@ export interface BaseAccordionProps {
 
 export type AccordionProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & BaseAccordionProps
 
-export const Accordion = (
+export const Accordion = withRef((
   { id, appearance, expanded, onChange, header, maxHeight = 300, className, style, children, ...props }: AccordionProps,
 ) => {
   const [ariaHidden, setAriaHidden] = useState(!expanded)
@@ -70,4 +71,4 @@ export const Accordion = (
       </section>
     </CitricComponent>
   )
-}
+})

package/src/components/Alert.tsx

@@ -1,4 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseAlertProps {
@@ -11,5 +12,5 @@ export interface BaseAlertProps {
 
 export type AlertProps = React.JSX.IntrinsicElements['div'] & BaseAlertProps
 
-export const Alert = ({ type, className, children, ...props }: AlertProps) =>
-  <CitricComponent tag="div" component="alert" className={listToClass([type, className])} {...props}>{children}</CitricComponent>
+export const Alert = withRef(({ type, className, children, ...props }: AlertProps) =>
+  <CitricComponent tag="div" component="alert" className={listToClass([type, className])} {...props}>{children}</CitricComponent>)

package/src/components/AsyncContent.tsx

@@ -1,5 +1,6 @@
 import { MutableRefObject, useEffect, useLayoutEffect } from 'react'
 import { useCitricController } from '../context/hooks'
+import { withRef } from '../utils/react'
 import { ErrorMessage } from './ErrorMessage'
 import { LoadingPanel } from './LoadingPanel'
 
@@ -31,7 +32,7 @@ interface Props {
  * @param options the props for rendering the component: {@link Props}. 
  */
 
-export const AsyncContent = ({ loading, error, autofocus, children }: Props) => {
+export const AsyncContent = withRef(({ loading, error, autofocus, children }: Props) => {
   const citric = useCitricController()
 
   useEffect(() => {
@@ -51,4 +52,4 @@ export const AsyncContent = ({ loading, error, autofocus, children }: Props) =>
   if (loading) return <LoadingPanel />
   if (error) return citric?.renderError ? citric.renderError(error) : <ErrorMessage error={error} />
   return children
-}
+})

package/src/components/Avatar.tsx

@@ -1,5 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { WithColorPalette } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseAvatarProps extends WithColorPalette {
@@ -23,7 +24,7 @@ export interface BaseAvatarProps extends WithColorPalette {
 
 export type AvatarProps = React.JSX.IntrinsicElements['div'] & BaseAvatarProps
 
-export const Avatar = ({ size, name, appearance, className, image, ...props }: AvatarProps) => {
+export const Avatar = withRef(({ size, name, appearance, className, image, ...props }: AvatarProps) => {
   const parts = name?.split(' ') ?? ['']
   const acronym = parts.length >= 2 ? `${parts[0][0]}${parts[1][0]}` : parts[0][0]
   return (
@@ -31,4 +32,4 @@ export const Avatar = ({ size, name, appearance, className, image, ...props }: A
       {image ? <img src={image} /> : acronym}
     </CitricComponent>
   )
-}
+})

package/src/components/AvatarGroup.tsx

@@ -1,5 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { WithColorPalette } from '../types'
+import { withRef } from '../utils/react'
 import { Avatar } from './Avatar'
 import { CitricComponent } from './CitricComponent'
 
@@ -24,7 +25,7 @@ export interface BaseAvatarGroupProps extends WithColorPalette {
 
 export type AvatarGroupProps = React.JSX.IntrinsicElements['div'] & BaseAvatarGroupProps
 
-export const AvatarGroup = ({ size, items, appearance, maxItems, className, ...props }: AvatarGroupProps) => {
+export const AvatarGroup = withRef(({ size, items, appearance, maxItems, className, ...props }: AvatarGroupProps) => {
   const avatars = items.map(({ name, image }) => <Avatar key={name} name={name} image={image} />, [items])
   return (
     <CitricComponent
@@ -37,4 +38,4 @@ export const AvatarGroup = ({ size, items, appearance, maxItems, className, ...p
       {avatars}
     </CitricComponent>
   )
-}
+})

package/src/components/Badge.tsx

@@ -1,5 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { HTMLTag, WithColorPalette } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 type ValidTags = 'a' | 'button' | 'li' | 'div' | 'span'
@@ -19,10 +20,12 @@ export interface BaseBadgeProps<T extends ValidTags = ValidTags> extends WithCol
 
 export type BadgeProps<T extends ValidTags> = HTMLTag[T] & BaseBadgeProps<T>
 
-export function Badge<T extends ValidTags>({ tag, appearance, className, children, ...props }: BadgeProps<T>) {
+function _Badge<T extends ValidTags>({ tag, appearance, className, children, ...props }: BadgeProps<T>) {
   return (
     <CitricComponent tag={tag || 'div'} component="badge" className={listToClass([appearance, className])} {...props as any}>
       {children}
     </CitricComponent>
   )
 }
+
+export const Badge = withRef(_Badge)

package/src/components/Blockquote.tsx

@@ -1,9 +1,10 @@
 import { WithColorPalette, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export type BaseBlockquoteProps = WithColorScheme & WithColorPalette
 
 export type BlockquoteProps = React.JSX.IntrinsicElements['blockquote'] & BaseBlockquoteProps
 
-export const Blockquote = ({ children, ...props }: BlockquoteProps) =>
-  <CitricComponent tag="blockquote" component="blockquote" {...props}>{children}</CitricComponent>
+export const Blockquote = withRef(({ children, ...props }: BlockquoteProps) =>
+  <CitricComponent tag="blockquote" component="blockquote" {...props}>{children}</CitricComponent>)

package/src/components/Breadcrumb.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 interface BreadCrumbItem {
@@ -12,7 +13,7 @@ export interface BaseBreadcrumbProps {
 
 export type BreadcrumbProps = React.JSX.IntrinsicElements['nav'] & BaseBreadcrumbProps
 
-export const Breadcrumb = ({ items, ...props }: BreadcrumbProps) => {
+export const Breadcrumb = withRef(({ items, ...props }: BreadcrumbProps) => {
   const children = useMemo(
     () => items.map(
       (item, index) => item.href ? <li key={index}><a href={item.href}>{item.label}</a></li> : <li key={index}>{item.label}</li>,
@@ -20,4 +21,4 @@ export const Breadcrumb = ({ items, ...props }: BreadcrumbProps) => {
     [items],
   )
   return <CitricComponent tag="nav" component="breadcrumb" {...props}><ul>{children}</ul></CitricComponent>
-}
+})

package/src/components/Button.tsx

@@ -2,6 +2,7 @@ import { listToClass } from '@stack-spot/portal-theme'
 import { useState } from 'react'
 import { useCitricController } from '../context/hooks'
 import { WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 import { ProgressCircular } from './ProgressCircular'
 
@@ -46,7 +47,7 @@ export interface BaseButtonProps extends WithColorScheme {
 
 export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'> & BaseButtonProps
 
-export const Button = (
+export const Button = withRef((
   { appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button', analytics, ...props }: ButtonProps,
 ) => {
   const citric = useCitricController()
@@ -85,4 +86,4 @@ export const Button = (
       )}
     </CitricComponent>
   )
-}
+})

package/src/components/Card.tsx

@@ -1,5 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseCardProps extends WithColorScheme {
@@ -26,7 +27,7 @@ export interface BaseCardProps extends WithColorScheme {
 
 export type CardProps = React.JSX.IntrinsicElements['div'] & BaseCardProps
 
-export const Card = ({ tag = 'div', onClick, size, bgLevel, className, children, ...props }: CardProps) => (
+export const Card = withRef(({ tag = 'div', onClick, size, bgLevel, className, children, ...props }: CardProps) => (
   <CitricComponent
     tag={tag}
     component="card"
@@ -35,4 +36,4 @@ export const Card = ({ tag = 'div', onClick, size, bgLevel, className, children,
   >
     {children}
   </CitricComponent>
-)
+))

package/src/components/Checkbox.tsx

@@ -1,4 +1,5 @@
 import { ControlledInput, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseCheckboxProps extends WithColorScheme {
@@ -14,7 +15,7 @@ export interface BaseCheckboxProps extends WithColorScheme {
 
 export type CheckboxProps = ControlledInput & BaseCheckboxProps
 
-export const Checkbox = (
+export const Checkbox = withRef((
   { appearance = 'checkbox', value, onChange, colorScheme, children, className, style, ...props }: CheckboxProps,
 ) => {
   const handleChange = onChange ? () => onChange(!value) : undefined
@@ -33,4 +34,4 @@ export const Checkbox = (
     style={style}
     {...props}
   />
-}
+})

package/src/components/CheckboxGroup.tsx

@@ -2,6 +2,7 @@ import { isNil } from 'lodash'
 import { useMemo } from 'react'
 import { WithColorScheme } from '../types'
 import { defaultRenderKey, defaultRenderLabel } from '../utils/options'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 import { Column } from './layout'
 
@@ -57,7 +58,7 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
 
 export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseCheckboxGroupProps<T>
 
-export function CheckboxGroup<T>({
+function _CheckboxGroup<T>({
   appearance = 'checkbox',
   name,
   value = [],
@@ -91,3 +92,5 @@ export function CheckboxGroup<T>({
   }, [options, value, name, colorScheme, appearance])
   return <Column {...props} style={{ gap: '8px', ...style }}>{items}</Column>
 }
+
+export const CheckboxGroup = withRef(_CheckboxGroup)

package/src/components/Circle.tsx

@@ -1,5 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { WithColorPalette, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseCircleProps extends WithColorPalette, WithColorScheme {
@@ -19,8 +20,8 @@ export interface BaseCircleProps extends WithColorPalette, WithColorScheme {
 
 export type CircleProps = React.JSX.IntrinsicElements['div'] & BaseCircleProps
 
-export const Circle = ({ showBorders, className, size, children, ...props }: CircleProps) => (
+export const Circle = withRef(({ showBorders, className, size, children, ...props }: CircleProps) => (
   <CitricComponent tag="div" component="circle" className={listToClass([className, showBorders && 'bordered', size])} {...props}>
     {children}
   </CitricComponent>
-)
+))

package/src/components/CitricComponent.ts

@@ -9,6 +9,7 @@ export type CitricComponentName = 'alert' | 'avatar' | 'badge' | 'blockquote' |
 
 interface BaseCitricProps extends WithColorScheme, WithColorPalette {
   component: CitricComponentName,
+  ref?: any,
 } 
 
 interface CitricComponentType {

package/src/components/Divider.tsx

@@ -1,5 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseDividerProps extends WithColorScheme {
@@ -15,8 +16,8 @@ export interface BaseDividerProps extends WithColorScheme {
 
 export type DividerProps = React.JSX.IntrinsicElements['hr'] & BaseDividerProps
 
-export const Divider = ({ size, direction, className, children, ...props }: DividerProps) => (
+export const Divider = withRef(({ size, direction, className, children, ...props }: DividerProps) => (
   <CitricComponent tag="hr" component="divider" className={listToClass([className, size, direction])} {...props}>
     {children}
   </CitricComponent>
-)
+))

package/src/components/Favorite.tsx

@@ -1,5 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { ControlledInput } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 type FavoriteAppearance = 'square' | 'circle' | 'text'
@@ -27,9 +28,9 @@ export interface BaseFavoriteProps {
   loading?: boolean,
 }
 
-export type FavoriteProps = ControlledInput & BaseFavoriteProps
+export type FavoriteProps = Omit<ControlledInput, 'size'> & BaseFavoriteProps
 
-export const Favorite = ({ value, size, appearance, onChange, loading, disabled, className, ...props }: FavoriteProps) =>
+export const Favorite = withRef(({ value, size, appearance, onChange, loading, disabled, className, ...props }: FavoriteProps) =>
   <CitricComponent
     tag="input"
     type="checkbox"
@@ -40,4 +41,5 @@ export const Favorite = ({ value, size, appearance, onChange, loading, disabled,
     aria-busy={loading}
     disabled={loading || disabled}
     {...props}
-  />
+  />,
+)

package/src/components/FieldGroup.tsx

@@ -1,4 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseFieldGroupProps {
@@ -14,8 +15,8 @@ export interface BaseFieldGroupProps {
 
 export type FieldGroupProps = React.JSX.IntrinsicElements['div'] & BaseFieldGroupProps
 
-export const FieldGroup = ({ auto = true, className, children, ...props }: FieldGroupProps) => (
+export const FieldGroup = withRef(({ auto = true, className, children, ...props }: FieldGroupProps) => (
   <CitricComponent tag="div" component="field-group" className={listToClass([className, auto && 'auto'])} {...props}>
     {children}
   </CitricComponent>
-)
+))

package/src/components/Form.tsx

@@ -1,4 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export type FormProps = JSX.IntrinsicElements['form']
@@ -10,8 +11,8 @@ export const Form = ({ children, ...props }: FormProps) => (
   </CitricComponent>
 )
 
-export const ButtonGroup = ({ className, children, ...props }: ButtonGroupProps) => (
+export const ButtonGroup = withRef(({ className, children, ...props }: ButtonGroupProps) => (
   <div className={listToClass([className, 'button-group'])} {...props}>
     {children}
   </div>
-)
+))

package/src/components/FormGroup.tsx

@@ -1,4 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 import { IconButton } from './IconBox'
 import { Text } from './Text'
@@ -25,7 +26,7 @@ export interface BaseFormGroupProps {
 
 export type FormGroupProps = React.JSX.IntrinsicElements['div'] & BaseFormGroupProps
 
-export const FormGroup = ({ error, help, label, warning, className, children, ...props }: FormGroupProps) => (
+export const FormGroup = withRef(({ error, help, label, warning, className, children, ...props }: FormGroupProps) => (
   <CitricComponent tag="div" component="form-group" className={listToClass([className, error && 'error'])} {...props}>
     <label>
       {help ? (
@@ -41,4 +42,4 @@ export const FormGroup = ({ error, help, label, warning, className, children, ..
       {warning && <div className="warning">{warning}</div>}
     </label>
   </CitricComponent>
-)
+))

package/src/components/IconBox.tsx

@@ -3,6 +3,7 @@ import { listToClass } from '@stack-spot/portal-theme'
 import { useCallback } from 'react'
 import { useCitricController } from '../context/hooks'
 import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 type IconBoxTag = 'a' | 'button' | 'i' | 'span' | 'div'
@@ -45,8 +46,8 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
 
 export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLTag[T], 'children'> & BaseIconBoxProps<T, G>
 
-export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
-  { group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, ...props }: IconBoxProps<T, G>,
+function _IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
+  { group, icon, tag, appearance, size, className, analytics, onClick, feedback, ...props }: IconBoxProps<T, G>,
 ) {
   const citric = useCitricController()
 
@@ -60,8 +61,6 @@ export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outli
     tag={(tag || 'i') as any}
     component="icon-box"
     className={listToClass(['citric-icon', group || 'outline', icon, appearance, size, className])}
-    colorScheme={colorScheme}
-    colorPalette={colorPalette}
     data-feedback={feedback || undefined}
     onClick={['button', 'a'].includes(tag ?? '') ? handleClick : onClick}
     {...props}
@@ -71,13 +70,17 @@ export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outli
 /**
  * Shortcut to `<IconBox tag="button" />`
  */
-export function IconButton<G extends IconGroup = 'outline'>(props: Omit<IconBoxProps<'button', G>, 'tag'>) {
-  return IconBox({ ...props, tag: 'button', type: props.type || 'button' })
+function _IconButton<G extends IconGroup = 'outline'>({ type, ...props }: Omit<IconBoxProps<'button', G>, 'tag'>) {
+  return <IconBox {...props} tag="button" type={type || 'button' } />
 }
 
 /**
  * Shortcut to `<IconBox tag="a" />`
  */
-export function IconLink<G extends IconGroup = 'outline'>(props: Omit<IconBoxProps<'a', G>, 'tag'>) {
-  return IconBox({ ...props, tag: 'a' })
+function _IconLink<G extends IconGroup = 'outline'>(props: Omit<IconBoxProps<'a', G>, 'tag'>) {
+  return <IconBox {...props} tag="a" />
 }
+
+export const IconBox = withRef(_IconBox)
+export const IconButton = withRef(_IconButton)
+export const IconLink = withRef(_IconLink)