no-frills-ui 0.0.14-alpha.7 → 0.0.14-rc.0

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

@@ -1,12 +1,25 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const StyledButton = /*#__PURE__*/ styled("button", {
-    target: "e1p361zw0",
+    target: "e123477w0",
     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), ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9CdXR0b24vQnV0dG9uLnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9CdXR0b24vQnV0dG9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBnZXRUaGVtZVZhbHVlLCBUSEVNRV9OQU1FIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2NvbnN0YW50cyc7XG5cbmNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZC5idXR0b25gXG4gICAgYm9yZGVyOiAxcHggc29saWQgJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQk9SREVSX0NPTE9SKX07XG4gICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgIGhlaWdodDogMzJweDtcbiAgICBtaW4td2lkdGg6IDEwMHB4O1xuICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgcGFkZGluZzogMCAxMnB4O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBjb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuVEVYVF9DT0xPUl9EQVJLKX07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQkFDS0dST1VORCl9O1xuICAgIG1hcmdpbjogNXB4O1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJiBzdmcge1xuICAgICAgICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICAgICAgICBoZWlnaHQ6IDI0cHg7XG4gICAgICAgIHdpZHRoOiAyNHB4O1xuICAgICAgICBtYXJnaW4tbGVmdDogLTZweDtcbiAgICAgICAgZmlsbDogY3VycmVudENvbG9yO1xuICAgIH1cblxuICAgICY6ZW5hYmxlZDpob3ZlciB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuUFJJTUFSWSl9O1xuICAgICAgICBjb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuUFJJTUFSWSl9O1xuICAgIH1cblxuICAgICY6Zm9jdXMge1xuICAgICAgICBib3JkZXItY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgYm94LXNoYWRvdzogMCAwIDAgNHB4ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUllfTElHSFQpfTtcbiAgICB9XG5cbiAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRURfQkFDS0dST1VORCl9O1xuICAgICAgICBib3JkZXItY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkxJR0hUX0dSRVkpfTtcbiAgICAgICAgY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkRJU0FCTEVEKX07XG4gICAgfVxuYDtcblxuU3R5bGVkQnV0dG9uLmRlZmF1bHRQcm9wcyA9IHtcbiAgICB0eXBlOiAnYnV0dG9uJyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFN0eWxlZEJ1dHRvbjtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHcUIifQ== */");
-StyledButton.defaultProps = {
-    type: 'button'
-};
+})("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), ";}");
+/**
+ * Button Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ 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);
 
-export { StyledButton as default };
+export { Button$2 as default };
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"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\n/**\n * Button Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying 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;;;;AAIC,IACD,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,9 +1,25 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-var IconButton = /*#__PURE__*/ styled("button", {
-    target: "eny3n5p0",
-    label: ""
-})("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), ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9CdXR0b24vSWNvbkJ1dHRvbi50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL25vLWZyaWxscy11aS9uby1mcmlsbHMtdWkvc3JjL2NvbXBvbmVudHMvQnV0dG9uL0ljb25CdXR0b24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGdldFRoZW1lVmFsdWUsIFRIRU1FX05BTUUgfSBmcm9tICcuLi8uLi9zaGFyZWQvY29uc3RhbnRzJztcblxuZXhwb3J0IGRlZmF1bHQgc3R5bGVkLmJ1dHRvbmBcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5CT1JERVJfQ09MT1IpfTtcbiAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgaGVpZ2h0OiAzMnB4O1xuICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgcGFkZGluZzogMCAzcHg7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIGNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5URVhUX0NPTE9SX0RBUkspfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5CQUNLR1JPVU5EKX07XG4gICAgbWFyZ2luOiA1cHg7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cbiAgICAmIHN2ZyB7XG4gICAgICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gICAgICAgIGhlaWdodDogMjRweDtcbiAgICAgICAgd2lkdGg6IDI0cHg7XG4gICAgICAgIGZpbGw6IGN1cnJlbnRDb2xvcjtcbiAgICB9XG5cbiAgICAmOmVuYWJsZWQ6aG92ZXIge1xuICAgICAgICBib3JkZXItY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICB9XG5cbiAgICAmOmZvY3VzIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDRweCAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZX0xJR0hUKX07XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkJPUkRFUl9MSUdIVF9DT0xPUil9O1xuICAgICAgICBib3JkZXItY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkxJR0hUX0dSRVkpfTtcbiAgICAgICAgY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkRJU0FCTEVEKX07XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCA+IHN2ZyB7XG4gICAgICAgIGZpbGw6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkRJU0FCTEVEKX07XG4gICAgfVxuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHZSJ9 */");
+const StyledIconButton = /*#__PURE__*/ styled("button", {
+    target: "efmjh6j0",
+    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), ";}");
+/**
+ * IconButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ function IconButtonComponent(props, ref) {
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledIconButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+}
+const IconButton = /*#__PURE__*/ React.forwardRef(IconButtonComponent);
 
 export { IconButton as default };
