@dfds-ui/react-components 3.0.2-alpha.44219a9f → 3.0.2-alpha.812bc5fd

package/cjs/chip/index.js

@@ -24,4 +24,5 @@ Object.keys(_Chip).forEach(function (key) {
     }
   });
 });
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var cache;
+function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var r, c, a = Object.defineProperty, n = { __proto__: null, default: e }; if (Object(e) !== e) return n; if (cache || "function" != typeof WeakMap || (cache = new WeakMap()), cache) { if (cache.has(e)) return cache.get(e); cache.set(e, n); } for (c in e) "default" !== c && {}.hasOwnProperty.call(e, c) && ((r = a && Object.getOwnPropertyDescriptor(e, c)) && (r.get || r.set) ? a(n, c, r) : n[c] = e[c]); return n; }

package/cjs/common/LockBodyScroll.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type LockBodyScrollProps = {
+    /**
+     * If `true` scroll locking will be enabled
+     */
+    enabled?: boolean;
+    /**
+     * ClassName to be applied to the body element when scroll is locked
+     */
+    bodyClassNameApplied?: string;
+    /**
+     * ClassName to be applied to the html element when scroll is locked
+     */
+    htmlClassNameApplied?: string;
+    /**
+     * Preserve scroll position when locking.
+     */
+    preserveScrollPosition?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<LockBodyScrollResult>;
+};
+export type LockBodyScrollResult = {
+    getGap(): number;
+};
+export declare const LockBodyScroll: ({ enabled, children, ref, ...rest }: LockBodyScrollProps) => React.JSX.Element;
+export default LockBodyScroll;

package/cjs/common/arrow.d.ts

@@ -0,0 +1,6 @@
+export type ArrowPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * Create css for an arrow
+ * A <div> tag must surround {children} to work
+ */
+export default function arrow(size: number, color: string, offset?: number, position?: ArrowPosition): import("@emotion/utils").SerializedStyles;

package/cjs/common/emotionCloneElement.d.ts

@@ -0,0 +1,2 @@
+declare const emotionCloneElement: (element: any, config: any, ...children: any) => import("react").DetailedReactHTMLElement<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export default emotionCloneElement;

package/cjs/common/intent.d.ts

@@ -0,0 +1,3 @@
+export type Intent = 'info' | 'critical' | 'success' | 'warning' | 'none';
+export declare function getIntentColor(intent?: Intent, muted?: boolean): string;
+export declare function getIntentTextColor(intent: Intent): string;

package/cjs/common/miniMoize.d.ts

@@ -0,0 +1 @@
+export declare function miniMoize(fn: (...args: any[]) => any): (...args: any[]) => any;

package/cjs/common/polymorphic.d.ts

@@ -0,0 +1,25 @@
+import React, { ComponentType, ElementType } from 'react';
+export type RenderContainerProps<T> = {
+    renderContainer: (props: T) => React.JSX.Element;
+};
+export type PolymorphicComponentProps = {
+    /**
+     * HTML tag or custom component being rendered.
+     */
+    as?: ElementType;
+};
+/**
+ * Given a PolymorphicComponent and a desired RenderComponent this function will returns are new component where the
+ * polymorphic prop will point to the provided `RenderComponent`.
+ *
+ * @example
+ * import { Link } from `gatsby`;
+ * import { AppBarItem, withRenderAs } from `@dfds-ui/react-components`;
+ *
+ * const AppBarLink = withRenderAs(AppBarItem, Link);
+ *
+ * const Example = () => {
+ *   return <AppBarLink id="1" title="example" to="/example">Example</AppBarLink>;
+ * }
+ */
+export declare function withRenderAs<PCProps extends PolymorphicComponentProps, RCProps>(PolymorphicComponent: ComponentType<PCProps>, RenderComponent: ComponentType<RCProps>): ({ ...props }: Omit<PCProps, keyof PolymorphicComponentProps> & RCProps) => React.JSX.Element;

package/cjs/common/use-media.d.ts

@@ -0,0 +1 @@
+export default function useMedia(queries: any, values: any, defaultValue: any): any;

package/cjs/common/useOnClickOutside.d.ts

@@ -0,0 +1,3 @@
+type Handler = (...args: any[]) => void;
+export default function useOnClickOutside(ref: React.RefObject<HTMLElement | null>, handler: Handler | null): void;
+export {};

