react-science 0.19.2 → 0.20.0

package/lib-esm/components/forms/Input.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { FullSpinner } from '../index';
+import { useFieldsContext } from './context/FieldsContext';
+const LabelStyled = styled.label `
+  padding: ${(props) => props.variant === 'default'
+    ? props.hasTrailing
+        ? '2px 9px 4px 9px'
+        : '2px 9px'
+    : props.hasTrailing
+        ? '1px 7px 1px 7px'
+        : '1px 7px'};
+
+  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
+  line-height: '17px';
+
+  background-color: white;
+  border-width: 1px;
+  align-items: center;
+  flex-direction: row;
+  flex: 1 1 0%;
+  display: flex;
+  position: relative;
+
+  border-top-right-radius: ${(props) => props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-bottom-right-radius: ${(props) => props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-top-left-radius: ${(props) => props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-bottom-left-radius: ${(props) => props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-radius: ${(props) => !props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-color: var(--custom-border-color);
+`;
+function getStyleColor(hasError, hasValid) {
+    if (hasError) {
+        return {
+            default: '#ffa39e',
+            hover: '#f95d55',
+        };
+    }
+    if (hasValid) {
+        return {
+            default: '#6adc24',
+            hover: '#62cb21',
+        };
+    }
+    return {
+        default: 'rgb(217, 217, 217)',
+        hover: '#4096ff',
+    };
+}
+const GroupStyled = styled.div `
+  display: flex;
+  border-radius: 0.375rem;
+  margin-top: 0.25rem;
+
+  .addon {
+    color: ${({ hasError }) => hasError && '#f95d55'};
+  }
+
+  --custom-border-color: ${({ hasError, hasValid }) => getStyleColor(hasError, hasValid).default};
+
+  :hover,
+  :focus-within {
+    --custom-border-color: ${({ hasError, hasValid }) => getStyleColor(hasError, hasValid).hover};
+  }
+`;
+const InputStyled = styled.input `
+  padding: 0;
+  flex: 1 1 0%;
+  border: none;
+  position: relative;
+  outline: none;
+`;
+const LeadingAddonStyled = styled.div `
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border-right-width: 0px;
+  border-width: 1px;
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+  align-items: center;
+  display: inline-flex;
+
+  border-right: none;
+
+  border-color: var(--custom-border-color);
+`;
+const TrailingAddonStyled = styled.div `
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border-left-width: 0px;
+  border-width: 1px;
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  align-items: center;
+  display: inline-flex;
+
+  border-left: none;
+
+  border-color: var(--custom-border-color);
+`;
+const LeadingInlineAddonStyled = styled.div `
+  display: flex;
+  align-items: center;
+  padding-right: 0.5rem;
+`;
+const TrailingInlineAddonStyled = styled.div `
+  display: flex;
+  align-items: center;
+  padding-left: 0.5rem;
+`;
+const RootInput = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+export function Input(props) {
+    const { variant: variantProps, trailingAddon, leadingAddon, help, error, valid, loading, ...otherProps } = props;
+    const { name, variant: contextVariant } = useFieldsContext();
+    const hasLeading = (leadingAddon && !leadingAddon.inline) || false;
+    const hasTrailing = (trailingAddon && !trailingAddon.inline) || false;
+    const variant = variantProps || contextVariant;
+    return (_jsxs(RootInput, { children: [_jsxs(GroupStyled, { hasError: !!error, hasValid: !!valid, children: [leadingAddon && !leadingAddon.inline && (_jsx(LeadingAddonStyled, { children: leadingAddon.addon })), _jsxs(LabelStyled, { variant: variant, hasLeading: hasLeading, hasTrailing: hasTrailing, children: [leadingAddon?.inline && (_jsx(LeadingInlineAddonStyled, { className: "addon", children: leadingAddon.addon })), _jsx(InputStyled, { id: name, name: name, ...otherProps }), trailingAddon?.inline && (_jsx(TrailingInlineAddonStyled, { className: "addon", children: trailingAddon.addon })), loading && (_jsx(TrailingInlineAddonStyled, { style: { height: variant === 'default' ? 20 : 10 }, children: _jsx(FullSpinner, { height: variant === 'default' ? 20 : 10, width: variant === 'default' ? 20 : 10 }) }))] }), trailingAddon && !trailingAddon.inline && (_jsx(TrailingAddonStyled, { children: trailingAddon.addon }))] }), _jsx(SubText, { error: error, help: help, valid: valid })] }));
+}
+function SubText(props) {
+    const { error, help, valid: validProps } = props;
+    const valid = typeof validProps === 'string' ? validProps : undefined;
+    const text = error || valid || help;
+    return _jsx("p", { style: { color: getColor(error, validProps) }, children: text });
+}
+function getColor(error, valid) {
+    if (error) {
+        return '#f95d55';
+    }
+    if (valid && typeof valid !== 'boolean') {
+        return '#62cb21';
+    }
+    return 'gray';
+}
+//# sourceMappingURL=Input.js.map

