@chayns-components/core 5.0.0-beta.7 → 5.0.0-beta.701

package/lib/esm/components/amount-control/AmountControl.styles.js

@@ -0,0 +1,121 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledAmountControl = styled.div`
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['202'];
+}};
+    display: flex;
+    width: fit-content;
+    border-radius: 3px;
+    overflow: hidden;
+`;
+export const StyledAmountControlInput = styled.input`
+    background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['202'];
+}};
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.text;
+}};
+    border: none;
+    height: 28px;
+    width: ${_ref4 => {
+  let {
+    $shouldShowWideInput
+  } = _ref4;
+  return $shouldShowWideInput ? 90 : 55;
+}}px;
+    text-align: center;
+    cursor: ${_ref5 => {
+  let {
+    $hasFocus
+  } = _ref5;
+  return $hasFocus ? 'text' : 'pointer';
+}};
+
+    ${_ref6 => {
+  let {
+    $displayState
+  } = _ref6;
+  return $displayState !== 'normal' && css`
+            border-bottom-right-radius: 3px;
+            border-top-right-radius: 3px;
+        `;
+}}
+    ${_ref7 => {
+  let {
+    $displayState,
+    $shouldShowIcon
+  } = _ref7;
+  return $displayState === 'default' && !$shouldShowIcon && css`
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+        `;
+}};
+`;
+export const StyledAmountControlPseudoInput = styled.div`
+    background-color: ${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme['202'];
+}};
+    color: ${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.text;
+}};
+    border: none;
+    height: 28px;
+    width: ${_ref10 => {
+  let {
+    $shouldShowWideInput
+  } = _ref10;
+  return $shouldShowWideInput ? 90 : 55;
+}}px;
+    text-align: center;
+    cursor: pointer;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+`;
+export const StyledMotionAmountControlButton = styled(motion.button)`
+    overflow: hidden;
+    background-color: ${_ref11 => {
+  let {
+    $color
+  } = _ref11;
+  return $color ?? 'rgba(255, 255, 255, 0.2)';
+}};
+    transition: background-color 0.2s ease-in-out;
+    height: 28px;
+    width: ${_ref12 => {
+  let {
+    $isWide
+  } = _ref12;
+  return $isWide ? 40 : 28;
+}}px;
+
+    ${_ref13 => {
+  let {
+    $isDisabled
+  } = _ref13;
+  return $isDisabled && css`
+            opacity: 0.5;
+        `;
+}}
+`;
+//# sourceMappingURL=AmountControl.styles.js.map

package/lib/esm/components/amount-control/AmountControl.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","text","_ref4","$shouldShowWideInput","_ref5","$hasFocus","_ref6","$displayState","_ref7","$shouldShowIcon","StyledAmountControlPseudoInput","_ref8","_ref9","_ref10","StyledMotionAmountControlButton","button","_ref11","$color","_ref12","$isWide","_ref13","$isDisabled"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    overflow: hidden;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState !== 'normal' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: pointer;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n    $isWide?: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: ${({ $color }) => $color ?? 'rgba(255, 255, 255, 0.2)'};\n    transition: background-color 0.2s ease-in-out;\n    height: 28px;\n    width: ${({ $isWide }) => ($isWide ? 40 : 28)}px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,KAAoC;AACnF,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA;AAClF,aAAaI,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAACK,IAAI;AAAA;AACrE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AAC3E;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,MAAM,GAAG,SAAS;AAAA,CAAC;AACjE;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1Bf,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,MAAMgB,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChBjB,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAMkB,8BAA8B,GAAGnB,MAAM,CAACG,GAAwC;AAC7F,wBAAwBiB,KAAA;EAAA,IAAC;IAAEf;EAA2C,CAAC,GAAAe,KAAA;EAAA,OAAKf,KAAK,CAAC,KAAK,CAAC;AAAA;AACxF,aAAagB,KAAA;EAAA,IAAC;IAAEhB;EAA2C,CAAC,GAAAgB,KAAA;EAAA,OAAKhB,KAAK,CAACK,IAAI;AAAA;AAC3E;AACA;AACA,aAAaY,MAAA;EAAA,IAAC;IAAEV;EAAqB,CAAC,GAAAU,MAAA;EAAA,OAAMV,oBAAoB,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMW,+BAA+B,GAAGvB,MAAM,CACjDD,MAAM,CAACyB,MACX,CAAiC;AACjC;AACA,wBAAwBC,MAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,MAAA;EAAA,OAAKC,MAAM,IAAI,0BAA0B;AAAA;AAC5E;AACA;AACA,aAAaC,MAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,MAAA;EAAA,OAAMC,OAAO,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AACjD;AACA,MAAMC,MAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,MAAA;EAAA,OACdC,WAAW,IACX7B,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/area-provider/AreaContextProvider.js

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+export const AreaContext = /*#__PURE__*/React.createContext({
+  shouldChangeColor: undefined
+});
+AreaContext.displayName = 'AreaContext';
+const AreaContextProvider = _ref => {
+  let {
+    children,
+    shouldChangeColor = true
+  } = _ref;
+  const providerValue = useMemo(() => ({
+    shouldChangeColor
+  }), [shouldChangeColor]);
+  return /*#__PURE__*/React.createElement(AreaContext.Provider, {
+    value: providerValue
+  }, children);
+};
+AreaContextProvider.displayName = 'AreaContextProvider';
+export default AreaContextProvider;
+//# sourceMappingURL=AreaContextProvider.js.map