+//# sourceMappingURL=IconButton.js.map

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

@@ -0,0 +1 @@
+{"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\n/**\n * IconButton Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying 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;;;;AAIC,IACD,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,9 +1,25 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-var LinkButton = /*#__PURE__*/ styled("button", {
-    target: "ecu06nw0",
-    label: ""
-})("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), ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9CdXR0b24vTGlua0J1dHRvbi50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL25vLWZyaWxscy11aS9uby1mcmlsbHMtdWkvc3JjL2NvbXBvbmVudHMvQnV0dG9uL0xpbmtCdXR0b24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGdldFRoZW1lVmFsdWUsIFRIRU1FX05BTUUgfSBmcm9tICcuLi8uLi9zaGFyZWQvY29uc3RhbnRzJztcblxuZXhwb3J0IGRlZmF1bHQgc3R5bGVkLmJ1dHRvbmBcbiAgICBtaW4td2lkdGg6IDEwMHB4O1xuICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgaGVpZ2h0OiAzMnB4O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICBwYWRkaW5nOiAwIDEycHg7XG4gICAgbWFyZ2luOiA1cHg7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cbiAgICAmIHN2ZyB7XG4gICAgICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gICAgICAgIGhlaWdodDogMjRweDtcbiAgICAgICAgd2lkdGg6IDI0cHg7XG4gICAgICAgIGZpbGw6IGN1cnJlbnRDb2xvcjtcbiAgICAgICAgbWFyZ2luLWxlZnQ6IC02cHg7XG4gICAgfVxuXG4gICAgJjplbmFibGVkOmhvdmVyLFxuICAgICY6Zm9jdXMge1xuICAgICAgICB0ZXh0LWRlY29yYXRpb246IHVuZGVybGluZTtcbiAgICB9XG5cbiAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5CT1JERVJfQ09MT1IpfTtcbiAgICAgICAgY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkRJU0FCTEVEKX07XG4gICAgfVxuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHZSJ9 */");
+const StyledLinkButton = /*#__PURE__*/ styled("button", {
+    target: "e1d039580",
+    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), ";}");
+/**
+ * LinkButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ const LinkButtonComponent = (props, ref)=>{
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledLinkButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+};
+const LinkButton = /*#__PURE__*/ React.forwardRef(LinkButtonComponent);
 
 export { LinkButton as default };
+//# sourceMappingURL=LinkButton.js.map

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

