@chayns-components/core 5.0.0-beta.104 → 5.0.0-beta.1040

package/lib/esm/components/popup/popup-content/PopupContent.styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+export const StyledPopupContent = styled.div`
+    overflow: hidden;
+    padding: 6px 12px;
+`;
+//# sourceMappingURL=PopupContent.styles.js.map

package/lib/esm/components/popup/popup-content/PopupContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.styles.js","names":["styled","StyledPopupContent","div"],"sources":["../../../../../src/components/popup/popup-content/PopupContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledPopupContent = styled.div`\n    overflow: hidden;\n    padding: 6px 12px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAG;AAC5C;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.js

@@ -0,0 +1,72 @@
+import { useSite } from 'chayns-api';
+import React from 'react';
+import { PopupAlignment } from '../../../types/popup';
+import { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';
+const PopupContentWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    alignment,
+    children,
+    coordinates,
+    offset,
+    width,
+    onMouseLeave,
+    shouldScrollWithContent,
+    onMouseEnter
+  } = _ref;
+  const {
+    colorMode
+  } = useSite();
+  const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;
+  const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;
+  const isTopRightAlignment = alignment === PopupAlignment.TopRight;
+  const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;
+  const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;
+  const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;
+  const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;
+  const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;
+  return /*#__PURE__*/React.createElement(StyledMotionPopupContentWrapper, {
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    $colorMode: colorMode,
+    $offset: offset,
+    exit: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    initial: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    $position: alignment,
+    $shouldScrollWithContent: shouldScrollWithContent,
+    ref: ref,
+    "data-ispopup": "true",
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    style: {
+      left: coordinates.x,
+      top: coordinates.y,
+      width
+    },
+    transition: {
+      type: 'tween'
+    },
+    transformTemplate: _ref2 => {
+      let {
+        y = '0px'
+      } = _ref2;
+      return `
+                    translateX(${percentageOffsetX}%)
+                    translateY(${percentageOffsetY}%)
+                    translateX(${anchorOffsetX}px)
+                    translateY(${anchorOffsetY}px)
+                    translateY(${y})
+                `;
+    }
+  }, children);
+});
+PopupContentWrapper.displayName = 'PopupContent';
+export default PopupContentWrapper;
+//# sourceMappingURL=PopupContentWrapper.js.map

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContentWrapper.js","names":["useSite","React","PopupAlignment","StyledMotionPopupContentWrapper","PopupContentWrapper","forwardRef","_ref","ref","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","colorMode","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","transformTemplate","_ref2","displayName"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n    shouldScrollWithContent: boolean;\n    width: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    (\n        {\n            alignment,\n            children,\n            coordinates,\n            offset,\n            width,\n            onMouseLeave,\n            shouldScrollWithContent,\n            onMouseEnter,\n        },\n        ref,\n    ) => {\n        const { colorMode } = useSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldScrollWithContent={shouldScrollWithContent}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y, width }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                {children}\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SAASC,+BAA+B,QAAQ,8BAA8B;AAa9E,MAAMC,mBAAmB,gBAAGH,KAAK,CAACI,UAAU,CACxC,CAAAC,IAAA,EAWIC,GAAG,KACF;EAAA,IAXD;IACIC,SAAS;IACTC,QAAQ;IACRC,WAAW;IACXC,MAAM;IACNC,KAAK;IACLC,YAAY;IACZC,uBAAuB;IACvBC;EACJ,CAAC,GAAAT,IAAA;EAGD,MAAM;IAAEU;EAAU,CAAC,GAAGhB,OAAO,CAAC,CAAC;EAE/B,MAAMiB,qBAAqB,GAAGT,SAAS,KAAKN,cAAc,CAACgB,UAAU;EACrE,MAAMC,kBAAkB,GAAGX,SAAS,KAAKN,cAAc,CAACkB,OAAO;EAC/D,MAAMC,mBAAmB,GAAGb,SAAS,KAAKN,cAAc,CAACoB,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIpB,KAAA,CAAA2B,aAAA,CAACzB,+BAA+B;IAC5B0B,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEhB,SAAU;IACtBiB,OAAO,EAAEtB,MAAO;IAChBuB,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCQ,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CS,SAAS,EAAE5B,SAAU;IACrB6B,wBAAwB,EAAEvB,uBAAwB;IAClDP,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBQ,YAAY,EAAEA,YAAa;IAC3BF,YAAY,EAAEA,YAAa;IAC3ByB,KAAK,EAAE;MAAEC,IAAI,EAAE7B,WAAW,CAAC8B,CAAC;MAAEC,GAAG,EAAE/B,WAAW,CAACqB,CAAC;MAAEnB;IAAM,CAAE;IAC1D8B,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEd,CAAC,GAAG;MAAM,CAAC,GAAAc,KAAA;MAAA,OAAK;AACtD,iCAAiCtB,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCK,CAAC;AAClC,iBAAiB;IAAA;EAAC,GAEDtB,QAC4B,CAAC;AAE1C,CACJ,CAAC;AAEDL,mBAAmB,CAAC0C,WAAW,GAAG,cAAc;AAEhD,eAAe1C,mBAAmB","ignoreList":[]}

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js

@@ -0,0 +1,87 @@
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+import { PopupAlignment } from '../../../types/popup';
+export const StyledMotionPopupContentWrapper = styled(motion.div)`
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['000'];
+}};
+    border-radius: 3px;
+    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+    z-index: 100;
+    position: ${_ref3 => {
+  let {
+    $shouldScrollWithContent
+  } = _ref3;
+  return $shouldScrollWithContent ? 'absolute' : 'fixed';
+}};
+    pointer-events: all;
+
+    &::after {
+        background-color: inherit;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
+        content: '';
+        height: 14px;
+        position: absolute;
+        width: 14px;
+        z-index: -2;
+
+        ${_ref4 => {
+  let {
+    $position,
+    $offset
+  } = _ref4;
+  switch ($position) {
+    case PopupAlignment.TopLeft:
+      return css`
+                        bottom: -7px;
+                        right: ${13 + $offset}px;
+                        transform: rotate(45deg);
+                    `;
+    case PopupAlignment.BottomLeft:
+      return css`
+                        top: -7px;
+                        right: ${13 + $offset}px;
+                        transform: rotate(225deg);
+                    `;
+    case PopupAlignment.TopRight:
+      return css`
+                        transform: rotate(45deg);
+                        bottom: -7px;
+                        left: ${13 + $offset}px;
+                    `;
+    case PopupAlignment.BottomRight:
+      return css`
+                        transform: rotate(225deg);
+                        top: -7px;
+                        left: ${13 + $offset}px;
+                    `;
+    default:
+      return undefined;
+  }
+}}
+    }
+
+    &::before {
+        background-color: inherit;
+        border-radius: 3px;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+    }
+`;
+//# sourceMappingURL=PopupContentWrapper.styles.js.map

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContentWrapper.styles.js","names":["motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","_ref","theme","_ref2","text","_ref3","$shouldScrollWithContent","_ref4","$position","$offset","TopLeft","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n    $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: ${({ $shouldScrollWithContent }) =>\n        $shouldScrollWithContent ? 'absolute' : 'fixed'};\n    pointer-events: all;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AAUrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAuC;AACvC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA4C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAA4C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA;AAC5E;AACA,gBAAgBC,KAAA;EAAA,IAAC;IAAEC;EAAyB,CAAC,GAAAD,KAAA;EAAA,OACrCC,wBAAwB,GAAG,UAAU,GAAG,OAAO;AAAA;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAA4B;EAAA,IAA3B;IAAEC,SAAS;IAAEC;EAAQ,CAAC,GAAAF,KAAA;EACrB,QAAQC,SAAS;IACb,KAAKV,cAAc,CAACY,OAAO;MACvB,OAAOb,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGY,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKX,cAAc,CAACa,UAAU;MAC1B,OAAOd,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGY,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKX,cAAc,CAACc,QAAQ;MACxB,OAAOf,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGY,OAAO;AAC5C,qBAAqB;IACL,KAAKX,cAAc,CAACe,WAAW;MAC3B,OAAOhB,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGY,OAAO;AAC5C,qBAAqB;IACL;MACI,OAAOK,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.js

@@ -0,0 +1,67 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useUuid } from '../../hooks/uuid';
+import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper } from './ProgressBar.styles';
+const ProgressBar = _ref => {
+  let {
+    percentage,
+    label,
+    shouldHideProgress = false
+  } = _ref;
+  const [internalPercentage, setInternalPercentage] = useState(0);
+  const uuid = useUuid();
+  useEffect(() => {
+    if (typeof percentage !== 'number') {
+      return;
+    }
+    if (percentage >= 0 && percentage <= 100) {
+      setInternalPercentage(percentage);
+    }
+  }, [percentage]);
+  const progressBar = useMemo(() => {
+    if (shouldHideProgress) {
+      return null;
+    }
+    if (typeof percentage !== 'number') {
+      return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
+        key: `progress-bar-loop__${uuid}`,
+        initial: {
+          width: '200px',
+          left: '-200px'
+        },
+        animate: {
+          width: '200px',
+          left: '100%'
+        },
+        exit: {
+          width: '200px',
+          left: '100%'
+        },
+        transition: {
+          type: 'tween',
+          repeat: Infinity,
+          repeatDelay: 0,
+          duration: 1
+        }
+      }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, null));
+    }
+    return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
+      key: `progress-bar__${uuid}`,
+      initial: {
+        width: '0%'
+      },
+      animate: {
+        width: `${internalPercentage}%`
+      },
+      exit: {
+        width: '0%'
+      },
+      transition: {
+        type: 'tween'
+      }
+    }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, null));
+  }, [internalPercentage, percentage, shouldHideProgress, uuid]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, null, label)), [progressBar, label]);
+};
+ProgressBar.displayName = 'ProgressBar';
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map

package/lib/esm/components/progress-bar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","names":["React","useEffect","useMemo","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","ProgressBar","_ref","percentage","label","shouldHideProgress","internalPercentage","setInternalPercentage","uuid","progressBar","createElement","key","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","displayName"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n} from './ProgressBar.styles';\n\nexport type ProgressBarProps = {\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: number;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({ percentage, label, shouldHideProgress = false }) => {\n    const [internalPercentage, setInternalPercentage] = useState(0);\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (typeof percentage !== 'number') {\n            return;\n        }\n\n        if (percentage >= 0 && percentage <= 100) {\n            setInternalPercentage(percentage);\n        }\n    }, [percentage]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (typeof percentage !== 'number') {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        key={`progress-bar-loop__${uuid}`}\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper>\n                <StyledMotionProgressBarProgress\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${internalPercentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                />\n                <StyledProgressBarBackground />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [internalPercentage, percentage, shouldHideProgress, uuid]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && <StyledProgressBarLabel>{label}</StyledProgressBarLabel>}\n            </StyledProgressBar>\n        ),\n        [progressBar, label],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SACIC,+BAA+B,EAC/BC,iBAAiB,EACjBC,2BAA2B,EAC3BC,sBAAsB,EACtBC,gCAAgC,QAC7B,sBAAsB;AAiB7B,MAAMC,WAAiC,GAAGC,IAAA,IAAuD;EAAA,IAAtD;IAAEC,UAAU;IAAEC,KAAK;IAAEC,kBAAkB,GAAG;EAAM,CAAC,GAAAH,IAAA;EACxF,MAAM,CAACI,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGb,QAAQ,CAAC,CAAC,CAAC;EAC/D,MAAMc,IAAI,GAAGb,OAAO,CAAC,CAAC;EAEtBH,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOW,UAAU,KAAK,QAAQ,EAAE;MAChC;IACJ;IAEA,IAAIA,UAAU,IAAI,CAAC,IAAIA,UAAU,IAAI,GAAG,EAAE;MACtCI,qBAAqB,CAACJ,UAAU,CAAC;IACrC;EACJ,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMM,WAAW,GAAGhB,OAAO,CAAC,MAAM;IAC9B,IAAIY,kBAAkB,EAAE;MACpB,OAAO,IAAI;IACf;IAEA,IAAI,OAAOF,UAAU,KAAK,QAAQ,EAAE;MAChC,oBACIZ,KAAA,CAAAmB,aAAA,CAACV,gCAAgC,qBAC7BT,KAAA,CAAAmB,aAAA,CAACd,+BAA+B;QAC5Be,GAAG,EAAE,sBAAsBH,IAAI,EAAG;QAClCI,OAAO,EAAE;UAAEC,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAS,CAAE;QAC5CC,OAAO,EAAE;UAAEF,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QAC1CE,IAAI,EAAE;UAAEH,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QACvCG,UAAU,EAAE;UACRC,IAAI,EAAE,OAAO;UACbC,MAAM,EAAEC,QAAQ;UAChBC,WAAW,EAAE,CAAC;UACdC,QAAQ,EAAE;QACd;MAAE,CACL,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACZ,2BAA2B,MAAE,CACA,CAAC;IAE3C;IAEA,oBACIP,KAAA,CAAAmB,aAAA,CAACV,gCAAgC,qBAC7BT,KAAA,CAAAmB,aAAA,CAACd,+BAA+B;MAC5Be,GAAG,EAAE,iBAAiBH,IAAI,EAAG;MAC7BI,OAAO,EAAE;QAAEC,KAAK,EAAE;MAAK,CAAE;MACzBE,OAAO,EAAE;QAAEF,KAAK,EAAE,GAAGP,kBAAkB;MAAI,CAAE;MAC7CU,IAAI,EAAE;QAAEH,KAAK,EAAE;MAAK,CAAE;MACtBI,UAAU,EAAE;QAAEC,IAAI,EAAE;MAAQ;IAAE,CACjC,CAAC,eACF3B,KAAA,CAAAmB,aAAA,CAACZ,2BAA2B,MAAE,CACA,CAAC;EAE3C,CAAC,EAAE,CAACQ,kBAAkB,EAAEH,UAAU,EAAEE,kBAAkB,EAAEG,IAAI,CAAC,CAAC;EAE9D,OAAOf,OAAO,CACV,mBACIF,KAAA,CAAAmB,aAAA,CAACb,iBAAiB,QACbY,WAAW,EACXL,KAAK,iBAAIb,KAAA,CAAAmB,aAAA,CAACX,sBAAsB,QAAEK,KAA8B,CAClD,CACtB,EACD,CAACK,WAAW,EAAEL,KAAK,CACvB,CAAC;AACL,CAAC;AAEDH,WAAW,CAACsB,WAAW,GAAG,aAAa;AAEvC,eAAetB,WAAW","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.styles.js

@@ -0,0 +1,46 @@
+import { motion } from 'motion/react';
+import styled from 'styled-components';
+export const StyledProgressBar = styled.div`
+    position: relative;
+`;
+export const StyledProgressBarBackground = styled.div`
+    height: 10px;
+    width: 100%;
+    border-radius: 2px;
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['104'];
+}};
+`;
+export const StyledProgressBarProgressWrapper = styled.div`
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 10px;
+    border-radius: 2px;
+`;
+export const StyledMotionProgressBarProgress = styled(motion.div)`
+    height: 10px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.headline;
+}};
+`;
+export const StyledProgressBarLabel = styled.div`
+    font-size: 85%;
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.headline;
+}};
+`;
+//# sourceMappingURL=ProgressBar.styles.js.map

package/lib/esm/components/progress-bar/ProgressBar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","StyledProgressBar","div","StyledProgressBarBackground","_ref","theme","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","_ref2","headline","StyledProgressBarLabel","_ref3"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<unknown>;\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 10px;\n    width: 100%;\n    border-radius: 2px;\n    background-color: ${({ theme }: StyledProgressBarBackgroundProps) => theme['104']};\n`;\n\nexport const StyledProgressBarProgressWrapper = styled.div`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: 10px;\n    border-radius: 2px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<unknown>;\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 10px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    background-color: ${({ theme }: StyledProgressBarProgressProps) => theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<unknown>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme }: StyledProgressBarLabelProps) => theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAG;AAC3C;AACA,CAAC;AAGD,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAqC;AACvF;AACA;AACA;AACA,wBAAwBE,IAAA;EAAA,IAAC;IAAEC;EAAwC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACrF,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGN,MAAM,CAACE,GAAG;AAC1D;AACA;AACA;AACA;AACA;AACA,CAAC;AAGD,OAAO,MAAMK,+BAA+B,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA,wBAAwBM,KAAA;EAAA,IAAC;IAAEH;EAAsC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,QAAQ;AAAA;AACrF,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGV,MAAM,CAACE,GAAgC;AAC7E;AACA,aAAaS,KAAA;EAAA,IAAC;IAAEN;EAAmC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACI,QAAQ;AAAA;AACvE,CAAC","ignoreList":[]}

package/lib/esm/components/radio-button/RadioButton.js

@@ -0,0 +1,135 @@
+import { AnimatePresence } from 'motion/react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';
+import { StyledLabelWrapper, StyledMotionRadioButtonChildren, StyledRadioButton, StyledRadioButtonCheckBox, StyledRadioButtonCheckBoxMark, StyledRadioButtonLabel, StyledRadioButtonPseudoCheckBox, StyledRadioButtonWrapper } from './RadioButton.styles';
+const RadioButton = _ref => {
+  let {
+    children,
+    shouldShowRightElementOnlyOnChecked = false,
+    label,
+    id,
+    rightElement,
+    isDisabled = false
+  } = _ref;
+  const {
+    selectedRadioButtonId,
+    updateSelectedRadioButtonId,
+    radioButtonRightElements,
+    updateHasRightElement,
+    radioButtonsCanBeUnchecked
+  } = useContext(RadioButtonGroupContext);
+  const [internalIsChecked, setInternalIsChecked] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const isInGroup = typeof updateSelectedRadioButtonId === 'function';
+  const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
+  const uncheckable = radioButtonsCanBeUnchecked;
+  const handleClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    if (uncheckable) {
+      if (updateSelectedRadioButtonId) {
+        updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);
+      }
+      setInternalIsChecked(prev => !prev);
+      return;
+    }
+    if (typeof updateSelectedRadioButtonId === 'function') {
+      updateSelectedRadioButtonId(id);
+    }
+    setInternalIsChecked(true);
+  }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);
+  const handleMouseEnter = useCallback(() => {
+    if (!isDisabled) {
+      setIsHovered(true);
+    }
+  }, [isDisabled]);
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  const radioButtonRightElementMargin = useMemo(() => {
+    if (!radioButtonRightElements) {
+      return 'NONE';
+    }
+    const index = radioButtonRightElements.findIndex(element => element.id === id);
+    if (index < 0) {
+      return 'NONE';
+    }
+    const prevButton = radioButtonRightElements[index - 1];
+    const currentButton = radioButtonRightElements[index];
+    const nextButton = radioButtonRightElements[index + 1];
+    if (!currentButton?.hasRightElement) {
+      return 'NONE';
+    }
+    switch (true) {
+      case prevButton?.hasRightElement && !nextButton?.hasRightElement:
+        return 'TOP';
+      case !prevButton?.hasRightElement && nextButton?.hasRightElement:
+        return 'BOTTOM';
+      case currentButton?.hasRightElement && !nextButton?.hasRightElement && !prevButton?.hasRightElement:
+        return 'NONE';
+      default:
+        return 'BOTH';
+    }
+  }, [id, radioButtonRightElements]);
+  const shouldShowRightElement = useMemo(() => {
+    if (rightElement) {
+      if (shouldShowRightElementOnlyOnChecked) {
+        return isMarked;
+      }
+      return true;
+    }
+    return false;
+  }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);
+  useEffect(() => {
+    if (typeof updateHasRightElement === 'function') {
+      window.setTimeout(() => {
+        updateHasRightElement(id, shouldShowRightElement);
+      }, 10);
+    }
+  }, [id, shouldShowRightElement, updateHasRightElement]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledRadioButton, {
+    $isDisabled: isDisabled,
+    $radioButtonRightElementMargin: radioButtonRightElementMargin
+  }, /*#__PURE__*/React.createElement(StyledRadioButtonWrapper, null, /*#__PURE__*/React.createElement(StyledRadioButtonPseudoCheckBox, {
+    $isDisabled: isDisabled,
+    $isChecked: isMarked,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(StyledRadioButtonCheckBoxMark, {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    $isHovered: isHovered,
+    $isSelected: isMarked,
+    $isDisabled: isDisabled
+  })), /*#__PURE__*/React.createElement(StyledRadioButtonCheckBox, {
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    disabled: isDisabled,
+    $isDisabled: isDisabled,
+    type: "radio",
+    checked: isMarked,
+    onChange: () => {}
+  }), /*#__PURE__*/React.createElement(StyledLabelWrapper, null, label && /*#__PURE__*/React.createElement(StyledRadioButtonLabel, {
+    $isDisabled: isDisabled,
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, label), shouldShowRightElement && rightElement)), children && /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/React.createElement(StyledMotionRadioButtonChildren, {
+    animate: isMarked ? {
+      opacity: 1,
+      height: 'auto'
+    } : {
+      opacity: 0,
+      height: 0
+    },
+    transition: {
+      duration: 0.2
+    }
+  }, children))), [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label, radioButtonRightElementMargin, rightElement, shouldShowRightElement]);
+};
+RadioButton.displayName = 'RadioButton';
+export default RadioButton;
+//# sourceMappingURL=RadioButton.js.map

package/lib/esm/components/radio-button/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useState","RadioButtonGroupContext","StyledLabelWrapper","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","RadioButton","_ref","children","shouldShowRightElementOnlyOnChecked","label","id","rightElement","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonRightElements","updateHasRightElement","radioButtonsCanBeUnchecked","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","handleClick","undefined","prev","handleMouseEnter","handleMouseLeave","radioButtonRightElementMargin","index","findIndex","element","prevButton","currentButton","nextButton","hasRightElement","shouldShowRightElement","window","setTimeout","createElement","$isDisabled","$radioButtonRightElementMargin","$isChecked","onClick","onMouseEnter","onMouseLeave","$isHovered","$isSelected","disabled","type","checked","onChange","initial","animate","opacity","height","transition","duration","displayName"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    FC,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n    StyledLabelWrapper,\n    StyledMotionRadioButtonChildren,\n    StyledRadioButton,\n    StyledRadioButtonCheckBox,\n    StyledRadioButtonCheckBoxMark,\n    StyledRadioButtonLabel,\n    StyledRadioButtonPseudoCheckBox,\n    StyledRadioButtonWrapper,\n} from './RadioButton.styles';\n\nexport type RadioButtonProps = {\n    /**\n     * The children that should be displayed after the RadioButton is checked.\n     */\n    children?: ReactNode;\n    /**\n     * whether the RadioButton should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * The id of the radio button.\n     */\n    id: string;\n    /**\n     * The label that should be displayed next to the radio button.\n     */\n    label?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the label.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Whether the rightElement should only be displayed when the RadioButton is checked\n     */\n    shouldShowRightElementOnlyOnChecked?: boolean;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n    children,\n    shouldShowRightElementOnlyOnChecked = false,\n    label,\n    id,\n    rightElement,\n    isDisabled = false,\n}) => {\n    const {\n        selectedRadioButtonId,\n        updateSelectedRadioButtonId,\n        radioButtonRightElements,\n        updateHasRightElement,\n        radioButtonsCanBeUnchecked,\n    } = useContext(RadioButtonGroupContext);\n\n    const [internalIsChecked, setInternalIsChecked] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n\n    const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n    const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n    const uncheckable = radioButtonsCanBeUnchecked;\n\n    const handleClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (uncheckable) {\n            if (updateSelectedRadioButtonId) {\n                updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n            }\n            setInternalIsChecked((prev) => !prev);\n            return;\n        }\n        if (typeof updateSelectedRadioButtonId === 'function') {\n            updateSelectedRadioButtonId(id);\n        }\n        setInternalIsChecked(true);\n    }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n    const handleMouseEnter = useCallback(() => {\n        if (!isDisabled) {\n            setIsHovered(true);\n        }\n    }, [isDisabled]);\n\n    const handleMouseLeave = () => {\n        setIsHovered(false);\n    };\n\n    const radioButtonRightElementMargin: RadioButtonRightElementMargin = useMemo(() => {\n        if (!radioButtonRightElements) {\n            return 'NONE';\n        }\n\n        const index = radioButtonRightElements.findIndex((element) => element.id === id);\n\n        if (index < 0) {\n            return 'NONE';\n        }\n\n        const prevButton = radioButtonRightElements[index - 1];\n        const currentButton = radioButtonRightElements[index];\n        const nextButton = radioButtonRightElements[index + 1];\n\n        if (!currentButton?.hasRightElement) {\n            return 'NONE';\n        }\n\n        switch (true) {\n            case prevButton?.hasRightElement && !nextButton?.hasRightElement:\n                return 'TOP';\n            case !prevButton?.hasRightElement && nextButton?.hasRightElement:\n                return 'BOTTOM';\n            case currentButton?.hasRightElement &&\n                !nextButton?.hasRightElement &&\n                !prevButton?.hasRightElement:\n                return 'NONE';\n            default:\n                return 'BOTH';\n        }\n    }, [id, radioButtonRightElements]);\n\n    const shouldShowRightElement = useMemo(() => {\n        if (rightElement) {\n            if (shouldShowRightElementOnlyOnChecked) {\n                return isMarked;\n            }\n\n            return true;\n        }\n\n        return false;\n    }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);\n\n    useEffect(() => {\n        if (typeof updateHasRightElement === 'function') {\n            window.setTimeout(() => {\n                updateHasRightElement(id, shouldShowRightElement);\n            }, 10);\n        }\n    }, [id, shouldShowRightElement, updateHasRightElement]);\n\n    return useMemo(\n        () => (\n            <StyledRadioButton\n                $isDisabled={isDisabled}\n                $radioButtonRightElementMargin={radioButtonRightElementMargin}\n            >\n                <StyledRadioButtonWrapper>\n                    <StyledRadioButtonPseudoCheckBox\n                        $isDisabled={isDisabled}\n                        $isChecked={isMarked}\n                        onClick={handleClick}\n                    >\n                        <StyledRadioButtonCheckBoxMark\n                            onMouseEnter={handleMouseEnter}\n                            onMouseLeave={handleMouseLeave}\n                            $isHovered={isHovered}\n                            $isSelected={isMarked}\n                            $isDisabled={isDisabled}\n                        />\n                    </StyledRadioButtonPseudoCheckBox>\n                    <StyledRadioButtonCheckBox\n                        onClick={handleClick}\n                        onMouseEnter={handleMouseEnter}\n                        onMouseLeave={handleMouseLeave}\n                        disabled={isDisabled}\n                        $isDisabled={isDisabled}\n                        type=\"radio\"\n                        checked={isMarked}\n                        onChange={() => {}}\n                    />\n                    <StyledLabelWrapper>\n                        {label && (\n                            <StyledRadioButtonLabel\n                                $isDisabled={isDisabled}\n                                onClick={handleClick}\n                                onMouseEnter={handleMouseEnter}\n                                onMouseLeave={handleMouseLeave}\n                            >\n                                {label}\n                            </StyledRadioButtonLabel>\n                        )}\n                        {shouldShowRightElement && rightElement}\n                    </StyledLabelWrapper>\n                </StyledRadioButtonWrapper>\n                {children && (\n                    <AnimatePresence initial={false}>\n                        <StyledMotionRadioButtonChildren\n                            animate={\n                                isMarked\n                                    ? { opacity: 1, height: 'auto' }\n                                    : { opacity: 0, height: 0 }\n                            }\n                            transition={{ duration: 0.2 }}\n                        >\n                            {children}\n                        </StyledMotionRadioButtonChildren>\n                    </AnimatePresence>\n                )}\n            </StyledRadioButton>\n        ),\n        [\n            children,\n            handleClick,\n            handleMouseEnter,\n            isDisabled,\n            isHovered,\n            isMarked,\n            label,\n            radioButtonRightElementMargin,\n            rightElement,\n            shouldShowRightElement,\n        ],\n    );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/radio-button/RadioButton.styles.js

@@ -0,0 +1,162 @@
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+export const StyledRadioButton = styled.span`
+    display: flex;
+    flex-direction: column;
+
+    position: relative;
+
+    opacity: ${_ref => {
+  let {
+    $isDisabled
+  } = _ref;
+  return $isDisabled ? 0.5 : 1;
+}};
+
+    ${_ref2 => {
+  let {
+    $radioButtonRightElementMargin
+  } = _ref2;
+  switch ($radioButtonRightElementMargin) {
+    case 'BOTH':
+      return css`
+                    margin: 6px 0;
+                `;
+    case 'TOP':
+      return css`
+                    margin-top: 6px;
+                `;
+    case 'BOTTOM':
+      return css`
+                    margin-bottom: 6px;
+                `;
+    case 'NONE':
+    default:
+      return css`
+                    margin: 0;
+                `;
+  }
+}}
+`;
+export const StyledRadioButtonWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    position: relative;
+    gap: 5px;
+    user-select: none;
+`;
+export const StyledRadioButtonCheckBox = styled.input`
+    opacity: 0;
+    height: 15px;
+    width: 15px;
+    cursor: ${_ref3 => {
+  let {
+    $isDisabled
+  } = _ref3;
+  return $isDisabled ? 'default !important' : 'pointer !important';
+}};
+`;
+export const StyledRadioButtonPseudoCheckBox = styled.div`
+    background-color: ${_ref4 => {
+  let {
+    theme,
+    $isChecked
+  } = _ref4;
+  return $isChecked ? theme['secondary-408'] : theme['secondary-403'];
+}};
+    opacity: 1;
+    border: 1px solid
+        rgba(${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme['409-rgb'];
+}}, 0.5);
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    border-radius: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: ${_ref6 => {
+  let {
+    $isDisabled
+  } = _ref6;
+  return $isDisabled ? 'default !important' : 'pointer !important';
+}};
+`;
+export const StyledRadioButtonCheckBoxMark = styled.span`
+    background-color: transparent;
+    position: absolute;
+    top: 1px;
+    left: 3.925px;
+    display: inline-block;
+    transform: rotate(35deg);
+    height: 9px;
+    width: 5px;
+    border-bottom: 2px solid white;
+    border-right: 2px solid white;
+    border-top: transparent;
+    border-left: transparent;
+    z-index: 2;
+    cursor: ${_ref7 => {
+  let {
+    $isDisabled
+  } = _ref7;
+  return $isDisabled ? 'default !important' : 'pointer !important';
+}};
+
+    ${_ref8 => {
+  let {
+    $isHovered,
+    $isSelected
+  } = _ref8;
+  if ($isSelected) {
+    return css`
+                opacity: 1;
+            `;
+  }
+  if ($isHovered) {
+    return css`
+                opacity: 0.5;
+            `;
+  }
+  return css`
+            opacity: 0;
+        `;
+}}
+`;
+export const StyledRadioButtonLabel = styled.p`
+    color: ${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.text;
+}};
+    margin: 0;
+    cursor: ${_ref10 => {
+  let {
+    $isDisabled
+  } = _ref10;
+  return $isDisabled ? 'default !important' : 'pointer !important';
+}};
+`;
+export const StyledLabelWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 12px;
+`;
+export const StyledMotionRadioButtonChildren = styled(motion.div)`
+    margin-left: 20px;
+    cursor: text;
+    overflow: hidden;
+    color: ${_ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.text;
+}};
+`;
+//# sourceMappingURL=RadioButton.styles.js.map