@simplybusiness/mobius 4.7.0 → 4.8.0

package/dist/esm/src/components/Drawer/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Drawer/Header.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } from \"react\";\n\nimport { cross } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type HeaderElementType = HTMLDivElement;\nexport type HeaderRef = Ref<HTMLElement>;\n\nexport interface HeaderProps\n  extends DOMProps,\n    RefAttributes<HeaderElementType>,\n    PropsWithChildren {\n  onClose?: () => void;\n  closeLabel?: string;\n}\n\nconst Header = forwardRef(\n  (\n    { children, onClose, closeLabel, ...otherProps }: HeaderProps,\n    ref: HeaderRef,\n  ) => (\n    <header ref={ref} {...otherProps} className=\"mobius/DrawerHeader\">\n      {children}\n      <Button\n        aria-label=\"Close\"\n        variant=\"basic\"\n        onPress={onClose}\n        className=\"mobius/DrawerClose\"\n      >\n        <Icon icon={cross} /> {closeLabel}\n      </Button>\n    </header>\n  ),\n);\n\nHeader.displayName = \"Header\";\nexport { Header };\n"],"names":["forwardRef","cross","Button","Icon","Header","children","onClose","closeLabel","otherProps","ref","header","className","aria-label","variant","onPress","icon","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAa/B,MAAMC,uBAASJ,WACb,CACE,EAAEK,QAAQ,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,YAAyB,EAC7DC,oBAEA,MAACC;QAAOD,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;;YACzCN;0BACD,MAACH;gBACCU,cAAW;gBACXC,SAAQ;gBACRC,SAASR;gBACTK,WAAU;;kCAEV,KAACR;wBAAKY,MAAMd;;oBAAS;oBAAEM;;;;;AAM/BH,OAAOY,WAAW,GAAG;AACrB,SAASZ,MAAM,GAAG"}

package/dist/esm/src/components/Drawer/index.js

@@ -0,0 +1,11 @@
+import { Content } from "./Content";
+import { Drawer as DrawerComponent } from "./Drawer";
+import { Header } from "./Header";
+const Drawer = Object.assign(DrawerComponent, {
+    Header,
+    Content
+});
+Drawer.displayName = "Drawer";
+export { Drawer };
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Drawer/index.tsx"],"sourcesContent":["import {\n  Content,\n  DivElementType as DrawerContentDivElementType,\n  ContentProps as DrawerContentProps,\n} from \"./Content\";\nimport { Drawer as DrawerComponent } from \"./Drawer\";\nimport { DrawerProps } from \"./types\";\nimport {\n  HeaderElementType as DrawerHeaderElementType,\n  HeaderProps as DrawerHeaderProps,\n  Header,\n} from \"./Header\";\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Header,\n  Content,\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n\nexport type {\n  DrawerContentDivElementType,\n  DrawerContentProps,\n  DrawerHeaderElementType,\n  DrawerHeaderProps,\n  DrawerProps,\n};\n"],"names":["Content","Drawer","DrawerComponent","Header","Object","assign","displayName"],"mappings":"AAAA,SACEA,OAAO,QAGF,YAAY;AACnB,SAASC,UAAUC,eAAe,QAAQ,WAAW;AAErD,SAGEC,MAAM,QACD,WAAW;AAElB,MAAMF,SAASG,OAAOC,MAAM,CAACH,iBAAiB;IAC5CC;IACAH;AACF;AAEAC,OAAOK,WAAW,GAAG;AACrB,SAASL,MAAM,GAAG"}

package/dist/esm/src/components/Drawer/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/esm/src/components/Drawer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Drawer/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  /**\n   * Direction that drawer will open from\n   */\n  direction: \"top\" | \"bottom\" | \"left\" | \"right\";\n  className?: string;\n  closeLabel?: string;\n  /**\n   * Announce text for screen readers when drawer opens\n   */\n  announce?: string;\n  onOpen?: () => void;\n  onClose?: () => void;\n  children?: ReactNode;\n}\n"],"names":[],"mappings":"AAEA,WAeC"}

