@bbl-digital/snorre 4.0.9 → 4.0.11

package/lib/core/Alert/index.js

@@ -33,7 +33,6 @@ const Alert = ({
     return 'Informasjon';
   };
   const accessibilityProps = {
-    role: restProps['role'] || 'alert',
     'aria-live': ariaLivePolicy,
     'aria-atomic': restProps['aria-atomic'] || true,
     'aria-label': restProps['aria-label'] || getDefaultAriaLabel(),
@@ -41,6 +40,7 @@ const Alert = ({
     'aria-describedby': descriptionId.current
   };
   return _jsxs("div", {
+    role: "alert",
     css: theme => [styles.default(theme), success && styles.success(theme), info && styles.info(theme), danger && styles.danger(theme), rounded && styles.rounded, primary && styles.primary(theme), css && css],
     className: className,
     ...restProps,

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

@@ -1,7 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
-import { AccessibilityProps } from '../../shared/types/Accessibility';
-interface IProps extends AccessibilityProps {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Color of loading dots */
     color?: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/AppLoader/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAErE,UAAU,MAAO,SAAQ,kBAAkB;IACzC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAkB/B,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/AppLoader/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAyB,MAAM,OAAO,CAAA;AAI7C,UAAU,MAAO,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAkB/B,CAAA;AAED,eAAe,SAAS,CAAA"}

package/lib/core/AppLoader/index.js

@@ -8,11 +8,11 @@ const AppLoader = ({
   ...restProps
 }) => {
   const accessibilityProps = {
-    role: restProps['role'] || 'status',
     'aria-live': restProps['aria-live'] || 'polite',
     'aria-label': restProps['aria-label'] || 'Laster innhold'
   };
   return _jsxs("div", {
+    role: "status",
     css: theme => [styles.default(theme, color)],
     ...restProps,
     ...accessibilityProps,

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

@@ -19,45 +19,7 @@ declare const styles: {
     disabled: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
 };
 export declare const ErrorMessage: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-export declare const Clear: import("@emotion/styled").StyledComponent<import("../../shared/types/Accessibility").AccessibilityProps & {
-    [prop: string]: unknown;
-    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;
-    onKeyPress?: {
-        key: string;
-        action: (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" | "reset" | "submit" | 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;
-} & {
+export declare const Clear: import("@emotion/styled").StyledComponent<Omit<import("../Button").IProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export default styles;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAIjD,QAAA,MAAM,MAAM;qBACO,SAAS;;;0BA2DJ,SAAS;;;;kBAuCjB,SAAS;6BA2BE,SAAS;yBAGb,MAAM;iCAOE,MAAM;kCAGL,MAAM;qBAGnB,SAAS;4BAYF,SAAS;qBA4BhB,MAAM;sBAKL,SAAS;CAM5B,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,SAAS,8CAM5C,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAcjB,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAIjD,QAAA,MAAM,MAAM;qBACO,SAAS;;;0BA2DJ,SAAS;;;;kBAuCjB,SAAS;6BA2BE,SAAS;yBAGb,MAAM;iCAOE,MAAM;kCAGL,MAAM;qBAGnB,SAAS;4BAYF,SAAS;qBA4BhB,MAAM;sBAKL,SAAS;CAM5B,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,SAAS,8CAM5C,CAAA;AAED,eAAO,MAAM,KAAK;;UAcjB,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,CAAA"}

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

@@ -8,4 +8,5 @@ export declare const Success: Story;
 export declare const Info: Story;
 export declare const Danger: Story;
 export declare const WithoutChildren: Story;
+export declare const WithAriaLabel: Story;
 //# sourceMappingURL=Banner.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,GAAG,CAAA;AAGtB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAGrB,CAAA;AAET,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAEpC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAclB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAepB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA"}
+{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,GAAG,CAAA;AAGtB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAGrB,CAAA;AAET,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAEpC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAclB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAepB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA;AACD,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAA"}

package/lib/core/Banner/Banner.stories.js

@@ -73,4 +73,21 @@ export const WithoutChildren = {
     })
   },
   name: 'Without children'
+};
+export const WithAriaLabel = {
+  args: {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Title"
+    }),
+    'aria-label': 'Title. Some content.',
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Some content"
+    }),
+    actionButton: /*#__PURE__*/_jsx(Button, {
+      onClick: () => console.log('Hello'),
+      children: "Hello I am button"
+    })
+  },
+  name: 'With aria-label'
 };

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

@@ -1,7 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
-import { AccessibilityProps } from '../../shared/types/Accessibility';
-interface IProps extends AccessibilityProps {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Banner header */
     header?: React.ReactNode;
     /** Success banner */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Banner/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAErE,UAAU,MAAO,SAAQ,kBAAkB;IACzC,oBAAoB;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC9C,6CAA6C;IAC7C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA6B5B,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Banner/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,UAAU,MAAO,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3D,oBAAoB;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC9C,6CAA6C;IAC7C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA8B5B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/lib/core/Banner/index.js

@@ -15,7 +15,7 @@ const Banner = ({
 }) => {
   const isDefault = !success && !danger && !info;
   return _jsx(Alert, {
-    role: "banner",
+    "aria-live": "assertive",
     rounded: true,
     primary: isDefault,
     success: success,

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

@@ -1,40 +1,15 @@
-/// <reference types="react" />
-declare const _default;
-export default _default;
-export declare const Default: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Collapsable: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Rounded: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const WithHeader: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const WithHeaderAndCollapse: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const CollapsableMysite: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Noshadow: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Background: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const HideContent: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import Box from '.';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof Box>;
+export default meta;
+declare type Story = StoryObj<typeof Box>;
+export declare const Default: Story;
+export declare const Collapsable: Story;
+export declare const Rounded: Story;
+export declare const WithHeader: Story;
+export declare const WithHeaderAndCollapse: Story;
+export declare const CollapsableMysite: Story;
+export declare const Noshadow: Story;
+export declare const Background: Story;
+export declare const HideContent: Story;
 //# sourceMappingURL=Box.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Box/Box.stories.tsx"],"names":[],"mappings":";;AAIA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAOvB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAGtB,CAAA;AAED,eAAO,MAAM,qBAAqB;;;CAOjC,CAAA;AAED,eAAO,MAAM,iBAAiB;;;CAO7B,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAGpB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAGtB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAOvB,CAAA"}
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Box/Box.stories.tsx"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,GAAG,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAG1B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAA;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAQnC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAA"}

package/lib/core/Box/Box.stories.js

@@ -1,89 +1,90 @@
 import Header from '../Header';
 import Box from '.';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Box',
   component: Box
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Box, {
-    children: "Stuff"
-  }),
+  args: {
+    children: 'Stuff'
+  },
   name: 'Default'
 };
 export const Collapsable = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Header"
     }),
     collapsable: true,
-    children: "Stuff"
-  }),
+    children: 'Stuff'
+  },
   name: 'Collapsable'
 };
 export const Rounded = {
-  render: () => /*#__PURE__*/_jsx(Box, {
-    type: "mysite",
-    children: "Stuff"
-  }),
+  args: {
+    type: 'mysite',
+    children: 'Stuff'
+  },
   name: 'Rounded'
 };
 export const WithHeader = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Header"
     }),