package/cjs/common/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function ie11MinHeightFix(minHeight?: string): import("@emotion/utils").SerializedStyles | undefined;
+export declare function onlyIE(strings: TemplateStringsArray, ...args: any): import("@emotion/utils").SerializedStyles;
+export declare function onlyChrome(strings: TemplateStringsArray, ...args: any): import("@emotion/utils").SerializedStyles;

package/cjs/counter/Counter.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+export type CounterProps = {
+    label?: ReactNode | string;
+    /**
+     * Minimum value
+     */
+    minVal: number;
+    /**
+     * Maximum value
+     */
+    maxVal: number;
+    disableMin?: boolean;
+    disableMax?: boolean;
+    /**
+     *Name of the input element
+     */
+    name?: string;
+    currentVal?: number;
+    initialVal?: number;
+    /**
+     *Callback when the value changes
+     */
+    executeOnChange?: (arg: number) => any;
+    ref?: React.Ref<HTMLInputElement>;
+};
+export declare const Counter: (props: CounterProps) => React.JSX.Element;
+export default Counter;

package/cjs/counter/Counter.js

@@ -9,7 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _system = require("@dfds-ui/icons/system");
 var _react2 = require("@emotion/react");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var cache;
+function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var r, c, a = Object.defineProperty, n = { __proto__: null, default: e }; if (Object(e) !== e) return n; if (cache || "function" != typeof WeakMap || (cache = new WeakMap()), cache) { if (cache.has(e)) return cache.get(e); cache.set(e, n); } for (c in e) "default" !== c && {}.hasOwnProperty.call(e, c) && ((r = a && Object.getOwnPropertyDescriptor(e, c)) && (r.get || r.set) ? a(n, c, r) : n[c] = e[c]); return n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const StyledCounter = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {

package/cjs/counter/PluralCounter.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type PluralCounterProps = {
+    minVal: number;
+    maxVal: number;
+    currentVal?: number;
+    initialVal?: number;
+    singularLabel: string;
+    name?: string;
+    pluralLabel: string;
+    executeOnChange?: (arg: number) => any;
+    ref?: React.Ref<HTMLInputElement>;
+};
+declare const PluralCounter: ({ singularLabel, pluralLabel, executeOnChange, ...rest }: PluralCounterProps) => React.JSX.Element;
+export default PluralCounter;

package/cjs/counter/PluralCounter.js

@@ -8,7 +8,8 @@ var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = _interopRequireWildcard(require("react"));
 var _Counter = _interopRequireDefault(require("./Counter"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var cache;
+function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var r, c, a = Object.defineProperty, n = { __proto__: null, default: e }; if (Object(e) !== e) return n; if (cache || "function" != typeof WeakMap || (cache = new WeakMap()), cache) { if (cache.has(e)) return cache.get(e); cache.set(e, n); } for (c in e) "default" !== c && {}.hasOwnProperty.call(e, c) && ((r = a && Object.getOwnPropertyDescriptor(e, c)) && (r.get || r.set) ? a(n, c, r) : n[c] = e[c]); return n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 //Insert plural with max value as hidden to ensure rows are aligned. Assumes plural is longer than singular.

package/cjs/counter/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Counter } from './Counter';
+export { default as PluralCounter } from './PluralCounter';

package/cjs/data-table/DataTable.d.ts

@@ -0,0 +1,11 @@
+import React, { FunctionComponent } from 'react';
+export type DataTableProps = {
+    children?: React.ReactNode;
+    onChange?: (model: object[]) => object[];
+    columns?: string[];
+    data: object[];
+    className?: string;
+    hasHeader?: boolean;
+};
+export declare const DataTable: FunctionComponent<DataTableProps>;
+export default DataTable;

package/cjs/data-table/DataTable.js

@@ -9,7 +9,8 @@ var _react2 = require("@emotion/react");
 var _checkbox = require("../forms/checkbox");
 var _theme = require("@dfds-ui/theme");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var cache;
+function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var r, c, a = Object.defineProperty, n = { __proto__: null, default: e }; if (Object(e) !== e) return n; if (cache || "function" != typeof WeakMap || (cache = new WeakMap()), cache) { if (cache.has(e)) return cache.get(e); cache.set(e, n); } for (c in e) "default" !== c && {}.hasOwnProperty.call(e, c) && ((r = a && Object.getOwnPropertyDescriptor(e, c)) && (r.get || r.set) ? a(n, c, r) : n[c] = e[c]); return n; }
 const tableStyle = () => /*#__PURE__*/(0, _react2.css)("text-align:left;border-collapse:collapse;width:100%;border:none;color:", _theme.theme.colors.text.dark.primary, ";font-size:12px;tr{border-top:1px solid ", _theme.theme.colors.text.dark.disabled, ";border-bottom:1px solid ", _theme.theme.colors.text.dark.disabled, ";}th,td{padding:16px;label{color:", _theme.theme.colors.primary.main, ";font-weight:bold;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:tableStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9kYXRhLXRhYmxlL0RhdGFUYWJsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYzRCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9kYXRhLXRhYmxlL0RhdGFUYWJsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgRnVuY3Rpb25Db21wb25lbnQsIHVzZVJlZHVjZXIgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgQ2hlY2tib3ggfSBmcm9tICcuLi9mb3Jtcy9jaGVja2JveCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5cbmV4cG9ydCB0eXBlIERhdGFUYWJsZVByb3BzID0ge1xuICBjaGlsZHJlbj86IFJlYWN0LlJlYWN0Tm9kZVxuICBvbkNoYW5nZT86IChtb2RlbDogb2JqZWN0W10pID0+IG9iamVjdFtdXG4gIGNvbHVtbnM/OiBzdHJpbmdbXVxuICBkYXRhOiBvYmplY3RbXVxuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgaGFzSGVhZGVyPzogYm9vbGVhblxufVxuXG5jb25zdCB0YWJsZVN0eWxlID0gKCkgPT4gY3NzYFxuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICBib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlO1xuICB3aWR0aDogMTAwJTtcbiAgYm9yZGVyOiBub25lO1xuICBjb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5kYXJrLnByaW1hcnl9O1xuICBmb250LXNpemU6IDEycHg7XG4gIHRyIHtcbiAgICBib3JkZXItdG9wOiAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMudGV4dC5kYXJrLmRpc2FibGVkfTtcbiAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMudGV4dC5kYXJrLmRpc2FibGVkfTtcbiAgfVxuICB0aCxcbiAgdGQge1xuICAgIHBhZGRpbmc6IDE2cHg7XG4gICAgbGFiZWwge1xuICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnByaW1hcnkubWFpbn07XG4gICAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB9XG4gIH1cbmBcblxuY29uc3QgVE9HR0xFID0gJ3RvZ2dsZSdcblxuZnVuY3Rpb24gcmVkdWNlcihtb2RlbDogYW55LCBhY3Rpb246IGFueSk6IG9iamVjdFtdIHtcbiAgY29uc3QgbmV3TW9kZWwgPSBbLi4ubW9kZWxdXG4gIHN3aXRjaCAoYWN0aW9uLnR5cGUpIHtcbiAgICBjYXNlIFRPR0dMRTpcbiAgICAgIG5ld01vZGVsW2FjdGlvbi5rZXldLmZpZWxkLnZhbHVlID0gIW5ld01vZGVsW2FjdGlvbi5rZXldLmZpZWxkLnZhbHVlXG4gICAgICByZXR1cm4gbmV3TW9kZWxcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIG5ld01vZGVsXG4gIH1cbn1cblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby11bnVzZWQtdmFyc1xuZXhwb3J0IGNvbnN0IERhdGFUYWJsZTogRnVuY3Rpb25Db21wb25lbnQ8RGF0YVRhYmxlUHJvcHM+ID0gKHtcbiAgY2hpbGRyZW4sXG4gIG9uQ2hhbmdlLFxuICBjb2x1bW5zLFxuICBkYXRhLFxuICBoYXNIZWFkZXIsXG4gIC4uLnJlc3Rcbn0pID0+IHtcbiAgY29uc3QgW21vZGVsLCBkaXNwYXRjaF0gPSB1c2VSZWR1Y2VyKHJlZHVjZXIsIGRhdGEpXG4gIGNvbnN0IGRhdGFLZXlzID0gT2JqZWN0LmtleXMobW9kZWxbMF0pXG4gIGNvbnN0IGRpc3BsYXlDb2x1bW5zID0gY29sdW1ucyA/IGNvbHVtbnMgOiBkYXRhS2V5c1xuXG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKG9uQ2hhbmdlKSB7XG4gICAgICBvbkNoYW5nZShtb2RlbClcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBlc2xpbnQtcmVhY3QvZXhoYXVzdGl2ZS1kZXBzXG4gIH0sIFttb2RlbF0pXG5cbiAgcmV0dXJuIChcbiAgICA8dGFibGUgY3NzPXt0YWJsZVN0eWxlKCl9IHsuLi5yZXN0fT5cbiAgICAgIHtoYXNIZWFkZXIgJiYgKFxuICAgICAgICA8dGhlYWQ+XG4gICAgICAgICAgPHRyPlxuICAgICAgICAgICAge2Rpc3BsYXlDb2x1bW5zLm1hcCgoa2V5LCBpKSA9PiB7XG4gICAgICAgICAgICAgIHJldHVybiA8dGgga2V5PXtpfT4ge2tleX0gPC90aD5cbiAgICAgICAgICAgIH0pfVxuICAgICAgICAgIDwvdHI+XG4gICAgICAgIDwvdGhlYWQ+XG4gICAgICApfVxuICAgICAgPHRib2R5PlxuICAgICAgICB7ZGF0YS5tYXAoKHZhbHVlT2JqOiBhbnksIGkpID0+IHtcbiAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPHRyIGtleT17aX0+XG4gICAgICAgICAgICAgIHtkYXRhS2V5cy5tYXAoKGtleTogYW55LCB5KSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKGtleSA9PT0gJ2ZpZWxkJykge1xuICAgICAgICAgICAgICAgICAgY29uc3QgeyBuYW1lLCB2YWx1ZSwgbGFiZWwgfSA9IHZhbHVlT2JqLmZpZWxkXG4gICAgICAgICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgICAgICA8dGQga2V5PXt5fT5cbiAgICAgICAgICAgICAgICAgICAgICB7XG4gICAgICAgICAgICAgICAgICAgICAgICA8Q2hlY2tib3hcbiAgICAgICAgICAgICAgICAgICAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgY2hlY2tlZD17dmFsdWV9XG4gICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGF0Y2goeyB0eXBlOiBUT0dHTEUsIGtleTogaSB9KVxuICAgICAgICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0NoZWNrYm94PlxuICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgPC90ZD5cbiAgICAgICAgICAgICAgICAgIClcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgcmV0dXJuIDx0ZCBrZXk9e3l9PiB7dmFsdWVPYmpba2V5XX0gPC90ZD5cbiAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgIClcbiAgICAgICAgfSl9XG4gICAgICA8L3Rib2R5PlxuICAgIDwvdGFibGU+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgRGF0YVRhYmxlXG4iXX0= */");
 const TOGGLE = 'toggle';
 function reducer(model, action) {

package/cjs/data-table/index.d.ts

@@ -0,0 +1 @@
+export * from './DataTable';

package/cjs/divider/Divider.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type DividerProps = {
+    /**
+     * Display the Divider in "light" mode.
+     */
+    light?: boolean;
+    /**
+     * Display the Divider in "indent" style
+     */
+    indent?: boolean;
+    /**
+     *  Display the Divider in "margin" style
+     */
+    margins?: boolean;
+    /**
+     * HTML tag or custom component being rendered
+     */
+    as?: React.ElementType;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+};
+export declare const dividerBorder: (light?: boolean, placement?: "top" | "bottom") => import("@emotion/utils").SerializedStyles;
+export declare const Divider: ({ light, indent, margins, ...rest }: DividerProps) => React.JSX.Element;
+export default Divider;

package/cjs/divider/index.d.ts

@@ -0,0 +1 @@
+export * from './Divider';

package/cjs/drawer/Drawer.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { theme } from '@dfds-ui/theme';
+type HorizontalPosition = 'left' | 'right';
+type VerticalPosition = 'top' | 'bottom';
+type Elevation = keyof typeof theme.elevation;
+export type DrawerProps = {
+    /**
+     * Horizontal position of the drawer
+     */
+    position?: HorizontalPosition;
+    /**
+     * Show arrow to visually indicate the relation to a connected component
+     */
+    showArrow?: boolean;
+    /**
+     *  Set the `elevation` for the Drawer.
+     */
+    elevation?: Elevation;
+    /**
+     * Vertical position of the drawer in relation to a connected component.
+     * Will only be used for placing the arrow on either the `top` or `bottom`
+     */
+    verticalPosition?: VerticalPosition;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+};
+export declare const Drawer: ({ className, children, position, verticalPosition, showArrow, elevation, ...rest }: DrawerProps) => React.JSX.Element;
+export default Drawer;

package/cjs/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './Drawer';

package/cjs/dropdown-menu/Dropdown.d.ts

@@ -0,0 +1,46 @@
+import React, { ReactElement } from 'react';
+import { PopperProps, PopperPlacementType } from '@mui/material';
+export type DropdownSize = 'medium' | 'small';
+export type DropdownProps = {
+    /**
+     * Placement for the `Dropdown`.
+     */
+    placement?: PopperPlacementType;
+    /**
+     * HTML element that the `Dropdown` will be anchor to.
+     */
+    anchorEl?: PopperProps['anchorEl'];
+    /**
+     * If set to `true`, the `Dropdown` is shown.
+     */
+    isOpen: boolean;
+    /**
+     * Set the state of the `Dropdown`.
+     */
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Specify the size of the `Dropdown`.
+     */
+    size?: DropdownSize;
+    /**
+     * Close the `Dropdown` on `esc` key.
+     */
+    shouldCloseOnEsc?: boolean;
+    /**
+     * className to be assigned to component.
+     */
+    className?: string;
+    /**
+     * Select multiple children from the `Dropdown`.
+     */
+    multiselect?: boolean;
+    /**
+     * Add an `id` to the `Dropdown`.
+     */
+    id?: string;
+    onClickAway?: () => void;
+    children: ReactElement<any>[];
+    filter?: boolean;
+};
+declare const DropdownMenu: ({ isOpen, multiselect, children, anchorEl, onClickAway, size, id, className, placement, setIsOpen, shouldCloseOnEsc, filter, ...rest }: DropdownProps) => React.JSX.Element;
+export default DropdownMenu;

package/cjs/dropdown-menu/DropdownContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type DropdownSize = 'medium' | 'small';
+type DropdownContextProps = {
+    size?: DropdownSize;
+    multiselect?: boolean;
+};
+export declare const DropdownContext: React.Context<DropdownContextProps>;
+export declare const DropdownContextProvider: ({ children, value, }: {
+    value: DropdownContextProps;
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+declare const useDropdownContext: () => DropdownContextProps;
+export default useDropdownContext;

package/cjs/dropdown-menu/DropdownContext.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DropdownContextProvider = exports.DropdownContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var cache;
+function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var r, c, a = Object.defineProperty, n = { __proto__: null, default: e }; if (Object(e) !== e) return n; if (cache || "function" != typeof WeakMap || (cache = new WeakMap()), cache) { if (cache.has(e)) return cache.get(e); cache.set(e, n); } for (c in e) "default" !== c && {}.hasOwnProperty.call(e, c) && ((r = a && Object.getOwnPropertyDescriptor(e, c)) && (r.get || r.set) ? a(n, c, r) : n[c] = e[c]); return n; }
 const DropdownContext = exports.DropdownContext = /*#__PURE__*/(0, _react.createContext)({
   size: 'small',
   multiselect: true

package/cjs/dropdown-menu/MenuCheckbox.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export interface MenuCheckboxProps {
+    /**
+     * HTML tag or custom component being rendered.
+     */
+    as?: React.ElementType;
+    /**
+     * Override the default color for the text.
+     */
+    color?: string;
+    /**
+     * Indicates that the `MenuCheckbox` is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Invoke the provided callback when the `MenuCheckbox` is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Indicates that the `MenuCheckbox` is selected.
+     */
+    selected?: boolean;
+    /**
+     * Add interactive styles to the `MenuCheckbox`.
+     */
+    clickable?: boolean;
+    /**
+     * className to be assigned to component.
+     */
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const MenuCheckbox: ({ color, children, disabled, as, onClick, selected, clickable, className, }: MenuCheckboxProps) => React.JSX.Element;
+export default MenuCheckbox;

package/cjs/dropdown-menu/MenuItem.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { DropdownSize } from './Dropdown';
+export interface MenuItemProps {
+    /**
+     * HTML tag or custom component being rendered.
+     */
+    as?: React.ElementType;
+    /**
+     * Invoke the provided callback when the `MenuItem` is clicked.
+     */
+    onClick?: (event?: any) => void;
+    /**
+     * Indicates that the `MenuItem` is selected.
+     */
+    selected?: boolean;
+    /**
+     * Indicates that the `MenuItem` is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Add interactive styles to the `MenuItem`.
+     */
+    clickable?: boolean;
+    /**
+     * Override the default color for the text.
+     */
+    color?: string;
+    /**
+     * Choose an icon that will be left aligned.
+     */
+    iconLeft?: React.ElementType;
+    /**
+     * Choose an icon that will be right aligned.
+     */
+    iconRight?: React.ElementType;
+    /**
+     * className to be assigned to component.
+     */
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const getListItemStyle: (size?: DropdownSize, disabled?: boolean) => import("@emotion/utils").SerializedStyles;
+export declare const getListTextStyle: (size?: DropdownSize) => import("@emotion/utils").SerializedStyles;
+declare const MenuItem: ({ as, clickable, className, onClick, selected, disabled, children, color, iconLeft, iconRight, ...rest }: MenuItemProps) => React.JSX.Element;
+export default MenuItem;

package/cjs/dropdown-menu/MenuTitle.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface MenuTitleProps {
+    /**
+     * Change the color of the text.
+     */
+    color?: string;
+    /**
+     * className to be assigned to component.
+     */
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const MenuTitle: ({ color, children, className }: MenuTitleProps) => React.JSX.Element;
+export default MenuTitle;

package/cjs/dropdown-menu/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Dropdown } from './Dropdown';
+export * from './Dropdown';
+export { default as MenuItem } from './MenuItem';
+export { default as MenuTitle } from './MenuTitle';
+export { default as MenuCheckbox } from './MenuCheckbox';

package/cjs/dropdown-menu/index.js

@@ -49,4 +49,5 @@ var _MenuItem = _interopRequireDefault(require("./MenuItem"));
 var _MenuTitle = _interopRequireDefault(require("./MenuTitle"));
 var _MenuCheckbox = _interopRequireDefault(require("./MenuCheckbox"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var cache;
+function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var r, c, a = Object.defineProperty, n = { __proto__: null, default: e }; if (Object(e) !== e) return n; if (cache || "function" != typeof WeakMap || (cache = new WeakMap()), cache) { if (cache.has(e)) return cache.get(e); cache.set(e, n); } for (c in e) "default" !== c && {}.hasOwnProperty.call(e, c) && ((r = a && Object.getOwnPropertyDescriptor(e, c)) && (r.get || r.set) ? a(n, c, r) : n[c] = e[c]); return n; }

package/cjs/elevation/index.d.ts

@@ -0,0 +1,3 @@
+type Level = 3 | 8 | 16;
+declare const elevation: (level: Level) => import("@emotion/utils").SerializedStyles;
+export default elevation;

package/cjs/flexbox/FlexBox.d.ts

@@ -0,0 +1,100 @@
+type RenderAs = {
+    /**
+     * HTML tag or custom component being rendered
+     */
+    as?: React.ElementType;
+};
+export type FlexBoxProps = {
+    children?: React.ReactNode;
+    /**
+     * Set this prop to `true` to set `display` to `inline-flex` instead of `flex`
+     */
+    inline?: boolean;
+    /**
+     * Set this prop to `true` to set `flex-direction` to `row-reverse`
+     */
+    directionRowReverse?: boolean;
+    /**
+     * Set this prop to `true` to set `flex-direction` to `row`
+     */
+    directionRow?: boolean;
+    /**
+     * Set this prop to `true` to set `flex-direction` to `column`
+     */
+    directionColumn?: boolean;
+    /**
+     * Set this prop to `true` to set `flex-direction` to `column-reverse`
+     */
+    directionColumnReverse?: boolean;
+    /**
+     * Set this prop to `true` to set `flex-wrap` to `wrap`
+     */
+    wrapWrap?: boolean;
+    /**
+     * Set this prop to `true` to set `flex-wrap` to `wrap-reverse`
+     */
+    wrapWrapReverse?: boolean;
+    /**
+     * Set this prop to `true` to set `align-items` to `flex-start`
+     */
+    itemsFlexStart?: boolean;
+    /**
+     * Set this prop to `true` to set `align-items` to `flex-end`
+     */
+    itemsFlexEnd?: boolean;
+    /**
+     * Set this prop to `true` to set `align-items` to `flex-center`
+     */
+    itemsCenter?: boolean;
+    /**
+     * Set this prop to `true` to set `align-items` to `flex-baseline`
+     */
+    itemsBaseline?: boolean;
+    /**
+     * Set this prop to `true` to set `align-content` to `flex-start`
+     */
+    contentFlexStart?: boolean;
+    /**
+     * Set this prop to `true` to set `align-content` to `flex-end`
+     */
+    contentFlexEnd?: boolean;
+    /**
+     * Set this prop to `true` to set `align-content` to `center`
+     */
+    contentCenter?: boolean;
+    /**
+     * Set this prop to `true` to set `align-content` to `space-between`
+     */
+    contentSpaceBetween?: boolean;
+    /**
+     * Set this prop to `true` to set `align-content` to `space-around`
+     */
+    contentSpaceAround?: boolean;
+    /**
+     * Set this prop to `true` to set `justify-content` to `space-between`
+     */
+    justifySpaceBetween?: boolean;
+    /**
+     * Set this prop to `true` to set `justify-content` to `space-around`
+     */
+    justifySpaceAround?: boolean;
+    /**
+     * Set this prop to `true` to set `justify-content` to `flex-end`
+     */
+    justifyFlexEnd?: boolean;
+    /**
+     * Set this prop to `true` to set `justify-content` to `center`
+     */
+    justifyCenter?: boolean;
+    /**
+     * Set the `flex` shorthand property
+     */
+    flex?: number;
+    gap?: string;
+};
+export declare const FlexBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & FlexBoxProps & RenderAs, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare function flexBoxStyles(props?: FlexBoxProps): import("@emotion/utils").SerializedStyles;
+export default FlexBox;

package/cjs/flexbox/index.d.ts

@@ -0,0 +1 @@
+export * from './FlexBox';

package/cjs/footer/Footer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const Footer: ({ className, children, bottomChildren, }: {
+    className?: string;
+    bottomChildren?: React.ReactNode;
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export default Footer;

package/cjs/footer/index.d.ts

@@ -0,0 +1 @@
+export { default as Footer } from './Footer';

package/cjs/forms/assistive-text/AssistiveText.d.ts

@@ -0,0 +1,7 @@
+declare const AssistiveText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    inverted?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default AssistiveText;

package/cjs/forms/asterisk/Asterisk.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Asterisk: () => React.JSX.Element;
+export default Asterisk;

package/cjs/forms/checkbox/Checkbox.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+declare const checkboxSizes: {
+    small: {
+        checkbox: string;
+        outline: string;
+        tick: string;
+        fontSize: string;
+        lineHeight: string;
+        paddingLeft: string;
+    };
+    medium: {
+        checkbox: string;
+        outline: string;
+        fontSize: string;
+        lineHeight: string;
+        tick: string;
+        paddingLeft: string;
+    };
+};
+type Size = keyof typeof checkboxSizes;
+type BaseProps = Omit<React.JSX.IntrinsicElements['input'], 'size' | 'css'> & {
+    htmlSize?: number;
+};
+export type CheckboxProps = BaseProps & {
+    className?: string;
+    error?: boolean;
+    name?: string;
+    value?: string;
+    onChange?: (...args: any[]) => void;
+    onLabelClick?: React.JSX.IntrinsicElements['label']['onClick'];
+    disabled?: boolean;
+    checked?: boolean;
+    htmlSize?: number;
+    size?: Size;
+    indeterminate?: boolean;
+    leadingLabel?: boolean;
+};
+declare const Checkbox: ({ children, className, error, checked, disabled, indeterminate, onChange, onLabelClick, size, htmlSize, leadingLabel, ...rest }: CheckboxProps) => React.JSX.Element;
+export default Checkbox;