package/dist/esm/src/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, Children, isValidElement, cloneElement, useState } from "react";
+import useDropdownMenu from "react-accessible-dropdown-menu-hook";
+import classNames from "classnames/dedupe";
+import { Button } from "../Button";
+const DropdownMenu = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { elementType: Element = "nav", trigger, label = "Menu", children, ...otherProps } = props;
+    const [activeId, setActiveId] = useState(null);
+    const numberOfItems = Children.count(children);
+    const { buttonProps, itemProps, isOpen: open, setIsOpen } = useDropdownMenu(numberOfItems);
+    const classes = classNames("mobius", "mobius/DropdownMenu", otherProps.className);
+    const triggerClasses = classNames("mobius", "mobius/DropdownMenuTrigger");
+    const listClasses = classNames("mobius", "mobius/DropdownMenuList", {
+        "--is-open": open
+    });
+    const handleChildClick = ({ onClick }, index)=>{
+        setActiveId(index);
+        setIsOpen(false);
+        if (onClick) {
+            onClick();
+        }
+    };
+    return /*#__PURE__*/ _jsxs(Element, {
+        ref: ref,
+        ...otherProps,
+        className: classes,
+        children: [
+            trigger ? /*#__PURE__*/ cloneElement(trigger, {
+                className: triggerClasses,
+                open,
+                label,
+                ...buttonProps
+            }) : /*#__PURE__*/ _jsx(Button, {
+                className: triggerClasses,
+                ...buttonProps,
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("ul", {
+                className: listClasses,
+                role: "menu",
+                children: Children.map(children, (child, index)=>{
+                    if (/*#__PURE__*/ isValidElement(child)) {
+                        return /*#__PURE__*/ cloneElement(child, {
+                            onClick: ()=>handleChildClick(child.props, index),
+                            active: index === activeId,
+                            ...itemProps[index]
+                        });
+                    }
+                    return child;
+                })
+            })
+        ]
+    });
+});
+DropdownMenu.displayName = "DropdownMenu";
+export { DropdownMenu };
+
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/esm/src/components/DropdownMenu/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Ref,\n  forwardRef,\n  RefAttributes,\n  ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n  useState,\n  ReactElement,\n} from \"react\";\nimport useDropdownMenu from \"react-accessible-dropdown-menu-hook\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\n\nimport { Button } from \"../Button\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type DropdownMenuElementType = HTMLElement;\n\nexport interface DropdownMenuProps\n  extends DOMProps,\n    RefAttributes<DropdownMenuElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  label?: string;\n  trigger?: ReactElement;\n}\n\nexport type DropdownMenuRef = Ref<DropdownMenuElementType>;\n\ntype ChildClickProps = {\n  onClick?: () => void;\n};\n\nconst DropdownMenu: ForwardedRefComponent<\n  DropdownMenuProps,\n  DropdownMenuElementType\n> = forwardRef((props: DropdownMenuProps, ref: DropdownMenuRef) => {\n  const {\n    elementType: Element = \"nav\",\n    trigger,\n    label = \"Menu\",\n    children,\n    ...otherProps\n  } = props;\n  const [activeId, setActiveId] = useState<number | null>(null);\n  const numberOfItems = Children.count(children);\n  const {\n    buttonProps,\n    itemProps,\n    isOpen: open,\n    setIsOpen,\n  } = useDropdownMenu(numberOfItems);\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius/DropdownMenu\",\n    otherProps.className,\n  );\n  const triggerClasses = classNames(\"mobius\", \"mobius/DropdownMenuTrigger\");\n  const listClasses = classNames(\"mobius\", \"mobius/DropdownMenuList\", {\n    \"--is-open\": open,\n  });\n\n  const handleChildClick = ({ onClick }: ChildClickProps, index: number) => {\n    setActiveId(index);\n    setIsOpen(false);\n\n    if (onClick) {\n      onClick();\n    }\n  };\n\n  return (\n    <Element ref={ref} {...otherProps} className={classes}>\n      {trigger ? (\n        cloneElement(trigger, {\n          className: triggerClasses,\n          open,\n          label,\n          ...buttonProps,\n        })\n      ) : (\n        <Button className={triggerClasses} {...buttonProps}>\n          {label}\n        </Button>\n      )}\n      <ul className={listClasses} role=\"menu\">\n        {Children.map(children, (child, index) => {\n          if (isValidElement(child)) {\n            return cloneElement(child, {\n              onClick: () => handleChildClick(child.props, index),\n              active: index === activeId,\n              ...itemProps[index],\n            } as any);\n          }\n\n          return child;\n        })}\n      </ul>\n    </Element>\n  );\n});\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n"],"names":["forwardRef","Children","isValidElement","cloneElement","useState","useDropdownMenu","classNames","Button","DropdownMenu","props","ref","elementType","Element","trigger","label","children","otherProps","activeId","setActiveId","numberOfItems","count","buttonProps","itemProps","isOpen","open","setIsOpen","classes","className","triggerClasses","listClasses","handleChildClick","onClick","index","ul","role","map","child","active","displayName"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EAGVC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,QAAQ,QAEH,QAAQ;AACf,OAAOC,qBAAqB,sCAAsC;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,MAAM,QAAQ,YAAY;AAsBnC,MAAMC,6BAGFR,WAAW,CAACS,OAA0BC;IACxC,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,OAAO,EACPC,QAAQ,MAAM,EACdC,QAAQ,EACR,GAAGC,YACJ,GAAGP;IACJ,MAAM,CAACQ,UAAUC,YAAY,GAAGd,SAAwB;IACxD,MAAMe,gBAAgBlB,SAASmB,KAAK,CAACL;IACrC,MAAM,EACJM,WAAW,EACXC,SAAS,EACTC,QAAQC,IAAI,EACZC,SAAS,EACV,GAAGpB,gBAAgBc;IAEpB,MAAMO,UAAUpB,WACd,UACA,uBACAU,WAAWW,SAAS;IAEtB,MAAMC,iBAAiBtB,WAAW,UAAU;IAC5C,MAAMuB,cAAcvB,WAAW,UAAU,2BAA2B;QAClE,aAAakB;IACf;IAEA,MAAMM,mBAAmB,CAAC,EAAEC,OAAO,EAAmB,EAAEC;QACtDd,YAAYc;QACZP,UAAU;QAEV,IAAIM,SAAS;YACXA;QACF;IACF;IAEA,qBACE,MAACnB;QAAQF,KAAKA;QAAM,GAAGM,UAAU;QAAEW,WAAWD;;YAC3Cb,wBACCV,aAAaU,SAAS;gBACpBc,WAAWC;gBACXJ;gBACAV;gBACA,GAAGO,WAAW;YAChB,mBAEA,KAACd;gBAAOoB,WAAWC;gBAAiB,GAAGP,WAAW;0BAC/CP;;0BAGL,KAACmB;gBAAGN,WAAWE;gBAAaK,MAAK;0BAC9BjC,SAASkC,GAAG,CAACpB,UAAU,CAACqB,OAAOJ;oBAC9B,kBAAI9B,eAAekC,QAAQ;wBACzB,qBAAOjC,aAAaiC,OAAO;4BACzBL,SAAS,IAAMD,iBAAiBM,MAAM3B,KAAK,EAAEuB;4BAC7CK,QAAQL,UAAUf;4BAClB,GAAGK,SAAS,CAACU,MAAM;wBACrB;oBACF;oBAEA,OAAOI;gBACT;;;;AAIR;AAEA5B,aAAa8B,WAAW,GAAG;AAC3B,SAAS9B,YAAY,GAAG"}

package/dist/esm/src/components/DropdownMenu/Item.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+const Item = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { elementType: Element = "li", active, onClick, ...otherProps } = props;
+    const classes = classNames("mobius", "mobius/DropdownMenuItem", {
+        "--is-active": active
+    }, otherProps.className);
+    return /*#__PURE__*/ _jsx(Element, {
+        ref: ref,
+        className: classes,
+        onClick: onClick,
+        ...otherProps
+    });
+});
+Item.displayName = "DropdownMenu.Item";
+export { Item };
+
+//# sourceMappingURL=Item.js.map

