no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.10

package/lib-esm/components/Button/ActionButton.js

@@ -1,41 +1,21 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-export default styled.button `
-    border: 1px solid var(--primary, ${constants.PRIMARY});
-    background-color: var(--primary, ${constants.PRIMARY});
-    color: #fff;
-    border-radius: 5px;
-    height: 32px;
-    min-width: 100px;
-    font-size: 14px;
-    text-align: center;
-    padding: 0 12px;
-    cursor: pointer;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin: 5px;
-    position: relative;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    & svg {
-        vertical-align: middle;
-        height: 24px;
-        width: 24px;
-        fill: currentColor;
-        margin-left: -6px;
-    }
+const StyledActionButton = /*#__PURE__*/ styled("button", {
+    target: "ezu3m6y0",
+    label: "StyledActionButton"
+})("border:1px solid ", getThemeValue(THEME_NAME.PRIMARY), ";background-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-radius:5px;height:32px;min-width:100px;font-size:14px;text-align:center;padding:0 12px;cursor:pointer;margin:5px;position:relative;display:inline-flex;align-items:center;justify-content:center;& svg{vertical-align:middle;height:24px;width:24px;fill:currentColor;margin-left:-6px;}&:enabled:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}&:focus{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:disabled{border:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}");
+function ActionButtonComponent(props, ref) {
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledActionButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+}
+const ActionButton = /*#__PURE__*/ React.forwardRef(ActionButtonComponent);
 
-    &:enabled:hover {
-        box-shadow: var(--hover-shadow, ${constants.HOVER_SHADOW});
-    }
-
-    &:focus {
-        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
-    }
-
-    &:disabled {
-        border: 1px solid ${constants.LIGHT_GREY};
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-        color: var(--disabled, ${constants.DISABLED});
-    }
-`;
-//# sourceMappingURL=ActionButton.js.map
+export { ActionButton as default };
+//# sourceMappingURL=ActionButton.js.map

