@simplybusiness/mobius 4.4.4 → 4.4.6

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    value,\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const checkboxClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    className,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    checkboxClasses,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", checkboxClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label id={labelId} className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={validationState === \"invalid\"}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          value={value}\n        />\n        <span className=\"mobius/CheckboxLabel\">{label}</span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["forwardRef","useRef","useState","useId","classNames","ErrorMessage","spaceDelimitedList","Checkbox","props","ref","id","label","isDisabled","isRequired","validationState","onChange","className","errorMessage","defaultSelected","isReadOnly","value","selected","setSelected","fallbackRef","refObj","inputId","checkboxClasses","wrapperClasses","inputClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","span"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,MAAM,EACNC,QAAQ,EAGRC,KAAK,QACA,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,OAAO,MAAMC,yBAGTP,WAAW,CAACQ,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACN,GAAGZ;IACJ,MAAM,CAACa,UAAUC,YAAY,GAAGpB,SAAkBgB;IAClD,MAAMK,cAActB,OAAyB;IAC7C,MAAMuB,SAASf,OAAOc;IACtB,MAAME,UAAUtB;IAChB,MAAMuB,kBAAkBtB,WACtB;QACE,iBAAiBQ;QACjB,iBAAiBS;QACjB,cAAcP,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOD,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAG;IAEF,sEAAsE;IACtE,MAAMW,iBAAiBvB,WACrB,UACA,mBACAsB;IAEF,MAAME,eAAexB,WAAW,wBAAwBsB;IACxD,MAAMG,iBAAiB1B;IACvB,MAAM2B,yBAAyBb,eAAeY,iBAAiBE;IAC/D,MAAMC,cAAc1B,mBAAmB;QACrCwB;QACAtB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMyB,UAAU9B;IAEhB,MAAM+B,cAAc;QAClBZ,YAAY,CAACD;IACf;IAEA,MAAMc,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAIrB,UAAU;YACZA,SAASqB;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,MAACvB;gBAAMD,IAAIuB;gBAASjB,WAAWW;;kCAC7B,KAACe;wBACCC,oBAAkBX;wBAClBY,qBAAmBd;wBACnBe,gBAAc/B,oBAAoB;wBAClCgC,UAAU3B;wBACV4B,UAAUnC;wBACVH,KAAKe;wBACLR,WAAWY;wBACXoB,SAASb;wBACTpB,UAAUwB;wBACVU,WAAWT;wBACXU,MAAK;wBACLC,gBAAgBjC;wBAChBkC,UAAUvC;wBACVH,IAAIA,MAAMe;wBACVL,OAAOA;;kCAET,KAACiC;wBAAKrC,WAAU;kCAAwBL;;;;0BAE1C,KAACN;gBAAaK,IAAImB;gBAAgBZ,cAAcA;;;;AAGtD,GAAG"}