package/dist/esm/src/components/DropdownMenu/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/DropdownMenu/Item.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n  elementType?: string | React.ElementType;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  active?: boolean;\n  children?: ReactNode;\n  onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item: ForwardedRefComponent<ItemProps, ItemElementType> = forwardRef(\n  (props: ItemProps, ref: ItemRef) => {\n    const {\n      elementType: Element = \"li\",\n      active,\n      onClick,\n      ...otherProps\n    } = props;\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/DropdownMenuItem\",\n      { \"--is-active\": active },\n      otherProps.className,\n    );\n\n    return (\n      <Element\n        ref={ref}\n        className={classes}\n        onClick={onClick}\n        {...otherProps}\n      />\n    );\n  },\n);\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],"names":["forwardRef","classNames","Item","props","ref","elementType","Element","active","onClick","otherProps","classes","className","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAiB3C,MAAMC,qBAA0DF,WAC9D,CAACG,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,IAAI,EAC3BC,MAAM,EACNC,OAAO,EACP,GAAGC,YACJ,GAAGN;IACJ,MAAMO,UAAUT,WACd,UACA,2BACA;QAAE,eAAeM;IAAO,GACxBE,WAAWE,SAAS;IAGtB,qBACE,KAACL;QACCF,KAAKA;QACLO,WAAWD;QACXF,SAASA;QACR,GAAGC,UAAU;;AAGpB;AAGFP,KAAKU,WAAW,GAAG;AACnB,SAASV,IAAI,GAAG"}

package/dist/esm/src/components/DropdownMenu/index.js

@@ -0,0 +1,9 @@
+import { DropdownMenu as DropdownMenuComponent } from "./DropdownMenu";
+import { Item } from "./Item";
+const DropdownMenu = Object.assign(DropdownMenuComponent, {
+    Item
+});
+DropdownMenu.displayName = "DropdownMenu";
+export { DropdownMenu };
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/DropdownMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/DropdownMenu/index.tsx"],"sourcesContent":["import { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  DropdownMenu as DropdownMenuComponent,\n  DropdownMenuProps,\n  DropdownMenuRef,\n} from \"./DropdownMenu\";\nimport { Item } from \"./Item\";\n\nimport type { DropdownMenuElementType } from \"./DropdownMenu\";\nimport type {\n  ItemProps as DropdownMenuItemProps,\n  ItemRef as DropdownMenuItemRef,\n  ItemElementType as DropdownMenuItemElementType,\n} from \"./Item\";\n\nexport interface DropdownMenuCompound\n  extends ForwardedRefComponent<DropdownMenuProps, HTMLElement> {\n  Item: ForwardedRefComponent<DropdownMenuItemProps, HTMLLIElement>;\n}\n\nconst DropdownMenu: DropdownMenuCompound = Object.assign(\n  DropdownMenuComponent,\n  {\n    Item,\n  },\n);\n\nexport type {\n  DropdownMenuElementType,\n  DropdownMenuProps,\n  DropdownMenuRef,\n  DropdownMenuItemProps,\n  DropdownMenuItemRef,\n  DropdownMenuItemElementType,\n};\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n"],"names":["DropdownMenu","DropdownMenuComponent","Item","Object","assign","displayName"],"mappings":"AACA,SACEA,gBAAgBC,qBAAqB,QAGhC,iBAAiB;AACxB,SAASC,IAAI,QAAQ,SAAS;AAc9B,MAAMF,eAAqCG,OAAOC,MAAM,CACtDH,uBACA;IACEC;AACF;AAYFF,aAAaK,WAAW,GAAG;AAC3B,SAASL,YAAY,GAAG"}

package/dist/esm/src/components/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+import { Text } from "../Text";
+export const ErrorMessage = ({ id, errorMessage, className })=>{
+    const classes = classNames("mobius", "mobius/ErrorMessage", className);
+    if (!errorMessage) return null;
+    return /*#__PURE__*/ _jsxs("div", {
+        id: id,
+        className: classes,
+        "data-testid": "ErrorMessage",
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "mobius/ErrorIcon"
+            }),
+            /*#__PURE__*/ _jsx(Text, {
+                elementType: "span",
+                className: "mobius/ErrorText",
+                children: errorMessage
+            })
+        ]
+    });
+};
+ErrorMessage.displayName = "ErrorMessage";
+
+//# sourceMappingURL=ErrorMessage.js.map

package/dist/esm/src/components/ErrorMessage/ErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ErrorMessage/ErrorMessage.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { Text } from \"../Text\";\n\nexport interface ErrorMessageProps {\n  errorMessage?: string;\n  id?: string;\n  className?: string;\n}\n\nexport const ErrorMessage = ({\n  id,\n  errorMessage,\n  className,\n}: ErrorMessageProps) => {\n  const classes = classNames(\"mobius\", \"mobius/ErrorMessage\", className);\n\n  if (!errorMessage) return null;\n\n  return (\n    <div id={id} className={classes} data-testid=\"ErrorMessage\">\n      <span className=\"mobius/ErrorIcon\" />\n      <Text elementType=\"span\" className=\"mobius/ErrorText\">\n        {errorMessage}\n      </Text>\n    </div>\n  );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n"],"names":["classNames","Text","ErrorMessage","id","errorMessage","className","classes","div","data-testid","span","elementType","displayName"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAASC,IAAI,QAAQ,UAAU;AAQ/B,OAAO,MAAMC,eAAe,CAAC,EAC3BC,EAAE,EACFC,YAAY,EACZC,SAAS,EACS;IAClB,MAAMC,UAAUN,WAAW,UAAU,uBAAuBK;IAE5D,IAAI,CAACD,cAAc,OAAO;IAE1B,qBACE,MAACG;QAAIJ,IAAIA;QAAIE,WAAWC;QAASE,eAAY;;0BAC3C,KAACC;gBAAKJ,WAAU;;0BAChB,KAACJ;gBAAKS,aAAY;gBAAOL,WAAU;0BAChCD;;;;AAIT,EAAE;AAEFF,aAAaS,WAAW,GAAG"}

package/dist/esm/src/components/ErrorMessage/index.js

@@ -0,0 +1,3 @@
+export * from "./ErrorMessage";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/ErrorMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ErrorMessage/index.tsx"],"sourcesContent":["export * from \"./ErrorMessage\";\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB"}

package/dist/esm/src/components/Fieldset/Fieldset.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+import { cloneElement, forwardRef, useId } from "react";
+import { Flex } from "../Flex";
+const useFieldset = (props)=>{
+    const { legend } = props;
+    let legendProps = {};
+    let containerProps = {
+        role: "group"
+    };
+    const legendId = useId();
+    if (legend) {
+        legendProps = {
+            ...legendProps,
+            id: legendId
+        };
+        containerProps = {
+            ...containerProps,
+            "aria-labelledby": legendId
+        };
+    }
+    return {
+        legendProps,
+        containerProps
+    };
+};
+const Fieldset = /*#__PURE__*/ forwardRef((props, _ref)=>{
+    const { children, legend, legendComponent = /*#__PURE__*/ _jsx("legend", {}), ...otherProps } = props;
+    const { legendProps, containerProps } = useFieldset(props);
+    const classes = classNames("mobius", "mobius/Fieldset", props.className);
+    // Set class on legend
+    legendProps.className = "mobius/Legend";
+    return /*#__PURE__*/ _jsxs(Flex, {
+        ...containerProps,
+        ...otherProps,
+        className: classes,
+        children: [
+            legend && /*#__PURE__*/ cloneElement(legendComponent, {
+                ...legendProps
+            }, [
+                legend
+            ]),
+            children
+        ]
+    });
+});
+Fieldset.displayName = "Fieldset";
+export { Fieldset };
+
+//# sourceMappingURL=Fieldset.js.map

