@bbl-digital/snorre 4.0.27 → 4.0.29

package/esm/core/List/List.stories.js

@@ -4,16 +4,14 @@ import Link from '../Link';
 import IconArrowRight from '../../icons/General/IconArrowRight';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export default {
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const meta = {
   title: 'Core/List',
   component: List
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx("div", {
-    className: "wrapper",
-    style: {
-      maxWidth: '300px'
-    },
+  args: {
     children: /*#__PURE__*/_jsxs(List, {
       children: [/*#__PURE__*/_jsx(ListItem, {
         children: "Item 1"
@@ -23,135 +21,151 @@ export const Default = {
         children: "Item 3"
       })]
     })
-  }),
+  },
   name: 'Default'
 };
 export const ListWithLinks = {
-  render: () => /*#__PURE__*/_jsxs(List, {
+  args: {
     links: true,
-    children: [/*#__PURE__*/_jsx(ListItem, {
-      children: /*#__PURE__*/_jsxs(Link, {
-        children: ["Item 1", /*#__PURE__*/_jsx(IconArrowRight, {
-          color: "#1657e2"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: /*#__PURE__*/_jsxs(Link, {
-        children: ["Lorem ipsum", /*#__PURE__*/_jsx(IconArrowRight, {
-          color: "#1657e2"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: /*#__PURE__*/_jsxs(Link, {
-        children: ["Lorem ipsum doro", /*#__PURE__*/_jsx(IconArrowRight, {
-          color: "#1657e2"
-        })]
-      })
-    })]
-  }),
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ListItem, {
+        children: /*#__PURE__*/_jsxs(Link, {
+          children: ["Item 1", /*#__PURE__*/_jsx(IconArrowRight, {
+            color: "#1657e2"
+          })]
+        })
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: /*#__PURE__*/_jsxs(Link, {
+          children: ["Lorem ipsum", /*#__PURE__*/_jsx(IconArrowRight, {
+            color: "#1657e2"
+          })]
+        })
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: /*#__PURE__*/_jsxs(Link, {
+          children: ["Lorem ipsum doro", /*#__PURE__*/_jsx(IconArrowRight, {
+            color: "#1657e2"
+          })]
+        })
+      })]
+    })
+  },
   name: 'List with links'
 };
 export const AlternativeListWithLinks = {
-  render: () => /*#__PURE__*/_jsxs(List, {
+  args: {
     linksAlternate: true,
-    children: [/*#__PURE__*/_jsx(ListItem, {
-      children: /*#__PURE__*/_jsxs(Link, {
-        children: ["Item 1", /*#__PURE__*/_jsx(IconArrowRight, {
-          color: "#1657e2"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: /*#__PURE__*/_jsxs(Link, {
-        children: ["Lorem ipsum", /*#__PURE__*/_jsx(IconArrowRight, {
-          color: "#1657e2"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: /*#__PURE__*/_jsxs(Link, {
-        children: ["Lorem ipsum doro", /*#__PURE__*/_jsx(IconArrowRight, {
-          color: "#1657e2"
-        })]
-      })
-    })]
-  }),
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ListItem, {
+        children: /*#__PURE__*/_jsxs(Link, {
+          children: ["Item 1", /*#__PURE__*/_jsx(IconArrowRight, {
+            color: "#1657e2"
+          })]
+        })
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: /*#__PURE__*/_jsxs(Link, {
+          children: ["Lorem ipsum", /*#__PURE__*/_jsx(IconArrowRight, {
+            color: "#1657e2"
+          })]
+        })
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: /*#__PURE__*/_jsxs(Link, {
+          children: ["Lorem ipsum doro", /*#__PURE__*/_jsx(IconArrowRight, {
+            color: "#1657e2"
+          })]
+        })
+      })]
+    })
+  },
   name: 'Alternative list with links'
 };
 export const Pointlist = {
-  render: () => /*#__PURE__*/_jsxs(List, {
+  args: {
     points: true,
-    children: [/*#__PURE__*/_jsx(ListItem, {
-      children: "Item 1"
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 2"
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 3"
-    })]
-  }),
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ListItem, {
+        children: "Item 1"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 2"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 3"
+      })]
+    })
+  },
   name: 'Pointlist'
 };
 export const Numberedlist = {
-  render: () => /*#__PURE__*/_jsxs(List, {
+  args: {
     numbers: true,
-    children: [/*#__PURE__*/_jsx(ListItem, {
-      children: "Item 1"
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 2"
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 3"
-    })]
-  }),
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ListItem, {
+        children: "Item 1"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 2"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 3"
+      })]
+    })
+  },
   name: 'Numberedlist'
 };
 export const NumberedlistHighlighted = {
-  render: () => /*#__PURE__*/_jsxs(List, {
+  args: {
     numbersHighlighted: true,
-    children: [/*#__PURE__*/_jsx(ListItem, {
-      children: "Item 1"
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 2"
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 3"
-    })]
-  }),
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ListItem, {
+        children: "Item 1"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 2"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 3"
+      })]
+    })
+  },
   name: 'Numberedlist - Highlighted'
 };
 export const Darktheme = {
-  render: () => /*#__PURE__*/_jsxs(List, {
+  args: {
     darkTheme: true,
-    children: [/*#__PURE__*/_jsx(ListItem, {
-      children: "Item 1"
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 2"
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 3"
-    })]
-  }),
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ListItem, {
+        children: "Item 1"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 2"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 3"
+      })]
+    })
+  },
   name: 'Darktheme'
 };
 export const NostyleList = {
-  render: () => /*#__PURE__*/_jsxs(List, {
+  args: {
     nostyle: true,
-    children: [/*#__PURE__*/_jsx(ListItem, {
-      children: "Item 1"
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 2"
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 3"
-    })]
-  }),
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ListItem, {
+        children: "Item 1"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 2"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 3"
+      })]
+    })
+  },
   name: 'Nostyle list'
 };
 export const WithPadding = {
-  render: () => /*#__PURE__*/_jsxs(List, {
-    padding: "0.5em",
-    rowHeight: "100%",
-    children: [/*#__PURE__*/_jsxs(ListItem, {
-      children: ["Item 1", /*#__PURE__*/_jsx("br", {}), "new line", /*#__PURE__*/_jsx("br", {}), "another new line"]
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 2"
-    }), /*#__PURE__*/_jsx(ListItem, {
-      children: "Item 3"
-    })]
-  }),
+  args: {
+    padding: '0.5em',
+    rowHeight: '100%',
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(ListItem, {
+        children: ["Item 1", /*#__PURE__*/_jsx("br", {}), "new line", /*#__PURE__*/_jsx("br", {}), "another new line"]
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 2"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 3"
+      })]
+    })
+  },
   name: 'With padding'
 };

package/esm/core/List/index.js

@@ -4,15 +4,18 @@ import Item from './Item';
 import styles from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export { Item };