package/dist/esm/src/components/Checkbox/CheckboxGroup.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, cloneElement, isValidElement, useId, useState, useEffect } from "react";
+import classNames from "classnames/dedupe";
+import { Label } from "../Label";
+import { ErrorMessage } from "../ErrorMessage";
+import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { label, isDisabled = false, isRequired, validationState, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, ...rest } = props;
+    const [selected, setSelected] = useState(defaultValue);
+    const checkboxGroupClasses = classNames("mobius", "mobius/CheckboxGroup", className, {
+        "--is-horizontal": orientation === "horizontal",
+        "--is-vertical": orientation === "vertical",
+        "--is-required": typeof isRequired === "boolean" && isRequired,
+        "--is-optional": typeof isRequired === "boolean" && !isRequired
+    });
+    const labelClasses = classNames({
+        "--is-valid": validationState === "valid",
+        "--is-invalid": validationState === "invalid",
+        "--is-disabled": isDisabled
+    });
+    const errorMessageId = useId();
+    const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
+    const describedBy = spaceDelimitedList([
+        shouldErrorMessageShow,
+        props["aria-describedby"]
+    ]);
+    const labelId = useId();
+    const handleChange = (event)=>{
+        const { target: { value, checked } } = event;
+        if (!checked) {
+            setSelected(selected.filter((item)=>item !== value));
+        }
+        if (checked) {
+            setSelected([
+                ...selected,
+                value
+            ]);
+        }
+    };
+    useEffect(()=>{
+        if (onChange) {
+            onChange(selected);
+        }
+    }, [
+        selected,
+        onChange
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        ...rest,
+        "aria-labelledby": props["aria-labelledby"] || labelId,
+        ref: ref,
+        className: checkboxGroupClasses,
+        role: "group",
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                elementType: "span",
+                id: labelId,
+                className: labelClasses,
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "mobius/CheckboxWrapper",
+                children: Children.map(children, (child)=>{
+                    if (/*#__PURE__*/ isValidElement(child)) {
+                        return /*#__PURE__*/ cloneElement(child, {
+                            orientation,
+                            isDisabled,
+                            isRequired,
+                            isReadOnly,
+                            validationState,
+                            defaultSelected: selected.includes(child.props.value),
+                            onChange: handleChange,
+                            "aria-describedby": describedBy
+                        });
+                    }
+                    return child;
+                })
+            }),
+            errorMessage && /*#__PURE__*/ _jsx(ErrorMessage, {
+                id: errorMessageId,
+                errorMessage: errorMessage
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/esm/src/components/Checkbox/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/CheckboxGroup\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const labelClasses = classNames({\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\n  });\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/CheckboxWrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              orientation,\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              validationState,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["Children","forwardRef","cloneElement","isValidElement","useId","useState","useEffect","classNames","Label","ErrorMessage","spaceDelimitedList","CheckboxGroup","props","ref","label","isDisabled","isRequired","validationState","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","rest","selected","setSelected","checkboxGroupClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","handleChange","event","target","value","checked","filter","item","div","aria-labelledby","role","elementType","id","map","child","defaultSelected","includes"],"mappings":"AAAA;;AAEA,SACEA,QAAQ,EACRC,UAAU,EAEVC,YAAY,EACZC,cAAc,EACdC,KAAK,EAELC,QAAQ,EACRC,SAAS,QACJ,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAQ3C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,OAAO,MAAMC,8BAGTV,WAAW,CAACW,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACV,GAAGC,MACJ,GAAGb;IACJ,MAAM,CAACc,UAAUC,YAAY,GAAGtB,SAAmBkB;IACnD,MAAMK,uBAAuBrB,WAC3B,UACA,wBACAa,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOF,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMa,eAAetB,WAAW;QAC9B,cAAcU,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiBF;IACnB;IACA,MAAMe,iBAAiB1B;IACvB,MAAM2B,yBAAyBV,eAAeS,iBAAiBE;IAC/D,MAAMC,cAAcvB,mBAAmB;QACrCqB;QACAnB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMsB,UAAU9B;IAEhB,MAAM+B,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZZ,YAAYD,SAASc,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXZ,YAAY;mBAAID;gBAAUY;aAAM;QAClC;IACF;IAEAhC,UAAU;QACR,IAAIa,UAAU;YACZA,SAASO;QACX;IACF,GAAG;QAACA;QAAUP;KAAS;IAEvB,qBACE,MAACuB;QACE,GAAGjB,IAAI;QACRkB,mBAAiB/B,KAAK,CAAC,kBAAkB,IAAIsB;QAC7CrB,KAAKA;QACLO,WAAWQ;QACXgB,MAAK;;YAEJ9B,uBACC,KAACN;gBAAMqC,aAAY;gBAAOC,IAAIZ;gBAASd,WAAWS;0BAC/Cf;;0BAGL,KAAC4B;gBAAItB,WAAU;0BACZpB,SAAS+C,GAAG,CAACzB,UAAU0B,CAAAA;oBACtB,kBAAI7C,eAAe6C,QAAQ;wBACzB,qBAAO9C,aAAa8C,OAAuB;4BACzC9B;4BACAH;4BACAC;4BACAQ;4BACAP;4BACAgC,iBAAiBvB,SAASwB,QAAQ,CAACF,MAAMpC,KAAK,CAAC0B,KAAK;4BACpDnB,UAAUgB;4BACV,oBAAoBF;wBACtB;oBACF;oBAEA,OAAOe;gBACT;;YAED3B,8BACC,KAACZ;gBAAaqC,IAAIhB;gBAAgBT,cAAcA;;;;AAIxD,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Checkbox/index.tsx"],"sourcesContent":["export * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./types\";\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,UAAU"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Checkbox/types.ts"],"sourcesContent":["import { ChangeEvent, ReactNode, Ref, RefAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxRef = Ref<CheckboxElementType>;\n\nexport interface CheckboxProps\n  extends DOMProps,\n    RefAttributes<CheckboxElementType> {\n  className?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  errorMessage?: string;\n  /** The current value (controlled). */\n  value?: string;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  onChange?: (event: ChangeEvent<CheckboxElementType>) => void;\n  // The default value (uncontrolled).\n  defaultSelected?: boolean;\n  // Whether the input should display its \"valid\" or \"invalid\" visual styling.\n  validationState?: \"valid\" | \"invalid\";\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  selected?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  setSelected?: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport type CheckboxGroupElementType = HTMLDivElement;\n\nexport interface CheckboxGroupProps\n  extends DOMProps,\n    RefAttributes<CheckboxGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  errorMessage?: string;\n  onChange?: (values: string[]) => void;\n  // Defines a string value that labels the current element.\n  // \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  // \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether the input should display its \"valid\" or \"invalid\" visual styling.\n  validationState?: \"valid\" | \"invalid\";\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string[];\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n}\n\nexport type CheckboxGroupRef = Ref<CheckboxGroupElementType>;\n"],"names":[],"mappings":"AAmFA,WAA6D"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef, Ref, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ContainerElementType = HTMLDivElement;\nexport type ContainerRef = Ref<ContainerElementType>;\n\nexport interface ContainerProps\n  extends DOMProps,\n    RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: \"div\" | \"span\";\n  children?: ReactNode;\n}\n\nconst Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =\n  forwardRef((props: ContainerProps, ref: ContainerRef) => {\n    const { elementType: Element = \"div\", ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Container\",\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n\nContainer.displayName = \"Container\";\nexport { Container };\n"],"names":["forwardRef","classNames","Container","props","ref","elementType","Element","otherProps","classes","className","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAuC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAkB3C,MAAMC,0BACJF,WAAW,CAACG,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IAExD,MAAMK,UAAUP,WACd,UACA,oBACAM,WAAWE,SAAS;IAGtB,qBAAO,KAACH;QAAQF,KAAKA;QAAM,GAAGG,UAAU;QAAEE,WAAWD;;AACvD;AAEFN,UAAUQ,WAAW,GAAG;AACxB,SAASR,SAAS,GAAG"}

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+const Divider = ({ "aria-orientation": ariaOrientation = "horizontal", className, ...rest })=>{
+    const classes = classNames("mobius", "mobius/Divider", className);
+    return /*#__PURE__*/ _jsx("div", {
+        className: classes,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...rest,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "mobius/DividerInner"
+        })
+    });
+};
+Divider.displayName = "Divider";
+export { Divider };
+
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { AriaAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport interface DividerProps extends DOMProps {\n  className?: string;\n  \"aria-orientation\"?: AriaAttributes[\"aria-orientation\"];\n}\n\nconst Divider = ({\n  \"aria-orientation\": ariaOrientation = \"horizontal\",\n  className,\n  ...rest\n}: DividerProps) => {\n  const classes = classNames(\"mobius\", \"mobius/Divider\", className);\n\n  return (\n    <div\n      className={classes}\n      role=\"separator\"\n      aria-orientation={ariaOrientation}\n      {...rest}\n    >\n      <div className=\"mobius/DividerInner\" />\n    </div>\n  );\n};\n\nDivider.displayName = \"Divider\";\nexport { Divider };\n"],"names":["classNames","Divider","ariaOrientation","className","rest","classes","div","role","aria-orientation","displayName"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAS3C,MAAMC,UAAU,CAAC,EACf,oBAAoBC,kBAAkB,YAAY,EAClDC,SAAS,EACT,GAAGC,MACU;IACb,MAAMC,UAAUL,WAAW,UAAU,kBAAkBG;IAEvD,qBACE,KAACG;QACCH,WAAWE;QACXE,MAAK;QACLC,oBAAkBN;QACjB,GAAGE,IAAI;kBAER,cAAA,KAACE;YAAIH,WAAU;;;AAGrB;AAEAF,QAAQQ,WAAW,GAAG;AACtB,SAASR,OAAO,GAAG"}

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement } from "react";
+const Content = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel: _, ...otherProps }, ref)=>/*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        ...otherProps,
+        className: "mobius/DrawerContent",
+        children: Children.map(children, (child)=>{
+            if (/*#__PURE__*/ isValidElement(child)) {
+                return /*#__PURE__*/ cloneElement(child, {
+                    onClose
+                });
+            }
+            return child;
+        })
+    }));
+Content.displayName = "Content";
+export { Content };
+
+//# sourceMappingURL=Content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Drawer/Content.tsx"],"sourcesContent":["import {\n  Children,\n  PropsWithChildren,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type DivRef = Ref<HTMLDivElement>;\nexport type DivElementType = HTMLDivElement;\nexport interface ContentProps\n  extends DOMProps,\n    RefAttributes<DivElementType>,\n    PropsWithChildren {\n  onClose?: () => void;\n  closeLabel?: string;\n}\n\nconst Content = forwardRef(\n  (\n    { children, onClose, closeLabel: _, ...otherProps }: ContentProps,\n    ref: DivRef,\n  ) => (\n    <div ref={ref} {...otherProps} className=\"mobius/DrawerContent\">\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose,\n          } as any);\n        }\n\n        return child;\n      })}\n    </div>\n  ),\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],"names":["Children","cloneElement","forwardRef","isValidElement","Content","children","onClose","closeLabel","_","otherProps","ref","div","className","map","child","displayName"],"mappings":";AAAA,SACEA,QAAQ,EAIRC,YAAY,EACZC,UAAU,EACVC,cAAc,QACT,QAAQ;AAaf,MAAMC,wBAAUF,WACd,CACE,EAAEG,QAAQ,EAAEC,OAAO,EAAEC,YAAYC,CAAC,EAAE,GAAGC,YAA0B,EACjEC,oBAEA,KAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCZ,SAASa,GAAG,CAACR,UAAUS,CAAAA;YACtB,kBAAIX,eAAeW,QAAQ;gBACzB,qBAAOb,aAAaa,OAAO;oBACzBR;gBACF;YACF;YAEA,OAAOQ;QACT;;AAKNV,QAAQW,WAAW,GAAG;AACtB,SAASX,OAAO,GAAG"}

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

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+import { Children, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from "react";
+import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
+import { supportsDialog } from "../../utils/polyfill-tests";
+import { VisuallyHidden } from "../VisuallyHidden";
+import { mergeRefs } from "../../utils";
+const TRANSITION_CLASS_NAME = "--transition";
+const Drawer = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { isOpen, className, closeLabel, direction, announce = "Drawer opened on screen", onOpen, onClose, children } = props;
+    const hasOpened = useRef(false);
+    const modalRef = useRef(null);
+    const hasDialogSupport = supportsDialog();
+    // Fire onOpen once
+    if (onOpen && !hasOpened.current) {
+        onOpen();
+        hasOpened.current = true;
+    }
+    useBodyScrollLock({
+        enabled: isOpen
+    });
+    // Add close handler, to enable closing transitions
+    const handleClose = useCallback((event)=>{
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        const doClose = ()=>{
+            var _modalRef_current;
+            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        };
+        // Delay close to allow backdrop exit transition
+        if (hasDialogSupport) {
+            var _modalRef_current, _modalRef_current1;
+            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.classList.remove(TRANSITION_CLASS_NAME);
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", ()=>{
+                doClose();
+            }, {
+                once: true
+            });
+        } else {
+            doClose();
+        }
+    }, [
+        onClose,
+        hasDialogSupport
+    ]);
+    const modalClasses = classNames("mobius", "mobius/Drawer", `--${direction}`, className, {
+        "--should-transition": hasDialogSupport
+    });
+    // Add polyfill for HTML Dialog in old browsers
+    useEffect(()=>{
+        async function toggleModal() {
+            var _modalRef_current, _modalRef_current1;
+            if (!hasDialogSupport && typeof window !== "undefined" && modalRef.current !== null) {
+                // eslint-disable-next-line import/no-extraneous-dependencies
+                const { default: dialogPolyfill } = await import("dialog-polyfill");
+                try {
+                    dialogPolyfill.registerDialog(modalRef.current);
+                } catch (error) {
+                    // In iOS 15 <= 15.2 this intermittently fails with
+                    // TypeError: null is not an object (evaluating 'element.showModal')
+                    // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
+                    console.error("Failed to load dialog-polyfill", error);
+                }
+            }
+            if (isOpen && !((_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.open)) {
+                var _modalRef_current2, _modalRef_current3;
+                (_modalRef_current2 = modalRef.current) === null || _modalRef_current2 === void 0 ? void 0 : _modalRef_current2.showModal();
+                (_modalRef_current3 = modalRef.current) === null || _modalRef_current3 === void 0 ? void 0 : _modalRef_current3.classList.add(TRANSITION_CLASS_NAME);
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            } else if (!isOpen && ((_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.open)) {
+                handleClose();
+            }
+        }
+        toggleModal();
+    }, [
+        isOpen,
+        onOpen,
+        handleClose,
+        hasDialogSupport
+    ]);
+    return /*#__PURE__*/ _jsxs("dialog", {
+        ref: mergeRefs([
+            modalRef,
+            ref
+        ]),
+        onCancel: handleClose,
+        className: modalClasses,
+        "aria-describedby": "screen-reader-announce",
+        children: [
+            /*#__PURE__*/ _jsx(VisuallyHidden, {
+                children: /*#__PURE__*/ _jsx("div", {
+                    id: "screen-reader-announce",
+                    children: announce
+                })
+            }),
+            Children.map(children, (child)=>{
+                if (/*#__PURE__*/ isValidElement(child)) {
+                    return /*#__PURE__*/ cloneElement(child, {
+                        onClose: handleClose,
+                        closeLabel
+                    });
+                }
+                return child;
+            })
+        ]
+    });
+});
+Drawer.displayName = "Drawer";
+export { Drawer };
+
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\n          \"transitionend\",\n          () => {\n            doClose();\n          },\n          { once: true },\n        );\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": hasDialogSupport,\n    },\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        try {\n          dialogPolyfill.registerDialog(modalRef.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","VisuallyHidden","mergeRefs","TRANSITION_CLASS_NAME","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","modalRef","hasDialogSupport","current","enabled","handleClose","event","preventDefault","stopPropagation","doClose","close","classList","remove","addEventListener","once","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","dialog","onCancel","aria-describedby","div","id","map","child","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SACEC,QAAQ,EAGRC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,QAAQ;AACf,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,cAAc,QAAQ,oBAAoB;AAEnD,SAASC,SAAS,QAAQ,cAAc;AAKxC,MAAMC,wBAAwB;AAE9B,MAAMC,uBAASV,WAAW,CAACW,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,YAAYjB,OAAgB;IAClC,MAAMkB,WAAWlB,OAAiC;IAClD,MAAMmB,mBAAmBjB;IAEzB,mBAAmB;IACnB,IAAIY,UAAU,CAACG,UAAUG,OAAO,EAAE;QAChCN;QACAG,UAAUG,OAAO,GAAG;IACtB;IAEAnB,kBAAkB;QAAEoB,SAASZ;IAAO;IAEpC,mDAAmD;IACnD,MAAMa,cAAcxB,YAClB,CAACyB;QACC,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;QACvB;QAEA,MAAMC,UAAU;gBACdR;aAAAA,oBAAAA,SAASE,OAAO,cAAhBF,wCAAAA,kBAAkBS,KAAK;YACvBZ,oBAAAA,8BAAAA;QACF;QAEA,gDAAgD;QAChD,IAAII,kBAAkB;gBACpBD,mBACAA;aADAA,oBAAAA,SAASE,OAAO,cAAhBF,wCAAAA,kBAAkBU,SAAS,CAACC,MAAM,CAACxB;aACnCa,qBAAAA,SAASE,OAAO,cAAhBF,yCAAAA,mBAAkBY,gBAAgB,CAChC,iBACA;gBACEJ;YACF,GACA;gBAAEK,MAAM;YAAK;QAEjB,OAAO;YACLL;QACF;IACF,GACA;QAACX;QAASI;KAAiB;IAG7B,MAAMa,eAAevC,WACnB,UACA,iBACA,CAAC,EAAE,EAAEmB,UAAU,CAAC,EAChBF,WACA;QACE,uBAAuBS;IACzB;IAGF,+CAA+C;IAC/CpB,UAAU;QACR,eAAekC;gBAkBEf,mBAIOA;YArBtB,IACE,CAACC,oBACD,OAAOe,WAAW,eAClBhB,SAASE,OAAO,KAAK,MACrB;gBACA,6DAA6D;gBAC7D,MAAM,EAAEe,SAASC,cAAc,EAAE,GAAG,MAAM,MAAM,CAAC;gBACjD,IAAI;oBACFA,eAAeC,cAAc,CAACnB,SAASE,OAAO;gBAChD,EAAE,OAAOkB,OAAO;oBACd,mDAAmD;oBACnD,oEAAoE;oBACpE,qGAAqG;oBACrGC,QAAQD,KAAK,CAAC,kCAAkCA;gBAClD;YACF;YAEA,IAAI7B,UAAU,GAACS,oBAAAA,SAASE,OAAO,cAAhBF,wCAAAA,kBAAkBsB,IAAI,GAAE;oBACrCtB,oBACAA;iBADAA,qBAAAA,SAASE,OAAO,cAAhBF,yCAAAA,mBAAkBuB,SAAS;iBAC3BvB,qBAAAA,SAASE,OAAO,cAAhBF,yCAAAA,mBAAkBU,SAAS,CAACc,GAAG,CAACrC;gBAChCS,mBAAAA,6BAAAA;YACF,OAAO,IAAI,CAACL,YAAUS,qBAAAA,SAASE,OAAO,cAAhBF,yCAAAA,mBAAkBsB,IAAI,GAAE;gBAC5ClB;YACF;QACF;QAEAW;IACF,GAAG;QAACxB;QAAQK;QAAQQ;QAAaH;KAAiB;IAElD,qBACE,MAACwB;QACCnC,KAAKJ,UAAU;YAACc;YAAUV;SAAI;QAC9BoC,UAAUtB;QACVZ,WAAWsB;QACXa,oBAAiB;;0BAEjB,KAAC1C;0BACC,cAAA,KAAC2C;oBAAIC,IAAG;8BAA0BlC;;;YAEnCnB,SAASsD,GAAG,CAAChC,UAAUiC,CAAAA;gBACtB,kBAAIpD,eAAeoD,QAAQ;oBACzB,qBAAOtD,aAAasD,OAAO;wBACzBlC,SAASO;wBACTX;oBACF;gBACF;gBAEA,OAAOsC;YACT;;;AAGN;AAEA3C,OAAO4C,WAAW,GAAG;AACrB,SAAS5C,MAAM,GAAG"}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cross } from "@simplybusiness/icons";
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+const Header = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel, ...otherProps }, ref)=>/*#__PURE__*/ _jsxs("header", {
+        ref: ref,
+        ...otherProps,
+        className: "mobius/DrawerHeader",
+        children: [
+            children,
+            /*#__PURE__*/ _jsxs(Button, {
+                "aria-label": "Close",
+                variant: "basic",
+                onPress: onClose,
+                className: "mobius/DrawerClose",
+                children: [
+                    /*#__PURE__*/ _jsx(Icon, {
+                        icon: cross
+                    }),
+                    " ",
+                    closeLabel
+                ]
+            })
+        ]
+    }));
+Header.displayName = "Header";
+export { Header };
+
+//# sourceMappingURL=Header.js.map

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"}