@stack-spot/citric-react 0.11.1 → 0.12.0

package/dist/citric.css

@@ -1782,10 +1782,6 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
     border-radius: var(--radius-xs);
   }
 
-  &.text {
-    background-color: transparent;
-  }
-
   /* Colors */
 
   &[data-color-scheme] {

package/dist/components/ImageBox.d.ts

@@ -0,0 +1,49 @@
+import { HTMLTag } from '../types.js';
+type ImageBoxTag = 'a' | 'button' | 'span' | 'div';
+export interface BaseImageBoxProps<T extends ImageBoxTag> {
+    /**
+     * The HTML element to render.
+     *
+     * @default 'div'
+     */
+    tag?: T;
+    /**
+     * The box appearance.
+     *
+     * @default 'circle'
+     */
+    appearance?: 'circle' | 'square';
+    /**
+     * Size of the box.
+     *
+     * @default 'sm'
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Animated text to show on when the button/link is clicked. This is only valid for buttons and anchors.
+     */
+    feedback?: string;
+    /**
+     * Only valid if `tag` is "button" or "a".
+     *
+     * Whether or not a click in this button/link should generate analytics data.
+     *
+     * This only takes effect if there's a CitricController in React's context. The value of `analytics` is passed to the function
+     * `onClickButton/onClickLink` of the controller.
+     *
+     * @default false
+     */
+    analytics?: boolean;
+}
+export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProps<T>;
+export 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" />`
+ */
+export declare function ImageButton(props: Omit<ImageBoxProps<'button'>, 'tag'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Shortcut to `<ImageBox tag="a" />`
+ */
+export declare function 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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAGlC,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW;IACtD;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;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,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EACpD,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,wBAAgB,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,2CAEtE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,2CAE/D"}

package/dist/components/ImageBox.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useCallback } from 'react';
+import { useCitricController } from '../context/hooks.js';
+import { CitricComponent } from './CitricComponent.js';
+export function ImageBox({ tag, appearance, size, className, analytics, onClick, feedback, ...props }) {
+    const citric = useCitricController();
+    const handleClick = useCallback((e) => {
+        onClick?.(e);
+        if (tag === 'button')
+            citric?.onClickButton?.(e, analytics ?? false);
+        else if (tag === 'a')
+            citric?.onClickLink?.(e, analytics ?? false);
+    }, [tag]);
+    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" />`
+ */
+export function ImageButton(props) {
+    return ImageBox({ ...props, tag: 'button', type: props.type || 'button' });
+}
+/**
+ * Shortcut to `<ImageBox tag="a" />`
+ */
+export function ImageLink(props) {
+    return ImageBox({ ...props, tag: 'a' });
+}
+//# sourceMappingURL=ImageBox.js.map

package/dist/components/ImageBox.js.map

@@ -0,0 +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,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0CnD,MAAM,UAAU,QAAQ,CACtB,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,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAwB,EAAE,EAAE;QAC3D,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,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,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,MAAM,UAAU,WAAW,CAAC,KAA2C;IACrE,OAAO,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC,CAAA;AAC5E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,KAAsC;IAC9D,OAAO,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;AACzC,CAAC"}

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/package.json

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

package/src/components/ImageBox.tsx

@@ -0,0 +1,80 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { useCallback } from 'react'
+import { useCitricController } from '../context/hooks'
+import { HTMLTag } from '../types'
+import { CitricComponent } from './CitricComponent'
+
+type ImageBoxTag = 'a' | 'button' | 'span' | 'div'
+
+export interface BaseImageBoxProps<T extends ImageBoxTag> {
+  /**
+   * The HTML element to render.
+   * 
+   * @default 'div'
+   */
+  tag?: T,
+  /**
+   * The box appearance.
+   * 
+   * @default 'circle'
+   */
+  appearance?: 'circle' | 'square',
+  /**
+   * Size of the box.
+   * 
+   * @default 'sm'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg',
+  /**
+   * Animated text to show on when the button/link is clicked. This is only valid for buttons and anchors.
+   */
+  feedback?: string,
+  /**
+   * Only valid if `tag` is "button" or "a".
+   * 
+   * Whether or not a click in this button/link should generate analytics data.
+   * 
+   * This only takes effect if there's a CitricController in React's context. The value of `analytics` is passed to the function
+   * `onClickButton/onClickLink` of the controller.
+   * 
+   * @default false
+   */
+  analytics?: boolean,
+}
+
+export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProps<T>
+
+export function ImageBox<T extends ImageBoxTag = 'div'>(
+  { tag, appearance, size, className, analytics, onClick, feedback, ...props }: ImageBoxProps<T>,
+) {
+  const citric = useCitricController()
+
+  const handleClick = useCallback((e: React.MouseEvent<any>) => {
+    onClick?.(e)
+    if (tag === 'button') citric?.onClickButton?.(e, analytics ?? false)
+    else if (tag === 'a') citric?.onClickLink?.(e, analytics ?? false)
+  }, [tag])
+
+  return <CitricComponent
+    tag={(tag || 'i') as any}
+    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" />`
+ */
+export function ImageButton(props: Omit<ImageBoxProps<'button'>, 'tag'>) {
+  return ImageBox({ ...props, tag: 'button', type: props.type || 'button' })
+}
+
+/**
+ * Shortcut to `<ImageBox tag="a" />`
+ */
+export function ImageLink(props: Omit<ImageBoxProps<'a'>, 'tag'>) {
+  return ImageBox({ ...props, tag: 'a' })
+}

package/src/index.ts

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