package/lib/esm/components/area-provider/AreaContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaContextProvider.js","names":["React","useMemo","AreaContext","createContext","shouldChangeColor","undefined","displayName","AreaContextProvider","_ref","children","providerValue","createElement","Provider","value"],"sources":["../../../../src/components/area-provider/AreaContextProvider.tsx"],"sourcesContent":["import React, { useMemo, type ReactNode } from 'react';\n\ninterface IAreaProviderContext {\n    shouldChangeColor?: boolean;\n}\n\nexport const AreaContext = React.createContext<IAreaProviderContext>({\n    shouldChangeColor: undefined,\n});\n\nAreaContext.displayName = 'AreaContext';\n\ninterface AreaContextProviderProps {\n    children: ReactNode;\n    shouldChangeColor?: boolean;\n}\n\nconst AreaContextProvider = ({ children, shouldChangeColor = true }: AreaContextProviderProps) => {\n    const providerValue = useMemo<IAreaProviderContext>(\n        () => ({\n            shouldChangeColor,\n        }),\n        [shouldChangeColor],\n    );\n\n    return <AreaContext.Provider value={providerValue}>{children}</AreaContext.Provider>;\n};\n\nAreaContextProvider.displayName = 'AreaContextProvider';\n\nexport default AreaContextProvider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAwB,OAAO;AAMtD,OAAO,MAAMC,WAAW,gBAAGF,KAAK,CAACG,aAAa,CAAuB;EACjEC,iBAAiB,EAAEC;AACvB,CAAC,CAAC;AAEFH,WAAW,CAACI,WAAW,GAAG,aAAa;AAOvC,MAAMC,mBAAmB,GAAGC,IAAA,IAAsE;EAAA,IAArE;IAAEC,QAAQ;IAAEL,iBAAiB,GAAG;EAA+B,CAAC,GAAAI,IAAA;EACzF,MAAME,aAAa,GAAGT,OAAO,CACzB,OAAO;IACHG;EACJ,CAAC,CAAC,EACF,CAACA,iBAAiB,CACtB,CAAC;EAED,oBAAOJ,KAAA,CAAAW,aAAA,CAACT,WAAW,CAACU,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAAED,QAA+B,CAAC;AACxF,CAAC;AAEDF,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,eAAeC,mBAAmB","ignoreList":[]}

package/lib/esm/components/badge/Badge.js

@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+import React, { useRef } from 'react';
+import { useElementSize } from '../../hooks/useElementSize';
+import { StyledBadge } from './Badge.styles';
+const Badge = _ref => {
+  let {
+    backgroundColor,
+    children,
+    className,
+    fontColor,
+    onClick
+  } = _ref;
+  const badgeClasses = clsx('beta-chayns-badge ellipsis', className);
+  const badgeRef = useRef(null);
+  const size = useElementSize(badgeRef);
+
+  // Add 4px to the height to account for the padding
+  const borderRadius = size ? `${(size.height + 4) / 2}px` : '15px';
+  const minWidth = size ? `${size.height + 4}px` : '1.65rem';
+  return /*#__PURE__*/React.createElement(StyledBadge, {
+    className: badgeClasses,
+    onClick: onClick,
+    ref: badgeRef,
+    $backgroundColor: backgroundColor,
+    $borderRadius: borderRadius,
+    $cursor: typeof onClick === 'function' ? 'pointer' : 'default',
+    $fontColor: fontColor,
+    $minWidth: minWidth
+  }, children || '​');
+};
+Badge.displayName = 'Badge';
+export default Badge;
+//# sourceMappingURL=Badge.js.map