@@ -0,0 +1 @@
+{"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\n/**\n * LinkButton Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying 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;;;;IAKA,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,9 +1,25 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-var RaisedButton = /*#__PURE__*/ styled("button", {
-    target: "etv67u90",
-    label: ""
-})("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), ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9CdXR0b24vUmFpc2VkQnV0dG9uLnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9CdXR0b24vUmFpc2VkQnV0dG9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBnZXRUaGVtZVZhbHVlLCBUSEVNRV9OQU1FIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2NvbnN0YW50cyc7XG5cbmV4cG9ydCBkZWZhdWx0IHN0eWxlZC5idXR0b25gXG4gICAgYm9yZGVyOiAxcHggc29saWQgJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQk9SREVSX0NPTE9SKX07XG4gICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgIGhlaWdodDogMzJweDtcbiAgICBtaW4td2lkdGg6IDEwMHB4O1xuICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgcGFkZGluZzogMCAxMnB4O1xuICAgIGN1cnNvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuVEVYVF9DT0xPUl9EQVJLKX07XG4gICAgY29sb3I6IGluaGVyaXQ7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQkFDS0dST1VORCl9O1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtMnB4KTtcbiAgICBib3gtc2hhZG93OiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5IT1ZFUl9TSEFET1cpfTtcbiAgICBtYXJnaW46IDVweDtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuICAgICYgc3ZnIHtcbiAgICAgICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgICAgICAgaGVpZ2h0OiAyNHB4O1xuICAgICAgICB3aWR0aDogMjRweDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6IC02cHg7XG4gICAgICAgIGZpbGw6IGN1cnJlbnRDb2xvcjtcbiAgICB9XG5cbiAgICAmOmVuYWJsZWQ6aG92ZXIge1xuICAgICAgICBib3JkZXItY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICB9XG5cbiAgICAmOmZvY3VzIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkRJU0FCTEVEX0JBQ0tHUk9VTkQpfTtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5MSUdIVF9HUkVZKX07XG4gICAgICAgIGNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5ESVNBQkxFRCl9O1xuICAgIH1cblxuICAgICY6YWN0aXZlIHtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDApO1xuICAgICAgICBib3gtc2hhZG93OiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5TSEFET1cpfTtcbiAgICB9XG5gO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdlIn0= */");
+const StyledRaisedButton = /*#__PURE__*/ styled("button", {
+    target: "e1p6mbrx0",
+    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), ";}");
+/**
+ * RaisedButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ const RaisedButtonComponent = (props, ref)=>{
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledRaisedButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+};
+const RaisedButton = /*#__PURE__*/ React.forwardRef(RaisedButtonComponent);
 
 export { RaisedButton as default };
+//# sourceMappingURL=RaisedButton.js.map

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

