@bbl-digital/snorre 4.0.21 → 4.0.23

package/lib/core/Button/Button.stories.js

@@ -1,121 +1,123 @@
 import Button from '.';
 import IconCaretDown from '../../icons/General/IconCaretDown';
-import IconEdit from '../../icons/General/IconEdit';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Button',
   component: Button
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Button, {
-    children: "Standard button"
-  }),
+  args: {
+    children: 'Standard button'
+  },
   name: 'Default'
 };
 export const IconBefore = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     beforeIcon: /*#__PURE__*/_jsx(IconCaretDown, {}),
-    children: "Standard button"
-  }),
+    children: 'Standard button'
+  },
   name: 'Icon before'
 };
+
+// Rewrite all stories to use args instead of render
+
 export const IconAfter = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     afterIcon: /*#__PURE__*/_jsx(IconCaretDown, {}),
-    children: "Standard button"
-  }),
+    children: 'Standard button'
+  },
   name: 'Icon after'
 };
 export const Success = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     success: true,
-    children: "Success button"
-  }),
+    children: 'Success button'
+  },
   name: 'Success'
 };
 export const Danger = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     danger: true,
-    children: "Danger button"
-  }),
+    children: 'Danger button'
+  },
   name: 'Danger'
 };
 export const Loading = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     loading: true,
-    children: "Loading button"
-  }),
+    children: 'Loading button'
+  },
   name: 'Loading'
 };
 export const Disabled = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     disabled: true,
-    children: "Disabled button"
-  }),
+    children: 'Disabled button'
+  },
   name: 'Disabled'
 };
 export const Highlighted = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     highlight: true,
-    children: "Hightlighted button"
-  }),
+    children: 'Hightlighted button'
+  },
   name: 'Highlighted'
 };
 export const OutlineHighlighted = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     highlight: true,
     outline: true,
-    children: "Hightlighted outline button"
-  }),
+    children: 'Hightlighted outline button'
+  },
   name: 'Outline highlighted'
 };
 export const Back = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     back: true,
-    children: "Go back"
-  }),
+    children: 'Go back'
+  },
   name: 'Back'
 };
 export const Small = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     small: true,
-    children: "Small"
-  }),
+    children: 'Small button'
+  },
   name: 'Small'
 };
 export const DangerOutline = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     danger: true,
     outline: true,
-    children: "Danger outline"
-  }),
+    children: 'Danger outline'
+  },
   name: 'Danger outline'
 };
 export const TransparentBackground = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     outline: true,
     transparentBg: true,
-    children: "Danger outline"
-  }),
+    children: 'Danger outline'
+  },
   name: 'Transparent background'
 };
 export const NoStyle = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     nostyle: true,
-    focusable: true,
-    children: /*#__PURE__*/_jsx(IconEdit, {})
-  }),
+    children: 'No style'
+  },
   name: 'No style'
 };
 export const EventKeyPresses = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     onEnterKeyPress: () => console.log('Enter pressed'),
     onEscapeKeyPress: () => console.log('Escape pressed'),
-    onKeyPress: {
+    onCustomKeyPress: {
       key: 'E',
       action: e => console.log('Key pressed', e.key)
     },
-    children: "Actionlistener button"
-  }),
+    children: 'Actionlistener button'
+  },
   name: 'Event key presses'
 };

package/lib/core/Button/index.d.ts

@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
-import React, { HTMLAttributes } from 'react';
+import React from 'react';
 import { SerializedStyles } from '@emotion/react';
 import { Props as ButtonOrLinkProps } from '../private/ButtonOrLink';
-export declare type IProps = ButtonOrLinkProps & HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+export declare type IProps = ButtonOrLinkProps & {
     /** Success color styling */
     success?: boolean;
     /** Danger color styling */
@@ -30,6 +30,57 @@ export declare type IProps = ButtonOrLinkProps & HTMLAttributes<HTMLAnchorElemen
     /** Set tabindex */
     tabIndex?: number;
 };