package/lib/esm/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["clsx","React","useRef","useElementSize","StyledBadge","Badge","_ref","backgroundColor","children","className","fontColor","onClick","badgeClasses","badgeRef","size","borderRadius","height","minWidth","createElement","ref","$backgroundColor","$borderRadius","$cursor","$fontColor","$minWidth","displayName"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, ReactNode, useRef, type CSSProperties, type MouseEventHandler } from 'react';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { StyledBadge } from './Badge.styles';\n\nexport type BadgeProps = {\n    /**\n     * The background color of the badge\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The content of the badge\n     */\n    children?: ReactNode;\n    /**\n     * Additional class names for the badge element\n     */\n    className?: string;\n    /**\n     * The font color of the badge\n     */\n    fontColor?: CSSProperties['color'];\n    /**\n     * Function to be executed when the badge is clicked\n     */\n    onClick?: MouseEventHandler;\n};\n\nconst Badge: FC<BadgeProps> = ({ backgroundColor, children, className, fontColor, onClick }) => {\n    const badgeClasses = clsx('beta-chayns-badge ellipsis', className);\n\n    const badgeRef = useRef<HTMLDivElement>(null);\n\n    const size = useElementSize(badgeRef);\n\n    // Add 4px to the height to account for the padding\n    const borderRadius = size ? `${(size.height + 4) / 2}px` : '15px';\n    const minWidth = size ? `${size.height + 4}px` : '1.65rem';\n\n    return (\n        <StyledBadge\n            className={badgeClasses}\n            onClick={onClick}\n            ref={badgeRef}\n            $backgroundColor={backgroundColor}\n            $borderRadius={borderRadius}\n            $cursor={typeof onClick === 'function' ? 'pointer' : 'default'}\n            $fontColor={fontColor}\n            $minWidth={minWidth}\n        >\n            {children || '​'}\n        </StyledBadge>\n    );\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,IAAmBC,MAAM,QAAoD,OAAO;AAChG,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,gBAAgB;AAyB5C,MAAMC,KAAqB,GAAGC,IAAA,IAAkE;EAAA,IAAjE;IAAEC,eAAe;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,SAAS;IAAEC;EAAQ,CAAC,GAAAL,IAAA;EACvF,MAAMM,YAAY,GAAGZ,IAAI,CAAC,4BAA4B,EAAES,SAAS,CAAC;EAElE,MAAMI,QAAQ,GAAGX,MAAM,CAAiB,IAAI,CAAC;EAE7C,MAAMY,IAAI,GAAGX,cAAc,CAACU,QAAQ,CAAC;;EAErC;EACA,MAAME,YAAY,GAAGD,IAAI,GAAG,GAAG,CAACA,IAAI,CAACE,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM;EACjE,MAAMC,QAAQ,GAAGH,IAAI,GAAG,GAAGA,IAAI,CAACE,MAAM,GAAG,CAAC,IAAI,GAAG,SAAS;EAE1D,oBACIf,KAAA,CAAAiB,aAAA,CAACd,WAAW;IACRK,SAAS,EAAEG,YAAa;IACxBD,OAAO,EAAEA,OAAQ;IACjBQ,GAAG,EAAEN,QAAS;IACdO,gBAAgB,EAAEb,eAAgB;IAClCc,aAAa,EAAEN,YAAa;IAC5BO,OAAO,EAAE,OAAOX,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;IAC/DY,UAAU,EAAEb,SAAU;IACtBc,SAAS,EAAEP;EAAS,GAEnBT,QAAQ,IAAI,GACJ,CAAC;AAEtB,CAAC;AAEDH,KAAK,CAACoB,WAAW,GAAG,OAAO;AAE3B,eAAepB,KAAK","ignoreList":[]}

package/lib/esm/components/badge/Badge.styles.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+export const StyledBadge = styled.div`
+    background-color: ${_ref => {
+  let {
+    $backgroundColor,
+    theme
+  } = _ref;
+  return $backgroundColor ?? theme['secondary-202'];
+}};
+    border-radius: ${_ref2 => {
+  let {
+    $borderRadius
+  } = _ref2;
+  return $borderRadius;
+}};
+    color: ${_ref3 => {
+  let {
+    $fontColor,
+    theme
+  } = _ref3;
+  return $fontColor ?? theme.text;
+}};
+    display: inline-block;
+    font-size: 0.8rem;
+    min-width: ${_ref4 => {
+  let {
+    $minWidth
+  } = _ref4;
+  return $minWidth;
+}};
+    padding: 2px 6px;
+    text-align: center;
+    cursor: ${_ref5 => {
+  let {
+    $cursor
+  } = _ref5;
+  return $cursor;
+}};
+`;
+//# sourceMappingURL=Badge.styles.js.map

package/lib/esm/components/badge/Badge.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.styles.js","names":["styled","StyledBadge","div","_ref","$backgroundColor","theme","_ref2","$borderRadius","_ref3","$fontColor","text","_ref4","$minWidth","_ref5","$cursor"],"sources":["../../../../src/components/badge/Badge.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledBadgeProps = WithTheme<{\n    $cursor: CSSProperties['cursor'];\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius: CSSProperties['borderRadius'];\n    $fontColor?: CSSProperties['color'];\n    $minWidth: CSSProperties['minWidth'];\n}>;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n    background-color: ${({ $backgroundColor, theme }: StyledBadgeProps) =>\n        $backgroundColor ?? theme['secondary-202']};\n    border-radius: ${({ $borderRadius }) => $borderRadius};\n    color: ${({ $fontColor, theme }: StyledBadgeProps) => $fontColor ?? theme.text};\n    display: inline-block;\n    font-size: 0.8rem;\n    min-width: ${({ $minWidth }) => $minWidth};\n    padding: 2px 6px;\n    text-align: center;\n    cursor: ${({ $cursor }) => $cursor};\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAWtC,OAAO,MAAMC,WAAW,GAAGD,MAAM,CAACE,GAAqB;AACvD,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,gBAAgB;IAAEC;EAAwB,CAAC,GAAAF,IAAA;EAAA,OAC9DC,gBAAgB,IAAIC,KAAK,CAAC,eAAe,CAAC;AAAA;AAClD,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAAKC,aAAa;AAAA;AACzD,aAAaC,KAAA;EAAA,IAAC;IAAEC,UAAU;IAAEJ;EAAwB,CAAC,GAAAG,KAAA;EAAA,OAAKC,UAAU,IAAIJ,KAAK,CAACK,IAAI;AAAA;AAClF;AACA;AACA,iBAAiBC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAKC,SAAS;AAAA;AAC7C;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAKC,OAAO;AAAA;AACtC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,138 @@
+import clsx from 'clsx';
+import { AnimatePresence } from 'framer-motion';
+import React, { useMemo } from 'react';
+import { useTheme } from 'styled-components';
+import Icon from '../icon/Icon';
+import { StyledIconWrapper, StyledMotionButton, StyledMotionChildrenWrapper, StyledMotionWaitCursorWrapper } from './Button.styles';
+import WaitCursor from './wait-cursor/WaitCursor';
+const Button = _ref => {
+  let {
+    children,
+    className,
+    icon,
+    isDisabled,
+    isSecondary,
+    onClick,
+    shouldShowWaitCursor,
+    shouldStopPropagation,
+    shouldShowAsSelectButton = false,
+    shouldShowTextAsRobotoMedium = true
+  } = _ref;
+  const handleClick = event => {
+    if (shouldStopPropagation) {
+      event.stopPropagation();
+    }
+    onClick(event);
+  };
+  const buttonClasses = clsx('beta-chayns-button ellipsis', className);
+  const theme = useTheme();
+  const iconColor = useMemo(() => {
+    if (isSecondary) {
+      return theme.text;
+    }
+    return theme.buttonDesign === '2' ? theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white' : theme.buttonColor ?? 'white';
+  }, [isSecondary, theme.buttonBackgroundColor, theme.buttonColor, theme.buttonDesign, theme.text]);
+  const backgroundColor = useMemo(() => {
+    let color;
+    if (isSecondary || shouldShowAsSelectButton) {
+      color = theme['202'];
+    } else {
+      color = theme.buttonBackgroundColor ?? theme['408'];
+    }
+    if (theme.buttonDesign === '2') {
+      color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;
+    }
+    return color;
+  }, [isSecondary, shouldShowAsSelectButton, theme]);
+  const tapStyles = useMemo(() => {
+    if (theme.buttonDesign === '2') {
+      return {
+        backgroundColor: isSecondary || shouldShowAsSelectButton ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)` : `${theme.buttonBackgroundColor ?? ''}40`
+      };
+    }
+    return {
+      opacity: 0.6
+    };
+  }, [isSecondary, shouldShowAsSelectButton, theme]);
+  const hoverStyles = useMemo(() => {
+    if (theme.buttonDesign === '2') {
+      return {
+        backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)`
+      };
+    }
+    return {
+      opacity: 1
+    };
+  }, [theme]);
+  return /*#__PURE__*/React.createElement(StyledMotionButton, {
+    $shouldShowTextAsRobotoMedium: shouldShowTextAsRobotoMedium,
+    $shouldShowAsSelectButton: shouldShowAsSelectButton,
+    className: buttonClasses,
+    disabled: isDisabled,
+    $isDisabled: isDisabled,
+    $hasChildren: !!children,
+    $hasIcon: typeof icon === 'string' && icon !== '',
+    $isSecondary: isSecondary,
+    onClick: handleClick,
+    animate: {
+      backgroundColor,
+      opacity: isDisabled ? 0.5 : 1
+    },
+    whileTap: isDisabled ? {} : {
+      ...tapStyles
+    },
+    whileHover: isDisabled ? {} : {
+      ...hoverStyles
+    }
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, icon && /*#__PURE__*/React.createElement(StyledIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    color: iconColor,
+    icons: [icon]
+  })), shouldShowWaitCursor && /*#__PURE__*/React.createElement(StyledMotionWaitCursorWrapper, {
+    animate: {
+      opacity: 1,
+      width: 40
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "wait-cursor",
+    style: {
+      overflow: 'hidden'
+    },
+    transition: {
+      duration: 0.2
+    }
+  }, /*#__PURE__*/React.createElement(WaitCursor, {
+    color: iconColor ?? 'white',
+    shouldHideBackground: true
+  })), !shouldShowWaitCursor && children && /*#__PURE__*/React.createElement(StyledMotionChildrenWrapper, {
+    animate: {
+      opacity: 1,
+      width: 'auto'
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "children"
+    // style={{ overflow: 'hidden' }}
+    ,
+    transition: {
+      duration: 0.2
+    }
+  }, children)));
+};
+Button.displayName = 'Button';
+export default Button;
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useMemo","useTheme","Icon","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","WaitCursor","Button","_ref","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","handleClick","event","stopPropagation","buttonClasses","theme","iconColor","text","buttonDesign","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","animate","whileTap","whileHover","initial","icons","width","exit","key","style","overflow","transition","duration","shouldHideBackground","displayName"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEventHandler, ReactNode, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nexport type ButtonProps = {\n    /**\n     * The label of the button\n     */\n    children?: ReactNode;\n    /**\n     * Additional class names for the button element\n     */\n    className?: string;\n    /**\n     * An icon that is displayed on the left-hand side of the button text\n     */\n    icon?: string;\n    /**\n     * Disables the button so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Displays the button in the secondary style\n     */\n    isSecondary?: boolean;\n    /**\n     * Function to be executed when the button is clicked\n     */\n    onClick: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Whether the button should be displayed as a selectButton.\n     */\n    shouldShowAsSelectButton?: boolean;\n    /**\n     * Whether the text should be 'Roboto Medium'\n     */\n    shouldShowTextAsRobotoMedium?: boolean;\n    /**\n     * Shows a wait cursor instead of button text\n     */\n    shouldShowWaitCursor?: boolean;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldShowWaitCursor,\n    shouldStopPropagation,\n    shouldShowAsSelectButton = false,\n    shouldShowTextAsRobotoMedium = true,\n}) => {\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    const theme: Theme = useTheme();\n\n    const iconColor = useMemo(() => {\n        if (isSecondary) {\n            return theme.text;\n        }\n\n        return theme.buttonDesign === '2'\n            ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n            : (theme.buttonColor ?? 'white');\n    }, [\n        isSecondary,\n        theme.buttonBackgroundColor,\n        theme.buttonColor,\n        theme.buttonDesign,\n        theme.text,\n    ]);\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary || shouldShowAsSelectButton) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (theme.buttonDesign === '2') {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, shouldShowAsSelectButton, theme]);\n\n    const tapStyles = useMemo(() => {\n        if (theme.buttonDesign === '2') {\n            return {\n                backgroundColor:\n                    isSecondary || shouldShowAsSelectButton\n                        ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n                        : `${theme.buttonBackgroundColor ?? ''}40`,\n            };\n        }\n\n        return { opacity: 0.6 };\n    }, [isSecondary, shouldShowAsSelectButton, theme]);\n\n    const hoverStyles = useMemo(() => {\n        if (theme.buttonDesign === '2') {\n            return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n        }\n\n        return { opacity: 1 };\n    }, [theme]);\n\n    return (\n        <StyledMotionButton\n            $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n            $shouldShowAsSelectButton={shouldShowAsSelectButton}\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            onClick={handleClick}\n            animate={{ backgroundColor, opacity: isDisabled ? 0.5 : 1 }}\n            whileTap={isDisabled ? {} : { ...tapStyles }}\n            whileHover={isDisabled ? {} : { ...hoverStyles }}\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color={iconColor} icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/button/Button.styles.js