package/dist/esm/src/components/Fieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  useId,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Flex } from \"../Flex\";\n\nexport type LegendProps = {\n  id?: string;\n  className?: string;\n};\n\ntype ContainerProps = {\n  \"aria-labelledby\"?: string;\n  role: string;\n};\n\nconst useFieldset = (\n  props: FieldsetProps,\n): { legendProps: LegendProps; containerProps: ContainerProps } => {\n  const { legend } = props;\n\n  let legendProps: LegendProps = {};\n  let containerProps: ContainerProps = {\n    role: \"group\",\n  };\n\n  const legendId = useId();\n  if (legend) {\n    legendProps = {\n      ...legendProps,\n      id: legendId,\n    };\n    containerProps = {\n      ...containerProps,\n      \"aria-labelledby\": legendId,\n    };\n  }\n\n  return {\n    legendProps,\n    containerProps,\n  };\n};\n\nexport type FieldsetElementType = HTMLDivElement;\nexport interface FieldsetProps\n  extends DOMProps,\n    RefAttributes<FieldsetElementType> {\n  legend?: string;\n  children: ReactNode;\n  className?: string;\n  legendComponent?: ReactElement<any>;\n}\n\nexport type FieldsetRef = Ref<FieldsetElementType>;\n\nconst Fieldset: ForwardedRefComponent<FieldsetProps, FieldsetElementType> =\n  forwardRef((props: FieldsetProps, _ref: FieldsetRef) => {\n    const {\n      children,\n      legend,\n      legendComponent = <legend />,\n      ...otherProps\n    } = props;\n\n    const { legendProps, containerProps } = useFieldset(props);\n\n    const classes = classNames(\"mobius\", \"mobius/Fieldset\", props.className);\n\n    // Set class on legend\n    legendProps.className = \"mobius/Legend\";\n\n    return (\n      <Flex {...containerProps} {...otherProps} className={classes}>\n        {legend && cloneElement(legendComponent, { ...legendProps }, [legend])}\n        {children}\n      </Flex>\n    );\n  });\n\nFieldset.displayName = \"Fieldset\";\nexport { Fieldset };\n"],"names":["classNames","cloneElement","forwardRef","useId","Flex","useFieldset","props","legend","legendProps","containerProps","role","legendId","id","Fieldset","_ref","children","legendComponent","otherProps","classes","className","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAKEC,YAAY,EACZC,UAAU,EACVC,KAAK,QACA,QAAQ;AAGf,SAASC,IAAI,QAAQ,UAAU;AAY/B,MAAMC,cAAc,CAClBC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGD;IAEnB,IAAIE,cAA2B,CAAC;IAChC,IAAIC,iBAAiC;QACnCC,MAAM;IACR;IAEA,MAAMC,WAAWR;IACjB,IAAII,QAAQ;QACVC,cAAc;YACZ,GAAGA,WAAW;YACdI,IAAID;QACN;QACAF,iBAAiB;YACf,GAAGA,cAAc;YACjB,mBAAmBE;QACrB;IACF;IAEA,OAAO;QACLH;QACAC;IACF;AACF;AAcA,MAAMI,yBACJX,WAAW,CAACI,OAAsBQ;IAChC,MAAM,EACJC,QAAQ,EACRR,MAAM,EACNS,gCAAkB,KAACT,aAAS,EAC5B,GAAGU,YACJ,GAAGX;IAEJ,MAAM,EAAEE,WAAW,EAAEC,cAAc,EAAE,GAAGJ,YAAYC;IAEpD,MAAMY,UAAUlB,WAAW,UAAU,mBAAmBM,MAAMa,SAAS;IAEvE,sBAAsB;IACtBX,YAAYW,SAAS,GAAG;IAExB,qBACE,MAACf;QAAM,GAAGK,cAAc;QAAG,GAAGQ,UAAU;QAAEE,WAAWD;;YAClDX,wBAAUN,aAAae,iBAAiB;gBAAE,GAAGR,WAAW;YAAC,GAAG;gBAACD;aAAO;YACpEQ;;;AAGP;AAEFF,SAASO,WAAW,GAAG;AACvB,SAASP,QAAQ,GAAG"}

package/dist/esm/src/components/Fieldset/index.js

@@ -0,0 +1,3 @@
+export * from "./Fieldset";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Fieldset/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Fieldset/index.tsx"],"sourcesContent":["export * from \"./Fieldset\";\n"],"names":[],"mappings":"AAAA,cAAc,aAAa"}

package/dist/esm/src/components/Flex/Flex.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+import { buildFlexStyles, splitProps } from "./propUtils";
+const Flex = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { elementType: Element = "div", ...otherProps } = props;
+    const classes = classNames("mobius", "mobius/Flex", props.className);
+    const [styleProps, restProps] = splitProps(otherProps);
+    const flexStyles = buildFlexStyles(styleProps);
+    return /*#__PURE__*/ _jsx(Element, {
+        ref: ref,
+        style: flexStyles,
+        ...restProps,
+        className: classes
+    });
+});
+Flex.displayName = "Flex";
+export { Flex };
+
+//# sourceMappingURL=Flex.js.map

package/dist/esm/src/components/Flex/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { FlexElementType, FlexProps, FlexRef } from \"./types\";\nimport { buildFlexStyles, splitProps } from \"./propUtils\";\n\nconst Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(\n  (props: FlexProps, ref: FlexRef) => {\n    const { elementType: Element = \"div\", ...otherProps } = props;\n    const classes = classNames(\"mobius\", \"mobius/Flex\", props.className);\n\n    const [styleProps, restProps] = splitProps(otherProps);\n    const flexStyles = buildFlexStyles(styleProps);\n\n    return (\n      <Element\n        ref={ref}\n        style={flexStyles}\n        {...restProps}\n        className={classes}\n      />\n    );\n  },\n);\n\nFlex.displayName = \"Flex\";\nexport { Flex };\n"],"names":["forwardRef","classNames","buildFlexStyles","splitProps","Flex","props","ref","elementType","Element","otherProps","classes","className","styleProps","restProps","flexStyles","style","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,eAAe,EAAEC,UAAU,QAAQ,cAAc;AAE1D,MAAMC,qBAA0DJ,WAC9D,CAACK,OAAkBC;IACjB,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IACxD,MAAMK,UAAUT,WAAW,UAAU,eAAeI,MAAMM,SAAS;IAEnE,MAAM,CAACC,YAAYC,UAAU,GAAGV,WAAWM;IAC3C,MAAMK,aAAaZ,gBAAgBU;IAEnC,qBACE,KAACJ;QACCF,KAAKA;QACLS,OAAOD;QACN,GAAGD,SAAS;QACbF,WAAWD;;AAGjB;AAGFN,KAAKY,WAAW,GAAG;AACnB,SAASZ,IAAI,GAAG"}

package/dist/esm/src/components/Flex/index.js

@@ -0,0 +1,4 @@
+export * from "./Flex";
+export * from "./types";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Flex/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Flex/index.tsx"],"sourcesContent":["export * from \"./Flex\";\nexport * from \"./types\";\n"],"names":[],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,UAAU"}

package/dist/esm/src/components/Flex/propUtils.js

@@ -0,0 +1,39 @@
+import { getSpacingValue } from "../../utils";
+import { filterUndefinedProps } from "../../utils/filterUndefinedProps";
+export const buildFlexStyles = (props)=>{
+    const { flexDirection, flexWrap, flexGrow, flex, justifyContent, alignItems, alignContent, gap, rowGap, columnGap } = props;
+    const styleProps = {
+        display: "flex",
+        flexDirection,
+        flexWrap,
+        flexGrow,
+        flex,
+        justifyContent,
+        alignItems,
+        alignContent,
+        gap: getSpacingValue(gap),
+        columnGap: getSpacingValue(columnGap),
+        rowGap: getSpacingValue(rowGap)
+    };
+    return filterUndefinedProps(styleProps);
+};
+export const splitProps = (props)=>{
+    const { flexDirection, flexWrap, flexGrow, flex, justifyContent, alignItems, alignContent, gap, rowGap, columnGap, ...otherProps } = props;
+    return [
+        {
+            flexDirection,
+            flexWrap,
+            flexGrow,
+            flex,
+            justifyContent,
+            alignItems,
+            alignContent,
+            gap,
+            rowGap,
+            columnGap
+        },
+        otherProps
+    ];
+};
+
+//# sourceMappingURL=propUtils.js.map