-declare const Button: React.ForwardRefExoticComponent<Omit<IProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<React.HTMLAttributes<import("../private/ButtonOrLink").ButtonOrLinkTypes> & {
+    afterIcon?: React.ReactNode;
+    beforeIcon?: React.ReactNode;
+    children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal;
+    disabled?: boolean | undefined;
+    href?: string | undefined;
+    loading?: boolean | undefined;
+    onClick?: ((event: React.MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
+    onMouseUp?: ((event: React.MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
+    onCustomKeyPress?: {
+        key: string;
+        action: (event: KeyboardEvent) => void;
+    } | undefined;
+    onKeyPress?: ((event: KeyboardEvent) => void) | undefined;
+    onEnterKeyPress?: ((event: KeyboardEvent) => void) | undefined;
+    onEscapeKeyPress?: ((event: KeyboardEvent) => void) | undefined;
+    openInNewWindow?: boolean | undefined;
+    rel?: string | undefined;
+    trackingEvent?: string | undefined;
+    trackingName?: string | undefined;
+    type?: "button" | "submit" | "reset" | undefined;
+    target?: string | undefined;
+    download?: any;
+    tabIndex?: number | undefined;
+} & {
+    /** Success color styling */
+    success?: boolean | undefined;
+    /** Danger color styling */
+    danger?: boolean | undefined;
+    /** Bigger button */
+    highlight?: boolean | undefined;
+    /** Outlined button styling */
+    outline?: boolean | undefined;
+    /** Without style */
+    nostyle?: boolean | undefined;
+    /** Adds focus outline, i.e. for nostyle buttons */
+    focusable?: boolean | undefined;
+    /** Custom border */
+    border?: string | undefined;
+    /** Custom css */
+    css?: SerializedStyles | undefined;
+    /** Shows loader instead of children */
+    loading?: boolean | undefined;
+    /** Backbutton style */
+    back?: boolean | undefined;
+    /** Smaller button size */
+    small?: boolean | undefined;
+    /** Transparent bg toggle */
+    transparentBg?: boolean | undefined;
+    /** Set tabindex */
+    tabIndex?: number | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default Button;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Button/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAkB,cAAc,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAqB,EACnB,KAAK,IAAI,iBAAiB,EAC3B,MAAM,yBAAyB,CAAA;AAOhC,oBAAY,MAAM,GAAG,iBAAiB,GACpC,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,GAAG;IACtD,4BAA4B;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB;IACjB,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,4BAA4B;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAEH,QAAA,MAAM,MAAM,+FAkFV,CAAA;AACF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Button/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAqB,EACnB,KAAK,IAAI,iBAAiB,EAC3B,MAAM,yBAAyB,CAAA;AAOhC,oBAAY,MAAM,GAAG,iBAAiB,GAAG;IACvC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB;IACjB,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,4BAA4B;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;IA5BV,4BAA4B;;IAE5B,2BAA2B;;IAE3B,oBAAoB;;IAEpB,8BAA8B;;IAE9B,oBAAoB;;IAEpB,mDAAmD;;IAEnD,oBAAoB;;IAEpB,iBAAiB;;IAEjB,uCAAuC;;IAEvC,uBAAuB;;IAEvB,0BAA0B;;IAE1B,4BAA4B;;IAE5B,mBAAmB;;2CAsFnB,CAAA;AACF,eAAe,MAAM,CAAA"}

package/lib/core/Card/index.d.ts

@@ -1,34 +1,33 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 import { SerializedStyles } from '@emotion/react';
-declare type IProps = React.HTMLAttributes<HTMLDivElement> & {
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /** Set to true for hover effect */
-    withhover?: boolean;
+    withhover?: boolean | undefined;
     /** To set primary background color*/
-    primary?: boolean;
+    primary?: boolean | undefined;
     /** Gray background color */
-    gray?: boolean;
+    gray?: boolean | undefined;
     /** OnClick callback function */
-    onClick?: () => void;
+    onClick?: (() => void) | undefined;
     /** No padding */
-    noPadding?: boolean;
+    noPadding?: boolean | undefined;
     /** Large padding around edges */
-    largePadding?: boolean;
+    largePadding?: boolean | undefined;
     /** Height of card box */
-    height?: number;
+    height?: number | undefined;
     /** Set to true for no background color */
-    nobackground?: boolean;
+    nobackground?: boolean | undefined;
     /** Set to true to add shadow to Card border */
-    shadow?: boolean;
+    shadow?: boolean | undefined;
     /** Sets overflow visible  */
-    overflowvisible?: boolean;
+    overflowvisible?: boolean | undefined;
     /** Override with custom CSS */
-    css?: SerializedStyles;
+    css?: SerializedStyles | undefined;
     /** Classname prop */
-    className?: string;
+    className?: string | undefined;
     /** Children */
     children?: React.ReactNode | React.ReactNode[];
-};
-declare const Card: React.FC<IProps>;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Card;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/Card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Card/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAIjD,aAAK,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACnD,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,iBAAiB;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iCAAiC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,6BAA6B;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C,CAAA;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAiC1B,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Card/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAiCjD,QAAA,MAAM,IAAI;IA5BR,mCAAmC;;IAEnC,qCAAqC;;IAErC,4BAA4B;;IAE5B,gCAAgC;qBAChB,IAAI;IACpB,iBAAiB;;IAEjB,iCAAiC;;IAEjC,yBAAyB;;IAEzB,0CAA0C;;IAE1C,+CAA+C;;IAE/C,6BAA6B;;IAE7B,+BAA+B;;IAE/B,qBAAqB;;IAErB,eAAe;eACJ,MAAM,SAAS,GAAG,MAAM,SAAS,EAAE;wCAuC/C,CAAA;AAED,eAAe,IAAI,CAAA"}

package/lib/core/Card/index.js

@@ -3,10 +3,10 @@ import React from 'react';
 import { styles } from './styles';
 import { Key } from '../../enums/Keyboard';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const Card = ({
+const Card = /*#__PURE__*/React.forwardRef(({
   className,
   ...props
-}) => {
+}, ref) => {
   const handleOnKeyPress = e => {
     if (e.key === Key.enter || e.key === Key.space) {
       if (props.onClick) {
@@ -15,6 +15,7 @@ const Card = ({
     }
   };
   return _jsx("div", {
+    ref: ref,
     css: theme => [styles.default(theme), props.shadow && styles.shadow(theme), props.withhover && styles.withHover(theme), props.primary && styles.primary(theme), props.gray && styles.gray, props.noPadding && styles.noPadding, props.height && styles.height(props.height), props.nobackground && styles.nobackground, props.largePadding && styles.largePadding, props.overflowvisible && styles.overflowvisible, props.css && props.css],
     tabIndex: props.onClick ? 0 : undefined,
     onClick: props.onClick,
@@ -23,5 +24,5 @@ const Card = ({
     ...props,
     children: props.children
   });
-};
+});
 export default Card;

package/lib/core/Checkbox/index.d.ts

@@ -1,10 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
-interface IProps {
+interface IProps extends React.HTMLAttributes<HTMLInputElement> {
     /** Type of checkbox */
     type?: 'sharp' | 'subtle';
-    /** Aria-label for checkbox if children is not set */
-    'aria-label'?: string;
     /** Content within the checkbox. */
     children?: NonNullable<React.ReactNode>;
     /** Name of checkbox */
@@ -23,6 +21,8 @@ interface IProps {
     child?: boolean;
     /** Add classname */
     className?: string;
+    /** ID for label association */
+    id?: string;
     /** CB when checkbox changes */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => any;
     /** cb for onclick, if one for instance wants to stop propogation */

package/lib/core/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,UAAU,MAAM;IACd,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACvC,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,GAAG,CAAA;IAC1D,oEAAoE;IACpE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,UAAU,CAAC,KAAK,GAAG,CAAA;CACrE;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAwC9B,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,UAAU,MAAO,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC7D,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACvC,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+BAA+B;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,GAAG,CAAA;IAC1D,oEAAoE;IACpE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,UAAU,CAAC,KAAK,GAAG,CAAA;CACrE;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAiE9B,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/lib/core/Checkbox/index.js

@@ -3,8 +3,25 @@ import React, { useEffect, useState } from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const Checkbox = props => {
+const Checkbox = /*#__PURE__*/React.forwardRef(({
+  ...props
+}, ref) => {
   const [value, setValue] = useState(props.checked ? true : false);
+  const {
+    checked,
+    disabled,
+    className,
+    disabledHoverState,
+    nomargin,
+    child,
+    type,
+    name,
+    onChange,
+    onClick,
+    id,
+    children,
+    ...restProps
+  } = props;
   useEffect(() => {
     setValue(props.checked ? true : false);
   }, [props.checked]);
@@ -15,18 +32,24 @@ const Checkbox = props => {
   };
   return _jsxs("label", {
     "aria-label": props['aria-label'],
-    className: props.className,
-    css: theme => [styles.default(theme), props.disabled && styles.disabled(theme, props.disabledHoverState), props.nomargin && styles.nomargin, props.child && styles.child, props.type === 'subtle' && styles.subtle(theme)],
+    htmlFor: id,
+    className: className,
+    css: theme => [styles.default(theme), disabled && styles.disabled(theme, disabledHoverState), nomargin && styles.nomargin, child && styles.child, type === 'subtle' && styles.subtle(theme)],
     onClick: e => e.stopPropagation(),
     children: [_jsx("input", {
+      ref: ref,
       type: "checkbox",
+      role: "checkbox",
+      "aria-checked": value,
       checked: value,
       value: props.value,
-      name: props.name,
-      disabled: props.disabled,
-      onClick: props.onClick,
-      onChange: handleChange
-    }), _jsx("span", {}), props.children]
+      name: name,
+      id: id,
+      disabled: disabled,
+      onClick: onClick,
+      onChange: handleChange,
+      ...restProps
+    }), _jsx("span", {}), children]
   });
-};
+});
 export default Checkbox;

package/lib/core/CollapseList/Item.d.ts

@@ -7,6 +7,6 @@ interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
     /** Set open initially */
     initialOpen?: boolean;
 }
-declare const CollapseListItem: React.FC<IProps>;
+declare const CollapseListItem: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>;
 export default CollapseListItem;
 //# sourceMappingURL=Item.d.ts.map

package/lib/core/CollapseList/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAKf,MAAM,OAAO,CAAA;AAOd,UAAU,MAAO,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACtE,kCAAkC;IAClC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,qCAAqC;IACrC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAiEtC,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAKf,MAAM,OAAO,CAAA;AAOd,UAAU,MAAO,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACtE,kCAAkC;IAClC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,qCAAqC;IACrC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,QAAA,MAAM,gBAAgB,+EAqErB,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/lib/core/CollapseList/Item.js

@@ -4,12 +4,12 @@ import { IconChevronDown } from '../..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const headerTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'Header'];
-const CollapseListItem = ({
+const CollapseListItem = /*#__PURE__*/React.forwardRef(({
   header,
   content,
   initialOpen,
   ...restProps
-}) => {
+}, ref) => {
   const [open, setOpen] = useState(initialOpen ? true : false);
   const contentRef = useRef(null);
   const contentId = `content-${Math.random().toString(36).substring(2, 9)}`;
@@ -34,6 +34,7 @@ const CollapseListItem = ({
   };
 
   return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
     className: "item",
     ...restProps,
     role: restProps['role'] || 'listitem',
@@ -63,5 +64,5 @@ const CollapseListItem = ({
       children: content
     })]
   });
-};
+});
 export default CollapseListItem;

package/lib/core/CollapseList/index.d.ts

@@ -4,6 +4,6 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Children */
     children?: React.ReactNode | React.ReactNode[];
 }
-declare const CollapseList: React.FC<IProps>;
+declare const CollapseList: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>;
 export default CollapseList;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/CollapseList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,MAAO,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3D,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAMlC,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,MAAO,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3D,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C;AAED,QAAA,MAAM,YAAY,+EAQjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/lib/core/CollapseList/index.js

@@ -2,14 +2,15 @@
 import React from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const CollapseList = ({
+const CollapseList = /*#__PURE__*/React.forwardRef(({
   children,
   ...restProps
-}) => {
+}, ref) => {
   return _jsx("div", {
+    ref: ref,
     css: theme => [styles.default(theme)],
     ...restProps,
     children: children
   });
-};
+});
 export default CollapseList;

package/lib/core/CollapseList/styles.d.ts

@@ -1,6 +1,44 @@
 /// <reference types="react" />
 import { IAppTheme } from '../../app-shell/theme';
-export declare const CollapseButton: import("@emotion/styled").StyledComponent<Omit<import("../Button").IProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
+export declare const CollapseButton: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<import("../private/ButtonOrLink").ButtonOrLinkTypes> & {
+    afterIcon?: import("react").ReactNode;
+    beforeIcon?: import("react").ReactNode;
+    children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal;
+    disabled?: boolean | undefined;
+    href?: string | undefined;
+    loading?: boolean | undefined;
+    onClick?: ((event: import("react").MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
+    onMouseUp?: ((event: import("react").MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
+    onCustomKeyPress?: {
+        key: string;
+        action: (event: KeyboardEvent) => void;
+    } | undefined;
+    onKeyPress?: ((event: KeyboardEvent) => void) | undefined;
+    onEnterKeyPress?: ((event: KeyboardEvent) => void) | undefined;
+    onEscapeKeyPress?: ((event: KeyboardEvent) => void) | undefined;
+    openInNewWindow?: boolean | undefined;
+    rel?: string | undefined;
+    trackingEvent?: string | undefined;
+    trackingName?: string | undefined;
+    type?: "button" | "submit" | "reset" | undefined;
+    target?: string | undefined;
+    download?: any;
+    tabIndex?: number | undefined;
+} & {
+    success?: boolean | undefined;
+    danger?: boolean | undefined;
+    highlight?: boolean | undefined;
+    outline?: boolean | undefined;
+    nostyle?: boolean | undefined;
+    focusable?: boolean | undefined;
+    border?: string | undefined;
+    css?: import("@emotion/utils").SerializedStyles | undefined;
+    loading?: boolean | undefined;
+    back?: boolean | undefined;
+    small?: boolean | undefined;
+    transparentBg?: boolean | undefined;
+    tabIndex?: number | undefined;
+} & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const styles: {

package/lib/core/CollapseList/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGjD,eAAO,MAAM,cAAc;;UAM1B,CAAA;AAED,eAAO,MAAM,MAAM;qBACA,SAAS;CAyB3B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGjD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAM1B,CAAA;AAED,eAAO,MAAM,MAAM;qBACA,SAAS;CAyB3B,CAAA"}

package/lib/core/Datepicker/Datepicker.stories.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-declare const _default;
-export default _default;
-export declare const DatepickerDefault: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import Datepicker from '.';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof Datepicker>;
+export default meta;
+declare type Story = StoryObj<typeof Datepicker>;
+export declare const Default: Story;
 export declare const WithError: {
     render: () => import("react").JSX.Element;
     name: string;

package/lib/core/Datepicker/Datepicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Datepicker/Datepicker.stories.tsx"],"names":[],"mappings":";;AAGA,wBAGS;AAET,eAAO,MAAM,iBAAiB;;;CAU7B,CAAA;AAED,eAAO,MAAM,SAAS;;;CAWrB,CAAA;AAED,eAAO,MAAM,SAAS;;;CASrB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAYvB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAWpB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAUpB,CAAA"}
+{"version":3,"file":"Datepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Datepicker/Datepicker.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,GAAG,CAAA;AAC1B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAGjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,SAAS;;;CAWrB,CAAA;AAED,eAAO,MAAM,SAAS;;;CASrB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAYvB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAWpB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAUpB,CAAA"}

package/lib/core/Datepicker/Datepicker.stories.js

@@ -1,16 +1,17 @@
 import Datepicker from '.';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Datepicker',
   component: Datepicker
 };
-export const DatepickerDefault = {
-  render: () => /*#__PURE__*/_jsx(Datepicker, {
+export default meta;
+export const Default = {
+  args: {
     onChange: e => console.log(e),
     onBlur: () => console.log('blur'),
-    label: "Date"
-  }),
-  name: 'Datepicker'
+    label: 'Date'
+  },
+  name: 'Default'
 };
 export const WithError = {
   render: () => /*#__PURE__*/_jsx(Datepicker, {

package/lib/core/DatepickerRange/DatepickerRange.stories.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-declare const _default;
-export default _default;
-export declare const DatepickerRangeDefault: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import DatepickerRange from '.';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof DatepickerRange>;
+export default meta;
+declare type Story = StoryObj<typeof DatepickerRange>;
+export declare const Default: Story;
 //# sourceMappingURL=DatepickerRange.stories.d.ts.map

package/lib/core/DatepickerRange/DatepickerRange.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerRange.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/DatepickerRange/DatepickerRange.stories.tsx"],"names":[],"mappings":";;AAGA,wBAGS;AAET,eAAO,MAAM,sBAAsB;;;CAkBlC,CAAA"}
+{"version":3,"file":"DatepickerRange.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/DatepickerRange/DatepickerRange.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,GAAG,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAGtC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAA;AAE7C,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA"}