@@ -0,0 +1,102 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledMotionButton = styled(motion.button)`
+    ${_ref => {
+  let {
+    $shouldShowTextAsRobotoMedium,
+    $shouldShowAsSelectButton
+  } = _ref;
+  return $shouldShowTextAsRobotoMedium && !$shouldShowAsSelectButton && css`
+            font-size: 110%;
+            font-family: 'Roboto Medium', serif;
+        `;
+}}
+
+    align-items: center;
+
+    ${_ref2 => {
+  let {
+    $isSecondary,
+    $shouldShowAsSelectButton,
+    theme
+  } = _ref2;
+  if ($isSecondary || $shouldShowAsSelectButton) {
+    return css`
+                color: ${theme.text};
+            `;
+  }
+  return css`
+            color: ${theme.buttonDesign === '2' ? theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white' : theme.buttonColor ?? 'white'};
+        `;
+}}
+
+    ${_ref3 => {
+  let {
+    theme,
+    $isSecondary,
+    $shouldShowAsSelectButton
+  } = _ref3;
+  if (theme.buttonDesign === '2' && !$shouldShowAsSelectButton) {
+    return css`
+                border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};
+                box-shadow: none;
+            `;
+  }
+  return css`
+            border: none;
+            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
+        `;
+}}
+
+    border-radius: 3px;
+    cursor: ${_ref4 => {
+  let {
+    $isDisabled
+  } = _ref4;
+  return $isDisabled ? 'default' : 'pointer';
+}};
+    display: inline-flex;
+    line-height: 1.15;
+    min-height: 32px;
+    position: relative;
+    user-select: none;
+    transition: opacity 0.3s ease;
+
+    ${_ref5 => {
+  let {
+    $hasIcon,
+    $hasChildren
+  } = _ref5;
+  if ($hasIcon) {
+    if ($hasChildren) {
+      return css`
+                    padding: 7px 12px 7px 42px;
+                `;
+    }
+    return css`
+                padding: 7px 12px 7px 18px;
+            `;
+  }
+  return css`
+            padding: 7px 12px 7px 12px;
+        `;
+}}
+`;
+export const StyledIconWrapper = styled.span`
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.2);
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 30px;
+`;
+export const StyledMotionChildrenWrapper = styled(motion.div)``;
+export const StyledMotionWaitCursorWrapper = styled(motion.div)`
+    align-items: center;
+    display: flex;
+    justify-content: center;
+`;
+//# sourceMappingURL=Button.styles.js.map