package/dist/esm/src/components/Flex/propUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Flex/propUtils.ts"],"sourcesContent":["import { getSpacingValue } from \"../../utils\";\nimport { filterUndefinedProps } from \"../../utils/filterUndefinedProps\";\nimport { FlexNonStyleProps, FlexProps, FlexStyleProps } from \"./types\";\n\nexport const buildFlexStyles = (props: FlexStyleProps) => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n  } = props;\n\n  const styleProps = {\n    display: \"flex\",\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap: getSpacingValue(gap),\n    columnGap: getSpacingValue(columnGap),\n    rowGap: getSpacingValue(rowGap),\n  };\n\n  return filterUndefinedProps(styleProps);\n};\n\nexport const splitProps = (\n  props: FlexProps,\n): [FlexStyleProps, FlexNonStyleProps] => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n    ...otherProps\n  } = props;\n\n  return [\n    {\n      flexDirection,\n      flexWrap,\n      flexGrow,\n      flex,\n      justifyContent,\n      alignItems,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n    },\n    otherProps,\n  ];\n};\n"],"names":["getSpacingValue","filterUndefinedProps","buildFlexStyles","props","flexDirection","flexWrap","flexGrow","flex","justifyContent","alignItems","alignContent","gap","rowGap","columnGap","styleProps","display","splitProps","otherProps"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,SAASC,oBAAoB,QAAQ,mCAAmC;AAGxE,OAAO,MAAMC,kBAAkB,CAACC;IAC9B,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACV,GAAGV;IAEJ,MAAMW,aAAa;QACjBC,SAAS;QACTX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC,KAAKX,gBAAgBW;QACrBE,WAAWb,gBAAgBa;QAC3BD,QAAQZ,gBAAgBY;IAC1B;IAEA,OAAOX,qBAAqBa;AAC9B,EAAE;AAEF,OAAO,MAAME,aAAa,CACxBb;IAEA,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACT,GAAGI,YACJ,GAAGd;IAEJ,OAAO;QACL;YACEC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;QACAI;KACD;AACH,EAAE"}

package/dist/esm/src/components/Flex/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/esm/src/components/Flex/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Flex/types.ts"],"sourcesContent":["import { Ref, ReactNode, RefAttributes, AriaRole } from \"react\";\nimport type { Property } from \"csstype\";\nimport { DOMProps } from \"../../types/dom\";\nimport { SpacingType } from \"../../types\";\n\nexport type FlexElementType = HTMLDivElement;\n\nexport interface FlexStyleProps {\n  elementType?: string | React.ElementType;\n  flexDirection?: Property.FlexDirection;\n  flexWrap?: Property.FlexWrap;\n  flexGrow?: Property.FlexGrow;\n  flex?: Property.Flex;\n  /** Aligns grid items along the block (column) axis  */\n  alignItems?: Property.AlignItems;\n  /** Aligns the grid along the inline (row) axis */\n  alignContent?: Property.AlignContent;\n  /** Aligns the grid along the inline (row) axis */\n  justifyContent?: Property.JustifyContent;\n  /** How big a gap between the columns and rows */\n  gap?: SpacingType;\n  /** How big a gap between the rows */\n  rowGap?: SpacingType;\n  /** How big a gap between the columns */\n  columnGap?: SpacingType;\n  style?: React.CSSProperties;\n  role?: AriaRole;\n}\n\nexport interface FlexNonStyleProps\n  extends DOMProps,\n    RefAttributes<FlexElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport interface FlexProps extends FlexStyleProps, FlexNonStyleProps {}\n\nexport type FlexRef = Ref<FlexElementType>;\n"],"names":[],"mappings":"AAuCA,WAA2C"}

package/dist/esm/src/components/Grid/Grid.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+import { filterUndefinedProps, getSpacingValue } from "../../utils";
+const Grid = /*#__PURE__*/ forwardRef((props, _ref)=>{
+    const { columns = 12, gap, columnGap, rowGap, alignContent, alignItems, justifyContent, justifyItems, className, ...rest } = props;
+    const classes = classNames("mobius", "mobius/Grid", className);
+    const styles = filterUndefinedProps({
+        boxSizing: "border-box",
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gap: getSpacingValue(gap),
+        columnGap: getSpacingValue(columnGap),
+        rowGap: getSpacingValue(rowGap),
+        alignContent,
+        alignItems,
+        justifyContent,
+        justifyItems
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        style: styles,
+        className: classes,
+        ...rest
+    });
+});
+Grid.displayName = "Grid";
+export { Grid };
+
+//# sourceMappingURL=Grid.js.map

package/dist/esm/src/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import {\n  Ref,\n  forwardRef,\n  ReactNode,\n  RefAttributes,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { filterUndefinedProps, getSpacingValue } from \"../../utils\";\nimport { SpacingType } from \"../../types\";\n\nexport type GridElementType = HTMLDivElement;\n\nexport interface GridProps extends RefAttributes<GridElementType>, DOMProps {\n  children?: ReactNode;\n  /** The number of columns */\n  columns?: number;\n  /** How big a gap between the columns and rows */\n  gap?: SpacingType;\n  /** How big a gap between the columns */\n  columnGap?: SpacingType;\n  /** How big a gap between the rows */\n  rowGap?: SpacingType;\n  /** Aligns the grid along the block (column) axis */\n  alignContent?:\n    | \"center\"\n    | \"space-around\"\n    | \"space-between\"\n    | \"space-evenly\"\n    | \"stretch\";\n  /** Aligns the grid along the inline (row) axis */\n  justifyContent?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-around\"\n    | \"space-between\"\n    | \"space-evenly\";\n  /** Aligns grid items along the block (column) axis  */\n  alignItems?: \"center\" | \"start\" | \"end\" | \"stretch\" | \"baseline\";\n  /** Aligns grid items along the inline (row) axis  */\n  justifyItems?: \"start\" | \"end\" | \"center\" | \"stretch\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type GridRef = Ref<GridElementType>;\n\nconst Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(\n  (props: GridProps, _ref: GridRef) => {\n    const {\n      columns = 12,\n      gap,\n      columnGap,\n      rowGap,\n      alignContent,\n      alignItems,\n      justifyContent,\n      justifyItems,\n      className,\n      ...rest\n    } = props;\n    const classes = classNames(\"mobius\", \"mobius/Grid\", className);\n\n    const styles: CSSProperties = filterUndefinedProps({\n      boxSizing: \"border-box\",\n      display: \"grid\",\n      gridTemplateColumns: `repeat(${columns}, 1fr)`,\n      gap: getSpacingValue(gap),\n      columnGap: getSpacingValue(columnGap),\n      rowGap: getSpacingValue(rowGap),\n      alignContent,\n      alignItems,\n      justifyContent,\n      justifyItems,\n    });\n\n    return <div style={styles} className={classes} {...rest} />;\n  },\n);\n\nGrid.displayName = \"Grid\";\nexport { Grid };\n"],"names":["forwardRef","classNames","filterUndefinedProps","getSpacingValue","Grid","props","_ref","columns","gap","columnGap","rowGap","alignContent","alignItems","justifyContent","justifyItems","className","rest","classes","styles","boxSizing","display","gridTemplateColumns","div","style","displayName"],"mappings":";AAAA,SAEEA,UAAU,QAIL,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,oBAAoB,EAAEC,eAAe,QAAQ,cAAc;AAwCpE,MAAMC,qBAA0DJ,WAC9D,CAACK,OAAkBC;IACjB,MAAM,EACJC,UAAU,EAAE,EACZC,GAAG,EACHC,SAAS,EACTC,MAAM,EACNC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,YAAY,EACZC,SAAS,EACT,GAAGC,MACJ,GAAGX;IACJ,MAAMY,UAAUhB,WAAW,UAAU,eAAec;IAEpD,MAAMG,SAAwBhB,qBAAqB;QACjDiB,WAAW;QACXC,SAAS;QACTC,qBAAqB,CAAC,OAAO,EAAEd,QAAQ,MAAM,CAAC;QAC9CC,KAAKL,gBAAgBK;QACrBC,WAAWN,gBAAgBM;QAC3BC,QAAQP,gBAAgBO;QACxBC;QACAC;QACAC;QACAC;IACF;IAEA,qBAAO,KAACQ;QAAIC,OAAOL;QAAQH,WAAWE;QAAU,GAAGD,IAAI;;AACzD;AAGFZ,KAAKoB,WAAW,GAAG;AACnB,SAASpB,IAAI,GAAG"}