package/lib-esm/components/Button/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","sourceRoot":"","sources":["../../../src/components/Button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe,MAAM,CAAC,MAAM,CAAA;uCACW,SAAS,CAAC,OAAO;uCACjB,SAAS,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;0CAuBd,SAAS,CAAC,YAAY;;;;qDAIX,SAAS,CAAC,aAAa;;;;4BAIhD,SAAS,CAAC,UAAU;sDACM,SAAS,CAAC,kBAAkB;iCACjD,SAAS,CAAC,QAAQ;;CAElD,CAAC"}
+{"version":3,"file":"ActionButton.js","sources":["../../../src/components/Button/ActionButton.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\n\nconst StyledActionButton = styled.button`\n    border: 1px solid ${getThemeValue(THEME_NAME.PRIMARY)};\n    background-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    border-radius: 5px;\n    height: 32px;\n    min-width: 100px;\n    font-size: 14px;\n    text-align: center;\n    padding: 0 12px;\n    cursor: pointer;\n    margin: 5px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    & svg {\n        vertical-align: middle;\n        height: 24px;\n        width: 24px;\n        fill: currentColor;\n        margin-left: -6px;\n    }\n\n    &:enabled:hover {\n        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    }\n\n    &:focus {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:disabled {\n        border: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype ActionButtonProps = {\n    /**\n     * Type of Action Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nfunction ActionButtonComponent(props: ActionButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledActionButton ref={ref} type={type} {...rest} />;\n}\n\nconst ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(ActionButtonComponent);\n\nexport default ActionButton;\n"],"names":["StyledActionButton","styled","getThemeValue","THEME_NAME","PRIMARY","TEXT_COLOR_LIGHT","HOVER_SHADOW","PRIMARY_LIGHT","BORDER_LIGHT_COLOR","DISABLED_BACKGROUND","DISABLED","ActionButtonComponent","props","ref","type","rest","_jsx","ActionButton","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,kBAAAA,iBAAqBC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACHC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,EAAA,oBAAA,EAChCF,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,EAAA,SAAA,EAC3CF,aAAAA,CAAcC,UAAAA,CAAWE,gBAAgB,CAAA,EAAA,6TAAA,EAuBhCH,aAAAA,CAAcC,UAAAA,CAAWG,YAAY,CAAA,EAAA,iCAAA,EAI3BJ,aAAAA,CAAcC,UAAAA,CAAWI,aAAa,CAAA,EAAA,gCAAA,EAI1CL,aAAAA,CAAcC,UAAAA,CAAWK,kBAAkB,CAAA,EAAA,oBAAA,EAC3CN,aAAAA,CAAcC,UAAAA,CAAWM,mBAAmB,CAAA,EAAA,SAAA,EACvDP,aAAAA,CAAcC,WAAWO,QAAQ,CAAA,EAAA,IAAA,CAAA;AAYlD,SAASC,qBAAAA,CAAsBC,KAAwB,EAAEC,GAAiC,EAAA;AACtF,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAAChB,kBAAAA,EAAAA;QAAmBa,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACzD;AAEA,MAAME,YAAAA,iBAAeC,KAAAA,CAAMC,UAAU,CAAuCR,qBAAAA;;;;"}

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

@@ -1,5 +1,9 @@
-declare const _default: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export default _default;
+import React from 'react';
+declare const Button: React.ForwardRefExoticComponent<{
+    /**
+     * Type of Button
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

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

@@ -1,43 +1,21 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-export default styled.button `
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-    border-radius: 5px;
-    height: 32px;
-    min-width: 100px;
-    font-size: 14px;
-    text-align: center;
-    padding: 0 12px;
-    cursor: pointer;
-    color: inherit;
-    background-color: var(--background, ${constants.BACKGROUND});
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin: 5px;
-    position: relative;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    & svg {
-        vertical-align: middle;
-        height: 24px;
-        width: 24px;
-        margin-left: -6px;
-        fill: currentColor;
-    }
+const StyledButton = /*#__PURE__*/ styled("button", {
+    target: "e15a5nlf0",
+    label: "StyledButton"
+})("border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:5px;height:32px;min-width:100px;font-size:14px;text-align:center;padding:0 12px;cursor:pointer;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";margin:5px;position:relative;display:inline-flex;align-items:center;justify-content:center;& svg{vertical-align:middle;height:24px;width:24px;margin-left:-6px;fill:currentColor;}&:enabled:hover{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:focus{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:disabled{background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";border-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}");
+function ButtonComponent(props, ref) {
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+}
+const Button$2 = /*#__PURE__*/ React.forwardRef(ButtonComponent);
 
-    &:enabled:hover {
-        border-color: var(--primary, ${constants.PRIMARY});
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    &:focus {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
-    }
-
-    &:disabled {
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-        border-color: var(--light-grey, ${constants.LIGHT_GREY});
-        color: var(--disabled, ${constants.DISABLED});
-    }
-`;
-//# sourceMappingURL=Button.js.map
+export { Button$2 as default };
+//# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe,MAAM,CAAC,MAAM,CAAA;4CACgB,SAAS,CAAC,YAAY;;;;;;;;;0CASxB,SAAS,CAAC,UAAU;;;;;;;;;;;;;;;uCAevB,SAAS,CAAC,OAAO;gCACxB,SAAS,CAAC,OAAO;;;;uCAIV,SAAS,CAAC,OAAO;qDACH,SAAS,CAAC,aAAa;;;;sDAItB,SAAS,CAAC,kBAAkB;0CACxC,SAAS,CAAC,UAAU;iCAC7B,SAAS,CAAC,QAAQ;;CAElD,CAAC"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst StyledButton = styled.button`\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 5px;\n    height: 32px;\n    min-width: 100px;\n    font-size: 14px;\n    text-align: center;\n    padding: 0 12px;\n    cursor: pointer;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    margin: 5px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    & svg {\n        vertical-align: middle;\n        height: 24px;\n        width: 24px;\n        margin-left: -6px;\n        fill: currentColor;\n    }\n\n    &:enabled:hover {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:focus {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:disabled {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype ButtonProps = {\n    /**\n     * Type of Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nfunction ButtonComponent(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledButton ref={ref} type={type} {...rest} />;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(ButtonComponent);\n\nexport default Button;\n"],"names":["StyledButton","styled","getThemeValue","THEME_NAME","BORDER_COLOR","TEXT_COLOR_DARK","BACKGROUND","PRIMARY","PRIMARY_LIGHT","DISABLED_BACKGROUND","LIGHT_GREY","DISABLED","ButtonComponent","props","ref","type","rest","_jsx","Button","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,YAAAA,iBAAeC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACGC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,sHAAA,EAQhDF,aAAAA,CAAcC,UAAAA,CAAWE,eAAe,CAAA,EAAA,oBAAA,EAC7BH,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,uNAgBnCJ,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,SAAA,EACvCL,cAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,yBAAA,EAIzBL,aAAAA,CAAcC,WAAWI,OAAO,CAAA,EAAA,wBAAA,EACxBL,aAAAA,CAAcC,UAAAA,CAAWK,aAAa,CAAA,EAAA,gCAAA,EAI1CN,aAAAA,CAAcC,UAAAA,CAAWM,mBAAmB,qBAChDP,aAAAA,CAAcC,UAAAA,CAAWO,UAAU,CAAA,EAAA,SAAA,EAC1CR,aAAAA,CAAcC,WAAWQ,QAAQ,CAAA,EAAA,IAAA,CAAA;AAYlD,SAASC,eAAAA,CAAgBC,KAAkB,EAAEC,GAAiC,EAAA;AAC1E,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAACjB,YAAAA,EAAAA;QAAac,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACnD;AAEA,MAAME,QAAAA,iBAASC,KAAAA,CAAMC,UAAU,CAAiCR,eAAAA;;;;"}

package/lib-esm/components/Button/IconButton.d.ts

@@ -1,5 +1,9 @@
-declare const _default: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export default _default;
+import React from 'react';
+declare const IconButton: React.ForwardRefExoticComponent<{
+    /**
+     * Type of Icon Button
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/lib-esm/components/Button/IconButton.js

@@ -1,45 +1,21 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-export default styled.button `
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-    border-radius: 5px;
-    height: 32px;
-    font-size: 14px;
-    text-align: center;
-    padding: 0 3px;
-    cursor: pointer;
-    color: inherit;
-    background-color: var(--background, ${constants.BACKGROUND});
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin: 5px;
-    position: relative;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    & svg {
-        vertical-align: middle;
-        height: 24px;
-        width: 24px;
-        fill: currentColor;
-    }
+const StyledIconButton = /*#__PURE__*/ styled("button", {
+    target: "e1mks0xv0",
+    label: "StyledIconButton"
+})("border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:5px;height:32px;font-size:14px;text-align:center;padding:0 3px;cursor:pointer;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";margin:5px;position:relative;display:inline-flex;align-items:center;justify-content:center;& svg{vertical-align:middle;height:24px;width:24px;fill:currentColor;}&:enabled:hover{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:focus{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:disabled{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";border-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}&:disabled > svg{fill:", getThemeValue(THEME_NAME.DISABLED), ";}");
+function IconButtonComponent(props, ref) {
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledIconButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+}
+const IconButton = /*#__PURE__*/ React.forwardRef(IconButtonComponent);
 
-    &:enabled:hover {
-        border-color: var(--primary, ${constants.PRIMARY});
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    &:focus {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
-    }
-
-    &:disabled {
-        background-color: ${constants.BORDER_LIGHT_COLOR};
-        border-color: ${constants.LIGHT_GREY};
-        color: ${constants.DISABLED};
-    }
-
-    &:disabled > svg {
-        fill: ${constants.DISABLED};
-    }
-`;
-//# sourceMappingURL=IconButton.js.map
+export { IconButton as default };
+//# sourceMappingURL=IconButton.js.map

package/lib-esm/components/Button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/Button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe,MAAM,CAAC,MAAM,CAAA;4CACgB,SAAS,CAAC,YAAY;;;;;;;;0CAQxB,SAAS,CAAC,UAAU;;;;;;;;;;;;;;uCAcvB,SAAS,CAAC,OAAO;gCACxB,SAAS,CAAC,OAAO;;;;uCAIV,SAAS,CAAC,OAAO;qDACH,SAAS,CAAC,aAAa;;;;4BAIhD,SAAS,CAAC,kBAAkB;wBAChC,SAAS,CAAC,UAAU;iBAC3B,SAAS,CAAC,QAAQ;;;;gBAInB,SAAS,CAAC,QAAQ;;CAEjC,CAAC"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/Button/IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst StyledIconButton = styled.button`\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 5px;\n    height: 32px;\n    font-size: 14px;\n    text-align: center;\n    padding: 0 3px;\n    cursor: pointer;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    margin: 5px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    & svg {\n        vertical-align: middle;\n        height: 24px;\n        width: 24px;\n        fill: currentColor;\n    }\n\n    &:enabled:hover {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:focus {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:disabled {\n        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n        border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    &:disabled > svg {\n        fill: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype IconButtonProps = {\n    /**\n     * Type of Icon Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nfunction IconButtonComponent(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledIconButton ref={ref} type={type} {...rest} />;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(IconButtonComponent);\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","getThemeValue","THEME_NAME","BORDER_COLOR","TEXT_COLOR_DARK","BACKGROUND","PRIMARY","PRIMARY_LIGHT","BORDER_LIGHT_COLOR","LIGHT_GREY","DISABLED","IconButtonComponent","props","ref","type","rest","_jsx","IconButton","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,gBAAAA,iBAAmBC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACDC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,qGAAA,EAOhDF,cAAcC,UAAAA,CAAWE,eAAe,yBAC7BH,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,CAAA,EAAA,iMAAA,EAenCJ,cAAcC,UAAAA,CAAWI,OAAO,cACvCL,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,yBAAA,EAIzBL,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,6BACxBL,aAAAA,CAAcC,UAAAA,CAAWK,aAAa,CAAA,EAAA,gCAAA,EAI1CN,aAAAA,CAAcC,WAAWM,kBAAkB,CAAA,EAAA,gBAAA,EAC/CP,cAAcC,UAAAA,CAAWO,UAAU,cAC1CR,aAAAA,CAAcC,UAAAA,CAAWQ,QAAQ,CAAA,EAAA,0BAAA,EAIlCT,aAAAA,CAAcC,WAAWQ,QAAQ,CAAA,EAAA,IAAA,CAAA;AAYjD,SAASC,mBAAAA,CAAoBC,KAAsB,EAAEC,GAAiC,EAAA;AAClF,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAACjB,gBAAAA,EAAAA;QAAiBc,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACvD;AAEA,MAAME,UAAAA,iBAAaC,KAAAA,CAAMC,UAAU,CAAqCR,mBAAAA;;;;"}

package/lib-esm/components/Button/LinkButton.d.ts

@@ -1,5 +1,9 @@
-declare const _default: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export default _default;
+import React from 'react';
+declare const LinkButton: React.ForwardRefExoticComponent<{
+    /**
+     * Type of Link Button
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export default LinkButton;

package/lib-esm/components/Button/LinkButton.js

@@ -1,35 +1,21 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-export default styled.button `
-    min-width: 100px;
-    font-size: 14px;
-    text-align: center;
-    height: 32px;
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
-    color: var(--primary, ${constants.PRIMARY});
-    padding: 0 12px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin: 5px;
-    position: relative;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    & svg {
-        vertical-align: middle;
-        height: 24px;
-        width: 24px;
-        fill: currentColor;
-        margin-left: -6px;
-    }
+const StyledLinkButton = /*#__PURE__*/ styled("button", {
+    target: "e1vgmm1k0",
+    label: "StyledLinkButton"
+})("min-width:100px;font-size:14px;text-align:center;height:32px;cursor:pointer;background-color:transparent;border:none;color:", getThemeValue(THEME_NAME.PRIMARY), ";padding:0 12px;margin:5px;position:relative;display:inline-flex;align-items:center;justify-content:center;& svg{vertical-align:middle;height:24px;width:24px;fill:currentColor;margin-left:-6px;}&:enabled:hover,&:focus{text-decoration:underline;}&:disabled{border-color:", getThemeValue(THEME_NAME.BORDER_COLOR), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}");
+const LinkButtonComponent = (props, ref)=>{
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledLinkButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+};
+const LinkButton = /*#__PURE__*/ React.forwardRef(LinkButtonComponent);
 
-    &:enabled:hover, &:focus {
-        text-decoration: underline;
-    }
-
-    &:disabled {
-        border-color: ${constants.BORDER_COLOR};
-        color: ${constants.DISABLED_BORDER};
-    }
-`;
-//# sourceMappingURL=LinkButton.js.map
+export { LinkButton as default };
+//# sourceMappingURL=LinkButton.js.map

package/lib-esm/components/Button/LinkButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../src/components/Button/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe,MAAM,CAAC,MAAM,CAAA;;;;;;;;4BAQA,SAAS,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;wBAoBrB,SAAS,CAAC,YAAY;iBAC7B,SAAS,CAAC,eAAe;;CAEzC,CAAC"}
+{"version":3,"file":"LinkButton.js","sources":["../../../src/components/Button/LinkButton.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst StyledLinkButton = styled.button`\n    min-width: 100px;\n    font-size: 14px;\n    text-align: center;\n    height: 32px;\n    cursor: pointer;\n    background-color: transparent;\n    border: none;\n    color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    padding: 0 12px;\n    margin: 5px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    & svg {\n        vertical-align: middle;\n        height: 24px;\n        width: 24px;\n        fill: currentColor;\n        margin-left: -6px;\n    }\n\n    &:enabled:hover,\n    &:focus {\n        text-decoration: underline;\n    }\n\n    &:disabled {\n        border-color: ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype LinkButtonProps = {\n    /**\n     * Type of Link Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst LinkButtonComponent = (props: LinkButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledLinkButton ref={ref} type={type} {...rest} />;\n};\n\nconst LinkButton = React.forwardRef<HTMLButtonElement, LinkButtonProps>(LinkButtonComponent);\nexport default LinkButton;\n"],"names":["StyledLinkButton","styled","getThemeValue","THEME_NAME","PRIMARY","BORDER_COLOR","DISABLED","LinkButtonComponent","props","ref","type","rest","_jsx","LinkButton","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,gBAAAA,iBAAmBC,MAAAA,CAAAA,QAAAA,EAAAA;;;kIAQZC,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,EAAA,+QAAA,EAsBrBF,aAAAA,CAAcC,WAAWE,YAAY,CAAA,EAAA,SAAA,EAC5CH,aAAAA,CAAcC,UAAAA,CAAWG,QAAQ,CAAA,EAAA,IAAA,CAAA;AAYlD,MAAMC,mBAAAA,GAAsB,CAACC,KAAAA,EAAwBC,GAAAA,GAAAA;AACjD,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAACZ,gBAAAA,EAAAA;QAAiBS,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACvD,CAAA;AAEA,MAAME,UAAAA,iBAAaC,KAAAA,CAAMC,UAAU,CAAqCR,mBAAAA;;;;"}

package/lib-esm/components/Button/RaisedButton.d.ts

@@ -1,5 +1,9 @@
-declare const _default: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export default _default;
+import React from 'react';
+declare const RaisedButton: React.ForwardRefExoticComponent<{
+    /**
+     * Type of Raised Button
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export default RaisedButton;

package/lib-esm/components/Button/RaisedButton.js

@@ -1,49 +1,21 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-export default styled.button `
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-    border-radius: 5px;
-    height: 32px;
-    min-width: 100px;
-    font-size: 14px;
-    text-align: center;
-    padding: 0 12px;
-    cursor: pointer;
-    color: inherit;
-    background-color: var(--background, ${constants.BACKGROUND});
-    transform: translateY(-2px);
-    box-shadow: var(--hover-shadow, ${constants.HOVER_SHADOW});
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin: 5px;
-    position: relative;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    & svg {
-        vertical-align: middle;
-        height: 24px;
-        width: 24px;
-        margin-left: -6px;
-        fill: currentColor;
-    }
+const StyledRaisedButton = /*#__PURE__*/ styled("button", {
+    target: "e1vw7xh30",
+    label: "StyledRaisedButton"
+})("border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:5px;height:32px;min-width:100px;font-size:14px;text-align:center;padding:0 12px;cursor:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";color:inherit;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transform:translateY(-2px);box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";margin:5px;position:relative;display:inline-flex;align-items:center;justify-content:center;& svg{vertical-align:middle;height:24px;width:24px;margin-left:-6px;fill:currentColor;}&:enabled:hover{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:focus{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled{background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";border-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}&:active{transform:translateY(0);box-shadow:", getThemeValue(THEME_NAME.SHADOW), ";}");
+const RaisedButtonComponent = (props, ref)=>{
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledRaisedButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+};
+const RaisedButton = /*#__PURE__*/ React.forwardRef(RaisedButtonComponent);
 
-    &:enabled:hover {
-        border-color: var(--primary, ${constants.PRIMARY});
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    &:focus {
-        border-color: var(--primary, ${constants.PRIMARY});
-    }
-
-    &:disabled {
-        background-color: ${constants.BORDER_LIGHT_COLOR};
-        border-color: ${constants.LIGHT_GREY};
-        color: ${constants.DISABLED};
-    }
-
-    &:active {
-        transform: translateY(0);
-        box-shadow: var(--shadow, ${constants.SHADOW});
-    }
-`;
-//# sourceMappingURL=RaisedButton.js.map
+export { RaisedButton as default };
+//# sourceMappingURL=RaisedButton.js.map

package/lib-esm/components/Button/RaisedButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RaisedButton.js","sourceRoot":"","sources":["../../../src/components/Button/RaisedButton.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe,MAAM,CAAC,MAAM,CAAA;4CACgB,SAAS,CAAC,YAAY;;;;;;;;;0CASxB,SAAS,CAAC,UAAU;;sCAExB,SAAS,CAAC,YAAY;;;;;;;;;;;;;;;uCAerB,SAAS,CAAC,OAAO;gCACxB,SAAS,CAAC,OAAO;;;;uCAIV,SAAS,CAAC,OAAO;;;;4BAI5B,SAAS,CAAC,kBAAkB;wBAChC,SAAS,CAAC,UAAU;iBAC3B,SAAS,CAAC,QAAQ;;;;;oCAKC,SAAS,CAAC,MAAM;;CAEnD,CAAC"}
+{"version":3,"file":"RaisedButton.js","sources":["../../../src/components/Button/RaisedButton.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst StyledRaisedButton = styled.button`\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 5px;\n    height: 32px;\n    min-width: 100px;\n    font-size: 14px;\n    text-align: center;\n    padding: 0 12px;\n    cursor: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    color: inherit;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transform: translateY(-2px);\n    box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    margin: 5px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    & svg {\n        vertical-align: middle;\n        height: 24px;\n        width: 24px;\n        margin-left: -6px;\n        fill: currentColor;\n    }\n\n    &:enabled:hover {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:focus {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:disabled {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    &:active {\n        transform: translateY(0);\n        box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};\n    }\n`;\n\ntype RaisedButtonProps = {\n    /**\n     * Type of Raised Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst RaisedButtonComponent = (props: RaisedButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledRaisedButton ref={ref} type={type} {...rest} />;\n};\n\nconst RaisedButton = React.forwardRef<HTMLButtonElement, RaisedButtonProps>(RaisedButtonComponent);\nexport default RaisedButton;\n"],"names":["StyledRaisedButton","styled","getThemeValue","THEME_NAME","BORDER_COLOR","TEXT_COLOR_DARK","BACKGROUND","HOVER_SHADOW","PRIMARY","DISABLED_BACKGROUND","LIGHT_GREY","DISABLED","SHADOW","RaisedButtonComponent","props","ref","type","rest","_jsx","RaisedButton","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,kBAAAA,iBAAqBC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACHC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,wGAAA,EAO/CF,cAAcC,UAAAA,CAAWE,eAAe,uCAE9BH,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,CAAA,EAAA,yCAAA,EAEzCJ,cAAcC,UAAAA,CAAWI,YAAY,uNAgB/BL,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,SAAA,EACvCN,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,8BAIzBN,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,gCAAA,EAI5BN,aAAAA,CAAcC,WAAWM,mBAAmB,CAAA,EAAA,gBAAA,EAChDP,cAAcC,UAAAA,CAAWO,UAAU,cAC1CR,aAAAA,CAAcC,UAAAA,CAAWQ,QAAQ,CAAA,EAAA,gDAAA,EAK5BT,aAAAA,CAAcC,WAAWS,MAAM,CAAA,EAAA,IAAA,CAAA;AAYrD,MAAMC,qBAAAA,GAAwB,CAACC,KAAAA,EAA0BC,GAAAA,GAAAA;AACrD,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAAClB,kBAAAA,EAAAA;QAAmBe,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACzD,CAAA;AAEA,MAAME,YAAAA,iBAAeC,KAAAA,CAAMC,UAAU,CAAuCR,qBAAAA;;;;"}

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

@@ -1,8 +1,6 @@
-export interface CardExtraProps {
+import React from 'react';
+declare const Card: React.ForwardRefExoticComponent<{
+    /** Shows a shadow around the card to show elevation */
     elevated?: boolean;
-}
-declare const Card: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & CardExtraProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export default Card;

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

@@ -1,14 +1,19 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-const Card = styled.div `
-    border-radius: 10px;
-    background-color: var(--background, ${constants.BACKGROUND});
-    ${props => props.elevated
-    ? `box-shadow: var(--modal-shadow, ${constants.MODAL_SHADOW});`
-    : `box-shadow: var(--shadow, ${constants.SHADOW});`}
-    margin: 5px;
-    overflow: auto;
-    position: relative;
-`;
-export default Card;
-//# sourceMappingURL=Card.js.map
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+
+const StyledCard = /*#__PURE__*/ styled("div", {
+    target: "e1td4b5c0",
+    label: "StyledCard"
+})("border-radius:10px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";", (props)=>props.elevated ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};` : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`, "    margin:5px;overflow:auto;position:relative;");
+function CardComponent(props, ref) {
+    return /*#__PURE__*/ jsx(StyledCard, {
+        ...props,
+        ref: ref
+    });
+}
+const Card = /*#__PURE__*/ React.forwardRef(CardComponent);
+
+export { Card as default };
+//# sourceMappingURL=Card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAM/C,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAgB;;0CAEG,SAAS,CAAC,UAAU;MACxD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ;IACrB,CAAC,CAAC,mCAAmC,SAAS,CAAC,YAAY,IAAI;IAC/D,CAAC,CAAC,6BAA6B,SAAS,CAAC,MAAM,IACnD;;;;CAIH,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\n\ntype CardExtraProps = {\n    /** Shows a shadow around the card to show elevation */\n    elevated?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst StyledCard = styled.div<CardExtraProps>`\n    border-radius: 10px;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    ${(props) =>\n        props.elevated\n            ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};`\n            : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`}\n    margin: 5px;\n    overflow: auto;\n    position: relative;\n`;\n\nfunction CardComponent(props: CardExtraProps, ref: React.Ref<HTMLDivElement>) {\n    return <StyledCard {...props} ref={ref} />;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardExtraProps>(CardComponent);\n\nexport default Card;\n"],"names":["StyledCard","styled","getThemeValue","THEME_NAME","BACKGROUND","props","elevated","MODAL_SHADOW","SHADOW","CardComponent","ref","_jsx","Card","React","forwardRef"],"mappings":";;;;;AASA,MAAMA,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;2CAEKC,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,GAAA,EACrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,QAAQ,GACR,CAAC,YAAY,EAAEJ,aAAAA,CAAcC,UAAAA,CAAWI,YAAY,CAAA,CAAE,CAAC,CAAC,GACxD,CAAC,YAAY,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,MAAM,CAAA,CAAE,CAAC,CAAC,EAAA,iDAAA,CAAA;AAMhE,SAASC,aAAAA,CAAcJ,KAAqB,EAAEK,GAA8B,EAAA;AACxE,IAAA,qBAAOC,GAAA,CAACX,UAAAA,EAAAA;AAAY,QAAA,GAAGK,KAAK;QAAEK,GAAAA,EAAKA;;AACvC;AAEA,MAAME,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAAiCL,aAAAA;;;;"}

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

@@ -1,8 +1,11 @@
+import React from 'react';
 interface ChipProps {
     /** Label for the chip */
     label: string;
     /** Callback when the close button is clicked */
-    onCloseClick?: () => void;
+    onCloseClick?: (e: React.KeyboardEvent | React.MouseEvent) => void;
+    /** Aria label for the close button. Defaults to "Remove {label}" */
+    closeButtonAriaLabel?: string;
 }
-export default function Chip(props: ChipProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+export default Chip;

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

@@ -1,48 +1,49 @@
-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, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-import { Close } from '../../icons';
-const Container = styled.div `
-    padding: 5px;
-    padding-left: 15px;
-    border-radius: 16px;
-    background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-    display: inline-flex;
-    margin: 5px;
-    line-height: 20px;
-    align-items: center;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import Close from '../../icons/Close.js';
 
-    &:focus-within {
-        outline: 2px solid var(--primary-light, ${constants.PRIMARY_LIGHT});
-    }
-`;
-const Button = styled.button `
-    color: #fff;
-    background-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-    border-radius: 50%;
-    border: none;
-    padding: 0;
-    display: inline-flex;
-    margin-left: 5px;
-`;
-export default function Chip(props) {
-    const { label, onCloseClick } = props, rest = __rest(props, ["label", "onCloseClick"]);
-    const keyUpHandler = (e) => {
-        if (e.keyCode === 8 || e.keyCode === 46) {
-            onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
+const Container$8 = /*#__PURE__*/ styled("span", {
+    target: "ehb6hld0",
+    label: "Container"
+})("padding:5px;padding-left:15px;border-radius:16px;background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:inline-flex;margin:5px;line-height:20px;align-items:center;");
+const Button$1 = /*#__PURE__*/ styled("button", {
+    target: "ehb6hld1",
+    label: "Button"
+})("color:", getThemeValue(THEME_NAME.BACKGROUND), ";background-color:", getThemeValue(THEME_NAME.DISABLED), ";border-radius:50%;border:none;padding:4px;display:inline-flex;margin-left:5px;&:focus-within{outline:4px solid ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}");
+function ChipComponent(props, ref) {
+    const { label, onCloseClick, closeButtonAriaLabel, ...rest } = props;
+    const keyUpHandler = (e)=>{
+        if (e.key === 'Backspace' || e.key === 'Delete') {
+            onCloseClick?.(e);
+        }
+    };
+    const buttonKeyDownHandler = (e)=>{
+        // Stop propagation to prevent DragAndDrop from capturing Space/Enter
+        if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {
+            e.stopPropagation();
         }
     };
-    return (_jsxs(Container, Object.assign({}, rest, { onKeyUp: keyUpHandler, children: [label, _jsx(Button, { onClick: onCloseClick, "aria-label": `Remove ${label}`, children: _jsx(Close, { height: 20, width: 20 }) })] })));
+    return /*#__PURE__*/ jsxs(Container$8, {
+        ...rest,
+        ref: ref,
+        onKeyUp: keyUpHandler,
+        children: [
+            label,
+            /*#__PURE__*/ jsx(Button$1, {
+                onClick: onCloseClick,
+                onKeyDown: buttonKeyDownHandler,
+                "aria-label": closeButtonAriaLabel ?? `Remove ${label}`,
+                children: /*#__PURE__*/ jsx(Close, {
+                    height: 16,
+                    width: 16
+                })
+            })
+        ]
+    });
 }
-//# sourceMappingURL=Chip.js.map
+const Chip = /*#__PURE__*/ React.forwardRef(ChipComponent);
+
+export { Chip as default };
+//# sourceMappingURL=Chip.js.map