package/lib-esm/components/forms/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/forms/Input.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/forms/context/FieldsContext.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+interface FieldContext {
+    name?: string;
+    variant: 'default' | 'small';
+}
+interface FieldProps {
+    name: string;
+    label: string;
+    children: ReactNode;
+    variant?: 'default' | 'small';
+    required?: boolean;
+}
+export declare function useFieldsContext(): FieldContext;
+export declare function Field(props: FieldProps): JSX.Element;
+export {};
+//# sourceMappingURL=FieldsContext.d.ts.map

package/lib-esm/components/forms/context/FieldsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldsContext.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/context/FieldsContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEtE,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,GAAG,OAAO,CAAC;CAC9B;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCD,wBAAgB,gBAAgB,IAAI,YAAY,CAQ/C;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAqBtC"}

package/lib-esm/components/forms/context/FieldsContext.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { createContext, useContext, useMemo } from 'react';
+const context = createContext(null);
+const FieldContextRoot = styled.div `
+  display: flex;
+  flex-flow: row;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  gap: 5px;
+`;
+const Label = styled.label `
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  line-height: ${(props) => (props.variant === 'small' ? '28px' : '32px')};
+  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
+  white-space: nowrap;
+  text-align: end;
+`;
+const LabelContainer = styled.div `
+  flex-grow: 0;
+  display: inline-block;
+  overflow: hidden;
+  text-align: end;
+  vertical-align: middle;
+  white-space: nowrap;
+`;
+const FieldContextRequired = styled.span `
+  color: red;
+`;
+export function useFieldsContext() {
+    const ctx = useContext(context);
+    if (!ctx) {
+        return { name: undefined, variant: 'default' };
+    }
+    return ctx;
+}
+export function Field(props) {
+    const { label, name, children, required, variant } = props;
+    const memoized = useMemo(() => {
+        return { name, variant: variant || 'default' };
+    }, [name, variant]);
+    return (_jsx(context.Provider, { value: memoized, children: _jsxs(FieldContextRoot, { children: [_jsx(LabelContainer, { children: _jsxs(Label, { htmlFor: name, variant: memoized.variant, children: [label, " ", required && _jsx(FieldContextRequired, { children: "*" }), ":", ' '] }) }), children] }) }));
+}
+//# sourceMappingURL=FieldsContext.js.map

package/lib-esm/components/forms/context/FieldsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldsContext.js","sourceRoot":"","sources":["../../../../src/components/forms/context/FieldsContext.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAetE,MAAM,OAAO,GAAG,aAAa,CAAsB,IAAI,CAAC,CAAC;AAEzD,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOlC,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAoC;;;;iBAI7C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;eAC1D,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;;;CAGxE,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOhC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAA;;CAEvC,CAAC;AAEF,MAAM,UAAU,gBAAgB;IAC9B,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAEhC,IAAI,CAAC,GAAG,EAAE;QACR,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;KAChD;IAED,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE3D,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,CAAC;IACjD,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAC/B,MAAC,gBAAgB,eACf,KAAC,cAAc,cACb,MAAC,KAAK,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,CAAC,OAAO,aAC5C,KAAK,OAAG,QAAQ,IAAI,KAAC,oBAAoB,oBAAyB,OACjE,GAAG,IACC,GACO,EAEhB,QAAQ,IACQ,GACF,CACpB,CAAC;AACJ,CAAC"}

package/lib-esm/components/forms/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FieldsContext';
+//# sourceMappingURL=index.d.ts.map

package/lib-esm/components/forms/context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/context/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/lib-esm/components/forms/context/index.js

@@ -0,0 +1,2 @@
+export * from './FieldsContext';
+//# sourceMappingURL=index.js.map