package/dist/esm/src/components/Grid/Item.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import classNames from "classnames/dedupe";
+import { useBreakpoint } from "../../hooks";
+export const getBreakpointMap = (config)=>Object.entries(config).reduce((prev, [key, value])=>{
+        const previous = Object.values(prev);
+        const lastDefined = previous[previous.length - 1];
+        return {
+            ...prev,
+            [key]: value || lastDefined
+        };
+    }, {});
+export const DEFAULT_SPAN = 12;
+const GridItem = /*#__PURE__*/ forwardRef((props, _ref)=>{
+    const { breakpoint: { size: breakpointSize } } = useBreakpoint();
+    const { span, xs = Array.isArray(span) ? DEFAULT_SPAN : span, sm, md, lg, xl, xxl, alignSelf, justifySelf, className, ...rest } = props;
+    const breakpointMap = getBreakpointMap({
+        xs,
+        sm,
+        md,
+        lg,
+        xl,
+        xxl
+    });
+    const [responsiveSpan, setResponsiveSpan] = useState();
+    const classes = classNames("mobius/GridItem", className);
+    useEffect(()=>{
+        // @ts-expect-error
+        setResponsiveSpan(breakpointMap[breakpointSize]);
+    }, [
+        breakpointSize,
+        breakpointMap
+    ]);
+    const styles = {
+        gridColumn: responsiveSpan ? `span ${responsiveSpan}` : undefined,
+        alignSelf,
+        justifySelf
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            ...styles
+        },
+        className: classes,
+        ...rest
+    });
+});
+GridItem.displayName = "GridItem";
+export { GridItem };
+
+//# sourceMappingURL=Item.js.map