-    children: "Stuff"
-  }),
+    children: 'Stuff'
+  },
   name: 'With header'
 };
 export const WithHeaderAndCollapse = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Header"
     }),
     collapsable: true,
-    children: "Stuff"
-  }),
+    children: 'Stuff'
+  },
   name: 'With header and collapse'
 };
 export const CollapsableMysite = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Header"
     }),
     collapsable: true,
-    type: "mysite",
-    children: "Stuff"
-  }),
+    type: 'mysite',
+    children: 'Stuff'
+  },
   name: 'Collapsable mysite'
 };
 export const Noshadow = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     noshadow: true,
-    children: "Stuff"
-  }),
+    children: 'Stuff'
+  },
   name: 'Noshadow'
 };
 export const Background = {
-  render: () => /*#__PURE__*/_jsx(Box, {
-    background: "#ececec",
-    children: "Stuff"
-  }),
+  args: {
+    background: '#ececec',
+    children: 'Stuff'
+  },
   name: 'Background'
 };
 export const HideContent = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Header"
     }),
     hideContent: true,
-    children: "Content"
-  }),
+    children: 'Stuff'
+  },
   name: 'Hide content'
 };

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 import { SerializedStyles } from '@emotion/react';
-declare type IProps = {
+declare type IProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Header component */
     header?: React.ReactNode;
     /** Collapsable box prop */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Box/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAMjD,aAAK,MAAM,GAAG;IACZ,uBAAuB;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,2BAA2B;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qCAAqC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3B,mFAAmF;IACnF,YAAY,CAAC,EAAE,SAAS,GAAG,YAAY,CAAA;IACvC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C,CAAA;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAoEzB,CAAA;AAED,eAAe,GAAG,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Box/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAMjD,aAAK,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACnD,uBAAuB;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,2BAA2B;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qCAAqC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3B,mFAAmF;IACnF,YAAY,CAAC,EAAE,SAAS,GAAG,YAAY,CAAA;IACvC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C,CAAA;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAsEzB,CAAA;AAED,eAAe,GAAG,CAAA"}

package/lib/core/Box/index.js

@@ -28,12 +28,18 @@ const Box = ({
   const onCollapseIconClicked = e => {
     setIsOpen(!isOpen);
   };
-  const icon = collapseIcon === 'plus/minus' ? isOpen ? _jsx(IconMinus, {}) : _jsx(IconPlus, {}) : _jsx(IconChevronDown, {
+  const icon = collapseIcon === 'plus/minus' ? isOpen ? _jsx(IconMinus, {
+    "aria-hidden": "true"
+  }) : _jsx(IconPlus, {
+    "aria-hidden": "true"
+  }) : _jsx(IconChevronDown, {
     flipVertical: isOpen,
-    size: "14px"
+    size: "14px",
+    "aria-hidden": "true"
   });
   const headerWrapper = collapsable ? _jsx(CollapseButton, {
-    "aria-label": "Toggle box open close",
+    "aria-label": `Toggle box ${isOpen ? 'closed' : 'open'}`,
+    "aria-expanded": isOpen,
     onClick: onCollapseIconClicked,
     nostyle: true,
     children: _jsxs(HeaderWrapper, {
@@ -45,6 +51,7 @@ const Box = ({
     children: header
   });
   return _jsxs("div", {
+    role: "group",
     css: theme => [styles.default(theme), css && css, type === 'mysite' && styles.mysite(theme), noshadow && styles.noshadow, background && styles.background(background)],
     className: className,
     ...restProps,

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

@@ -16,45 +16,7 @@ declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const CollapseButton: import("@emotion/styled").StyledComponent<import("../../shared/types/Accessibility").AccessibilityProps & {
-    [prop: string]: unknown;
-    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;
-    onKeyPress?: {
-        key: string;
-        action: (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" | "reset" | "submit" | 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;
-} & {
+declare const CollapseButton: import("@emotion/styled").StyledComponent<Omit<import("../Button").IProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export default styles;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Box/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGjD,QAAA,MAAM,MAAM;qBACO,SAAS;oBAWV,SAAS;;qBAQR,MAAM;CAGxB,CAAA;AAED,QAAA,MAAM,aAAa;;;;YACC,OAAO;yGAU1B,CAAA;AAED,QAAA,MAAM,cAAc;;;yGAGnB,CAAA;AAED,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAGnB,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Box/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGjD,QAAA,MAAM,MAAM;qBACO,SAAS;oBAWV,SAAS;;qBAQR,MAAM;CAGxB,CAAA;AAED,QAAA,MAAM,aAAa;;;;YACC,OAAO;yGAU1B,CAAA;AAED,QAAA,MAAM,cAAc;;;yGAGnB,CAAA;AAED,QAAA,MAAM,cAAc;;UAGnB,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}

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

@@ -1,9 +1,8 @@
 /** @jsxImportSource @emotion/react */
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
 import { Props as ButtonOrLinkProps } from '../private/ButtonOrLink';
-import { AccessibilityProps } from '../../shared/types/Accessibility';
-export declare type IProps = ButtonOrLinkProps & AccessibilityProps & {
+export declare type IProps = ButtonOrLinkProps & HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
     /** Success color styling */
     success?: boolean;
     /** Danger color styling */
@@ -31,6 +30,6 @@ export declare type IProps = ButtonOrLinkProps & AccessibilityProps & {
     /** Set tabindex */
     tabIndex?: number;
 };
-declare const Button: React.FC<IProps>;
+declare const Button: React.ForwardRefExoticComponent<Omit<IProps, "ref"> & 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,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAqB,EACnB,KAAK,IAAI,iBAAiB,EAC3B,MAAM,yBAAyB,CAAA;AAMhC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAErE,oBAAY,MAAM,GAAG,iBAAiB,GACpC,kBAAkB,GAAG;IACnB,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,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAiF5B,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"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"}

package/lib/core/Button/index.js

@@ -6,7 +6,7 @@ import AppLoader from '../AppLoader';
 import { useTheme } from '@emotion/react';
 import IconChevronLeft from '../../icons/General/IconChevronLeft';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const Button = props => {
+const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     danger,
     success,
@@ -49,6 +49,7 @@ const Button = props => {
     tabIndex: tabIndex,
     disabled: disabled,
     loading: loading,
+    ref: ref,
     css: theme => [styles.default(theme), outline && styles.outline(theme), danger && styles.danger(theme), success && styles.success(theme), highlight && styles.highlighted, disabled && styles.disabled(theme), (beforeIcon || afterIcon) && styles.icon(theme), beforeIcon && styles.beforeIcon, afterIcon && styles.afterIcon, border && styles.border(border), nostyle && styles.nostyle, loading && styles.loading(theme), back && styles.back(theme), css && css, small && styles.small, danger && outline && styles.dangerOutline(theme), success && outline && styles.successOutline(theme), transparentBg && styles.transparentBg, focusable && styles.focusable],
     afterIcon: afterIcon,
     beforeIcon: back ? _jsx(IconChevronLeft, {
@@ -60,5 +61,5 @@ const Button = props => {
       color: getLoaderColor()
     }) : props.children
   });
-};
+});
 export default Button;

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

@@ -1,29 +1,15 @@
 /// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").FC<{
-        withhover?: boolean | undefined;
-        primary?: boolean | undefined;
-        gray?: boolean | undefined;
-        onClick?: (() => void) | undefined;
-        noPadding?: boolean | undefined;
-        largePadding?: boolean | undefined;
-        height?: number | undefined;
-        nobackground?: boolean | undefined;
-        shadow?: boolean | undefined;
-        overflowvisible?: boolean | undefined;
-        css?: import("@emotion/utils").SerializedStyles | undefined;
-        className?: string | undefined;
-        children?: import("react").ReactNode | import("react").ReactNode[];
-    }>;
-};
-export default _default;
-export declare const Default: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import { Meta, StoryObj } from '@storybook/react';
+import Card from '.';
+declare const meta: Meta<typeof Card>;
+export default meta;
+declare type Story = StoryObj<typeof Card>;
+export declare const Default: Story;
 export declare const WithHover: {
-    render: () => import("react").JSX.Element;
+    args: {
+        withhover: boolean;
+        children: string;
+    };
     name: string;
 };
 export declare const WithShadow: {

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Card/Card.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAGA,wBAGC;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,SAAS;;;CAGrB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAGtB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAGvB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAGpB,CAAA;AAED,eAAO,MAAM,mBAAmB;;;CAa/B,CAAA;AAED,eAAO,MAAM,aAAa;;;CAOzB,CAAA"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Card/Card.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,IAAI,MAAM,GAAG,CAAA;AAGpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAGtB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAGvB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAGpB,CAAA;AAED,eAAO,MAAM,mBAAmB;;;CAa/B,CAAA;AAED,eAAO,MAAM,aAAa;;;CAOzB,CAAA"}

package/lib/core/Card/Card.stories.js

@@ -2,21 +2,22 @@ import Card from '.';
 import Dropdown from '../Dropdown';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Card',
   component: Card
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Card, {
-    children: "Stuff"
-  }),
+  args: {
+    children: 'Stuff'
+  },
   name: 'Default'
 };
 export const WithHover = {
-  render: () => /*#__PURE__*/_jsx(Card, {
+  args: {
     withhover: true,
-    children: "Hover me!"
-  }),
+    children: 'Hover me!'
+  },
   name: 'With hover'
 };
 export const WithShadow = {

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 import { SerializedStyles } from '@emotion/react';
-declare type IProps = {
+declare type IProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Set to true for hover effect */
     withhover?: boolean;
     /** To set primary background color*/

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;IACZ,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,CAgC1B,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;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"}

package/lib/core/Card/index.js

@@ -20,6 +20,7 @@ const Card = ({
     onClick: props.onClick,
     onKeyPress: handleOnKeyPress,
     className: className,
+    ...props,
     children: props.children
   });
 };