-const List = ({
+const List = /*#__PURE__*/React.forwardRef(({
   darkTheme,
   padding,
   linksAlternate,
   ...props
-}) => {
+}, ref) => {
   const Tag = props.ordered || props.numbers || props.numbersHighlighted ? 'ol' : 'ul';
+  const role = props.selectList ? 'listbox' : 'list';
   return _jsx(Tag, {
+    role: role,
     css: theme => [styles.default(theme), props.ordered && styles.ordered, props.links && styles.links(theme), props.points && styles.points(theme), props.numbers && styles.numbers, props.numbersHighlighted && styles.numbersHighlighted(theme), props.selectList && styles.selectList(theme), props.nostyle && styles.nostyle, props.rowHeight && styles.rowHeight(props.rowHeight), props.minRowHeight && styles.minRowHeight(props.minRowHeight), darkTheme && styles.darkTheme(theme), padding && styles.setPadding(padding), linksAlternate && styles.linksAlternate(theme)],
+    ref: ref,
     children: React.Children.map(props.children, child => {
       if (!child) {
         return null;
@@ -20,5 +23,5 @@ const List = ({
       return child;
     })
   });
-};
+});
 export default List;

package/esm/core/ListPager/ListPager.stories.js

@@ -1,16 +1,16 @@
 import ListPager from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/ListPager',
   component: ListPager
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(ListPager, {
+  args: {
     totalPageCount: 6,
     currentPage: 1,
     onFirstClick: () => console.log('First clicked'),
     onLastClick: e => console.log('Last clicked, page:', e),
     onPageClick: e => console.log('Page ' + e + ' clicked')
-  }),
+  },
   name: 'Default'
 };

package/esm/core/ListPager/index.js

@@ -21,6 +21,7 @@ const ListPager = ({
   const hasMorePages = getHasMorePages(currentPage, totalPageCount);
   const firstButtonIndex = getFirstButtonIndex(currentPage, totalPageCount);
   const Dots = /*#__PURE__*/_jsx(DotWrapper, {
+    "aria-hidden": "true",
     children: "..."
   });
   let pages = [];
@@ -33,11 +34,14 @@ const ListPager = ({
     }, i));
   }
   return /*#__PURE__*/_jsxs(Wrapper, {
+    "aria-label": "Navigation",
     children: [/*#__PURE__*/_jsx(Button, {
       nostyle: true,
       onClick: onFirstClick,
+      "aria-label": "G\xE5 til f\xF8rste side",
       children: "F\xF8rste"
     }), hasPreviousPages && Dots, pages, hasMorePages && Dots, /*#__PURE__*/_jsx(Button, {
+      "aria-label": "G\xE5 til siste side",
       nostyle: true,
       onClick: () => onLastClick && totalPageCount && onLastClick(totalPageCount),
       children: "Siste"

package/esm/core/ListPager/styles.js

@@ -1,8 +1,8 @@
 import _styled from "@emotion/styled/base";
 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)."; }
 import { css } from '@emotion/react';
-export const PageStyle = (active, primary) => /*#__PURE__*/css("color:", active ? primary : 'initial', ";&:active,&:hover,&:focus{color:", active ? primary : 'initial', ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:PageStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3RQYWdlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2tFIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3RQYWdlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgUGFnZVN0eWxlID0gKGFjdGl2ZTogYm9vbGVhbiwgcHJpbWFyeTogc3RyaW5nKSA9PiBjc3NgXG4gIGNvbG9yOiAke2FjdGl2ZSA/IHByaW1hcnkgOiAnaW5pdGlhbCd9O1xuICAmOmFjdGl2ZSxcbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgY29sb3I6ICR7YWN0aXZlID8gcHJpbWFyeSA6ICdpbml0aWFsJ307XG4gIH1cbmBcbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC1jb2x1bW4tZ2FwOiAxZW07XG4gIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG4gIHdpZHRoOiBtaW4tY29udGVudDtcbmBcblxuZXhwb3J0IGNvbnN0IERvdFdyYXBwZXIgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcbiJdfQ== */");
-export const Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+export const PageStyle = (active, primary) => /*#__PURE__*/css("color:", active ? primary : 'initial', ";&:active,&:hover,&:focus{color:", active ? primary : 'initial', ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:PageStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3RQYWdlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2tFIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3RQYWdlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgUGFnZVN0eWxlID0gKGFjdGl2ZTogYm9vbGVhbiwgcHJpbWFyeTogc3RyaW5nKSA9PiBjc3NgXG4gIGNvbG9yOiAke2FjdGl2ZSA/IHByaW1hcnkgOiAnaW5pdGlhbCd9O1xuICAmOmFjdGl2ZSxcbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgY29sb3I6ICR7YWN0aXZlID8gcHJpbWFyeSA6ICdpbml0aWFsJ307XG4gIH1cbmBcbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLm5hdmBcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC1jb2x1bW4tZ2FwOiAxZW07XG4gIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG4gIHdpZHRoOiBtaW4tY29udGVudDtcbmBcblxuZXhwb3J0IGNvbnN0IERvdFdyYXBwZXIgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcbiJdfQ== */");
+export const Wrapper = /*#__PURE__*/_styled("nav", process.env.NODE_ENV === "production" ? {
   target: "eava76v1"
 } : {
   target: "eava76v1",
@@ -13,7 +13,7 @@ export const Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "pro
 } : {
   name: "1o2oc08",
   styles: "display:grid;grid-column-gap:1em;grid-auto-flow:column;width:min-content",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3RQYWdlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV2lDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3RQYWdlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgUGFnZVN0eWxlID0gKGFjdGl2ZTogYm9vbGVhbiwgcHJpbWFyeTogc3RyaW5nKSA9PiBjc3NgXG4gIGNvbG9yOiAke2FjdGl2ZSA/IHByaW1hcnkgOiAnaW5pdGlhbCd9O1xuICAmOmFjdGl2ZSxcbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgY29sb3I6ICR7YWN0aXZlID8gcHJpbWFyeSA6ICdpbml0aWFsJ307XG4gIH1cbmBcbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC1jb2x1bW4tZ2FwOiAxZW07XG4gIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG4gIHdpZHRoOiBtaW4tY29udGVudDtcbmBcblxuZXhwb3J0IGNvbnN0IERvdFdyYXBwZXIgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3RQYWdlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV2lDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3RQYWdlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgUGFnZVN0eWxlID0gKGFjdGl2ZTogYm9vbGVhbiwgcHJpbWFyeTogc3RyaW5nKSA9PiBjc3NgXG4gIGNvbG9yOiAke2FjdGl2ZSA/IHByaW1hcnkgOiAnaW5pdGlhbCd9O1xuICAmOmFjdGl2ZSxcbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgY29sb3I6ICR7YWN0aXZlID8gcHJpbWFyeSA6ICdpbml0aWFsJ307XG4gIH1cbmBcbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLm5hdmBcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC1jb2x1bW4tZ2FwOiAxZW07XG4gIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG4gIHdpZHRoOiBtaW4tY29udGVudDtcbmBcblxuZXhwb3J0IGNvbnN0IERvdFdyYXBwZXIgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const DotWrapper = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
@@ -27,6 +27,6 @@ export const DotWrapper = /*#__PURE__*/_styled("span", process.env.NODE_ENV ===
 } : {
   name: "s5xdrg",
   styles: "display:flex;align-items:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3RQYWdlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JxQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9MaXN0UGFnZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuZXhwb3J0IGNvbnN0IFBhZ2VTdHlsZSA9IChhY3RpdmU6IGJvb2xlYW4sIHByaW1hcnk6IHN0cmluZykgPT4gY3NzYFxuICBjb2xvcjogJHthY3RpdmUgPyBwcmltYXJ5IDogJ2luaXRpYWwnfTtcbiAgJjphY3RpdmUsXG4gICY6aG92ZXIsXG4gICY6Zm9jdXMge1xuICAgIGNvbG9yOiAke2FjdGl2ZSA/IHByaW1hcnkgOiAnaW5pdGlhbCd9O1xuICB9XG5gXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtY29sdW1uLWdhcDogMWVtO1xuICBncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuICB3aWR0aDogbWluLWNvbnRlbnQ7XG5gXG5cbmV4cG9ydCBjb25zdCBEb3RXcmFwcGVyID0gc3R5bGVkLnNwYW5gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gXG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3RQYWdlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JxQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9MaXN0UGFnZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuZXhwb3J0IGNvbnN0IFBhZ2VTdHlsZSA9IChhY3RpdmU6IGJvb2xlYW4sIHByaW1hcnk6IHN0cmluZykgPT4gY3NzYFxuICBjb2xvcjogJHthY3RpdmUgPyBwcmltYXJ5IDogJ2luaXRpYWwnfTtcbiAgJjphY3RpdmUsXG4gICY6aG92ZXIsXG4gICY6Zm9jdXMge1xuICAgIGNvbG9yOiAke2FjdGl2ZSA/IHByaW1hcnkgOiAnaW5pdGlhbCd9O1xuICB9XG5gXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5uYXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtY29sdW1uLWdhcDogMWVtO1xuICBncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuICB3aWR0aDogbWluLWNvbnRlbnQ7XG5gXG5cbmV4cG9ydCBjb25zdCBEb3RXcmFwcGVyID0gc3R5bGVkLnNwYW5gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gXG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });

package/esm/core/NoticeCard/index.js

@@ -38,6 +38,7 @@ const NoticeCard = ({
       children: [/*#__PURE__*/_jsx(Header, {
         level: 4,
         color: theme.secondaryDarkText,
+        id: "noticeModalTitle",
         children: notice.title
       }), /*#__PURE__*/_jsx(Div, {
         children: /*#__PURE__*/_jsx(NoticeMetaInfo, {
@@ -88,6 +89,7 @@ const NoticeCard = ({
     })]
   });
   return isModal ? /*#__PURE__*/_jsx(Modal, {
+    "aria-labelledby": "noticeModalTitle",
     width: imageSrc ? '920px' : '720px',
     open: true,
     onClose: onModalClose,

package/esm/core/NotificationCounter/index.js

@@ -8,10 +8,14 @@ const NotificationCounter = ({
   title
 }) => {
   const amountDigits = amount?.toString()?.length;
+  const notificationText = amount && amount > 999 ? '999+' : amount?.toString() || '0';
+  const screenReaderText = amount && amount > 999 ? 'more than 999 notifications' : `${amount || 0} notifications`;
   return Boolean(amount || persist) ? _jsx("span", {
     css: theme => [styles.default(theme, amountDigits)],
     title: title,
-    children: amount && amount > 999 ? '999+' : amount || 0
+    "aria-label": screenReaderText,
+    role: "status",
+    children: notificationText
   }) : null;
 };
 export default NotificationCounter;

package/esm/core/NotificationsMenu/index.js

@@ -40,7 +40,7 @@ const NotificationsMenu = ({
     if (triggerClose) setOpen(false);
   }, [triggerClose]);
   const onClick = () => {
-    setOpen(true);
+    setOpen(!open);
     onBellClick && onBellClick();
   };
   return /*#__PURE__*/_jsxs(NotificationsWrapper, {

package/esm/core/Radio/index.js

@@ -7,8 +7,10 @@ const Radio = ({
   onChange,
   onMouseUp,
   boxed,
+  children,
   ...props
 }) => {
+  const ariaLabel = props['aria-label'] ?? children ? undefined : 'Radio button';
   return _jsxs("label", {
     css: theme => [styles.default(theme), props.vertical && styles.vertical, props.disabled && styles.disabled(theme), boxed && styles.boxed],
     onClick: props.onClick,
@@ -18,8 +20,11 @@ const Radio = ({
       name: props.name,
       disabled: props.disabled,
       defaultChecked: props.checked,
-      onChange: onChange
-    }), props.children, _jsx("span", {})]
+      onChange: onChange,
+      "aria-label": ariaLabel // Add an aria-label if children is not descriptive enough
+      ,
+      ...props
+    }), children, _jsx("span", {})]
   });
 };
 export default Radio;

package/esm/core/Select/index.js

@@ -51,6 +51,10 @@ const Select = ({
       toggleOpen(false);
     };
     if (open) {
+      const firstOption = ref.current?.querySelector('button, a, [tabindex]');
+      if (firstOption) {
+        firstOption.focus();
+      }
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
@@ -73,6 +77,8 @@ const Select = ({
     ref: ref,
     className: className,
     css: theme => [styles.default, input && styles.input(theme), input && open && styles.open(theme), type === 'primary10' && styles.primary10(theme), icon && styles.withIcon, type === 'opacity08' && styles.opacity08(theme), width && styles.width(width), maxHeight && styles.maxHeight(maxHeight), customStyle && customStyle, open && customOpenstyle && customOpenstyle, disabled && styles.disabled(theme)],
+    "aria-expanded": open,
+    "aria-label": label ? label : 'Select',
     children: [input && label && Label, info && _jsx("span", {
       css: styles.infoButton,
       children: _jsx(InfoButton, {
@@ -96,7 +102,7 @@ const Select = ({
       tabIndex: disabled ? -1 : undefined,
       children: props.selectedValue ? props.selectedValue : props.text || ''
     }), _jsx(OptionsWrapper, {
-      css: [input && styles.inputstyle(!!label), optionsWidth && styles.optionsWidth(optionsWidth), process.env.NODE_ENV === "production" ? "" : ";label:NonNative;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1NlbGVjdC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUtRIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1NlbGVjdC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeEltcG9ydFNvdXJjZSBAZW1vdGlvbi9yZWFjdCAqL1xuaW1wb3J0IFJlYWN0LCB7XG4gIFJlYWN0Tm9kZSxcbiAgUmVhY3RFbGVtZW50LFxuICB1c2VTdGF0ZSxcbiAgY3JlYXRlUmVmLFxuICB1c2VFZmZlY3QsXG59IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IE9wdGlvbiBmcm9tICcuL09wdGlvbidcbmltcG9ydCB7IFNlbGVjdFdyYXBwZXIsIE9wdGlvbnNXcmFwcGVyLCBzdHlsZXMsIFN0eWxlZExhYmVsIH0gZnJvbSAnLi9zdHlsZXMnXG5pbXBvcnQgSW5mb0J1dHRvbiBmcm9tICcuLi9JbmZvQnV0dG9uJ1xuaW1wb3J0IEljb25IZWxwIGZyb20gJy4uLy4uL2ljb25zL0dlbmVyYWwvSWNvbkhlbHAnXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL0J1dHRvbidcbmltcG9ydCBJY29uQ2hldnJvbkRvd24gZnJvbSAnLi4vLi4vaWNvbnMvR2VuZXJhbC9JY29uQ2hldnJvbkRvd24nXG5pbXBvcnQgTGlzdCBmcm9tICcuLi9MaXN0J1xuXG5leHBvcnQgeyBPcHRpb24gfVxuXG5pbnRlcmZhY2UgSVByb3BzIHtcbiAgLyoqIFRleHQgd2hlbiBubyBvcHRpb24gYXJlIHNlbGVjdGVkICovXG4gIHRleHQ/OiBzdHJpbmdcbiAgLyoqIEN1cnJlbnQgc2VsZWN0ZWQgdmFsdWUuIExlYXZlIGVtcHR5IGZvciBkZWZhdWx0IHRleHQuICovXG4gIHNlbGVjdGVkVmFsdWU/OiBzdHJpbmdcbiAgLyoqIFN0eWxlIGFzIGFuIGlucHV0ICovXG4gIGlucHV0PzogYm9vbGVhblxuICAvKiogQWRkcyBhIGxhYmVsIGlmIGlucHV0IGlzIHNlbGVjdGVkICAqL1xuICBsYWJlbD86IHN0cmluZ1xuICAvKiogQ2FsbGJhY2sgaGFuZGxlciBmb3Igd2hlbiBjbGlja2luZyBvcHRpb24gZWxlbWVudC4gKi9cbiAgb25DaGFuZ2U/OiAodmFsdWU6IHN0cmluZykgPT4gYW55XG4gIC8qKiBPcHRpb24tZWxlbWVudHMsIHNlbGVjdCBsaXN0IGNvbnRlbnQgKi9cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVtdXG4gIC8qKiBBZGRzIGljb24gdG8gc2VsZWN0ICAqL1xuICBpY29uPzogUmVhY3QuUmVhY3ROb2RlXG4gIC8qKiBUeXBlIG9mIHNlbGVjdCwgZGVmYXVsdCBpcyB0cmFuc3BhcmVudCwgcHJpbWFyeTEwIGFkZHMgcHJpbWFyeSBiYWNrZ3JvdW5kIHdpdGggMTAgb3BhY2l0eSAqL1xuICB0eXBlPzogJ2RlZmF1bHQnIHwgJ3ByaW1hcnkxMCcgfCAnb3BhY2l0eTA4J1xuICAvKiogVXNlIG5hdGl2ZSBzZWxlY3RvciAqL1xuICBuYXRpdmU/OiBib29sZWFuXG4gIC8qKiBTZWxlY3QgYnV0dG9uIHdpZHRoICovXG4gIHdpZHRoPzogc3RyaW5nXG4gIC8qKiBPcHRpb25zIGNvbnRlbnQgd2lkdGggKi9cbiAgb3B0aW9uc1dpZHRoPzogc3RyaW5nXG4gIC8qKiBPcHRpb25zIG1heCBoZWlnaHQuIElmIHNldCB3aWxsIHNldCBvdmVyZmxvdy15IHRvIHNjcm9sbC4gKi9cbiAgbWF4SGVpZ2h0Pzogc3RyaW5nXG4gIC8qKiBBdXRvZm9jdXMgKi9cbiAgZm9jdXM/OiBib29sZWFuXG4gIC8qKiBBZGQgY3VzdG9tIGNzcyB0byBzZWxlY3Qgd2hlbiBpbiBvcGVuIHN0YXRlICovXG4gIGN1c3RvbU9wZW5zdHlsZT86IFNlcmlhbGl6ZWRTdHlsZXNcbiAgLyoqIE92ZXJyaWRlIHdpdGggY3VzdG9tIENTUyAqL1xuICBjdXN0b21TdHlsZT86IFNlcmlhbGl6ZWRTdHlsZXNcbiAgLyoqIEFkZCBhIGRhdGEtdHJhY2tpbmctZXZlbnQgYXR0cmlidXRlLiAqL1xuICB0cmFja2luZ0V2ZW50Pzogc3RyaW5nXG4gIC8qKiBBZGQgYSBkYXRhLXRyYWNraW5nLW5hbWUgYXR0cmlidXRlLiAqL1xuICB0cmFja2luZ05hbWU/OiBzdHJpbmdcbiAgLyoqIFNlbGVjdCBpcyBkaXNhYmxlZC4gKi9cbiAgZGlzYWJsZWQ/OiBib29sZWFuXG4gIC8qKiBNYW51YWwgY2xvc2UgYnkgY2hhbmdpbmcgY2xvc2VLZXkgZXh0ZXJuYWxseSAqL1xuICBjbG9zZUtleT86IHN0cmluZ1xuICAvKiogQWRkIGNsYXNzbmFtZSAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgLyoqIEFkZHMgaW5mby10ZXh0IGJ1dHRvbiAqL1xuICBpbmZvPzogc3RyaW5nXG4gIC8qKiBXaGVyZSB0aGUgaW5mbyB0b29sdGlwIHdpbGwgYmUgcGxhY2VkIHJlbGF0aXZlIHRvIHRoZSBidXR0b24gQGRlZmF1bHQgbGVmdCAqL1xuICBpbmZvUGxhY2VtZW50PzogJ3RvcCcgfCAnbGVmdCcgfCAncmlnaHQnIHwgJ2JvdHRvbSdcbn1cblxuY29uc3QgU2VsZWN0OiBSZWFjdC5GQzxJUHJvcHM+ID0gKHtcbiAgaW5wdXQsXG4gIGljb24sXG4gIHR5cGUgPSAnZGVmYXVsdCcsXG4gIG5hdGl2ZSxcbiAgb3B0aW9uc1dpZHRoLFxuICB3aWR0aCxcbiAgbWF4SGVpZ2h0LFxuICBmb2N1cyxcbiAgY3VzdG9tT3BlbnN0eWxlLFxuICBjdXN0b21TdHlsZSxcbiAgdHJhY2tpbmdFdmVudCxcbiAgdHJhY2tpbmdOYW1lLFxuICBkaXNhYmxlZCxcbiAgbGFiZWwsXG4gIGNsb3NlS2V5LFxuICBjbGFzc05hbWUsXG4gIGluZm8sXG4gIGluZm9QbGFjZW1lbnQgPSAnbGVmdCcsXG4gIC4uLnByb3BzXG59OiBJUHJvcHMpID0+IHtcbiAgY29uc3QgcmVmID0gY3JlYXRlUmVmPEhUTUxTcGFuRWxlbWVudD4oKVxuICBjb25zdCBbb3BlbiwgdG9nZ2xlT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSlcblxuICBjb25zdCBvbkNsaWNrID0gZnVuY3Rpb24gKCkge1xuICAgIHRvZ2dsZU9wZW4oIW9wZW4gJiYgIWRpc2FibGVkKVxuICB9XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoY2xvc2VLZXkpIHtcbiAgICAgIHRvZ2dsZU9wZW4oZmFsc2UpXG4gICAgfVxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSByZWFjdC1ob29rcy9leGhhdXN0aXZlLWRlcHNcbiAgfSwgW2Nsb3NlS2V5XSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IGhhbmRsZUNsaWNrT3V0c2lkZSA9IChlOiBhbnkpID0+IHtcbiAgICAgIGNvbnN0IG5vZGUgPSByZWYuY3VycmVudFxuICAgICAgaWYgKG5vZGUgJiYgbm9kZS5jb250YWlucyhlLnRhcmdldCkpIHtcbiAgICAgICAgcmV0dXJuXG4gICAgICB9XG4gICAgICB0b2dnbGVPcGVuKGZhbHNlKVxuICAgIH1cblxuICAgIGlmIChvcGVuKSB7XG4gICAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdtb3VzZWRvd24nLCBoYW5kbGVDbGlja091dHNpZGUpXG4gICAgfSBlbHNlIHtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ21vdXNlZG93bicsIGhhbmRsZUNsaWNrT3V0c2lkZSlcbiAgICB9XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKVxuICAgIH1cbiAgfSwgW29wZW4sIHJlZl0pXG5cbiAgY29uc3Qgb25DaGFuZ2UgPSAodmFsdWU6IHN0cmluZykgPT4ge1xuICAgIGlmIChwcm9wcy5vbkNoYW5nZSAmJiAhZGlzYWJsZWQpIHtcbiAgICAgIHByb3BzLm9uQ2hhbmdlKHZhbHVlKVxuICAgICAgdG9nZ2xlT3BlbihmYWxzZSlcbiAgICB9XG4gIH1cblxuICBjb25zdCBMYWJlbCA9IDxTdHlsZWRMYWJlbCB3aXRoSW5mbz17Qm9vbGVhbihpbmZvKX0+e2xhYmVsfTwvU3R5bGVkTGFiZWw+XG5cbiAgY29uc3QgTm9uTmF0aXZlID0gKFxuICAgIDxTZWxlY3RXcmFwcGVyXG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgY3NzPXsodGhlbWUpID0+IFtcbiAgICAgICAgc3R5bGVzLmRlZmF1bHQsXG4gICAgICAgIGlucHV0ICYmIHN0eWxlcy5pbnB1dCh0aGVtZSksXG4gICAgICAgIGlucHV0ICYmIG9wZW4gJiYgc3R5bGVzLm9wZW4odGhlbWUpLFxuICAgICAgICB0eXBlID09PSAncHJpbWFyeTEwJyAmJiBzdHlsZXMucHJpbWFyeTEwKHRoZW1lKSxcbiAgICAgICAgaWNvbiAmJiBzdHlsZXMud2l0aEljb24sXG4gICAgICAgIHR5cGUgPT09ICdvcGFjaXR5MDgnICYmIHN0eWxlcy5vcGFjaXR5MDgodGhlbWUpLFxuICAgICAgICB3aWR0aCAmJiBzdHlsZXMud2lkdGgod2lkdGgpLFxuICAgICAgICBtYXhIZWlnaHQgJiYgc3R5bGVzLm1heEhlaWdodChtYXhIZWlnaHQpLFxuICAgICAgICBjdXN0b21TdHlsZSAmJiBjdXN0b21TdHlsZSxcbiAgICAgICAgb3BlbiAmJiBjdXN0b21PcGVuc3R5bGUgJiYgY3VzdG9tT3BlbnN0eWxlLFxuICAgICAgICBkaXNhYmxlZCAmJiBzdHlsZXMuZGlzYWJsZWQodGhlbWUpLFxuICAgICAgXX1cbiAgICA+XG4gICAgICB7aW5wdXQgJiYgbGFiZWwgJiYgTGFiZWx9XG4gICAgICB7aW5mbyAmJiAoXG4gICAgICAgIDxzcGFuIGNzcz17c3R5bGVzLmluZm9CdXR0b259PlxuICAgICAgICAgIDxJbmZvQnV0dG9uIGljb249ezxJY29uSGVscCBwcmltYXJ5IC8+fSBwbGFjZT17aW5mb1BsYWNlbWVudH0+XG4gICAgICAgICAgICB7aW5mb31cbiAgICAgICAgICA8L0luZm9CdXR0b24+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICl9XG4gICAgICA8QnV0dG9uXG4gICAgICAgIG5vc3R5bGVcbiAgICAgICAgYWZ0ZXJJY29uPXs8SWNvbkNoZXZyb25Eb3duIGZsaXBWZXJ0aWNhbD17b3Blbn0gc2l6ZT17MTR9IC8+fVxuICAgICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgICBiZWZvcmVJY29uPXtpY29ufVxuICAgICAgICBhdXRvRm9jdXM9e2ZvY3VzfVxuICAgICAgICB0cmFja2luZ05hbWU9e3RyYWNraW5nTmFtZX1cbiAgICAgICAgdHJhY2tpbmdFdmVudD17dHJhY2tpbmdFdmVudH1cbiAgICAgICAgdGFiSW5kZXg9e2Rpc2FibGVkID8gLTEgOiB1bmRlZmluZWR9XG4gICAgICA+XG4gICAgICAgIHtwcm9wcy5zZWxlY3RlZFZhbHVlID8gcHJvcHMuc2VsZWN0ZWRWYWx1ZSA6IHByb3BzLnRleHQgfHwgJyd9XG4gICAgICA8L0J1dHRvbj5cbiAgICAgIDxPcHRpb25zV3JhcHBlclxuICAgICAgICBjc3M9e1tcbiAgICAgICAgICBpbnB1dCAmJiBzdHlsZXMuaW5wdXRzdHlsZSghIWxhYmVsKSxcbiAgICAgICAgICBvcHRpb25zV2lkdGggJiYgc3R5bGVzLm9wdGlvbnNXaWR0aChvcHRpb25zV2lkdGgpLFxuICAgICAgICBdfVxuICAgICAgPlxuICAgICAgICB7b3BlbiA/IChcbiAgICAgICAgICA8TGlzdCBzZWxlY3RMaXN0PlxuICAgICAgICAgICAge3Byb3BzLmNoaWxkcmVuXG4gICAgICAgICAgICAgIC5maWx0ZXIoKHgpID0+IHgpXG4gICAgICAgICAgICAgIC5tYXAoKGNoaWxkLCBrZXkpID0+IHtcbiAgICAgICAgICAgICAgICBpZiAoIWNoaWxkKSB7XG4gICAgICAgICAgICAgICAgICByZXR1cm4gbnVsbFxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICByZXR1cm4gUmVhY3QuY2xvbmVFbGVtZW50KGNoaWxkIGFzIFJlYWN0RWxlbWVudCwge1xuICAgICAgICAgICAgICAgICAgb25DaGFuZ2U6IG9uQ2hhbmdlLFxuICAgICAgICAgICAgICAgICAga2V5LFxuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICAgIH0pfVxuICAgICAgICAgIDwvTGlzdD5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICA8L09wdGlvbnNXcmFwcGVyPlxuICAgIDwvU2VsZWN0V3JhcHBlcj5cbiAgKVxuXG4gIGNvbnN0IE5hdGl2ZSA9IChcbiAgICA8c2VsZWN0XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGNzcz17KHRoZW1lKSA9PiBbXG4gICAgICAgIHN0eWxlcy5kZWZhdWx0LFxuICAgICAgICBpbnB1dCAmJiBzdHlsZXMuaW5wdXQodGhlbWUpLFxuICAgICAgICBpbnB1dCAmJiBvcGVuICYmIHN0eWxlcy5vcGVuKHRoZW1lKSxcbiAgICAgICAgdHlwZSA9PT0gJ3ByaW1hcnkxMCcgJiYgc3R5bGVzLnByaW1hcnkxMCh0aGVtZSksXG4gICAgICAgIGljb24gJiYgc3R5bGVzLndpdGhJY29uLFxuICAgICAgXX1cbiAgICAgIHZhbHVlPXtwcm9wcy5zZWxlY3RlZFZhbHVlID8gcHJvcHMuc2VsZWN0ZWRWYWx1ZSA6IHByb3BzLnRleHQgfHwgJyd9XG4gICAgICBvbkNoYW5nZT17KGUpID0+IG9uQ2hhbmdlKGUudGFyZ2V0LnZhbHVlKX1cbiAgICA+XG4gICAgICB7cHJvcHMuY2hpbGRyZW5cbiAgICAgICAgLmZpbHRlcigoeCkgPT4geClcbiAgICAgICAgLm1hcCgoY2hpbGQ6IGFueSwga2V5OiBhbnkpID0+IHtcbiAgICAgICAgICBpZiAoIWNoaWxkKSB7XG4gICAgICAgICAgICByZXR1cm4gbnVsbFxuICAgICAgICAgIH1cbiAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPG9wdGlvbiBrZXk9e2tleX0gdmFsdWU9e2NoaWxkLnByb3BzLnZhbHVlfT5cbiAgICAgICAgICAgICAge2NoaWxkLnByb3BzLmNoaWxkcmVufVxuICAgICAgICAgICAgPC9vcHRpb24+XG4gICAgICAgICAgKVxuICAgICAgICB9KX1cbiAgICA8L3NlbGVjdD5cbiAgKVxuXG4gIHJldHVybiBuYXRpdmUgPyBOYXRpdmUgOiBOb25OYXRpdmVcbn1cblxuZXhwb3J0IGRlZmF1bHQgU2VsZWN0XG4iXX0= */"],
+      css: [input && styles.inputstyle(!!label), optionsWidth && styles.optionsWidth(optionsWidth), process.env.NODE_ENV === "production" ? "" : ";label:NonNative;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1NlbGVjdC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUxRIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1NlbGVjdC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeEltcG9ydFNvdXJjZSBAZW1vdGlvbi9yZWFjdCAqL1xuaW1wb3J0IFJlYWN0LCB7XG4gIFJlYWN0Tm9kZSxcbiAgUmVhY3RFbGVtZW50LFxuICB1c2VTdGF0ZSxcbiAgY3JlYXRlUmVmLFxuICB1c2VFZmZlY3QsXG59IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IE9wdGlvbiBmcm9tICcuL09wdGlvbidcbmltcG9ydCB7IFNlbGVjdFdyYXBwZXIsIE9wdGlvbnNXcmFwcGVyLCBzdHlsZXMsIFN0eWxlZExhYmVsIH0gZnJvbSAnLi9zdHlsZXMnXG5pbXBvcnQgSW5mb0J1dHRvbiBmcm9tICcuLi9JbmZvQnV0dG9uJ1xuaW1wb3J0IEljb25IZWxwIGZyb20gJy4uLy4uL2ljb25zL0dlbmVyYWwvSWNvbkhlbHAnXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL0J1dHRvbidcbmltcG9ydCBJY29uQ2hldnJvbkRvd24gZnJvbSAnLi4vLi4vaWNvbnMvR2VuZXJhbC9JY29uQ2hldnJvbkRvd24nXG5pbXBvcnQgTGlzdCBmcm9tICcuLi9MaXN0J1xuXG5leHBvcnQgeyBPcHRpb24gfVxuXG5pbnRlcmZhY2UgSVByb3BzIHtcbiAgLyoqIFRleHQgd2hlbiBubyBvcHRpb24gYXJlIHNlbGVjdGVkICovXG4gIHRleHQ/OiBzdHJpbmdcbiAgLyoqIEN1cnJlbnQgc2VsZWN0ZWQgdmFsdWUuIExlYXZlIGVtcHR5IGZvciBkZWZhdWx0IHRleHQuICovXG4gIHNlbGVjdGVkVmFsdWU/OiBzdHJpbmdcbiAgLyoqIFN0eWxlIGFzIGFuIGlucHV0ICovXG4gIGlucHV0PzogYm9vbGVhblxuICAvKiogQWRkcyBhIGxhYmVsIGlmIGlucHV0IGlzIHNlbGVjdGVkICAqL1xuICBsYWJlbD86IHN0cmluZ1xuICAvKiogQ2FsbGJhY2sgaGFuZGxlciBmb3Igd2hlbiBjbGlja2luZyBvcHRpb24gZWxlbWVudC4gKi9cbiAgb25DaGFuZ2U/OiAodmFsdWU6IHN0cmluZykgPT4gYW55XG4gIC8qKiBPcHRpb24tZWxlbWVudHMsIHNlbGVjdCBsaXN0IGNvbnRlbnQgKi9cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVtdXG4gIC8qKiBBZGRzIGljb24gdG8gc2VsZWN0ICAqL1xuICBpY29uPzogUmVhY3QuUmVhY3ROb2RlXG4gIC8qKiBUeXBlIG9mIHNlbGVjdCwgZGVmYXVsdCBpcyB0cmFuc3BhcmVudCwgcHJpbWFyeTEwIGFkZHMgcHJpbWFyeSBiYWNrZ3JvdW5kIHdpdGggMTAgb3BhY2l0eSAqL1xuICB0eXBlPzogJ2RlZmF1bHQnIHwgJ3ByaW1hcnkxMCcgfCAnb3BhY2l0eTA4J1xuICAvKiogVXNlIG5hdGl2ZSBzZWxlY3RvciAqL1xuICBuYXRpdmU/OiBib29sZWFuXG4gIC8qKiBTZWxlY3QgYnV0dG9uIHdpZHRoICovXG4gIHdpZHRoPzogc3RyaW5nXG4gIC8qKiBPcHRpb25zIGNvbnRlbnQgd2lkdGggKi9cbiAgb3B0aW9uc1dpZHRoPzogc3RyaW5nXG4gIC8qKiBPcHRpb25zIG1heCBoZWlnaHQuIElmIHNldCB3aWxsIHNldCBvdmVyZmxvdy15IHRvIHNjcm9sbC4gKi9cbiAgbWF4SGVpZ2h0Pzogc3RyaW5nXG4gIC8qKiBBdXRvZm9jdXMgKi9cbiAgZm9jdXM/OiBib29sZWFuXG4gIC8qKiBBZGQgY3VzdG9tIGNzcyB0byBzZWxlY3Qgd2hlbiBpbiBvcGVuIHN0YXRlICovXG4gIGN1c3RvbU9wZW5zdHlsZT86IFNlcmlhbGl6ZWRTdHlsZXNcbiAgLyoqIE92ZXJyaWRlIHdpdGggY3VzdG9tIENTUyAqL1xuICBjdXN0b21TdHlsZT86IFNlcmlhbGl6ZWRTdHlsZXNcbiAgLyoqIEFkZCBhIGRhdGEtdHJhY2tpbmctZXZlbnQgYXR0cmlidXRlLiAqL1xuICB0cmFja2luZ0V2ZW50Pzogc3RyaW5nXG4gIC8qKiBBZGQgYSBkYXRhLXRyYWNraW5nLW5hbWUgYXR0cmlidXRlLiAqL1xuICB0cmFja2luZ05hbWU/OiBzdHJpbmdcbiAgLyoqIFNlbGVjdCBpcyBkaXNhYmxlZC4gKi9cbiAgZGlzYWJsZWQ/OiBib29sZWFuXG4gIC8qKiBNYW51YWwgY2xvc2UgYnkgY2hhbmdpbmcgY2xvc2VLZXkgZXh0ZXJuYWxseSAqL1xuICBjbG9zZUtleT86IHN0cmluZ1xuICAvKiogQWRkIGNsYXNzbmFtZSAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgLyoqIEFkZHMgaW5mby10ZXh0IGJ1dHRvbiAqL1xuICBpbmZvPzogc3RyaW5nXG4gIC8qKiBXaGVyZSB0aGUgaW5mbyB0b29sdGlwIHdpbGwgYmUgcGxhY2VkIHJlbGF0aXZlIHRvIHRoZSBidXR0b24gQGRlZmF1bHQgbGVmdCAqL1xuICBpbmZvUGxhY2VtZW50PzogJ3RvcCcgfCAnbGVmdCcgfCAncmlnaHQnIHwgJ2JvdHRvbSdcbn1cblxuY29uc3QgU2VsZWN0OiBSZWFjdC5GQzxJUHJvcHM+ID0gKHtcbiAgaW5wdXQsXG4gIGljb24sXG4gIHR5cGUgPSAnZGVmYXVsdCcsXG4gIG5hdGl2ZSxcbiAgb3B0aW9uc1dpZHRoLFxuICB3aWR0aCxcbiAgbWF4SGVpZ2h0LFxuICBmb2N1cyxcbiAgY3VzdG9tT3BlbnN0eWxlLFxuICBjdXN0b21TdHlsZSxcbiAgdHJhY2tpbmdFdmVudCxcbiAgdHJhY2tpbmdOYW1lLFxuICBkaXNhYmxlZCxcbiAgbGFiZWwsXG4gIGNsb3NlS2V5LFxuICBjbGFzc05hbWUsXG4gIGluZm8sXG4gIGluZm9QbGFjZW1lbnQgPSAnbGVmdCcsXG4gIC4uLnByb3BzXG59OiBJUHJvcHMpID0+IHtcbiAgY29uc3QgcmVmID0gY3JlYXRlUmVmPEhUTUxTcGFuRWxlbWVudD4oKVxuICBjb25zdCBbb3BlbiwgdG9nZ2xlT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSlcblxuICBjb25zdCBvbkNsaWNrID0gZnVuY3Rpb24gKCkge1xuICAgIHRvZ2dsZU9wZW4oIW9wZW4gJiYgIWRpc2FibGVkKVxuICB9XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoY2xvc2VLZXkpIHtcbiAgICAgIHRvZ2dsZU9wZW4oZmFsc2UpXG4gICAgfVxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSByZWFjdC1ob29rcy9leGhhdXN0aXZlLWRlcHNcbiAgfSwgW2Nsb3NlS2V5XSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IGhhbmRsZUNsaWNrT3V0c2lkZSA9IChlOiBhbnkpID0+IHtcbiAgICAgIGNvbnN0IG5vZGUgPSByZWYuY3VycmVudFxuICAgICAgaWYgKG5vZGUgJiYgbm9kZS5jb250YWlucyhlLnRhcmdldCkpIHtcbiAgICAgICAgcmV0dXJuXG4gICAgICB9XG4gICAgICB0b2dnbGVPcGVuKGZhbHNlKVxuICAgIH1cblxuICAgIGlmIChvcGVuKSB7XG4gICAgICBjb25zdCBmaXJzdE9wdGlvbiA9IHJlZi5jdXJyZW50Py5xdWVyeVNlbGVjdG9yKFxuICAgICAgICAnYnV0dG9uLCBhLCBbdGFiaW5kZXhdJ1xuICAgICAgKSBhcyBIVE1MRWxlbWVudFxuICAgICAgaWYgKGZpcnN0T3B0aW9uKSB7XG4gICAgICAgIGZpcnN0T3B0aW9uLmZvY3VzKClcbiAgICAgIH1cbiAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ21vdXNlZG93bicsIGhhbmRsZUNsaWNrT3V0c2lkZSlcbiAgICB9IGVsc2Uge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKVxuICAgIH1cblxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdtb3VzZWRvd24nLCBoYW5kbGVDbGlja091dHNpZGUpXG4gICAgfVxuICB9LCBbb3BlbiwgcmVmXSlcblxuICBjb25zdCBvbkNoYW5nZSA9ICh2YWx1ZTogc3RyaW5nKSA9PiB7XG4gICAgaWYgKHByb3BzLm9uQ2hhbmdlICYmICFkaXNhYmxlZCkge1xuICAgICAgcHJvcHMub25DaGFuZ2UodmFsdWUpXG4gICAgICB0b2dnbGVPcGVuKGZhbHNlKVxuICAgIH1cbiAgfVxuXG4gIGNvbnN0IExhYmVsID0gPFN0eWxlZExhYmVsIHdpdGhJbmZvPXtCb29sZWFuKGluZm8pfT57bGFiZWx9PC9TdHlsZWRMYWJlbD5cblxuICBjb25zdCBOb25OYXRpdmUgPSAoXG4gICAgPFNlbGVjdFdyYXBwZXJcbiAgICAgIHJlZj17cmVmfVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICBjc3M9eyh0aGVtZSkgPT4gW1xuICAgICAgICBzdHlsZXMuZGVmYXVsdCxcbiAgICAgICAgaW5wdXQgJiYgc3R5bGVzLmlucHV0KHRoZW1lKSxcbiAgICAgICAgaW5wdXQgJiYgb3BlbiAmJiBzdHlsZXMub3Blbih0aGVtZSksXG4gICAgICAgIHR5cGUgPT09ICdwcmltYXJ5MTAnICYmIHN0eWxlcy5wcmltYXJ5MTAodGhlbWUpLFxuICAgICAgICBpY29uICYmIHN0eWxlcy53aXRoSWNvbixcbiAgICAgICAgdHlwZSA9PT0gJ29wYWNpdHkwOCcgJiYgc3R5bGVzLm9wYWNpdHkwOCh0aGVtZSksXG4gICAgICAgIHdpZHRoICYmIHN0eWxlcy53aWR0aCh3aWR0aCksXG4gICAgICAgIG1heEhlaWdodCAmJiBzdHlsZXMubWF4SGVpZ2h0KG1heEhlaWdodCksXG4gICAgICAgIGN1c3RvbVN0eWxlICYmIGN1c3RvbVN0eWxlLFxuICAgICAgICBvcGVuICYmIGN1c3RvbU9wZW5zdHlsZSAmJiBjdXN0b21PcGVuc3R5bGUsXG4gICAgICAgIGRpc2FibGVkICYmIHN0eWxlcy5kaXNhYmxlZCh0aGVtZSksXG4gICAgICBdfVxuICAgICAgYXJpYS1leHBhbmRlZD17b3Blbn1cbiAgICAgIGFyaWEtbGFiZWw9e2xhYmVsID8gbGFiZWwgOiAnU2VsZWN0J31cbiAgICA+XG4gICAgICB7aW5wdXQgJiYgbGFiZWwgJiYgTGFiZWx9XG4gICAgICB7aW5mbyAmJiAoXG4gICAgICAgIDxzcGFuIGNzcz17c3R5bGVzLmluZm9CdXR0b259PlxuICAgICAgICAgIDxJbmZvQnV0dG9uIGljb249ezxJY29uSGVscCBwcmltYXJ5IC8+fSBwbGFjZT17aW5mb1BsYWNlbWVudH0+XG4gICAgICAgICAgICB7aW5mb31cbiAgICAgICAgICA8L0luZm9CdXR0b24+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICl9XG4gICAgICA8QnV0dG9uXG4gICAgICAgIG5vc3R5bGVcbiAgICAgICAgYWZ0ZXJJY29uPXs8SWNvbkNoZXZyb25Eb3duIGZsaXBWZXJ0aWNhbD17b3Blbn0gc2l6ZT17MTR9IC8+fVxuICAgICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgICBiZWZvcmVJY29uPXtpY29ufVxuICAgICAgICBhdXRvRm9jdXM9e2ZvY3VzfVxuICAgICAgICB0cmFja2luZ05hbWU9e3RyYWNraW5nTmFtZX1cbiAgICAgICAgdHJhY2tpbmdFdmVudD17dHJhY2tpbmdFdmVudH1cbiAgICAgICAgdGFiSW5kZXg9e2Rpc2FibGVkID8gLTEgOiB1bmRlZmluZWR9XG4gICAgICA+XG4gICAgICAgIHtwcm9wcy5zZWxlY3RlZFZhbHVlID8gcHJvcHMuc2VsZWN0ZWRWYWx1ZSA6IHByb3BzLnRleHQgfHwgJyd9XG4gICAgICA8L0J1dHRvbj5cbiAgICAgIDxPcHRpb25zV3JhcHBlclxuICAgICAgICBjc3M9e1tcbiAgICAgICAgICBpbnB1dCAmJiBzdHlsZXMuaW5wdXRzdHlsZSghIWxhYmVsKSxcbiAgICAgICAgICBvcHRpb25zV2lkdGggJiYgc3R5bGVzLm9wdGlvbnNXaWR0aChvcHRpb25zV2lkdGgpLFxuICAgICAgICBdfVxuICAgICAgPlxuICAgICAgICB7b3BlbiA/IChcbiAgICAgICAgICA8TGlzdCBzZWxlY3RMaXN0PlxuICAgICAgICAgICAge3Byb3BzLmNoaWxkcmVuXG4gICAgICAgICAgICAgIC5maWx0ZXIoKHgpID0+IHgpXG4gICAgICAgICAgICAgIC5tYXAoKGNoaWxkLCBrZXkpID0+IHtcbiAgICAgICAgICAgICAgICBpZiAoIWNoaWxkKSB7XG4gICAgICAgICAgICAgICAgICByZXR1cm4gbnVsbFxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICByZXR1cm4gUmVhY3QuY2xvbmVFbGVtZW50KGNoaWxkIGFzIFJlYWN0RWxlbWVudCwge1xuICAgICAgICAgICAgICAgICAgb25DaGFuZ2U6IG9uQ2hhbmdlLFxuICAgICAgICAgICAgICAgICAga2V5LFxuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICAgIH0pfVxuICAgICAgICAgIDwvTGlzdD5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICA8L09wdGlvbnNXcmFwcGVyPlxuICAgIDwvU2VsZWN0V3JhcHBlcj5cbiAgKVxuXG4gIGNvbnN0IE5hdGl2ZSA9IChcbiAgICA8c2VsZWN0XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGNzcz17KHRoZW1lKSA9PiBbXG4gICAgICAgIHN0eWxlcy5kZWZhdWx0LFxuICAgICAgICBpbnB1dCAmJiBzdHlsZXMuaW5wdXQodGhlbWUpLFxuICAgICAgICBpbnB1dCAmJiBvcGVuICYmIHN0eWxlcy5vcGVuKHRoZW1lKSxcbiAgICAgICAgdHlwZSA9PT0gJ3ByaW1hcnkxMCcgJiYgc3R5bGVzLnByaW1hcnkxMCh0aGVtZSksXG4gICAgICAgIGljb24gJiYgc3R5bGVzLndpdGhJY29uLFxuICAgICAgXX1cbiAgICAgIHZhbHVlPXtwcm9wcy5zZWxlY3RlZFZhbHVlID8gcHJvcHMuc2VsZWN0ZWRWYWx1ZSA6IHByb3BzLnRleHQgfHwgJyd9XG4gICAgICBvbkNoYW5nZT17KGUpID0+IG9uQ2hhbmdlKGUudGFyZ2V0LnZhbHVlKX1cbiAgICA+XG4gICAgICB7cHJvcHMuY2hpbGRyZW5cbiAgICAgICAgLmZpbHRlcigoeCkgPT4geClcbiAgICAgICAgLm1hcCgoY2hpbGQ6IGFueSwga2V5OiBhbnkpID0+IHtcbiAgICAgICAgICBpZiAoIWNoaWxkKSB7XG4gICAgICAgICAgICByZXR1cm4gbnVsbFxuICAgICAgICAgIH1cbiAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPG9wdGlvbiBrZXk9e2tleX0gdmFsdWU9e2NoaWxkLnByb3BzLnZhbHVlfT5cbiAgICAgICAgICAgICAge2NoaWxkLnByb3BzLmNoaWxkcmVufVxuICAgICAgICAgICAgPC9vcHRpb24+XG4gICAgICAgICAgKVxuICAgICAgICB9KX1cbiAgICA8L3NlbGVjdD5cbiAgKVxuXG4gIHJldHVybiBuYXRpdmUgPyBOYXRpdmUgOiBOb25OYXRpdmVcbn1cblxuZXhwb3J0IGRlZmF1bHQgU2VsZWN0XG4iXX0= */"],
       children: open ? _jsx(List, {
         selectList: true,
         children: props.children.filter(x => x).map((child, key) => {

package/esm/core/Skeleton/index.js

@@ -8,25 +8,28 @@ const Skeleton = ({
   rectangle = false,
   borderRadius = undefined
 }) => {
+  const commonProps = {
+    height,
+    width,
+    'aria-hidden': true,
+    role: 'presentation'
+  };
   if (circle) {
     return /*#__PURE__*/_jsx(SkeletonCircle, {
       "data-testid": "skeleton",
-      height: height,
-      width: width
+      ...commonProps
     });
   }
   if (rectangle) {
     return /*#__PURE__*/_jsx(SkeletonRectangle, {
       "data-testid": "skeleton",
       borderRadius: borderRadius,
-      height: height,
-      width: width
+      ...commonProps
     });
   }
   return /*#__PURE__*/_jsx(SkeletonRow, {
     "data-testid": "skeleton",
-    height: height,
-    width: width
+    ...commonProps
   });
 };
 export default Skeleton;

package/esm/core/Spinner/index.js

@@ -4,7 +4,10 @@ import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const Spinner = props => {
   return _jsx("div", {
-    css: theme => [styles.default(theme), props.size && styles.size(props.size), props.margin && styles.margin(props.margin), props.color && styles.color(props.color), (props.thickness || props.offsetColor) && styles.border(props.thickness, props.offsetColor, props.color || theme.primary)]
+    css: theme => [styles.default(theme), props.size && styles.size(props.size), props.margin && styles.margin(props.margin), props.color && styles.color(props.color), (props.thickness || props.offsetColor) && styles.border(props.thickness, props.offsetColor, props.color || theme.primary)],
+    role: "alert",
+    "aria-live": "polite",
+    "aria-label": "Laster..."
   });
 };
 export default Spinner;