no-frills-ui 0.0.14-alpha.4 → 0.0.14-alpha.5

package/lib-esm/components/Notification/style.js

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 import { Card } from '../Card';
 import { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './types';
 const getEntryAnimation = (position) => {
@@ -23,37 +23,37 @@ const getExitAnimation = (position) => {
 const getBorderColor = (type) => {
     switch (type) {
         case NOTIFICATION_TYPE.SUCCESS:
-            return `var(--success-light, ${constants.SUCCESS_LIGHT})`;
+            return getThemeValue(THEME_NAME.SUCCESS_LIGHT);
         case NOTIFICATION_TYPE.DANGER:
-            return `var(--error-light, ${constants.ERROR_LIGHT})`;
+            return getThemeValue(THEME_NAME.ERROR_LIGHT);
         case NOTIFICATION_TYPE.WARNING:
-            return `var(--warning-light, ${constants.WARNING_LIGHT})`;
+            return getThemeValue(THEME_NAME.WARNING_LIGHT);
         default:
-            return `var(--info-light, ${constants.INFO_LIGHT})`;
+            return getThemeValue(THEME_NAME.INFO_LIGHT);
     }
 };
 const getTitleColor = (type) => {
     switch (type) {
         case NOTIFICATION_TYPE.SUCCESS:
-            return `var(--success, ${constants.SUCCESS})`;
+            return getThemeValue(THEME_NAME.SUCCESS);
         case NOTIFICATION_TYPE.DANGER:
-            return `var(--error, ${constants.ERROR})`;
+            return getThemeValue(THEME_NAME.ERROR);
         case NOTIFICATION_TYPE.WARNING:
-            return `var(--warning, ${constants.WARNING})`;
+            return getThemeValue(THEME_NAME.WARNING);
         case NOTIFICATION_TYPE.INFO:
-            return `var(--info, ${constants.INFO})`;
+            return getThemeValue(THEME_NAME.INFO);
     }
 };
 const getTypeStyle = (type) => {
     switch (type) {
         case NOTIFICATION_TYPE.INFO:
-            return `color:  var(--info, ${constants.INFO})`;
+            return `color: ${getThemeValue(THEME_NAME.INFO)}`;
         case NOTIFICATION_TYPE.SUCCESS:
-            return `color: var(--success, ${constants.SUCCESS})`;
+            return `color: ${getThemeValue(THEME_NAME.SUCCESS)}`;
         case NOTIFICATION_TYPE.DANGER:
-            return `color: var(--error, ${constants.ERROR})`;
+            return `color: ${getThemeValue(THEME_NAME.ERROR)}`;
         case NOTIFICATION_TYPE.WARNING:
-            return `color: var(--warning, ${constants.WARNING})`;
+            return `color: ${getThemeValue(THEME_NAME.WARNING)}`;
     }
 };
 export const Container = styled.div `
@@ -64,6 +64,7 @@ export const Container = styled.div `
     : 'column-reverse'};
 `;
 export const Notice = styled(Card) `
+    position: relative;
     border-radius: 3px;
     border-left: 4px solid ${(props) => getBorderColor(props.type)};
     width: 300px;
@@ -150,13 +151,16 @@ export const FillParent = styled.div `
     flex: 1;
 `;
 export const CloseButton = styled.button `
+    position: absolute;
     background-color: transparent;
     border: none;
-    padding: none;
+    padding: 0;
+    top: 4px;
+    right: 4px;
     cursor: pointer;
 
     &:focus {
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
+        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
         border-radius: 3px;
     }
 `;
@@ -173,4 +177,15 @@ export const Footer = styled.div `
     justify-content: flex-end;
     padding: 0 5px;
 `;
+export const VisuallyHidden = styled.span `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+`;
 //# sourceMappingURL=style.js.map

package/lib-esm/components/Notification/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Notification/style.ts"],"names":[],"mappings":"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","sourcesContent":["import styled from '@emotion/styled';\nimport constants from '../../shared/constants';\nimport { Card } from '../Card';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\nconst getEntryAnimation = (position: NOTIFICATION_POSITION) => {\n    switch (position) {\n        case NOTIFICATION_POSITION.TOP_LEFT:\n        case NOTIFICATION_POSITION.BOTTOM_LEFT:\n            return 'in-left';\n        default:\n            return 'in-right';\n    }\n};\n\nconst getExitAnimation = (position: NOTIFICATION_POSITION) => {\n    switch (position) {\n        case NOTIFICATION_POSITION.TOP_LEFT:\n        case NOTIFICATION_POSITION.BOTTOM_LEFT:\n            return 'out-left';\n        default:\n            return 'out-right';\n    }\n};\n\nconst getBorderColor = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.SUCCESS:\n            return `var(--success-light, ${constants.SUCCESS_LIGHT})`;\n        case NOTIFICATION_TYPE.DANGER:\n            return `var(--error-light, ${constants.ERROR_LIGHT})`;\n        case NOTIFICATION_TYPE.WARNING:\n            return `var(--warning-light, ${constants.WARNING_LIGHT})`;\n        default:\n            return `var(--info-light, ${constants.INFO_LIGHT})`;\n    }\n};\n\nconst getTitleColor = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.SUCCESS:\n            return `var(--success, ${constants.SUCCESS})`;\n        case NOTIFICATION_TYPE.DANGER:\n            return `var(--error, ${constants.ERROR})`;\n        case NOTIFICATION_TYPE.WARNING:\n            return `var(--warning, ${constants.WARNING})`;\n        case NOTIFICATION_TYPE.INFO:\n            return `var(--info, ${constants.INFO})`;\n    }\n};\n\nconst getTypeStyle = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.INFO:\n            return `color:  var(--info, ${constants.INFO})`;\n        case NOTIFICATION_TYPE.SUCCESS:\n            return `color: var(--success, ${constants.SUCCESS})`;\n        case NOTIFICATION_TYPE.DANGER:\n            return `color: var(--error, ${constants.ERROR})`;\n        case NOTIFICATION_TYPE.WARNING:\n            return `color: var(--warning, ${constants.WARNING})`;\n    }\n};\n\ninterface NoticeProp extends NotificationOptions {\n    position: NOTIFICATION_POSITION;\n}\n\nexport const Container = styled.div<{ position: NOTIFICATION_POSITION }>`\n    display: flex;\n    flex-direction: ${(props) =>\n        props.position === NOTIFICATION_POSITION.TOP_LEFT ||\n        props.position === NOTIFICATION_POSITION.TOP_RIGHT\n            ? 'column'\n            : 'column-reverse'};\n`;\n\nexport const Notice = styled(Card)<NoticeProp>`\n    border-radius: 3px;\n    border-left: 4px solid ${(props) => getBorderColor(props.type)};\n    width: 300px;\n    display: flex;\n    padding: 0 5px 5px 0;\n    overflow: hidden;\n    animation: ${(props) => getEntryAnimation(props.position)} 0.6s ease;\n\n    & svg {\n        fill: currentColor;\n        vertical-align: middle;\n        width: 20px;\n        height: 20px;\n    }\n\n    &.leave {\n        animation: ${(props) => getExitAnimation(props.position)} 0.6s;\n    }\n\n    @keyframes in-right {\n        from {\n            transform: translateX(100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        to {\n            transform: translateX(0%);\n            max-height: 150px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes out-right {\n        to {\n            transform: translateX(100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        from {\n            transform: translateX(0%);\n            max-height: 100px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes in-left {\n        from {\n            transform: translateX(-100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        to {\n            transform: translateX(0%);\n            max-height: 150px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes out-left {\n        to {\n            transform: translateX(-100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        from {\n            transform: translateX(0%);\n            max-height: 100px;\n            opacity: 1;\n        }\n    }\n`;\n\nexport const Title = styled.div<{ type: NOTIFICATION_TYPE }>`\n    padding: 5px 0;\n    font-size: 14px;\n    color: ${(props) => getTitleColor(props.type)};\n    display: flex;\n    align-items: center;\n`;\n\nexport const FillParent = styled.div`\n    flex: 1;\n`;\n\nexport const CloseButton = styled.button`\n    background-color: transparent;\n    border: none;\n    padding: none;\n    cursor: pointer;\n\n    &:focus {\n        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});\n        border-radius: 3px;\n    }\n`;\n\nexport const Body = styled.div`\n    padding: 5px 5px 5px 0;\n    font-size: 14px;\n`;\n\nexport const IconContainer = styled.div<{ type: NOTIFICATION_TYPE }>`\n    padding: 6px 10px;\n    ${(props) => getTypeStyle(props.type)};\n`;\n\nexport const Footer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    padding: 0 5px;\n`;\n"]}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Notification/style.ts"],"names":[],"mappings":"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","sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { Card } from '../Card';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\nconst getEntryAnimation = (position: NOTIFICATION_POSITION) => {\n    switch (position) {\n        case NOTIFICATION_POSITION.TOP_LEFT:\n        case NOTIFICATION_POSITION.BOTTOM_LEFT:\n            return 'in-left';\n        default:\n            return 'in-right';\n    }\n};\n\nconst getExitAnimation = (position: NOTIFICATION_POSITION) => {\n    switch (position) {\n        case NOTIFICATION_POSITION.TOP_LEFT:\n        case NOTIFICATION_POSITION.BOTTOM_LEFT:\n            return 'out-left';\n        default:\n            return 'out-right';\n    }\n};\n\nconst getBorderColor = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS_LIGHT);\n        case NOTIFICATION_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR_LIGHT);\n        case NOTIFICATION_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING_LIGHT);\n        default:\n            return getThemeValue(THEME_NAME.INFO_LIGHT);\n    }\n};\n\nconst getTitleColor = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS);\n        case NOTIFICATION_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR);\n        case NOTIFICATION_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING);\n        case NOTIFICATION_TYPE.INFO:\n            return getThemeValue(THEME_NAME.INFO);\n    }\n};\n\nconst getTypeStyle = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.INFO:\n            return `color: ${getThemeValue(THEME_NAME.INFO)}`;\n        case NOTIFICATION_TYPE.SUCCESS:\n            return `color: ${getThemeValue(THEME_NAME.SUCCESS)}`;\n        case NOTIFICATION_TYPE.DANGER:\n            return `color: ${getThemeValue(THEME_NAME.ERROR)}`;\n        case NOTIFICATION_TYPE.WARNING:\n            return `color: ${getThemeValue(THEME_NAME.WARNING)}`;\n    }\n};\n\ninterface NoticeProp extends NotificationOptions {\n    position: NOTIFICATION_POSITION;\n}\n\nexport const Container = styled.div<{ position: NOTIFICATION_POSITION }>`\n    display: flex;\n    flex-direction: ${(props) =>\n        props.position === NOTIFICATION_POSITION.TOP_LEFT ||\n        props.position === NOTIFICATION_POSITION.TOP_RIGHT\n            ? 'column'\n            : 'column-reverse'};\n`;\n\nexport const Notice = styled(Card)<NoticeProp>`\n    position: relative;\n    border-radius: 3px;\n    border-left: 4px solid ${(props) => getBorderColor(props.type)};\n    width: 300px;\n    display: flex;\n    padding: 0 5px 5px 0;\n    overflow: hidden;\n    animation: ${(props) => getEntryAnimation(props.position)} 0.6s ease;\n\n    & svg {\n        fill: currentColor;\n        vertical-align: middle;\n        width: 20px;\n        height: 20px;\n    }\n\n    &.leave {\n        animation: ${(props) => getExitAnimation(props.position)} 0.6s;\n    }\n\n    @keyframes in-right {\n        from {\n            transform: translateX(100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        to {\n            transform: translateX(0%);\n            max-height: 150px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes out-right {\n        to {\n            transform: translateX(100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        from {\n            transform: translateX(0%);\n            max-height: 100px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes in-left {\n        from {\n            transform: translateX(-100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        to {\n            transform: translateX(0%);\n            max-height: 150px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes out-left {\n        to {\n            transform: translateX(-100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        from {\n            transform: translateX(0%);\n            max-height: 100px;\n            opacity: 1;\n        }\n    }\n`;\n\nexport const Title = styled.div<{ type: NOTIFICATION_TYPE }>`\n    padding: 5px 0;\n    font-size: 14px;\n    color: ${(props) => getTitleColor(props.type)};\n    display: flex;\n    align-items: center;\n`;\n\nexport const FillParent = styled.div`\n    flex: 1;\n`;\n\nexport const CloseButton = styled.button`\n    position: absolute;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    top: 4px;\n    right: 4px;\n    cursor: pointer;\n\n    &:focus {\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n        border-radius: 3px;\n    }\n`;\n\nexport const Body = styled.div`\n    padding: 5px 5px 5px 0;\n    font-size: 14px;\n`;\n\nexport const IconContainer = styled.div<{ type: NOTIFICATION_TYPE }>`\n    padding: 6px 10px;\n    ${(props) => getTypeStyle(props.type)};\n`;\n\nexport const Footer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    padding: 0 5px;\n`;\n\nexport const VisuallyHidden = styled.span`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n`;\n"]}

package/lib-esm/components/Notification/types.d.ts

@@ -31,5 +31,7 @@ export interface NotificationOptions {
     buttonClick?: () => void;
     /** Notification close callback. */
     onClose?: () => void;
+    /** aria label for the close button on the notification */
+    closeButtonAriaLabel?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/lib-esm/components/Notification/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,oBAAY,qBAAqB;IAC7B,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;CAChC;AAED,4BAA4B;AAC5B,oBAAY,iBAAiB;IACzB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;CACtB;AAED,MAAM,WAAW,mBAAmB;IAChC,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,oBAAY,qBAAqB;IAC7B,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;CAChC;AAED,4BAA4B;AAC5B,oBAAY,iBAAiB;IACzB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;CACtB;AAED,MAAM,WAAW,mBAAmB;IAChC,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC"}

package/lib-esm/components/Notification/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,MAAM,CAAN,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,8CAAqB,CAAA;IACrB,gDAAuB,CAAA;IACvB,oDAA2B,CAAA;IAC3B,sDAA6B,CAAA;AACjC,CAAC,EALW,qBAAqB,KAArB,qBAAqB,QAKhC;AAED,4BAA4B;AAC5B,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IACzB,kCAAa,CAAA;IACb,wCAAmB,CAAA;IACnB,sCAAiB,CAAA;IACjB,wCAAmB,CAAA;AACvB,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B","sourcesContent":["/** Position for Notification */\nexport enum NOTIFICATION_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\n/** Type of Notifications */\nexport enum NOTIFICATION_TYPE {\n    INFO = 'INFO',\n    SUCCESS = 'SUCCESS',\n    DANGER = 'DANGER',\n    WARNING = 'WARNING',\n}\n\nexport interface NotificationOptions {\n    /** Title of the notification */\n    title: string;\n    /** Body of the notification */\n    description: string;\n    /** Id for the notification, helps in de-duplication. */\n    id?: string;\n    /** Duration for the notification in milliseconds */\n    duration?: number;\n    /** Creates sticky notification */\n    sticky?: boolean;\n    /** Type of notification */\n    type?: NOTIFICATION_TYPE;\n    /** Action button text */\n    buttonText?: string;\n    /** Action button click callback */\n    buttonClick?: () => void;\n    /** Notification close callback. */\n    onClose?: () => void;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,MAAM,CAAN,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,8CAAqB,CAAA;IACrB,gDAAuB,CAAA;IACvB,oDAA2B,CAAA;IAC3B,sDAA6B,CAAA;AACjC,CAAC,EALW,qBAAqB,KAArB,qBAAqB,QAKhC;AAED,4BAA4B;AAC5B,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IACzB,kCAAa,CAAA;IACb,wCAAmB,CAAA;IACnB,sCAAiB,CAAA;IACjB,wCAAmB,CAAA;AACvB,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B","sourcesContent":["/** Position for Notification */\nexport enum NOTIFICATION_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\n/** Type of Notifications */\nexport enum NOTIFICATION_TYPE {\n    INFO = 'INFO',\n    SUCCESS = 'SUCCESS',\n    DANGER = 'DANGER',\n    WARNING = 'WARNING',\n}\n\nexport interface NotificationOptions {\n    /** Title of the notification */\n    title: string;\n    /** Body of the notification */\n    description: string;\n    /** Id for the notification, helps in de-duplication. */\n    id?: string;\n    /** Duration for the notification in milliseconds */\n    duration?: number;\n    /** Creates sticky notification */\n    sticky?: boolean;\n    /** Type of notification */\n    type?: NOTIFICATION_TYPE;\n    /** Action button text */\n    buttonText?: string;\n    /** Action button click callback */\n    buttonClick?: () => void;\n    /** Notification close callback. */\n    onClose?: () => void;\n    /** aria label for the close button on the notification */\n    closeButtonAriaLabel?: string;\n}\n"]}

package/lib-esm/components/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,oBAAY,gBAAgB;IACxB,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;CAChC;AAgFD,iBAAwB,OAAO,CAC3B,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC,oDA0IjF;kBA3IuB,OAAO;;QA8I3B,wBAAwB;;QAExB,qCAAqC;;QAErC,oDAAoD;;QAOpD,qDAAqD;;QAErD,6BAA6B;;;;;;;;eA3JT,OAAO"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,oBAAY,gBAAgB;IACxB,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;CAChC;AAgFD,iBAAwB,OAAO,CAC3B,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC,oDA8JjF;kBA/JuB,OAAO;;QAkK3B,wBAAwB;;QAExB,qCAAqC;;QAErC,oDAAoD;;QAOpD,qDAAqD;;QAErD,6BAA6B;;;;;;;;eA/KT,OAAO"}

package/lib-esm/components/Popover/Popover.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Card } from '../Card';
@@ -85,6 +85,9 @@ export default function Popover(props) {
     const [translate, setTranslate] = useState({ x: 0, y: 0 });
     const popperRef = useRef();
     const containerRef = useRef();
+    const triggerRef = useRef(null);
+    const popperId = useId();
+    const triggerId = useId();
     const close = useCallback(() => {
         setClosing(true);
         setTimeout(() => {
@@ -94,6 +97,12 @@ export default function Popover(props) {
                 props.onClose();
             }
             setClosing(false);
+            // Restore focus to the trigger element after animation completes
+            setTimeout(() => {
+                if (triggerRef.current) {
+                    triggerRef.current.focus();
+                }
+            }, 50);
         }, 280);
     }, [props]);
     const keyupEventHandler = useCallback((e) => {
@@ -182,7 +191,13 @@ export default function Popover(props) {
             popperRef.current.focus();
         }
     }, [open, props.position]);
-    return (_jsxs(PopoverDiv, { ref: containerRef, children: [_jsx(props.element, {}), open && (_jsx(Popper, { elevated: true, tabIndex: 0, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: (e) => {
+    return (_jsxs(PopoverDiv, { ref: containerRef, children: [React.createElement(props.element, {
+                ref: triggerRef,
+                id: triggerId,
+                'aria-expanded': open,
+                'aria-haspopup': 'dialog',
+                'aria-controls': popperId,
+            }), open && (_jsx(Popper, { elevated: true, tabIndex: 0, role: "dialog", "aria-labelledby": triggerId, id: popperId, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: (e) => {
                     e.stopPropagation();
                     e.nativeEvent.stopImmediatePropagation();
                 }, children: props.children }))] }));

package/lib-esm/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { Card } from '../Card';\n\nexport enum POPOVER_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\ninterface translate {\n    x: number;\n    y: number;\n}\n\nconst positionMap = {\n    [POPOVER_POSITION.TOP_LEFT]: `\n        bottom: calc(100% - 10px);\n        left: 0;\n    `,\n    [POPOVER_POSITION.TOP_RIGHT]: `\n        bottom: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_RIGHT]: `\n        top: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_LEFT]: `\n        top: calc(100% - 10px);\n        left: 0;\n    `,\n};\n\nconst PopoverDiv = styled.div`\n    position: relative;\n    display: inline-flex;\n`;\n\nconst Popper = styled(Card)<{ position: POPOVER_POSITION; translateX: number; translateY: number }>`\n    position: absolute;\n    width: 100%;\n    min-width: 200px;\n    overflow: auto;\n    animation: enter 0.3s linear;\n    border-radius: 3px;\n    z-index: 1;\n    transform: translate(${(props) => props.translateX}px, ${(props) => props.translateY}px);\n    ${(props) => positionMap[props.position]}\n\n    &.closing {\n        /* max-height: 0px;\n        opacity: 0;\n        overflow: hidden; */\n        animation: exit 0.3s linear;\n    }\n\n    @keyframes enter {\n        from {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        to {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n\n    @keyframes exit {\n        to {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        from {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n`;\n\nconst KEY_CODES = {\n    ESC: 27,\n};\n\nexport default function Popover(\n    props: React.PropsWithChildren<PropTypes.InferProps<typeof Popover.propTypes>>,\n) {\n    const [open, setOpen] = useState(props.open);\n    const [closing, setClosing] = useState(false);\n    const [translate, setTranslate] = useState<translate>({ x: 0, y: 0 });\n    const popperRef = useRef<HTMLDivElement>();\n    const containerRef = useRef<HTMLDivElement>();\n\n    const close = useCallback(() => {\n        setClosing(true);\n        setTimeout(() => {\n            setOpen(false);\n            setTranslate({ x: 0, y: 0 });\n            if (props.onClose) {\n                props.onClose();\n            }\n            setClosing(false);\n        }, 280);\n    }, [props]);\n\n    const keyupEventHandler = useCallback(\n        (e: KeyboardEvent) => {\n            if (props.closeOnEsc && e.keyCode === KEY_CODES.ESC) {\n                close();\n            }\n        },\n        [close, props.closeOnEsc],\n    );\n\n    const clickOutsideHandler = useCallback(\n        (e: MouseEvent) => {\n            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n                close();\n            }\n        },\n        [close],\n    );\n\n    /**\n     * Get called on popover mount.\n     */\n    useEffect(() => {\n        document.addEventListener('keyup', keyupEventHandler);\n\n        return () => {\n            document.removeEventListener('keyup', keyupEventHandler);\n            document.removeEventListener('click', clickOutsideHandler);\n        };\n    }, [clickOutsideHandler, close, keyupEventHandler]);\n\n    useEffect(() => {\n        if (props.open) {\n            setOpen(true);\n            // Use requestAnimationFrame to add listener after current event loop\n            requestAnimationFrame(() => {\n                document.addEventListener('click', clickOutsideHandler);\n            });\n        } else {\n            if (open) {\n                close();\n            }\n        }\n\n        return () => {\n            document.removeEventListener('click', clickOutsideHandler);\n        };\n    }, [props.open, open, clickOutsideHandler, close]);\n\n    useEffect(() => {\n        if (open) {\n            const { top, left, right } = popperRef.current.getBoundingClientRect();\n            const height = popperRef.current.scrollHeight;\n            const viewportWidth = document.documentElement.clientWidth;\n            const viewportHeight = document.documentElement.clientHeight;\n            const translation = { x: 0, y: 0 };\n\n            if (props.position === POPOVER_POSITION.BOTTOM_LEFT) {\n                // overflow can happen at bottom and right\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else if (props.position == POPOVER_POSITION.BOTTOM_RIGHT) {\n                // overflow can happen at bottom and left\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            } else if (props.position === POPOVER_POSITION.TOP_LEFT) {\n                // overflow can happen at top and right\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else {\n                // overflow can happen at top and left\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            }\n            // Note it can still overflow, but in that case fitting popper inside the\n            // window is not possible.\n            setTranslate(translation);\n            popperRef.current.focus();\n        }\n    }, [open, props.position]);\n\n    return (\n        <PopoverDiv ref={containerRef}>\n            <props.element />\n            {open && (\n                <Popper\n                    elevated\n                    tabIndex={0}\n                    position={props.position}\n                    translateX={translate.x}\n                    translateY={translate.y}\n                    className={closing && 'closing'}\n                    ref={popperRef}\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        e.nativeEvent.stopImmediatePropagation();\n                    }}\n                >\n                    {props.children}\n                </Popper>\n            )}\n        </PopoverDiv>\n    );\n}\n\nPopover.propTypes = {\n    /** Opens the popover */\n    open: PropTypes.bool.isRequired,\n    /** Anchor element for the popover */\n    element: PropTypes.func,\n    /** Position of the popover around anchor element */\n    position: PropTypes.oneOf([\n        POPOVER_POSITION.TOP_LEFT,\n        POPOVER_POSITION.TOP_RIGHT,\n        POPOVER_POSITION.BOTTOM_LEFT,\n        POPOVER_POSITION.BOTTOM_RIGHT,\n    ]),\n    /** If the popover should close on `esc` key press */\n    closeOnEsc: PropTypes.bool,\n    /** Popover close callback */\n    onClose: PropTypes.func,\n};\n\nPopover.defaultProps = {\n    closeOnEsc: true,\n    position: POPOVER_POSITION.BOTTOM_LEFT,\n};\n"]}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { Card } from '../Card';\n\nexport enum POPOVER_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\ninterface translate {\n    x: number;\n    y: number;\n}\n\nconst positionMap = {\n    [POPOVER_POSITION.TOP_LEFT]: `\n        bottom: calc(100% - 10px);\n        left: 0;\n    `,\n    [POPOVER_POSITION.TOP_RIGHT]: `\n        bottom: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_RIGHT]: `\n        top: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_LEFT]: `\n        top: calc(100% - 10px);\n        left: 0;\n    `,\n};\n\nconst PopoverDiv = styled.div`\n    position: relative;\n    display: inline-flex;\n`;\n\nconst Popper = styled(Card)<{ position: POPOVER_POSITION; translateX: number; translateY: number }>`\n    position: absolute;\n    width: 100%;\n    min-width: 200px;\n    overflow: auto;\n    animation: enter 0.3s linear;\n    border-radius: 3px;\n    z-index: 1;\n    transform: translate(${(props) => props.translateX}px, ${(props) => props.translateY}px);\n    ${(props) => positionMap[props.position]}\n\n    &.closing {\n        /* max-height: 0px;\n        opacity: 0;\n        overflow: hidden; */\n        animation: exit 0.3s linear;\n    }\n\n    @keyframes enter {\n        from {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        to {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n\n    @keyframes exit {\n        to {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        from {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n`;\n\nconst KEY_CODES = {\n    ESC: 27,\n};\n\nexport default function Popover(\n    props: React.PropsWithChildren<PropTypes.InferProps<typeof Popover.propTypes>>,\n) {\n    const [open, setOpen] = useState(props.open);\n    const [closing, setClosing] = useState(false);\n    const [translate, setTranslate] = useState<translate>({ x: 0, y: 0 });\n    const popperRef = useRef<HTMLDivElement>();\n    const containerRef = useRef<HTMLDivElement>();\n    const triggerRef = useRef<HTMLElement | null>(null);\n    const popperId = useId();\n    const triggerId = useId();\n\n    const close = useCallback(() => {\n        setClosing(true);\n        setTimeout(() => {\n            setOpen(false);\n            setTranslate({ x: 0, y: 0 });\n\n            if (props.onClose) {\n                props.onClose();\n            }\n            setClosing(false);\n\n            // Restore focus to the trigger element after animation completes\n            setTimeout(() => {\n                if (triggerRef.current) {\n                    triggerRef.current.focus();\n                }\n            }, 50);\n        }, 280);\n    }, [props]);\n\n    const keyupEventHandler = useCallback(\n        (e: KeyboardEvent) => {\n            if (props.closeOnEsc && e.keyCode === KEY_CODES.ESC) {\n                close();\n            }\n        },\n        [close, props.closeOnEsc],\n    );\n\n    const clickOutsideHandler = useCallback(\n        (e: MouseEvent) => {\n            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n                close();\n            }\n        },\n        [close],\n    );\n\n    /**\n     * Get called on popover mount.\n     */\n    useEffect(() => {\n        document.addEventListener('keyup', keyupEventHandler);\n\n        return () => {\n            document.removeEventListener('keyup', keyupEventHandler);\n            document.removeEventListener('click', clickOutsideHandler);\n        };\n    }, [clickOutsideHandler, close, keyupEventHandler]);\n\n    useEffect(() => {\n        if (props.open) {\n            setOpen(true);\n            // Use requestAnimationFrame to add listener after current event loop\n            requestAnimationFrame(() => {\n                document.addEventListener('click', clickOutsideHandler);\n            });\n        } else {\n            if (open) {\n                close();\n            }\n        }\n\n        return () => {\n            document.removeEventListener('click', clickOutsideHandler);\n        };\n    }, [props.open, open, clickOutsideHandler, close]);\n\n    useEffect(() => {\n        if (open) {\n            const { top, left, right } = popperRef.current.getBoundingClientRect();\n            const height = popperRef.current.scrollHeight;\n            const viewportWidth = document.documentElement.clientWidth;\n            const viewportHeight = document.documentElement.clientHeight;\n            const translation = { x: 0, y: 0 };\n\n            if (props.position === POPOVER_POSITION.BOTTOM_LEFT) {\n                // overflow can happen at bottom and right\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else if (props.position == POPOVER_POSITION.BOTTOM_RIGHT) {\n                // overflow can happen at bottom and left\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            } else if (props.position === POPOVER_POSITION.TOP_LEFT) {\n                // overflow can happen at top and right\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else {\n                // overflow can happen at top and left\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            }\n            // Note it can still overflow, but in that case fitting popper inside the\n            // window is not possible.\n            setTranslate(translation);\n            popperRef.current.focus();\n        }\n    }, [open, props.position]);\n\n    return (\n        <PopoverDiv ref={containerRef}>\n            {React.createElement(props.element, {\n                ref: triggerRef,\n                id: triggerId,\n                'aria-expanded': open,\n                'aria-haspopup': 'dialog',\n                'aria-controls': popperId,\n            })}\n            {open && (\n                <Popper\n                    elevated\n                    tabIndex={0}\n                    role=\"dialog\"\n                    aria-labelledby={triggerId}\n                    id={popperId}\n                    position={props.position}\n                    translateX={translate.x}\n                    translateY={translate.y}\n                    className={closing && 'closing'}\n                    ref={popperRef}\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        e.nativeEvent.stopImmediatePropagation();\n                    }}\n                >\n                    {props.children}\n                </Popper>\n            )}\n        </PopoverDiv>\n    );\n}\n\nPopover.propTypes = {\n    /** Opens the popover */\n    open: PropTypes.bool.isRequired,\n    /** Anchor element for the popover */\n    element: PropTypes.func,\n    /** Position of the popover around anchor element */\n    position: PropTypes.oneOf([\n        POPOVER_POSITION.TOP_LEFT,\n        POPOVER_POSITION.TOP_RIGHT,\n        POPOVER_POSITION.BOTTOM_LEFT,\n        POPOVER_POSITION.BOTTOM_RIGHT,\n    ]),\n    /** If the popover should close on `esc` key press */\n    closeOnEsc: PropTypes.bool,\n    /** Popover close callback */\n    onClose: PropTypes.func,\n};\n\nPopover.defaultProps = {\n    closeOnEsc: true,\n    position: POPOVER_POSITION.BOTTOM_LEFT,\n};\n"]}

package/lib-esm/components/Spinner/Spinner.d.ts

@@ -4,9 +4,12 @@ declare namespace Spinner {
     var propTypes: {
         /** Spinner's size */
         size: PropTypes.Requireable<number>;
+        /** Accessible label for screen readers */
+        label: PropTypes.Requireable<string>;
     };
     var defaultProps: {
         size: number;
+        label: string;
     };
 }
 type SpinnerProp = PropTypes.InferProps<typeof Spinner.propTypes>;

package/lib-esm/components/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAuBnC,iBAAS,OAAO,CAAC,KAAK,EAAE,WAAW,oDAElC;kBAFQ,OAAO;;QAOZ,qBAAqB;;;;;;;AAHzB,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC;AAWlE,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAuBnC,iBAAS,OAAO,CAAC,KAAK,EAAE,WAAW,oDAWlC;kBAXQ,OAAO;;QAgBZ,qBAAqB;;QAErB,0CAA0C;;;;;;;;AAL9C,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC;AAclE,eAAe,OAAO,CAAC"}

package/lib-esm/components/Spinner/Spinner.js

@@ -1,10 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 const SpinnerDiv = styled.div `
-    border: 4px solid var(--primary, ${constants.PRIMARY});
-    border-top: 4px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+    border: 4px solid ${getThemeValue(THEME_NAME.PRIMARY)};
+    border-top: 4px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     border-radius: 50%;
     width: ${(props) => props.size}px;
     height: ${(props) => props.size}px;
@@ -21,14 +32,18 @@ const SpinnerDiv = styled.div `
     }
 `;
 function Spinner(props) {
-    return _jsx(SpinnerDiv, Object.assign({}, props));
+    const { label } = props, rest = __rest(props, ["label"]);
+    return (_jsx(SpinnerDiv, Object.assign({}, rest, { role: "status", "aria-label": label, "aria-live": "polite", "aria-busy": "true" })));
 }
 Spinner.propTypes = {
     /** Spinner's size */
     size: PropTypes.number,
+    /** Accessible label for screen readers */
+    label: PropTypes.string,
 };
 Spinner.defaultProps = {
     size: 30,
+    label: 'Loading',
 };
 export default Spinner;
 //# sourceMappingURL=Spinner.js.map

package/lib-esm/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAa;uCACH,SAAS,CAAC,OAAO;sDACF,SAAS,CAAC,kBAAkB;;aAErE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;cACpB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;;;;;;;;;;;;CAYlC,CAAC;AAEF,SAAS,OAAO,CAAC,KAAkB;IAC/B,OAAO,KAAC,UAAU,oBAAK,KAAK,EAAI,CAAC;AACrC,CAAC;AAID,OAAO,CAAC,SAAS,GAAG;IAChB,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAC,MAAM;CACzB,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACnB,IAAI,EAAE,EAAE;CACX,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nconst SpinnerDiv = styled.div<SpinnerProp>`\n    border: 4px solid var(--primary, ${constants.PRIMARY});\n    border-top: 4px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});\n    border-radius: 50%;\n    width: ${(props) => props.size}px;\n    height: ${(props) => props.size}px;\n    margin: 0 auto;\n    animation: spin 1s linear infinite;\n\n    @keyframes spin {\n        0% {\n            transform: rotate(0deg);\n        }\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n`;\n\nfunction Spinner(props: SpinnerProp) {\n    return <SpinnerDiv {...props} />;\n}\n\ntype SpinnerProp = PropTypes.InferProps<typeof Spinner.propTypes>;\n\nSpinner.propTypes = {\n    /** Spinner's size */\n    size: PropTypes.number,\n};\n\nSpinner.defaultProps = {\n    size: 30,\n};\n\nexport default Spinner;\n"]}
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEnE,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAa;wBAClB,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;4BAC7B,aAAa,CAAC,UAAU,CAAC,kBAAkB,CAAC;;aAE3D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;cACpB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;;;;;;;;;;;;CAYlC,CAAC;AAEF,SAAS,OAAO,CAAC,KAAkB;IAC/B,MAAM,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA1B,SAAkB,CAAQ,CAAC;IACjC,OAAO,CACH,KAAC,UAAU,oBACH,IAAI,IACR,IAAI,EAAC,QAAQ,gBACD,KAAK,eACP,QAAQ,eACR,MAAM,IAClB,CACL,CAAC;AACN,CAAC;AAID,OAAO,CAAC,SAAS,GAAG;IAChB,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAC,MAAM;IACtB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACnB,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,SAAS;CACnB,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst SpinnerDiv = styled.div<SpinnerProp>`\n    border: 4px solid ${getThemeValue(THEME_NAME.PRIMARY)};\n    border-top: 4px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    border-radius: 50%;\n    width: ${(props) => props.size}px;\n    height: ${(props) => props.size}px;\n    margin: 0 auto;\n    animation: spin 1s linear infinite;\n\n    @keyframes spin {\n        0% {\n            transform: rotate(0deg);\n        }\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n`;\n\nfunction Spinner(props: SpinnerProp) {\n    const { label, ...rest } = props;\n    return (\n        <SpinnerDiv\n            {...rest}\n            role=\"status\"\n            aria-label={label}\n            aria-live=\"polite\"\n            aria-busy=\"true\"\n        />\n    );\n}\n\ntype SpinnerProp = PropTypes.InferProps<typeof Spinner.propTypes>;\n\nSpinner.propTypes = {\n    /** Spinner's size */\n    size: PropTypes.number,\n    /** Accessible label for screen readers */\n    label: PropTypes.string,\n};\n\nSpinner.defaultProps = {\n    size: 30,\n    label: 'Loading',\n};\n\nexport default Spinner;\n"]}

package/lib-esm/components/Stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAA4B,MAAM,OAAO,CAAC;AAC9E,OAAO,SAAS,MAAM,YAAY,CAAC;AAMnC,KAAK,YAAY,GAAG,iBAAiB,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC,CAAC;AAkFH,iBAAwB,OAAO,CAAC,KAAK,EAAE,YAAY,oDA6DlD;kBA7DuB,OAAO;;QAgE3B,qCAAqC;;QAErC,kDAAkD;;;;;;;eAlE9B,OAAO"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAA4B,MAAM,OAAO,CAAC;AAC9E,OAAO,SAAS,MAAM,YAAY,CAAC;AAMnC,KAAK,YAAY,GAAG,iBAAiB,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC,CAAC;AAmFH,iBAAwB,OAAO,CAAC,KAAK,EAAE,YAAY,oDAiFlD;kBAjFuB,OAAO;;QAoF3B,qCAAqC;;QAErC,kDAAkD;;;;;;;eAtF9B,OAAO"}

package/lib-esm/components/Stepper/Stepper.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, useState, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 import { Ellipsis } from '../../shared/styles';
 import { Badge, BADGE_TYPE } from '../Badge';
 const Container = styled.div `
@@ -15,7 +15,7 @@ const Header = styled.div `
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
 
     @media (min-width: 601px) {
         &::before {
@@ -24,7 +24,7 @@ const Header = styled.div `
             left: 0;
             right: 0;
             height: 2px;
-            background-color: var(--light-grey, ${constants.LIGHT_GREY});
+            background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
             content: ' ';
             z-index: 0;
         }
@@ -40,21 +40,22 @@ const HeaderButton = styled.button `
     font-size: 16px;
     cursor: pointer;
     background-color: ${(props) => props.active
-    ? `var(--border-light-color, ${constants.BORDER_LIGHT_COLOR})`
-    : `var(--background, ${constants.BACKGROUND})`};
+    ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)
+    : getThemeValue(THEME_NAME.BACKGROUND)};
     font-weight: ${(props) => (props.active ? 'bold' : 'normal')};
     overflow: hidden;
     display: flex;
     align-items: center;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
 
     &:disabled {
         cursor: not-allowed;
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
     }
 
     &:enabled:hover,
     &:focus {
-        background-color: var(--primary-light, ${constants.PRIMARY_LIGHTER});
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};
     }
 
     @media (max-width: 600px) {
@@ -84,9 +85,13 @@ export default function Stepper(props) {
     const [active, setActive] = useState(props.active);
     const { children, onStepClick } = props;
     const childrenArray = Children.toArray(children);
+    const stepRefs = [];
     const stepClickHandler = (index) => () => {
+        var _a;
         setActive(index);
         onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(index);
+        // Move focus to the active step
+        (_a = stepRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const getBadgeType = (index, completed, disabled) => {
         if (disabled) {
@@ -100,10 +105,24 @@ export default function Stepper(props) {
         }
         return BADGE_TYPE.DISABLED;
     };
-    return (_jsxs(Container, { children: [_jsxs(Header, { children: [Children.map(children, (child, index) => {
+    // Keyboard navigation for step buttons
+    const onStepKeyDown = (index) => (e) => {
+        var _a, _b;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = (index + 1) % childrenArray.length;
+            (_a = stepRefs[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = (index - 1 + childrenArray.length) % childrenArray.length;
+            (_b = stepRefs[prev]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    return (_jsxs(Container, { children: [_jsxs(Header, { role: "tablist", "aria-label": "Stepper Steps", children: [Children.map(children, (child, index) => {
                         if (!isValidElement(child))
                             return null;
-                        return (_jsx(_Fragment, { children: _jsxs(HeaderButton, { active: index === active, type: "button", disabled: child.props.disabled, onClick: stepClickHandler(index), children: [_jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), _jsx(Ellipsis, { children: child.props.name })] }) }));
+                        return (_jsxs(HeaderButton, { ref: (el) => (stepRefs[index] = el), active: index === active, type: "button", role: "tab", "aria-selected": index === active, "aria-disabled": !!child.props.disabled, tabIndex: index === active ? 0 : -1, disabled: child.props.disabled, onClick: stepClickHandler(index), onKeyDown: onStepKeyDown(index), children: [_jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), _jsx(Ellipsis, { children: child.props.name })] }));
                     }), _jsxs(MobileHeader, { children: [_jsx("span", { children: isValidElement(childrenArray[active])
                                     ? childrenArray[active].props.name
                                     : '' }), _jsxs(Badge, { inline: true, type: BADGE_TYPE.PRIMARY, children: [active + 1, " of ", Children.count(children)] })] })] }), childrenArray[active]] }));

package/lib-esm/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Children, PropsWithChildren, useState, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\n\ntype StepperProps = PropsWithChildren<{\n    active: number;\n    onStepClick?: (index: number) => void;\n}>;\n\nconst Container = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 400px;\n`;\n\nconst Header = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});\n\n    @media (min-width: 601px) {\n        &::before {\n            position: absolute;\n            top: 25px;\n            left: 0;\n            right: 0;\n            height: 2px;\n            background-color: var(--light-grey, ${constants.LIGHT_GREY});\n            content: ' ';\n            z-index: 0;\n        }\n    }\n\n    & > * {\n        z-index: 1;\n    }\n`;\n\nconst HeaderButton = styled.button<{ active: boolean }>`\n    border: none;\n    padding: 16px 24px 16px 16px;\n    font-size: 16px;\n    cursor: pointer;\n    background-color: ${(props) =>\n        props.active\n            ? `var(--border-light-color, ${constants.BORDER_LIGHT_COLOR})`\n            : `var(--background, ${constants.BACKGROUND})`};\n    font-weight: ${(props) => (props.active ? 'bold' : 'normal')};\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n\n    &:disabled {\n        cursor: not-allowed;\n        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});\n    }\n\n    &:enabled:hover,\n    &:focus {\n        background-color: var(--primary-light, ${constants.PRIMARY_LIGHTER});\n    }\n\n    @media (max-width: 600px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nconst MobileHeader = styled.div`\n    padding: 16px;\n    font-size: 16px;\n    line-height: 18px;\n    align-items: center;\n    font-weight: bold;\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    @media (min-width: 601px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nexport default function Stepper(props: StepperProps) {\n    const [active, setActive] = useState(props.active);\n    const { children, onStepClick } = props;\n    const childrenArray = Children.toArray(children);\n\n    const stepClickHandler = (index: number) => () => {\n        setActive(index);\n        onStepClick?.(index);\n    };\n\n    const getBadgeType = (index: number, completed: boolean, disabled: boolean) => {\n        if (disabled) {\n            return BADGE_TYPE.DISABLED;\n        } else if (index === active) {\n            return BADGE_TYPE.PRIMARY;\n        } else if (completed) {\n            return BADGE_TYPE.SUCCESS;\n        }\n        return BADGE_TYPE.DISABLED;\n    };\n\n    return (\n        <Container>\n            <Header>\n                {Children.map(children, (child, index) => {\n                    if (!isValidElement(child)) return null;\n                    return (\n                        <>\n                            <HeaderButton\n                                active={index === active}\n                                type=\"button\"\n                                disabled={child.props.disabled}\n                                onClick={stepClickHandler(index)}\n                            >\n                                <Badge\n                                    inline\n                                    type={getBadgeType(\n                                        index,\n                                        child.props.completed,\n                                        child.props.disabled,\n                                    )}\n                                />\n                                <Ellipsis>{child.props.name}</Ellipsis>\n                            </HeaderButton>\n                        </>\n                    );\n                })}\n                <MobileHeader>\n                    <span>\n                        {isValidElement(childrenArray[active])\n                            ? childrenArray[active].props.name\n                            : ''}\n                    </span>\n                    <Badge inline type={BADGE_TYPE.PRIMARY}>\n                        {active + 1} of {Children.count(children)}\n                    </Badge>\n                </MobileHeader>\n            </Header>\n            {childrenArray[active]}\n        </Container>\n    );\n}\n\nStepper.propTypes = {\n    /** Index of currently active step */\n    active: PropTypes.number,\n    /** Callback function for click event on a step */\n    onStepClick: PropTypes.func,\n};\n\nStepper.defaultProps = {\n    active: 0,\n};\n"]}
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Children, PropsWithChildren, useState, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\n\ntype StepperProps = PropsWithChildren<{\n    active: number;\n    onStepClick?: (index: number) => void;\n}>;\n\nconst Container = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 400px;\n`;\n\nconst Header = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n\n    @media (min-width: 601px) {\n        &::before {\n            position: absolute;\n            top: 25px;\n            left: 0;\n            right: 0;\n            height: 2px;\n            background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n            content: ' ';\n            z-index: 0;\n        }\n    }\n\n    & > * {\n        z-index: 1;\n    }\n`;\n\nconst HeaderButton = styled.button<{ active: boolean }>`\n    border: none;\n    padding: 16px 24px 16px 16px;\n    font-size: 16px;\n    cursor: pointer;\n    background-color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)\n            : getThemeValue(THEME_NAME.BACKGROUND)};\n    font-weight: ${(props) => (props.active ? 'bold' : 'normal')};\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:disabled {\n        cursor: not-allowed;\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:enabled:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n    }\n\n    @media (max-width: 600px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nconst MobileHeader = styled.div`\n    padding: 16px;\n    font-size: 16px;\n    line-height: 18px;\n    align-items: center;\n    font-weight: bold;\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    @media (min-width: 601px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nexport default function Stepper(props: StepperProps) {\n    const [active, setActive] = useState(props.active);\n    const { children, onStepClick } = props;\n    const childrenArray = Children.toArray(children);\n    const stepRefs = [] as Array<HTMLButtonElement | null>;\n\n    const stepClickHandler = (index: number) => () => {\n        setActive(index);\n        onStepClick?.(index);\n        // Move focus to the active step\n        stepRefs[index]?.focus();\n    };\n\n    const getBadgeType = (index: number, completed: boolean, disabled: boolean) => {\n        if (disabled) {\n            return BADGE_TYPE.DISABLED;\n        } else if (index === active) {\n            return BADGE_TYPE.PRIMARY;\n        } else if (completed) {\n            return BADGE_TYPE.SUCCESS;\n        }\n        return BADGE_TYPE.DISABLED;\n    };\n\n    // Keyboard navigation for step buttons\n    const onStepKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            stepRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            stepRefs[prev]?.focus();\n        }\n    };\n\n    return (\n        <Container>\n            <Header role=\"tablist\" aria-label=\"Stepper Steps\">\n                {Children.map(children, (child, index) => {\n                    if (!isValidElement(child)) return null;\n                    return (\n                        <HeaderButton\n                            ref={(el) => (stepRefs[index] = el)}\n                            active={index === active}\n                            type=\"button\"\n                            role=\"tab\"\n                            aria-selected={index === active}\n                            aria-disabled={!!child.props.disabled}\n                            tabIndex={index === active ? 0 : -1}\n                            disabled={child.props.disabled}\n                            onClick={stepClickHandler(index)}\n                            onKeyDown={onStepKeyDown(index)}\n                        >\n                            <Badge\n                                inline\n                                type={getBadgeType(\n                                    index,\n                                    child.props.completed,\n                                    child.props.disabled,\n                                )}\n                            />\n                            <Ellipsis>{child.props.name}</Ellipsis>\n                        </HeaderButton>\n                    );\n                })}\n                <MobileHeader>\n                    <span>\n                        {isValidElement(childrenArray[active])\n                            ? childrenArray[active].props.name\n                            : ''}\n                    </span>\n                    <Badge inline type={BADGE_TYPE.PRIMARY}>\n                        {active + 1} of {Children.count(children)}\n                    </Badge>\n                </MobileHeader>\n            </Header>\n            {childrenArray[active]}\n        </Container>\n    );\n}\n\nStepper.propTypes = {\n    /** Index of currently active step */\n    active: PropTypes.number,\n    /** Callback function for click event on a step */\n    onStepClick: PropTypes.func,\n};\n\nStepper.defaultProps = {\n    active: 0,\n};\n"]}

package/lib-esm/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,iBAAiB,EAAkB,MAAM,OAAO,CAAC;AACzF,OAAO,SAAS,MAAM,YAAY,CAAC;AAyCnC,KAAK,UAAU,GAAG,iBAAiB,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH,iBAAwB,IAAI,CAAC,KAAK,EAAE,UAAU,oDA2B7C;kBA3BuB,IAAI;;QA8BxB,uBAAuB;;QAEvB,6BAA6B;;QAE7B,8CAA8C;;QAE9C,2CAA2C;;;;;;;eApCvB,IAAI"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,iBAAiB,EAAkB,MAAM,OAAO,CAAC;AACzF,OAAO,SAAS,MAAM,YAAY,CAAC;AA4CnC,KAAK,UAAU,GAAG,iBAAiB,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH,iBAAwB,IAAI,CAAC,KAAK,EAAE,UAAU,oDA2E7C;kBA3EuB,IAAI;;QA8ExB,uBAAuB;;QAEvB,6BAA6B;;QAE7B,8CAA8C;;QAE9C,2CAA2C;;;;;;;eApFvB,IAAI"}