@@ -0,0 +1 @@
+{"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\n/**\n * RaisedButton Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying 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;;;;IAKA,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,9 +1,23 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-const Card = /*#__PURE__*/ styled("div", {
-    target: "e1jmwjfy0",
-    label: "Card"
-})("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;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9DYXJkL0NhcmQudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9uby1mcmlsbHMtdWkvbm8tZnJpbGxzLXVpL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgVEhFTUVfTkFNRSwgZ2V0VGhlbWVWYWx1ZSB9IGZyb20gJy4uLy4uL3NoYXJlZC9jb25zdGFudHMnO1xuXG5leHBvcnQgaW50ZXJmYWNlIENhcmRFeHRyYVByb3BzIHtcbiAgICBlbGV2YXRlZD86IGJvb2xlYW47XG59XG5cbmNvbnN0IENhcmQgPSBzdHlsZWQuZGl2PENhcmRFeHRyYVByb3BzPmBcbiAgICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkJBQ0tHUk9VTkQpfTtcbiAgICAkeyhwcm9wcykgPT5cbiAgICAgICAgcHJvcHMuZWxldmF0ZWRcbiAgICAgICAgICAgID8gYGJveC1zaGFkb3c6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLk1PREFMX1NIQURPVyl9O2BcbiAgICAgICAgICAgIDogYGJveC1zaGFkb3c6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlNIQURPVyl9O2B9XG4gICAgbWFyZ2luOiA1cHg7XG4gICAgb3ZlcmZsb3c6IGF1dG87XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGRlZmF1bHQgQ2FyZDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPYSJ9 */");
+const StyledCard = /*#__PURE__*/ styled("div", {
+    target: "ebufzie0",
+    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;");
+/**
+ * Card Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ 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

@@ -0,0 +1 @@
+{"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 CardProps = {\n    /** Shows a shadow around the card to show elevation */\n    elevated?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst StyledCard = styled.div<CardProps>`\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\n/**\n * Card Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction CardComponent(props: CardProps, ref: React.Ref<HTMLDivElement>) {\n    return <StyledCard {...props} ref={ref} />;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(CardComponent);\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;;;;AAIC,IACD,SAASC,aAAAA,CAAcJ,KAAgB,EAAEK,GAA8B,EAAA;AACnE,IAAA,qBAAOC,GAAA,CAACX,UAAAA,EAAAA;AAAY,QAAA,GAAGK,KAAK;QAAEK,GAAAA,EAAKA;;AACvC;AAEA,MAAME,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAA4BL,aAAAA;;;;"}

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

@@ -7,5 +7,5 @@ interface ChipProps {
     /** Aria label for the close button. Defaults to "Remove {label}" */
     closeButtonAriaLabel?: string;
 }
-export default function Chip(props: ChipProps & React.HTMLAttributes<HTMLSpanElement>): 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,18 +1,22 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 import Close from '../../icons/Close.js';
 
-const Container = /*#__PURE__*/ styled("span", {
-    target: "e1b6ywa20",
+const Container$8 = /*#__PURE__*/ styled("span", {
+    target: "eg8hsap0",
     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;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9DaGlwL0NoaXAudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9uby1mcmlsbHMtdWkvbm8tZnJpbGxzLXVpL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENsb3NlIH0gZnJvbSAnLi4vLi4vaWNvbnMnO1xuaW1wb3J0IHsgZ2V0VGhlbWVWYWx1ZSwgVEhFTUVfTkFNRSB9IGZyb20gJy4uLy4uL3NoYXJlZC9jb25zdGFudHMnO1xuXG5pbnRlcmZhY2UgQ2hpcFByb3BzIHtcbiAgICAvKiogTGFiZWwgZm9yIHRoZSBjaGlwICovXG4gICAgbGFiZWw6IHN0cmluZztcbiAgICAvKiogQ2FsbGJhY2sgd2hlbiB0aGUgY2xvc2UgYnV0dG9uIGlzIGNsaWNrZWQgKi9cbiAgICBvbkNsb3NlQ2xpY2s/OiAoZTogUmVhY3QuS2V5Ym9hcmRFdmVudCB8IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHZvaWQ7XG4gICAgLyoqIEFyaWEgbGFiZWwgZm9yIHRoZSBjbG9zZSBidXR0b24uIERlZmF1bHRzIHRvIFwiUmVtb3ZlIHtsYWJlbH1cIiAqL1xuICAgIGNsb3NlQnV0dG9uQXJpYUxhYmVsPzogc3RyaW5nO1xufVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQuc3BhbmBcbiAgICBwYWRkaW5nOiA1cHg7XG4gICAgcGFkZGluZy1sZWZ0OiAxNXB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQk9SREVSX0xJR0hUX0NPTE9SKX07XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgbWFyZ2luOiA1cHg7XG4gICAgbGluZS1oZWlnaHQ6IDIwcHg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmNvbnN0IEJ1dHRvbiA9IHN0eWxlZC5idXR0b25gXG4gICAgY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkJBQ0tHUk9VTkQpfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5ESVNBQkxFRCl9O1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgcGFkZGluZzogNHB4O1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIG1hcmdpbi1sZWZ0OiA1cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIG91dGxpbmU6IDRweCBzb2xpZCAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5FUlJPUl9MSUdIVCl9O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIENoaXAocHJvcHM6IENoaXBQcm9wcyAmIFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEhUTUxTcGFuRWxlbWVudD4pIHtcbiAgICBjb25zdCB7IGxhYmVsLCBvbkNsb3NlQ2xpY2ssIGNsb3NlQnV0dG9uQXJpYUxhYmVsLCAuLi5yZXN0IH0gPSBwcm9wcztcblxuICAgIGNvbnN0IGtleVVwSGFuZGxlcjogUmVhY3QuS2V5Ym9hcmRFdmVudEhhbmRsZXI8SFRNTFNwYW5FbGVtZW50PiA9IChlKSA9PiB7XG4gICAgICAgIGlmIChlLmtleSA9PT0gJ0JhY2tzcGFjZScgfHwgZS5rZXkgPT09ICdEZWxldGUnKSB7XG4gICAgICAgICAgICBvbkNsb3NlQ2xpY2s/LihlKTtcbiAgICAgICAgfVxuICAgIH07XG5cbiAgICBjb25zdCBidXR0b25LZXlEb3duSGFuZGxlcjogUmVhY3QuS2V5Ym9hcmRFdmVudEhhbmRsZXI8SFRNTEJ1dHRvbkVsZW1lbnQ+ID0gKGUpID0+IHtcbiAgICAgICAgLy8gU3RvcCBwcm9wYWdhdGlvbiB0byBwcmV2ZW50IERyYWdBbmREcm9wIGZyb20gY2FwdHVyaW5nIFNwYWNlL0VudGVyXG4gICAgICAgIGlmIChlLmtleSA9PT0gJyAnIHx8IGUua2V5ID09PSAnU3BhY2ViYXInIHx8IGUua2V5ID09PSAnRW50ZXInKSB7XG4gICAgICAgICAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxDb250YWluZXIgey4uLnJlc3R9IG9uS2V5VXA9e2tleVVwSGFuZGxlcn0+XG4gICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgICA8QnV0dG9uXG4gICAgICAgICAgICAgICAgb25DbGljaz17b25DbG9zZUNsaWNrfVxuICAgICAgICAgICAgICAgIG9uS2V5RG93bj17YnV0dG9uS2V5RG93bkhhbmRsZXJ9XG4gICAgICAgICAgICAgICAgYXJpYS1sYWJlbD17Y2xvc2VCdXR0b25BcmlhTGFiZWwgPz8gYFJlbW92ZSAke2xhYmVsfWB9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPENsb3NlIGhlaWdodD17MTZ9IHdpZHRoPXsxNn0gLz5cbiAgICAgICAgICAgIDwvQnV0dG9uPlxuICAgICAgICA8L0NvbnRhaW5lcj5cbiAgICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNrQiJ9 */");
-const Button = /*#__PURE__*/ styled("button", {
-    target: "e1b6ywa21",
+})("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: "eg8hsap1",
     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), ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9DaGlwL0NoaXAudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9uby1mcmlsbHMtdWkvbm8tZnJpbGxzLXVpL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENsb3NlIH0gZnJvbSAnLi4vLi4vaWNvbnMnO1xuaW1wb3J0IHsgZ2V0VGhlbWVWYWx1ZSwgVEhFTUVfTkFNRSB9IGZyb20gJy4uLy4uL3NoYXJlZC9jb25zdGFudHMnO1xuXG5pbnRlcmZhY2UgQ2hpcFByb3BzIHtcbiAgICAvKiogTGFiZWwgZm9yIHRoZSBjaGlwICovXG4gICAgbGFiZWw6IHN0cmluZztcbiAgICAvKiogQ2FsbGJhY2sgd2hlbiB0aGUgY2xvc2UgYnV0dG9uIGlzIGNsaWNrZWQgKi9cbiAgICBvbkNsb3NlQ2xpY2s/OiAoZTogUmVhY3QuS2V5Ym9hcmRFdmVudCB8IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHZvaWQ7XG4gICAgLyoqIEFyaWEgbGFiZWwgZm9yIHRoZSBjbG9zZSBidXR0b24uIERlZmF1bHRzIHRvIFwiUmVtb3ZlIHtsYWJlbH1cIiAqL1xuICAgIGNsb3NlQnV0dG9uQXJpYUxhYmVsPzogc3RyaW5nO1xufVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQuc3BhbmBcbiAgICBwYWRkaW5nOiA1cHg7XG4gICAgcGFkZGluZy1sZWZ0OiAxNXB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQk9SREVSX0xJR0hUX0NPTE9SKX07XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgbWFyZ2luOiA1cHg7XG4gICAgbGluZS1oZWlnaHQ6IDIwcHg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmNvbnN0IEJ1dHRvbiA9IHN0eWxlZC5idXR0b25gXG4gICAgY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkJBQ0tHUk9VTkQpfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5ESVNBQkxFRCl9O1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgcGFkZGluZzogNHB4O1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIG1hcmdpbi1sZWZ0OiA1cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIG91dGxpbmU6IDRweCBzb2xpZCAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5FUlJPUl9MSUdIVCl9O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIENoaXAocHJvcHM6IENoaXBQcm9wcyAmIFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEhUTUxTcGFuRWxlbWVudD4pIHtcbiAgICBjb25zdCB7IGxhYmVsLCBvbkNsb3NlQ2xpY2ssIGNsb3NlQnV0dG9uQXJpYUxhYmVsLCAuLi5yZXN0IH0gPSBwcm9wcztcblxuICAgIGNvbnN0IGtleVVwSGFuZGxlcjogUmVhY3QuS2V5Ym9hcmRFdmVudEhhbmRsZXI8SFRNTFNwYW5FbGVtZW50PiA9IChlKSA9PiB7XG4gICAgICAgIGlmIChlLmtleSA9PT0gJ0JhY2tzcGFjZScgfHwgZS5rZXkgPT09ICdEZWxldGUnKSB7XG4gICAgICAgICAgICBvbkNsb3NlQ2xpY2s/LihlKTtcbiAgICAgICAgfVxuICAgIH07XG5cbiAgICBjb25zdCBidXR0b25LZXlEb3duSGFuZGxlcjogUmVhY3QuS2V5Ym9hcmRFdmVudEhhbmRsZXI8SFRNTEJ1dHRvbkVsZW1lbnQ+ID0gKGUpID0+IHtcbiAgICAgICAgLy8gU3RvcCBwcm9wYWdhdGlvbiB0byBwcmV2ZW50IERyYWdBbmREcm9wIGZyb20gY2FwdHVyaW5nIFNwYWNlL0VudGVyXG4gICAgICAgIGlmIChlLmtleSA9PT0gJyAnIHx8IGUua2V5ID09PSAnU3BhY2ViYXInIHx8IGUua2V5ID09PSAnRW50ZXInKSB7XG4gICAgICAgICAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxDb250YWluZXIgey4uLnJlc3R9IG9uS2V5VXA9e2tleVVwSGFuZGxlcn0+XG4gICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgICA8QnV0dG9uXG4gICAgICAgICAgICAgICAgb25DbGljaz17b25DbG9zZUNsaWNrfVxuICAgICAgICAgICAgICAgIG9uS2V5RG93bj17YnV0dG9uS2V5RG93bkhhbmRsZXJ9XG4gICAgICAgICAgICAgICAgYXJpYS1sYWJlbD17Y2xvc2VCdXR0b25BcmlhTGFiZWwgPz8gYFJlbW92ZSAke2xhYmVsfWB9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPENsb3NlIGhlaWdodD17MTZ9IHdpZHRoPXsxNn0gLz5cbiAgICAgICAgICAgIDwvQnV0dG9uPlxuICAgICAgICA8L0NvbnRhaW5lcj5cbiAgICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCZSJ9 */");
-function Chip(props) {
+})("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), ";}");
+/**
+ * Chip Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLSpanElement
+ */ function ChipComponent(props, ref) {
     const { label, onCloseClick, closeButtonAriaLabel, ...rest } = props;
     const keyUpHandler = (e)=>{
         if (e.key === 'Backspace' || e.key === 'Delete') {
@@ -25,12 +29,13 @@ function Chip(props) {
             e.stopPropagation();
         }
     };
-    return /*#__PURE__*/ jsxs(Container, {
+    return /*#__PURE__*/ jsxs(Container$8, {
         ...rest,
+        ref: ref,
         onKeyUp: keyUpHandler,
         children: [
             label,
-            /*#__PURE__*/ jsx(Button, {
+            /*#__PURE__*/ jsx(Button$1, {
                 onClick: onCloseClick,
                 onKeyDown: buttonKeyDownHandler,
                 "aria-label": closeButtonAriaLabel ?? `Remove ${label}`,
@@ -42,5 +47,7 @@ function Chip(props) {
         ]
     });
 }
+const Chip = /*#__PURE__*/ React.forwardRef(ChipComponent);
 
 export { Chip as default };
+//# sourceMappingURL=Chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { Close } from '../../icons';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\ninterface ChipProps {\n    /** Label for the chip */\n    label: string;\n    /** Callback when the close button is clicked */\n    onCloseClick?: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    /** Aria label for the close button. Defaults to \"Remove {label}\" */\n    closeButtonAriaLabel?: string;\n}\n\nconst Container = styled.span`\n    padding: 5px;\n    padding-left: 15px;\n    border-radius: 16px;\n    background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    display: inline-flex;\n    margin: 5px;\n    line-height: 20px;\n    align-items: center;\n`;\n\nconst Button = styled.button`\n    color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    background-color: ${getThemeValue(THEME_NAME.DISABLED)};\n    border-radius: 50%;\n    border: none;\n    padding: 4px;\n    display: inline-flex;\n    margin-left: 5px;\n\n    &:focus-within {\n        outline: 4px solid ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n`;\n\n/**\n * Chip Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLSpanElement\n */\nfunction ChipComponent(\n    props: ChipProps & React.HTMLAttributes<HTMLSpanElement>,\n    ref: React.Ref<HTMLSpanElement>,\n) {\n    const { label, onCloseClick, closeButtonAriaLabel, ...rest } = props;\n\n    const keyUpHandler: React.KeyboardEventHandler<HTMLSpanElement> = (e) => {\n        if (e.key === 'Backspace' || e.key === 'Delete') {\n            onCloseClick?.(e);\n        }\n    };\n\n    const buttonKeyDownHandler: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {\n        // Stop propagation to prevent DragAndDrop from capturing Space/Enter\n        if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {\n            e.stopPropagation();\n        }\n    };\n\n    return (\n        <Container {...rest} ref={ref} onKeyUp={keyUpHandler}>\n            {label}\n            <Button\n                onClick={onCloseClick}\n                onKeyDown={buttonKeyDownHandler}\n                aria-label={closeButtonAriaLabel ?? `Remove ${label}`}\n            >\n                <Close height={16} width={16} />\n            </Button>\n        </Container>\n    );\n}\n\nconst Chip = React.forwardRef(ChipComponent);\nexport default Chip;\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","Button","BACKGROUND","DISABLED","ERROR_LIGHT","ChipComponent","props","ref","label","onCloseClick","closeButtonAriaLabel","rest","keyUpHandler","e","key","buttonKeyDownHandler","stopPropagation","_jsxs","onKeyUp","_jsx","onClick","onKeyDown","aria-label","Close","height","width","Chip","React","forwardRef"],"mappings":";;;;;;AAcA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,MAAAA,EAAAA;;;AAIMC,CAAAA,CAAAA,CAAAA,oEAAAA,EAAAA,aAAAA,CAAcC,WAAWC,kBAAkB,CAAA,EAAA,sEAAA,CAAA;AAOnE,MAAMC,QAAAA,iBAASJ,MAAAA,CAAAA,QAAAA,EAAAA;;;aACFC,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,CAAA,EAAA,oBAAA,EACxBJ,aAAAA,CAAcC,WAAWI,QAAQ,CAAA,EAAA,kHAAA,EAQ5BL,aAAAA,CAAcC,UAAAA,CAAWK,WAAW,CAAA,EAAA,IAAA,CAAA;AAIjE;;;;AAIC,IACD,SAASC,aAAAA,CACLC,KAAwD,EACxDC,GAA+B,EAAA;IAE/B,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,oBAAoB,EAAE,GAAGC,IAAAA,EAAM,GAAGL,KAAAA;AAE/D,IAAA,MAAMM,eAA4D,CAACC,CAAAA,GAAAA;AAC/D,QAAA,IAAIA,EAAEC,GAAG,KAAK,eAAeD,CAAAA,CAAEC,GAAG,KAAK,QAAA,EAAU;YAC7CL,YAAAA,GAAeI,CAAAA,CAAAA;AACnB,QAAA;AACJ,IAAA,CAAA;AAEA,IAAA,MAAME,uBAAsE,CAACF,CAAAA,GAAAA;;QAEzE,IAAIA,CAAAA,CAAEC,GAAG,KAAK,GAAA,IAAOD,CAAAA,CAAEC,GAAG,KAAK,UAAA,IAAcD,CAAAA,CAAEC,GAAG,KAAK,OAAA,EAAS;AAC5DD,YAAAA,CAAAA,CAAEG,eAAe,EAAA;AACrB,QAAA;AACJ,IAAA,CAAA;AAEA,IAAA,qBACIC,IAAA,CAACrB,WAAAA,EAAAA;AAAW,QAAA,GAAGe,IAAI;QAAEJ,GAAAA,EAAKA,GAAAA;QAAKW,OAAAA,EAASN,YAAAA;;AACnCJ,YAAAA,KAAAA;0BACDW,GAAA,CAAClB,QAAAA,EAAAA;gBACGmB,OAAAA,EAASX,YAAAA;gBACTY,SAAAA,EAAWN,oBAAAA;AACXO,gBAAAA,YAAAA,EAAYZ,oBAAAA,IAAwB,CAAC,OAAO,EAAEF,KAAAA,CAAAA,CAAO;AAErD,gBAAA,QAAA,gBAAAW,GAAA,CAACI,KAAAA,EAAAA;oBAAMC,MAAAA,EAAQ,EAAA;oBAAIC,KAAAA,EAAO;;;;;AAI1C;AAEA,MAAMC,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAACvB,aAAAA;;;;"}

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

@@ -1,42 +1,31 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-type ChipInputProps = PropTypes.InferProps<typeof ChipInput.propTypes>;
-/**
- * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.
- * @component
- * @example
- * ```tsx
- * <ChipInput
- *   value={['tag1', 'tag2']}
- *   onChange={(newTags) => console.log(newTags)}
- *   label="Add tags"
- *   errorText="At least one tag is required"
- * />
- * ```
- */
-declare function ChipInput(props: ChipInputProps & React.AllHTMLAttributes<HTMLInputElement>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace ChipInput {
-    var propTypes: {
-        /** Label for the field */
-        label: PropTypes.Validator<string>;
-        /** Error message for the field */
-        errorText: PropTypes.Requireable<string>;
-        /** Values to display as chips */
-        value: PropTypes.Requireable<string[]>;
-        /** Callback when chips change */
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        /** Aria label for the close button on chip. Defaults to "Remove {label}" */
-        closeButtonAriaLabel: PropTypes.Requireable<string>;
-        /** Announcement text when a chip is added. Defaults to "{label} was added" */
-        addedAnnouncementTemplate: PropTypes.Requireable<string>;
-        /** Announcement text when a chip is removed. Defaults to "{label} was removed" */
-        removedAnnouncementTemplate: PropTypes.Requireable<string>;
-    };
-    var defaultProps: {
-        value: any[];
-        closeButtonAriaLabel: string;
-        addedAnnouncementTemplate: string;
-        removedAnnouncementTemplate: string;
-    };
+interface ChipInputProps {
+    /** Label for the field */
+    label: string;
+    /** Error message for the field */
+    errorText?: string;
+    /**
+     * Values to display as chips
+     * @default []
+     */
+    value?: string[];
+    /** Callback when chips change */
+    onChange?: (newValue: string[]) => void;
+    /**
+     * Aria label for the close button on chip. Defaults to "Remove {:label}"
+     * @default "Remove {:label}"
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Announcement text when a chip is added. Defaults to "{:label} was added"
+     * @default "{:label} was added"
+     */
+    addedAnnouncementTemplate?: string;
+    /**
+     * Announcement text when a chip is removed. Defaults to "{:label} was removed"
+     * @default "{:label} was removed"
+     */
+    removedAnnouncementTemplate?: string;
 }
+declare const ChipInput: React.ForwardRefExoticComponent<ChipInputProps & React.AllHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export default ChipInput;