package/dist/esm/src/components/Grid/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Grid/Item.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Ref,\n  forwardRef,\n  RefAttributes,\n  useEffect,\n  useState,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\n\nexport type GridItemElementType = HTMLDivElement;\n\nexport interface GridItemProps\n  extends RefAttributes<GridItemElementType>,\n    DOMProps {\n  /** How many columns the item spans */\n  span?: number | number[];\n  /** React children */\n  children?: React.ReactNode;\n  /** How many columns the item spans on the smallest breakpoint */\n  xs?: number;\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n  /** How many columns the item spans on the largest breakpoint */\n  xxl?: number;\n  /** Aligns the grid item along the block (column) axis */\n  alignSelf?: \"center\" | \"start\" | \"end\" | \"stretch\";\n  /** Aligns the grid item along the inline (row) axis */\n  justifySelf?: \"center\" | \"start\" | \"end\" | \"stretch\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport const getBreakpointMap = (config: Partial<Record<SizeType, number>>) =>\n  Object.entries(config).reduce((prev, [key, value]) => {\n    const previous = Object.values(prev);\n    const lastDefined = previous[previous.length - 1];\n    return { ...prev, [key]: value || lastDefined };\n  }, {});\n\nexport type GridItemRef = Ref<GridItemElementType>;\n\nexport const DEFAULT_SPAN = 12;\n\nconst GridItem: ForwardedRefComponent<GridItemProps, GridItemElementType> =\n  forwardRef((props: GridItemProps, _ref: GridItemRef) => {\n    const {\n      breakpoint: { size: breakpointSize },\n    } = useBreakpoint();\n    const {\n      span,\n      xs = Array.isArray(span) ? DEFAULT_SPAN : span,\n      sm,\n      md,\n      lg,\n      xl,\n      xxl,\n      alignSelf,\n      justifySelf,\n      className,\n      ...rest\n    } = props;\n    const breakpointMap = getBreakpointMap({\n      xs,\n      sm,\n      md,\n      lg,\n      xl,\n      xxl,\n    });\n    const [responsiveSpan, setResponsiveSpan] = useState();\n    const classes = classNames(\"mobius/GridItem\", className);\n\n    useEffect(() => {\n      // @ts-expect-error\n      setResponsiveSpan(breakpointMap[breakpointSize]);\n    }, [breakpointSize, breakpointMap]);\n\n    const styles: CSSProperties = {\n      gridColumn: responsiveSpan ? `span ${responsiveSpan}` : undefined,\n      alignSelf,\n      justifySelf,\n    };\n\n    return <div style={{ ...styles }} className={classes} {...rest} />;\n  });\n\nGridItem.displayName = \"GridItem\";\nexport { GridItem };\n"],"names":["forwardRef","useEffect","useState","classNames","useBreakpoint","getBreakpointMap","config","Object","entries","reduce","prev","key","value","previous","values","lastDefined","length","DEFAULT_SPAN","GridItem","props","_ref","breakpoint","size","breakpointSize","span","xs","Array","isArray","sm","md","lg","xl","xxl","alignSelf","justifySelf","className","rest","breakpointMap","responsiveSpan","setResponsiveSpan","classes","styles","gridColumn","undefined","div","style","displayName"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EAEVC,SAAS,EACTC,QAAQ,QAEH,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAE3C,SAASC,aAAa,QAAQ,cAAc;AA6B5C,OAAO,MAAMC,mBAAmB,CAACC,SAC/BC,OAAOC,OAAO,CAACF,QAAQG,MAAM,CAAC,CAACC,MAAM,CAACC,KAAKC,MAAM;QAC/C,MAAMC,WAAWN,OAAOO,MAAM,CAACJ;QAC/B,MAAMK,cAAcF,QAAQ,CAACA,SAASG,MAAM,GAAG,EAAE;QACjD,OAAO;YAAE,GAAGN,IAAI;YAAE,CAACC,IAAI,EAAEC,SAASG;QAAY;IAChD,GAAG,CAAC,GAAG;AAIT,OAAO,MAAME,eAAe,GAAG;AAE/B,MAAMC,yBACJlB,WAAW,CAACmB,OAAsBC;IAChC,MAAM,EACJC,YAAY,EAAEC,MAAMC,cAAc,EAAE,EACrC,GAAGnB;IACJ,MAAM,EACJoB,IAAI,EACJC,KAAKC,MAAMC,OAAO,CAACH,QAAQP,eAAeO,IAAI,EAC9CI,EAAE,EACFC,EAAE,EACFC,EAAE,EACFC,EAAE,EACFC,GAAG,EACHC,SAAS,EACTC,WAAW,EACXC,SAAS,EACT,GAAGC,MACJ,GAAGjB;IACJ,MAAMkB,gBAAgBhC,iBAAiB;QACrCoB;QACAG;QACAC;QACAC;QACAC;QACAC;IACF;IACA,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGrC;IAC5C,MAAMsC,UAAUrC,WAAW,mBAAmBgC;IAE9ClC,UAAU;QACR,mBAAmB;QACnBsC,kBAAkBF,aAAa,CAACd,eAAe;IACjD,GAAG;QAACA;QAAgBc;KAAc;IAElC,MAAMI,SAAwB;QAC5BC,YAAYJ,iBAAiB,CAAC,KAAK,EAAEA,eAAe,CAAC,GAAGK;QACxDV;QACAC;IACF;IAEA,qBAAO,KAACU;QAAIC,OAAO;YAAE,GAAGJ,MAAM;QAAC;QAAGN,WAAWK;QAAU,GAAGJ,IAAI;;AAChE;AAEFlB,SAAS4B,WAAW,GAAG;AACvB,SAAS5B,QAAQ,GAAG"}

package/dist/esm/src/components/Grid/index.js

@@ -0,0 +1,9 @@
+import { Grid as GridComponent } from "./Grid";
+import { GridItem } from "./Item";
+const Grid = Object.assign(GridComponent, {
+    Item: GridItem
+});
+Grid.displayName = "Grid";
+export { Grid };
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Grid/index.tsx"],"sourcesContent":["import { ForwardedRefComponent } from \"../../types/components\";\nimport { Grid as GridComponent, GridElementType, GridProps } from \"./Grid\";\nimport { GridItem, GridItemProps, GridItemElementType } from \"./Item\";\n\nexport interface GridCompound\n  extends ForwardedRefComponent<GridProps, GridItemElementType> {\n  Item: ForwardedRefComponent<GridItemProps, GridElementType>;\n}\n\nconst Grid: GridCompound = Object.assign(GridComponent, {\n  Item: GridItem,\n});\n\nGrid.displayName = \"Grid\";\nexport { Grid };\nexport type { GridProps, GridItemProps, GridElementType, GridItemElementType };\n"],"names":["Grid","GridComponent","GridItem","Object","assign","Item","displayName"],"mappings":"AACA,SAASA,QAAQC,aAAa,QAAoC,SAAS;AAC3E,SAASC,QAAQ,QAA4C,SAAS;AAOtE,MAAMF,OAAqBG,OAAOC,MAAM,CAACH,eAAe;IACtDI,MAAMH;AACR;AAEAF,KAAKM,WAAW,GAAG;AACnB,SAASN,IAAI,GAAG"}

package/dist/esm/src/components/Icon/Icon.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+const ICON_PREFIX = "mobius-icon";
+export function Icon({ icon, className, size = "xs", color, fixedWidth, spin, spinReverse, ...otherProps }) {
+    if (!icon) {
+        throw new Error("Must specify icon object");
+    }
+    const classes = classNames("mobius", "mobius/Icon", `svg-inline--${ICON_PREFIX}`, `--size-${size}`, className, {
+        [`${ICON_PREFIX}-fw`]: fixedWidth,
+        [`${ICON_PREFIX}-spin`]: spin || spinReverse,
+        [`${ICON_PREFIX}-spin-reverse`]: spinReverse
+    });
+    const { iconName, width, height, svgPathData } = icon;
+    return /*#__PURE__*/ _jsx("svg", {
+        "aria-hidden": "true",
+        focusable: "false",
+        "data-icon": iconName,
+        className: classes,
+        role: "img",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: `0 0 ${width} ${height}`,
+        style: {
+            color
+        },
+        ...otherProps,
+        children: /*#__PURE__*/ _jsx("path", {
+            fill: "currentColor",
+            d: svgPathData
+        })
+    });
+}
+
+//# sourceMappingURL=Icon.js.map

package/dist/esm/src/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { IconProps } from \"./types\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nexport function Icon({\n  icon,\n  className,\n  size = \"xs\",\n  color,\n  fixedWidth,\n  spin,\n  spinReverse,\n  ...otherProps\n}: IconProps) {\n  if (!icon) {\n    throw new Error(\"Must specify icon object\");\n  }\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius/Icon\",\n    `svg-inline--${ICON_PREFIX}`,\n    `--size-${size}`,\n    className,\n    {\n      [`${ICON_PREFIX}-fw`]: fixedWidth,\n      [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n    },\n  );\n\n  const { iconName, width, height, svgPathData } = icon;\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      data-icon={iconName}\n      className={classes}\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ color }}\n      {...otherProps}\n    >\n      <path fill=\"currentColor\" d={svgPathData} />\n    </svg>\n  );\n}\n"],"names":["classNames","ICON_PREFIX","Icon","icon","className","size","color","fixedWidth","spin","spinReverse","otherProps","Error","classes","iconName","width","height","svgPathData","svg","aria-hidden","focusable","data-icon","role","xmlns","viewBox","style","path","fill","d"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAG3C,MAAMC,cAAc;AAEpB,OAAO,SAASC,KAAK,EACnBC,IAAI,EACJC,SAAS,EACTC,OAAO,IAAI,EACXC,KAAK,EACLC,UAAU,EACVC,IAAI,EACJC,WAAW,EACX,GAAGC,YACO;IACV,IAAI,CAACP,MAAM;QACT,MAAM,IAAIQ,MAAM;IAClB;IAEA,MAAMC,UAAUZ,WACd,UACA,eACA,CAAC,YAAY,EAAEC,YAAY,CAAC,EAC5B,CAAC,OAAO,EAAEI,KAAK,CAAC,EAChBD,WACA;QACE,CAAC,CAAC,EAAEH,YAAY,GAAG,CAAC,CAAC,EAAEM;QACvB,CAAC,CAAC,EAAEN,YAAY,KAAK,CAAC,CAAC,EAAEO,QAAQC;QACjC,CAAC,CAAC,EAAER,YAAY,aAAa,CAAC,CAAC,EAAEQ;IACnC;IAGF,MAAM,EAAEI,QAAQ,EAAEC,KAAK,EAAEC,MAAM,EAAEC,WAAW,EAAE,GAAGb;IAEjD,qBACE,KAACc;QACCC,eAAY;QACZC,WAAU;QACVC,aAAWP;QACXT,WAAWQ;QACXS,MAAK;QACLC,OAAM;QACNC,SAAS,CAAC,IAAI,EAAET,MAAM,CAAC,EAAEC,OAAO,CAAC;QACjCS,OAAO;YAAElB;QAAM;QACd,GAAGI,UAAU;kBAEd,cAAA,KAACe;YAAKC,MAAK;YAAeC,GAAGX;;;AAGnC"}

package/dist/esm/src/components/Icon/index.js

@@ -0,0 +1,4 @@
+export * from "./Icon";
+export * from "./types";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Icon/index.tsx"],"sourcesContent":["export * from \"./Icon\";\nexport * from \"./types\";\n"],"names":[],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,UAAU"}