package/lib-esm/components/forms/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/context/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/lib-esm/components/forms/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Input';
+export * from './context';
+//# sourceMappingURL=index.d.ts.map

package/lib-esm/components/forms/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/lib-esm/components/forms/index.js

@@ -0,0 +1,3 @@
+export * from './Input';
+export * from './context';
+//# sourceMappingURL=index.js.map

package/lib-esm/components/forms/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

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

@@ -3,6 +3,7 @@ export * from './button/index';
 export * from './color-picker/index';
 export * from './drop-zone/index';
 export * from './dropdown-menu/index';
+export * from './forms/index';
 export * from './fullscreen/index';
 export * from './header/index';
 export * from './hooks/index';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,OAAO,KAAK,cAAc,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,OAAO,KAAK,cAAc,MAAM,yBAAyB,CAAC"}

package/lib-esm/components/index.js

@@ -3,6 +3,7 @@ export * from './button/index';
 export * from './color-picker/index';
 export * from './drop-zone/index';
 export * from './dropdown-menu/index';
+export * from './forms/index';
 export * from './fullscreen/index';
 export * from './header/index';
 export * from './hooks/index';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,OAAO,KAAK,cAAc,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,OAAO,KAAK,cAAc,MAAM,yBAAyB,CAAC"}

package/lib-esm/components/modal/ConfirmModal.d.ts

@@ -12,6 +12,6 @@ interface ConfirmModalProps {
     headerColor: string;
     maxWidth?: number;
 }