package/lib/esm/components/button/Button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","names":["motion","styled","css","StyledMotionButton","button","_ref","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","_ref2","$isSecondary","theme","text","buttonDesign","buttonColor","buttonBackgroundColor","_ref3","_ref4","$isDisabled","_ref5","$hasIcon","$hasChildren","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledButtonProps = WithTheme<{\n    $hasIcon: boolean;\n    $hasChildren: boolean;\n    $isDisabled?: boolean;\n    $isSecondary?: boolean;\n    $shouldShowTextAsRobotoMedium: boolean;\n    $shouldShowAsSelectButton: boolean;\n}>;\n\nexport const StyledMotionButton = styled(motion.button)<StyledButtonProps>`\n    ${({ $shouldShowTextAsRobotoMedium, $shouldShowAsSelectButton }) =>\n        $shouldShowTextAsRobotoMedium &&\n        !$shouldShowAsSelectButton &&\n        css`\n            font-size: 110%;\n            font-family: 'Roboto Medium', serif;\n        `}\n\n    align-items: center;\n\n    ${({ $isSecondary, $shouldShowAsSelectButton, theme }: StyledButtonProps) => {\n        if ($isSecondary || $shouldShowAsSelectButton) {\n            return css`\n                color: ${theme.text};\n            `;\n        }\n\n        return css`\n            color: ${theme.buttonDesign === '2'\n                ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n                : (theme.buttonColor ?? 'white')};\n        `;\n    }}\n\n    ${({ theme, $isSecondary, $shouldShowAsSelectButton }: StyledButtonProps) => {\n        if (theme.buttonDesign === '2' && !$shouldShowAsSelectButton) {\n            return css`\n                border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};\n                box-shadow: none;\n            `;\n        }\n\n        return css`\n            border: none;\n            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    border-radius: 3px;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    display: inline-flex;\n    line-height: 1.15;\n    min-height: 32px;\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n\n    ${({ $hasIcon, $hasChildren }) => {\n        if ($hasIcon) {\n            if ($hasChildren) {\n                return css`\n                    padding: 7px 12px 7px 42px;\n                `;\n            }\n            return css`\n                padding: 7px 12px 7px 18px;\n            `;\n        }\n        return css`\n            padding: 7px 12px 7px 12px;\n        `;\n    }}\n`;\n\nexport const StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n\nexport const StyledMotionChildrenWrapper = styled(motion.div)<FramerMotionBugFix>``;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAY/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACD,MAAM,CAACI,MAAM,CAAoB;AAC1E,MAAMC,IAAA;EAAA,IAAC;IAAEC,6BAA6B;IAAEC;EAA0B,CAAC,GAAAF,IAAA;EAAA,OAC3DC,6BAA6B,IAC7B,CAACC,yBAAyB,IAC1BL,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT;AACA;AACA;AACA,MAAMM,KAAA,IAA2E;EAAA,IAA1E;IAAEC,YAAY;IAAEF,yBAAyB;IAAEG;EAAyB,CAAC,GAAAF,KAAA;EACpE,IAAIC,YAAY,IAAIF,yBAAyB,EAAE;IAC3C,OAAOL,GAAG;AACtB,yBAAyBQ,KAAK,CAACC,IAAI;AACnC,aAAa;EACL;EAEA,OAAOT,GAAG;AAClB,qBAAqBQ,KAAK,CAACE,YAAY,KAAK,GAAG,GAC5BF,KAAK,CAACG,WAAW,IAAIH,KAAK,CAACI,qBAAqB,IAAI,OAAO,GAC3DJ,KAAK,CAACG,WAAW,IAAI,OAAQ;AAChD,SAAS;AACL,CAAC;AACL;AACA,MAAME,KAAA,IAA2E;EAAA,IAA1E;IAAEL,KAAK;IAAED,YAAY;IAAEF;EAA6C,CAAC,GAAAQ,KAAA;EACpE,IAAIL,KAAK,CAACE,YAAY,KAAK,GAAG,IAAI,CAACL,yBAAyB,EAAE;IAC1D,OAAOL,GAAG;AACtB,oCAAoCO,YAAY,GAAGC,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACI,qBAAqB;AAC7F;AACA,aAAa;EACL;EAEA,OAAOZ,GAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,cAAcc,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAMC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAgC;EAAA,IAA/B;IAAEC,QAAQ;IAAEC;EAAa,CAAC,GAAAF,KAAA;EACzB,IAAIC,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,OAAOlB,GAAG;AAC1B;AACA,iBAAiB;IACL;IACA,OAAOA,GAAG;AACtB;AACA,aAAa;EACL;EACA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAED,OAAO,MAAMmB,iBAAiB,GAAGpB,MAAM,CAACqB,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGtB,MAAM,CAACD,MAAM,CAACwB,GAAG,CAAqB,EAAE;AAEnF,OAAO,MAAMC,6BAA6B,GAAGxB,MAAM,CAACD,MAAM,CAACwB,GAAG,CAAqB;AACnF;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/button/wait-cursor/WaitCursor.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StyledWaitCursor, StyledWaitCursorBackground, StyledWaitCursorWaitCursor } from './WaitCursor.styles';
+const WaitCursor = _ref => {
+  let {
+    color,
+    shouldHideBackground = false,
+    shouldHideWaitCursor = false
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledWaitCursor, {
+    $shouldShowWaitCursor: !shouldHideWaitCursor
+  }, /*#__PURE__*/React.createElement(StyledWaitCursorWaitCursor, {
+    $color: color
+  }), !shouldHideBackground && /*#__PURE__*/React.createElement(StyledWaitCursorBackground, null));
+};
+WaitCursor.displayName = 'WaitCursor';
+export default WaitCursor;
+//# sourceMappingURL=WaitCursor.js.map

package/lib/esm/components/button/wait-cursor/WaitCursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaitCursor.js","names":["React","StyledWaitCursor","StyledWaitCursorBackground","StyledWaitCursorWaitCursor","WaitCursor","_ref","color","shouldHideBackground","shouldHideWaitCursor","createElement","$shouldShowWaitCursor","$color","displayName"],"sources":["../../../../../src/components/button/wait-cursor/WaitCursor.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport {\n    StyledWaitCursor,\n    StyledWaitCursorBackground,\n    StyledWaitCursorWaitCursor,\n} from './WaitCursor.styles';\n\nexport type WaitCursorProps = {\n    color: string;\n    shouldHideBackground?: boolean;\n    shouldHideWaitCursor?: boolean;\n};\n\nconst WaitCursor: FC<WaitCursorProps> = ({\n    color,\n    shouldHideBackground = false,\n    shouldHideWaitCursor = false,\n}) => (\n    <StyledWaitCursor $shouldShowWaitCursor={!shouldHideWaitCursor}>\n        <StyledWaitCursorWaitCursor $color={color} />\n        {!shouldHideBackground && <StyledWaitCursorBackground />}\n    </StyledWaitCursor>\n);\n\nWaitCursor.displayName = 'WaitCursor';\n\nexport default WaitCursor;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,SACIC,gBAAgB,EAChBC,0BAA0B,EAC1BC,0BAA0B,QACvB,qBAAqB;AAQ5B,MAAMC,UAA+B,GAAGC,IAAA;EAAA,IAAC;IACrCC,KAAK;IACLC,oBAAoB,GAAG,KAAK;IAC5BC,oBAAoB,GAAG;EAC3B,CAAC,GAAAH,IAAA;EAAA,oBACGL,KAAA,CAAAS,aAAA,CAACR,gBAAgB;IAACS,qBAAqB,EAAE,CAACF;EAAqB,gBAC3DR,KAAA,CAAAS,aAAA,CAACN,0BAA0B;IAACQ,MAAM,EAAEL;EAAM,CAAE,CAAC,EAC5C,CAACC,oBAAoB,iBAAIP,KAAA,CAAAS,aAAA,CAACP,0BAA0B,MAAE,CACzC,CAAC;AAAA,CACtB;AAEDE,UAAU,CAACQ,WAAW,GAAG,YAAY;AAErC,eAAeR,UAAU","ignoreList":[]}

package/lib/esm/components/button/wait-cursor/WaitCursor.styles.js

@@ -0,0 +1,53 @@
+import styled, { keyframes } from 'styled-components';
+export const StyledWaitCursor = styled.div`
+    position: relative;
+    height: 26px;
+    width: 26px;
+    opacity: ${_ref => {
+  let {
+    $shouldShowWaitCursor
+  } = _ref;
+  return $shouldShowWaitCursor ? 1 : 0;
+}};
+`;
+export const StyledWaitCursorBackground = styled.div`
+    background-color: white;
+    border-radius: 50%;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    box-shadow:
+        0 4px 12px 0 rgba(0, 0, 0, 0.2),
+        0 1px 1px rgba(0, 0, 0, 0.2);
+`;
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+export const StyledWaitCursorWaitCursor = styled.div`
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    z-index: 2;
+    border-style: solid;
+    border-width: 3px;
+    border-color: ${_ref2 => {
+  let {
+    $color
+  } = _ref2;
+  return $color;
+}};
+    height: ${26 - 10}px;
+    width: ${26 - 10}px;
+    border-radius: 50%;
+    display: inline-block;
+    border-top: 3px solid transparent;
+
+    animation: ${spin} 1s linear infinite;
+`;
+//# sourceMappingURL=WaitCursor.styles.js.map

package/lib/esm/components/button/wait-cursor/WaitCursor.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaitCursor.styles.js","names":["styled","keyframes","StyledWaitCursor","div","_ref","$shouldShowWaitCursor","StyledWaitCursorBackground","spin","StyledWaitCursorWaitCursor","_ref2","$color"],"sources":["../../../../../src/components/button/wait-cursor/WaitCursor.styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledWaitCursorProps = WithTheme<{\n    $shouldShowWaitCursor: boolean;\n}>;\n\nexport const StyledWaitCursor = styled.div<StyledWaitCursorProps>`\n    position: relative;\n    height: 26px;\n    width: 26px;\n    opacity: ${({ $shouldShowWaitCursor }) => ($shouldShowWaitCursor ? 1 : 0)};\n`;\n\ntype StyledWaitCursorBackgroundProps = WithTheme<unknown>;\n\nexport const StyledWaitCursorBackground = styled.div<StyledWaitCursorBackgroundProps>`\n    background-color: white;\n    border-radius: 50%;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    z-index: 1;\n    box-shadow:\n        0 4px 12px 0 rgba(0, 0, 0, 0.2),\n        0 1px 1px rgba(0, 0, 0, 0.2);\n`;\n\ntype StyledWaitCursorWaitCursorProps = WithTheme<{ $color: string }>;\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`;\n\nexport const StyledWaitCursorWaitCursor = styled.div<StyledWaitCursorWaitCursorProps>`\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    z-index: 2;\n    border-style: solid;\n    border-width: 3px;\n    border-color: ${({ $color }) => $color};\n    height: ${26 - 10}px;\n    width: ${26 - 10}px;\n    border-radius: 50%;\n    display: inline-block;\n    border-top: 3px solid transparent;\n\n    animation: ${spin} 1s linear infinite;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AAOrD,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE;AACA;AACA;AACA,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EAAA,OAAMC,qBAAqB,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AAC7E,CAAC;AAID,OAAO,MAAMC,0BAA0B,GAAGN,MAAM,CAACG,GAAoC;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,MAAMI,IAAI,GAAGN,SAAS;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMO,0BAA0B,GAAGR,MAAM,CAACG,GAAoC;AACrF;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBM,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AAC1C,cAAc,EAAE,GAAG,EAAE;AACrB,aAAa,EAAE,GAAG,EAAE;AACpB;AACA;AACA;AACA;AACA,iBAAiBH,IAAI;AACrB,CAAC","ignoreList":[]}

package/lib/esm/components/checkbox/Checkbox.js

@@ -0,0 +1,41 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useUuid } from '../../hooks/uuid';
+import { getHeightOfSingleTextLine } from '../../utils/calculate';
+import { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';
+const Checkbox = _ref => {
+  let {
+    children,
+    isChecked,
+    isDisabled,
+    labelClassName,
+    onChange,
+    shouldShowAsSwitch,
+    shouldShowCentered = false
+  } = _ref;
+  const [isActive, setIsActive] = useState(isChecked ?? false);
+  const handleChange = useCallback(event => {
+    setIsActive(event.target.checked);
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  const uuid = useUuid();
+  const lineHeight = useMemo(() => !children || shouldShowCentered ? undefined : getHeightOfSingleTextLine(), [children, shouldShowCentered]);
+  return /*#__PURE__*/React.createElement(StyledCheckbox, null, /*#__PURE__*/React.createElement(StyledCheckboxInput, {
+    checked: isChecked,
+    disabled: isDisabled,
+    id: uuid,
+    onChange: handleChange,
+    type: "checkbox"
+  }), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
+    className: labelClassName,
+    htmlFor: uuid,
+    $isChecked: isChecked ?? isActive,
+    $isDisabled: isDisabled,
+    $shouldShowAsSwitch: shouldShowAsSwitch,
+    $lineHeight: lineHeight
+  }, children));
+};
+Checkbox.displayName = 'Checkbox';
+export default Checkbox;
+//# sourceMappingURL=Checkbox.js.map