package/dist/esm/src/components/Icon/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/esm/src/components/Icon/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Icon/types.ts"],"sourcesContent":["import { Ref } from \"react\";\nimport { IconDefinition } from \"../../types/icon\";\n\nexport type IconSizeProp = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps {\n  icon?: IconDefinition;\n  className?: string;\n  size?: IconSizeProp;\n  color?: string;\n  fixedWidth?: boolean;\n\n  // Animations\n  spin?: boolean;\n  spinReverse?: boolean;\n}\n\nexport type IconRef = Ref<SVGSVGElement>;\n"],"names":[],"mappings":"AAiBA,WAAyC"}

package/dist/esm/src/components/Image/Image.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+const Image = /*#__PURE__*/ forwardRef(({ alt, elementType: Component = "img", ...otherProps }, ref)=>{
+    const classes = classNames("mobius", "mobius/Image", otherProps.className);
+    return /*#__PURE__*/ _jsx(Component, {
+        alt: alt,
+        ref: ref,
+        ...otherProps,
+        className: classes
+    });
+});
+Image.displayName = "Image";
+export { Image };
+
+//# sourceMappingURL=Image.js.map

package/dist/esm/src/components/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import { forwardRef, RefAttributes, Ref } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type IntrinsicImage = Omit<\n  JSX.IntrinsicElements[\"img\"],\n  \"css\" | \"width\" | \"height\" | \"color\"\n> &\n  RefAttributes<HTMLImageElement>;\n\nexport interface ImageProps extends DOMProps, IntrinsicImage {\n  /** HTML element for the Box */\n  elementType?: React.ElementType;\n  /** Alternative text for accessibility */\n  alt: string;\n  /** Path to image asset */\n  src: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type ImageRef = Ref<HTMLImageElement>;\n\nconst Image: ForwardedRefComponent<ImageProps, HTMLImageElement> = forwardRef(\n  (\n    { alt, elementType: Component = \"img\", ...otherProps }: ImageProps,\n    ref: ImageRef,\n  ) => {\n    const classes = classNames(\"mobius\", \"mobius/Image\", otherProps.className);\n\n    return (\n      <Component alt={alt} ref={ref} {...otherProps} className={classes} />\n    );\n  },\n);\n\nImage.displayName = \"Image\";\nexport { Image };\n"],"names":["forwardRef","classNames","Image","alt","elementType","Component","otherProps","ref","classes","className","displayName"],"mappings":";AAAA,SAASA,UAAU,QAA4B,QAAQ;AACvD,OAAOC,gBAAgB,oBAAoB;AAuB3C,MAAMC,sBAA6DF,WACjE,CACE,EAAEG,GAAG,EAAEC,aAAaC,YAAY,KAAK,EAAE,GAAGC,YAAwB,EAClEC;IAEA,MAAMC,UAAUP,WAAW,UAAU,gBAAgBK,WAAWG,SAAS;IAEzE,qBACE,KAACJ;QAAUF,KAAKA;QAAKI,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAWD;;AAE9D;AAGFN,MAAMQ,WAAW,GAAG;AACpB,SAASR,KAAK,GAAG"}

package/dist/esm/src/components/Image/index.js

@@ -0,0 +1,3 @@
+export * from "./Image";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Image/index.tsx"],"sourcesContent":["export * from \"./Image\";\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}

package/dist/esm/src/components/Label/Label.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+const Label = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { elementType: Element = "label", children, ...otherProps } = props;
+    const classes = classNames("mobius", "mobius/Label", props.className);
+    otherProps.className = classes;
+    return /*#__PURE__*/ _jsx(Element, {
+        ref: ref,
+        ...otherProps,
+        className: classes,
+        children: children
+    });
+});
+Label.displayName = "Label";
+export { Label };
+
+//# sourceMappingURL=Label.js.map

package/dist/esm/src/components/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import { forwardRef, ReactNode, Ref, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type LabelElementType = HTMLLabelElement;\nexport type IntrinsicLabel = Omit<\n  JSX.IntrinsicElements[\"label\"],\n  \"css\" | \"color\" | \"ref\"\n>;\n\nexport interface LabelProps\n  extends IntrinsicLabel,\n    DOMProps,\n    RefAttributes<LabelElementType> {\n  children?: ReactNode;\n  className?: string;\n  elementType?: \"label\" | \"span\";\n}\n\nexport type LabelRef = Ref<LabelElementType>;\n\nconst Label: ForwardedRefComponent<LabelProps, LabelElementType> = forwardRef(\n  (props: LabelProps, ref: LabelRef) => {\n    const { elementType: Element = \"label\", children, ...otherProps } = props;\n\n    const classes = classNames(\"mobius\", \"mobius/Label\", props.className);\n    otherProps.className = classes;\n\n    return (\n      <Element ref={ref} {...otherProps} className={classes}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nLabel.displayName = \"Label\";\nexport { Label };\n"],"names":["forwardRef","classNames","Label","props","ref","elementType","Element","children","otherProps","classes","className","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAuC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAqB3C,MAAMC,sBAA6DF,WACjE,CAACG,OAAmBC;IAClB,MAAM,EAAEC,aAAaC,UAAU,OAAO,EAAEC,QAAQ,EAAE,GAAGC,YAAY,GAAGL;IAEpE,MAAMM,UAAUR,WAAW,UAAU,gBAAgBE,MAAMO,SAAS;IACpEF,WAAWE,SAAS,GAAGD;IAEvB,qBACE,KAACH;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEE,WAAWD;kBAC3CF;;AAGP;AAGFL,MAAMS,WAAW,GAAG;AACpB,SAAST,KAAK,GAAG"}

package/dist/esm/src/components/Label/index.js

@@ -0,0 +1,3 @@
+export * from "./Label";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Label/index.tsx"],"sourcesContent":["export * from \"./Label\";\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}