-export declare function ConfirmModal(props: ConfirmModalProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ConfirmModal(props: ConfirmModalProps): JSX.Element;
 export {};
 //# sourceMappingURL=ConfirmModal.d.ts.map

package/lib-esm/components/modal/ConfirmModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,oDA0FpD"}
+{"version":3,"file":"ConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA0CD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAwDpD"}

package/lib-esm/components/modal/ConfirmModal.js

@@ -1,8 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
 import { Button } from '..';
 import { useDialog } from './useDialog';
+const ConfirmModalDialog = styled.dialog `
+  display: flex;
+  position: fixed;
+  background-color: transparent;
+
+  ::backdrop {
+    background-color: rgba(113, 113, 122, 0.75);
+  }
+`;
+const ConfirmModalOpened = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  max-height: 90%;
+  width: 100%;
+  border-width: 1px;
+  border-color: transparent;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+  border-top: 10px solid ${({ headerColor }) => headerColor};
+`;
+const ConfirmModalChildrenRoot = styled.div `
+  color: ${({ headerColor }) => headerColor};
+  display: flex;
+  flex: 1 1 0%;
+`;
+const ConfirmModalFooter = styled.div `
+  border-top: 2px solid rgb(247, 247, 247);
+  padding: 10px 20px 10px 20px;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 10px;
+`;
 export function ConfirmModal(props) {
     const { isOpen, saveText = 'Save', cancelText = 'Cancel', headerColor, maxWidth, onRequestClose, onCancel = onRequestClose, onConfirm, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, } = props;
     const { ref, onClick } = useDialog({
@@ -11,32 +44,7 @@ export function ConfirmModal(props) {
         requestCloseOnBackdrop,
         onRequestClose,
     });
-    return (_jsx("dialog", { ref: ref, style: {
-            display: 'flex',
-            position: 'fixed',
-            backgroundColor: 'transparent',
-        }, css: css `
-        ::backdrop: rgba(113, 113, 122, 0.75);
-      `, onClick: onClick, children: isOpen ? (_jsxs("div", { style: {
-                position: 'relative',
-                display: 'flex',
-                flexDirection: 'column',
-                backgroundColor: 'white',
-                maxHeight: '90%',
-                width: '100%',
-                maxWidth: maxWidth || undefined,
-                borderWidth: 1,
-                borderColor: 'transparent',
-                borderRadius: '0.5rem',
-                boxShadow: '0 0 0 0,0 8px 16px rgba(0, 0, 0, 0.3)',
-                borderTop: `10px solid ${headerColor}`,
-            }, children: [_jsx("div", { style: { color: headerColor, display: 'flex', flex: '1 1 0%' }, children: children }), _jsxs("div", { style: {
-                        borderTop: '2px solid rgb(247, 247, 247)',
-                        padding: '10px 20px 10px 20px',
-                        display: 'flex',
-                        flexDirection: 'row-reverse',
-                        gap: 10,
-                    }, children: [_jsx(Button, { onClick: onConfirm, backgroundColor: {
+    return (_jsx(ConfirmModalDialog, { ref: ref, onClick: onClick, children: isOpen ? (_jsxs(ConfirmModalOpened, { headerColor: headerColor, style: { maxWidth }, children: [_jsx(ConfirmModalChildrenRoot, { headerColor: headerColor, children: children }), _jsxs(ConfirmModalFooter, { children: [_jsx(Button, { onClick: onConfirm, backgroundColor: {
                                 basic: 'hsla(243deg, 75%, 58%, 1)',
                                 hover: 'hsla(245deg, 58%, 50%, 1)',
                             }, color: { basic: 'white' }, children: saveText }), _jsx(Button, { onClick: onCancel, backgroundColor: {

package/lib-esm/components/modal/ConfirmModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAGrC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgBxC,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,UAAU,GAAG,QAAQ,EACrB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,QAAQ,GAAG,cAAc,EACzB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACjC,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,OAAO;YACjB,eAAe,EAAE,aAAa;SAC/B,EACD,GAAG,EAAE,GAAG,CAAA;;OAEP,EACD,OAAO,EAAE,OAAO,YAEf,MAAM,CAAC,CAAC,CAAC,CACR,eACE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,eAAe,EAAE,OAAO;gBACxB,SAAS,EAAE,KAAK;gBAChB,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,QAAQ,IAAI,SAAS;gBAC/B,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,aAAa;gBAC1B,YAAY,EAAE,QAAQ;gBACtB,SAAS,EAAE,uCAAuC;gBAClD,SAAS,EAAE,cAAc,WAAW,EAAE;aACvC,aAED,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,YAChE,QAAQ,GACL,EAEN,eACE,KAAK,EAAE;wBACL,SAAS,EAAE,8BAA8B;wBACzC,OAAO,EAAE,qBAAqB;wBAC9B,OAAO,EAAE,MAAM;wBACf,aAAa,EAAE,aAAa;wBAC5B,GAAG,EAAE,EAAE;qBACR,aAED,KAAC,MAAM,IACL,OAAO,EAAE,SAAS,EAClB,eAAe,EAAE;gCACf,KAAK,EAAE,2BAA2B;gCAClC,KAAK,EAAE,2BAA2B;6BACnC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,QAAQ,GACF,EACT,KAAC,MAAM,IACL,OAAO,EAAE,QAAQ,EACjB,eAAe,EAAE;gCACf,KAAK,EAAE,yBAAyB;gCAChC,KAAK,EAAE,yBAAyB;6BACjC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,UAAU,GACJ,IACL,IACF,CACP,CAAC,CAAC,CAAC,IAAI,GACD,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgBxC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;CAQvC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAEnC;;;;;;;;;;;2BAWyB,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;CAC1D,CAAC;AAEF,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAyB;WACzD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;;;CAG1C,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMpC,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,UAAU,GAAG,QAAQ,EACrB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,QAAQ,GAAG,cAAc,EACzB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACjC,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,YAC3C,MAAM,CAAC,CAAC,CAAC,CACR,MAAC,kBAAkB,IAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,aAC/D,KAAC,wBAAwB,IAAC,WAAW,EAAE,WAAW,YAC/C,QAAQ,GACgB,EAE3B,MAAC,kBAAkB,eACjB,KAAC,MAAM,IACL,OAAO,EAAE,SAAS,EAClB,eAAe,EAAE;gCACf,KAAK,EAAE,2BAA2B;gCAClC,KAAK,EAAE,2BAA2B;6BACnC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,QAAQ,GACF,EACT,KAAC,MAAM,IACL,OAAO,EAAE,QAAQ,EACjB,eAAe,EAAE;gCACf,KAAK,EAAE,yBAAyB;gCAChC,KAAK,EAAE,yBAAyB;6BACjC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,UAAU,GACJ,IACU,IACF,CACtB,CAAC,CAAC,CAAC,IAAI,GACW,CACtB,CAAC;AACJ,CAAC"}

package/lib-esm/components/modal/Modal.d.ts

@@ -10,16 +10,16 @@ export interface ModalProps {
     width?: number;
     height?: number;
 }
-export declare function Modal(props: ModalProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Modal(props: ModalProps): JSX.Element;
 export declare namespace Modal {
     var Header: (props: {
         children: ReactNode;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => JSX.Element;
     var Body: (props: {
         children: ReactNode;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => JSX.Element;
     var Footer: (props: {
         children: ReactNode;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => JSX.Element;
 }
 //# sourceMappingURL=Modal.d.ts.map

package/lib-esm/components/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,oDAuDtC;yBAvDe,KAAK"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2CD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAoCtC;yBApCe,KAAK"}

package/lib-esm/components/modal/Modal.js

@@ -1,53 +1,64 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
 import ModalCloseButton from './ModalCloseButton';
 import { useDialog } from './useDialog';
+const DialogRoot = styled.dialog `
+  display: flex;
+  position: fixed;
+  background-color: transparent;
+
+  ::backdrop {
+    background-color: rgba(113, 113, 122, 0.75);
+  }
+`;
+const DialogOpened = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  max-height: 90%;
+  border-width: 1px;
+  border-color: transparent;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+`;
+const ModalHeaderStyled = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px 10px 20px;
+  border-bottom: 2px solid rgb(247, 247, 247);
+`;
+const ModalBodyStyled = styled.div `
+  display: flex;
+  flex: 1 1 0%;
+  overflow-y: auto;
+`;
+const ModalFooterStyled = styled.div `
+  border-top: 2px solid rgb(247, 247, 247);
+  padding: 10px 20px 10px 20px;
+`;
 export function Modal(props) {
-    const { isOpen, onRequestClose, hasCloseButton = true, requestCloseOnBackdrop = true, requestCloseOnEsc = true, maxWidth, width, height, children, } = props;
+    const { isOpen, onRequestClose, hasCloseButton = true, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, width, maxWidth, height, } = props;
     const { ref, onClick } = useDialog({
         isOpen,
         requestCloseOnEsc,
         requestCloseOnBackdrop,
         onRequestClose,
     });
-    return (_jsx("dialog", { ref: ref, style: {
-            display: 'flex',
-            position: 'fixed',
-            backgroundColor: 'transparent',
-        }, css: css `
-        ::backdrop: rgba(113, 113, 122, 0.75);
-      `, onClick: onClick, children: isOpen ? (_jsxs("div", { style: {
-                position: 'relative',
-                display: 'flex',
-                flexDirection: 'column',
-                backgroundColor: 'white',
-                maxHeight: '90%',
-                width: width || '100%',
-                maxWidth: maxWidth || undefined,
+    return (_jsx(DialogRoot, { ref: ref, onClick: onClick, children: isOpen ? (_jsxs(DialogOpened, { style: {
+                maxWidth,
                 height: height || 'max-content',
-                borderWidth: 1,
-                borderColor: 'transparent',
-                borderRadius: '0.5rem',
-                boxShadow: '0 0 0 0,0 8px 16px rgba(0, 0, 0, 0.3)',
+                width: width || '100%',
             }, children: [children, hasCloseButton && _jsx(ModalCloseButton, { onClick: onRequestClose })] })) : null }));
 }
 Modal.Header = function ModalHeader(props) {
-    return (_jsx("div", { style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '10px 20px 10px 20px',
-            borderBottom: '2px solid rgb(247, 247, 247)',
-        }, children: props.children }));
+    return _jsx(ModalHeaderStyled, { children: props.children });
 };
 Modal.Body = function ModalBody(props) {
-    return (_jsx("div", { style: { display: 'flex', flex: '1 1 0%', overflowY: 'auto' }, children: props.children }));
+    return _jsx(ModalBodyStyled, { children: props.children });
 };
 Modal.Footer = function ModalFooter(props) {
-    return (_jsx("div", { style: {
-            borderTop: '2px solid rgb(247, 247, 247)',
-            padding: '10px 20px 10px 20px',
-        }, children: props.children }));
+    return _jsx(ModalFooterStyled, { children: props.children });
 };
 //# sourceMappingURL=Modal.js.map

package/lib-esm/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAGrC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAcxC,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,MAAM,EACN,cAAc,EACd,cAAc,GAAG,IAAI,EACrB,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACjC,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,OAAO;YACjB,eAAe,EAAE,aAAa;SAC/B,EACD,GAAG,EAAE,GAAG,CAAA;;OAEP,EACD,OAAO,EAAE,OAAO,YAEf,MAAM,CAAC,CAAC,CAAC,CACR,eACE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,eAAe,EAAE,OAAO;gBACxB,SAAS,EAAE,KAAK;gBAChB,KAAK,EAAE,KAAK,IAAI,MAAM;gBACtB,QAAQ,EAAE,QAAQ,IAAI,SAAS;gBAC/B,MAAM,EAAE,MAAM,IAAI,aAAa;gBAC/B,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,aAAa;gBAC1B,YAAY,EAAE,QAAQ;gBACtB,SAAS,EAAE,uCAAuC;aACnD,aAEA,QAAQ,EACR,cAAc,IAAI,KAAC,gBAAgB,IAAC,OAAO,EAAE,cAAc,GAAI,IAC5D,CACP,CAAC,CAAC,CAAC,IAAI,GACD,CACV,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,CACL,cACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,eAAe;YAC/B,OAAO,EAAE,qBAAqB;YAC9B,YAAY,EAAE,8BAA8B;SAC7C,YAEA,KAAK,CAAC,QAAQ,GACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,IAAI,GAAG,SAAS,SAAS,CAAC,KAA8B;IAC5D,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,YAC/D,KAAK,CAAC,QAAQ,GACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,CACL,cACE,KAAK,EAAE;YACL,SAAS,EAAE,8BAA8B;YACzC,OAAO,EAAE,qBAAqB;SAC/B,YAEA,KAAK,CAAC,QAAQ,GACX,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAcxC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;CAQ/B,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAU9B,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,MAAM,EACN,cAAc,EACd,cAAc,GAAG,IAAI,EACrB,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACjC,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,YACnC,MAAM,CAAC,CAAC,CAAC,CACR,MAAC,YAAY,IACX,KAAK,EAAE;gBACL,QAAQ;gBACR,MAAM,EAAE,MAAM,IAAI,aAAa;gBAC/B,KAAK,EAAE,KAAK,IAAI,MAAM;aACvB,aAEA,QAAQ,EACR,cAAc,IAAI,KAAC,gBAAgB,IAAC,OAAO,EAAE,cAAc,GAAI,IACnD,CAChB,CAAC,CAAC,CAAC,IAAI,GACG,CACd,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,CAAC;AACjE,CAAC,CAAC;AAEF,KAAK,CAAC,IAAI,GAAG,SAAS,SAAS,CAAC,KAA8B;IAC5D,OAAO,KAAC,eAAe,cAAE,KAAK,CAAC,QAAQ,GAAmB,CAAC;AAC7D,CAAC,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,CAAC;AACjE,CAAC,CAAC"}

package/lib-esm/components/root-layout/RootLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RootLayout.d.ts","sourceRoot":"","sources":["../../../src/components/root-layout/RootLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAyB,MAAM,OAAO,CAAC;AAWxE,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAQD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDA2BhD"}
+{"version":3,"file":"RootLayout.d.ts","sourceRoot":"","sources":["../../../src/components/root-layout/RootLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAyB,MAAM,OAAO,CAAC;AAWxE,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAQD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDAuBhD"}

package/lib-esm/components/root-layout/RootLayout.js

@@ -7,7 +7,7 @@ import { useState, useCallback } from 'react';
 import root from 'react-shadow/emotion.esm';
 import { AccordionProvider } from '../accordion/AccordionContext';
 import { RootLayoutProvider } from './RootLayoutContext';
-import { customDivPreflight } from './css-reset/customPreflight';
+import { CustomDivPreflight } from './css-reset/customPreflight';
 import { preflight } from './css-reset/preflight';
 import { queryClient } from './queryClient';
 const style = {
@@ -22,6 +22,6 @@ export function RootLayout(props) {
             setRootRef(node);
         }
     }, []);
-    return (_jsxs(root.div, { style: { ...style, ...props.style }, children: [_jsx(Global, { styles: preflight }), _jsx("div", { ref: ref, css: customDivPreflight, style: { width: '100%', height: '100%', position: 'relative' }, children: _jsx(RootLayoutProvider, { innerRef: rootRef, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(AccordionProvider, { children: props.children }) }) }) })] }));
+    return (_jsxs(root.div, { style: { ...style, ...props.style }, children: [_jsx(Global, { styles: preflight }), _jsx(CustomDivPreflight, { ref: ref, children: _jsx(RootLayoutProvider, { innerRef: rootRef, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(AccordionProvider, { children: props.children }) }) }) })] }));
 }
 //# sourceMappingURL=RootLayout.js.map

package/lib-esm/components/root-layout/RootLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"RootLayout.js","sourceRoot":"","sources":["../../../src/components/root-layout/RootLayout.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAA4B,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACxE,wFAAwF;AACxF,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,MAAM,KAAK,GAAkB;IAC3B,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CACvD,CAAC;IAEF,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,IAAoB,EAAE,EAAE;QAC/C,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,IAAI,CAAC,GAAG,IAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,aAC3C,KAAC,MAAM,IAAC,MAAM,EAAE,SAAS,GAAI,EAC7B,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,kBAAkB,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,YAE9D,KAAC,kBAAkB,IAAC,QAAQ,EAAE,OAAO,YACnC,KAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW,YACtC,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,GACnC,GACH,GACjB,IACG,CACZ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"RootLayout.js","sourceRoot":"","sources":["../../../src/components/root-layout/RootLayout.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAA4B,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACxE,wFAAwF;AACxF,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,MAAM,KAAK,GAAkB;IAC3B,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CACvD,CAAC;IAEF,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,IAAoB,EAAE,EAAE;QAC/C,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,IAAI,CAAC,GAAG,IAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,aAC3C,KAAC,MAAM,IAAC,MAAM,EAAE,SAAS,GAAI,EAC7B,KAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,YAC1B,KAAC,kBAAkB,IAAC,QAAQ,EAAE,OAAO,YACnC,KAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW,YACtC,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,GACnC,GACH,GACF,IACZ,CACZ,CAAC;AACJ,CAAC"}

package/lib-esm/components/root-layout/css-reset/customPreflight.d.ts

@@ -1,2 +1,6 @@
-export declare const customDivPreflight: import("@emotion/utils").SerializedStyles;
+/// <reference types="react" />
+export declare const CustomDivPreflight: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=customPreflight.d.ts.map

package/lib-esm/components/root-layout/css-reset/customPreflight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"customPreflight.d.ts","sourceRoot":"","sources":["../../../../src/components/root-layout/css-reset/customPreflight.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,2CAQ9B,CAAC"}
+{"version":3,"file":"customPreflight.d.ts","sourceRoot":"","sources":["../../../../src/components/root-layout/css-reset/customPreflight.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,kBAAkB;;;yGAY9B,CAAC"}

package/lib-esm/components/root-layout/css-reset/customPreflight.js

@@ -1,6 +1,6 @@
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 // Applying global styles that apply to elements that are not part of the shadow DOM.
-export const customDivPreflight = css `
+export const CustomDivPreflight = styled.div `
   /* html */
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
@@ -8,5 +8,9 @@ export const customDivPreflight = css `
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
     'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+  width: 100%;
+  height: 100%;
+  position: relative;
 `;
 //# sourceMappingURL=customPreflight.js.map

package/lib-esm/components/root-layout/css-reset/customPreflight.js.map

@@ -1 +1 @@
-{"version":3,"file":"customPreflight.js","sourceRoot":"","sources":["../../../../src/components/root-layout/css-reset/customPreflight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,qFAAqF;AACrF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;CAQpC,CAAC"}
+{"version":3,"file":"customPreflight.js","sourceRoot":"","sources":["../../../../src/components/root-layout/css-reset/customPreflight.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,qFAAqF;AACrF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;CAY3C,CAAC"}

package/lib-esm/components/spinner/FullSpinner.d.ts

@@ -1,2 +1,8 @@
-export declare function FullSpinner(): import("@emotion/react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+interface FullSpinnerProps {
+    width?: number;
+    height?: number;
+}
+export declare function FullSpinner(props: FullSpinnerProps): JSX.Element;
+export {};
 //# sourceMappingURL=FullSpinner.d.ts.map

package/lib-esm/components/spinner/FullSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FullSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/FullSpinner.tsx"],"names":[],"mappings":"AAeA,wBAAgB,WAAW,qDAoC1B"}
+{"version":3,"file":"FullSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/FullSpinner.tsx"],"names":[],"mappings":";AASA,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAQD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAoClD"}