@chayns-components/core 5.0.0-beta.997 → 5.0.0

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

@@ -1 +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","$shouldShowWaitCursor","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    $shouldShowWaitCursor?: 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: 22px;\n    min-height: 32px;\n    position: relative;\n    user-select: none;\n\n    ${({ $hasIcon, $hasChildren, $shouldShowWaitCursor }) => {\n        if ($shouldShowWaitCursor) {\n            return css`\n                padding: 4px 12px;\n            `;\n        }\n\n        if ($hasIcon) {\n            if ($hasChildren) {\n                return css`\n                    padding: 6px 12px 6px 42px;\n                `;\n            }\n            return css`\n                padding: 6px 12px 6px 18px;\n            `;\n        }\n        return css`\n            padding: 6px 12px 6px 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    will-change: unset !important;\n`;\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;AAa/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,MAAMC,KAAA,IAAuD;EAAA,IAAtD;IAAEC,QAAQ;IAAEC,YAAY;IAAEC;EAAsB,CAAC,GAAAH,KAAA;EAChD,IAAIG,qBAAqB,EAAE;IACvB,OAAOnB,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIiB,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;AACD;AACA,OAAO,MAAMoB,iBAAiB,GAAGrB,MAAM,CAACsB,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGvB,MAAM,CAACD,MAAM,CAACyB,GAAG,CAAqB;AACjF;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGzB,MAAM,CAACD,MAAM,CAACyB,GAAG,CAAqB;AACnF;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Button.styles.js","names":["motion","styled","css","StyledMotionButton","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$isSecondary","$effectiveButtonDesign","theme","text","buttonColor","buttonBackgroundColor","$isDisabled","$hasIcon","$hasChildren","$shouldShowWaitCursor","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { 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    $shouldShowWaitCursor?: boolean;\n    $effectiveButtonDesign: number;\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    ${({\n        $isSecondary,\n        $shouldShowAsSelectButton,\n        $effectiveButtonDesign,\n        theme,\n    }: StyledButtonProps) => {\n        if ($isSecondary || $shouldShowAsSelectButton) {\n            return css`\n                color: ${theme.text};\n            `;\n        }\n\n        return css`\n            color: ${$effectiveButtonDesign === 2\n                ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n                : (theme.buttonColor ?? 'white')};\n        `;\n    }}\n\n    ${({\n        theme,\n        $isSecondary,\n        $shouldShowAsSelectButton,\n        $effectiveButtonDesign,\n    }: StyledButtonProps) => {\n        if ($effectiveButtonDesign === 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    flex: 0 0 auto;\n    line-height: 22px;\n    min-height: 32px;\n    position: relative;\n    user-select: none;\n    width: fit-content;\n\n    ${({ $hasIcon, $hasChildren, $shouldShowWaitCursor }) => {\n        if ($shouldShowWaitCursor) {\n            return css`\n                padding: 4px 12px;\n            `;\n        }\n\n        if ($hasIcon) {\n            if ($hasChildren) {\n                return css`\n                    padding: 6px 12px 6px 42px;\n                `;\n            }\n            return css`\n                padding: 6px 12px 6px 18px;\n            `;\n        }\n        return css`\n            padding: 6px 12px 6px 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)`\n    will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAc/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACD,MAAM,CAACI,MAAM,CAAoB;AAC1E,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA0B,CAAC,KAC3DD,6BAA6B,IAC7B,CAACC,yBAAyB,IAC1BJ,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,MAAM,CAAC;EACCK,YAAY;EACZD,yBAAyB;EACzBE,sBAAsB;EACtBC;AACe,CAAC,KAAK;EACrB,IAAIF,YAAY,IAAID,yBAAyB,EAAE;IAC3C,OAAOJ,GAAG;AACtB,yBAAyBO,KAAK,CAACC,IAAI;AACnC,aAAa;EACL;EAEA,OAAOR,GAAG;AAClB,qBAAqBM,sBAAsB,KAAK,CAAC,GAC9BC,KAAK,CAACE,WAAW,IAAIF,KAAK,CAACG,qBAAqB,IAAI,OAAO,GAC3DH,KAAK,CAACE,WAAW,IAAI,OAAQ;AAChD,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EACCF,KAAK;EACLF,YAAY;EACZD,yBAAyB;EACzBE;AACe,CAAC,KAAK;EACrB,IAAIA,sBAAsB,KAAK,CAAC,IAAI,CAACF,yBAAyB,EAAE;IAC5D,OAAOJ,GAAG;AACtB,oCAAoCK,YAAY,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACG,qBAAqB;AAC7F;AACA,aAAa;EACL;EAEA,OAAOV,GAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,cAAc,CAAC;EAAEW;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC,YAAY;EAAEC;AAAsB,CAAC,KAAK;EACrD,IAAIA,qBAAqB,EAAE;IACvB,OAAOd,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIY,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,OAAOb,GAAG;AAC1B;AACA,iBAAiB;IACL;IACA,OAAOA,GAAG;AACtB;AACA,aAAa;EACL;EACA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAED,OAAO,MAAMe,iBAAiB,GAAGhB,MAAM,CAACiB,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGlB,MAAM,CAACD,MAAM,CAACoB,GAAG,CAAC;AAC7D;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGpB,MAAM,CAACD,MAAM,CAACoB,GAAG,CAAC;AAC/D;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Button.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.js","names":[],"sources":["../../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\n\nexport type ButtonProps = {\n    /**\n     * The label of the button.\n     * @description\n     * The content to be displayed inside the button. This can be text, icons, or any React node.\n     * It serves as the primary label for the button's action.\n     * @optional\n     */\n    children?: ReactNode;\n    /**\n     * Additional class names for the button element.\n     * @description\n     * Allows adding custom CSS classes to the button for further styling or integration with CSS frameworks.\n     * Multiple classes can be provided as a space-separated string.\n     * @optional\n     */\n    className?: string;\n    /**\n     * An icon that is displayed on the left-hand side of the button text.\n     * @description\n     * Specifies an icon to be shown alongside the button text. The icon is positioned to the left of the text.\n     * This enhances the visual representation of the button's function.\n     * @optional\n     */\n    icon?: string;\n    /**\n     * Whether the button is disabled and cannot be clicked anymore.\n     * @description\n     * When set to true, the button becomes non-interactive, preventing user clicks and often changing its appearance to indicate the disabled state.\n     * This is useful for scenarios where the action is temporarily unavailable.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Displays the button in the secondary style.\n     * @description\n     * Applies a secondary visual style to the button, typically with a different background color or border.\n     * This is used to differentiate less prominent actions from primary ones.\n     * @optional\n     */\n    isSecondary?: boolean;\n    /**\n     * Function to be executed when the button is clicked.\n     * @description\n     * A callback function that is triggered when the user clicks on the button. This can be used to handle interactions,\n     * such as submitting forms, navigating to pages, or performing any custom action.\n     */\n    onClick: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Whether the button should be displayed as a selectButton.\n     * @description\n     * Modifies the button's appearance to resemble a select button, often used in dropdowns or selection interfaces.\n     * This changes the styling to indicate a selection state.\n     * @optional\n     * @default false\n     */\n    shouldShowAsSelectButton?: boolean;\n    /**\n     * Whether the text should be 'Roboto Medium'.\n     * @description\n     * Controls the font weight of the button text. When true, applies 'Roboto Medium' font weight for emphasis.\n     * This can improve readability or match design guidelines.\n     * @optional\n     * @default true\n     */\n    shouldShowTextAsRobotoMedium?: boolean;\n    /**\n     * Shows a wait cursor instead of button text.\n     * @description\n     * Replaces the button content with a wait cursor animation, indicating that an action is in progress.\n     * This provides visual feedback during loading or processing states.\n     * @optional\n     */\n    shouldShowWaitCursor?: boolean;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * Prevents the click event from bubbling up to parent elements, isolating the button's interaction.\n     * Useful in complex UI structures where event handling needs to be contained.\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional button design override.\n     * @description\n     * Allows overriding the default button design with a specific numeric value, corresponding to different visual themes or styles.\n     * This provides flexibility for custom theming.\n     * @optional\n     */\n    buttonDesign?: number;\n};\n"],"mappings":"","ignoreList":[]}

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

@@ -1,17 +1,14 @@
 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));
-};
+const WaitCursor = ({
+  color,
+  shouldHideBackground = false,
+  shouldHideWaitCursor = false
+}) => /*#__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

@@ -1 +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":[]}
+{"version":3,"file":"WaitCursor.js","names":["React","StyledWaitCursor","StyledWaitCursorBackground","StyledWaitCursorWaitCursor","WaitCursor","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,GAAGA,CAAC;EACrCC,KAAK;EACLC,oBAAoB,GAAG,KAAK;EAC5BC,oBAAoB,GAAG;AAC3B,CAAC,kBACGP,KAAA,CAAAQ,aAAA,CAACP,gBAAgB;EAACQ,qBAAqB,EAAE,CAACF;AAAqB,gBAC3DP,KAAA,CAAAQ,aAAA,CAACL,0BAA0B;EAACO,MAAM,EAAEL;AAAM,CAAE,CAAC,EAC5C,CAACC,oBAAoB,iBAAIN,KAAA,CAAAQ,aAAA,CAACN,0BAA0B,MAAE,CACzC,CACrB;AAEDE,UAAU,CAACO,WAAW,GAAG,YAAY;AAErC,eAAeP,UAAU","ignoreList":[]}

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

@@ -3,12 +3,9 @@ export const StyledWaitCursor = styled.div`
     position: relative;
     height: 26px;
     width: 26px;
-    opacity: ${_ref => {
-  let {
-    $shouldShowWaitCursor
-  } = _ref;
-  return $shouldShowWaitCursor ? 1 : 0;
-}};
+    opacity: ${({
+  $shouldShowWaitCursor
+}) => $shouldShowWaitCursor ? 1 : 0};
 `;
 export const StyledWaitCursorBackground = styled.div`
     background-color: white;
@@ -36,12 +33,9 @@ export const StyledWaitCursorWaitCursor = styled.div`
     z-index: 2;
     border-style: solid;
     border-width: 3px;
-    border-color: ${_ref2 => {
-  let {
-    $color
-  } = _ref2;
-  return $color;
-}};
+    border-color: ${({
+  $color
+}) => $color};
     height: ${26 - 10}px;
     width: ${26 - 10}px;
     border-radius: 50%;

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

@@ -1 +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":[]}
+{"version":3,"file":"WaitCursor.styles.js","names":["styled","keyframes","StyledWaitCursor","div","$shouldShowWaitCursor","StyledWaitCursorBackground","spin","StyledWaitCursorWaitCursor","$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,eAAe,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,CAAC,GAAG,CAAE;AAC7E,CAAC;AAID,OAAO,MAAMC,0BAA0B,GAAGL,MAAM,CAACG,GAAoC;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,MAAMG,IAAI,GAAGL,SAAS;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,0BAA0B,GAAGP,MAAM,CAACG,GAAoC;AACrF;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEK;AAAO,CAAC,KAAKA,MAAM;AAC1C,cAAc,EAAE,GAAG,EAAE;AACrB,aAAa,EAAE,GAAG,EAAE;AACpB;AACA;AACA;AACA;AACA,iBAAiBF,IAAI;AACrB,CAAC","ignoreList":[]}

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

@@ -1,19 +1,21 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useUuid } from '../../hooks/uuid';
 import { getHeightOfSingleTextLine } from '../../utils/calculate';
-import { StyledCheckbox, StyledCheckboxBox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';
-const Checkbox = _ref => {
-  let {
-    children,
-    isChecked,
-    isDisabled,
-    labelClassName,
-    onChange,
-    shouldShowAsSwitch,
-    shouldShowCentered = false,
-    shouldChangeOnLabelClick = true
-  } = _ref;
+import { StyledCheckbox, StyledCheckboxBox, StyledCheckboxBoxWrapper, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';
+const Checkbox = ({
+  children,
+  isChecked,
+  isDisabled,
+  labelClassName,
+  onChange,
+  shouldShowAsSwitch,
+  shouldShowCentered = false,
+  shouldChangeOnLabelClick = true
+}) => {
   const [isActive, setIsActive] = useState(isChecked ?? false);
+  const [checkboxTop, setCheckboxTop] = useState(undefined);
+  const checkboxBoxRef = useRef(null);
+  const checkboxRootRef = useRef(null);
   const handleChange = useCallback(event => {
     setIsActive(event.target.checked);
     if (typeof onChange === 'function') {
@@ -21,23 +23,40 @@ const Checkbox = _ref => {
     }
   }, [onChange]);
   const uuid = useUuid();
-  const lineHeight = useMemo(() => !children || shouldShowCentered ? undefined : getHeightOfSingleTextLine(), [children, shouldShowCentered]);
-  return /*#__PURE__*/React.createElement(StyledCheckbox, null, /*#__PURE__*/React.createElement(StyledCheckboxInput, {
+  useEffect(() => {
+    if (checkboxRootRef.current && !shouldShowCentered) {
+      const singleLineHeight = getHeightOfSingleTextLine({
+        container: checkboxRootRef.current
+      });
+      const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;
+      setCheckboxTop((singleLineHeight - boxHeight) / 2);
+    }
+  }, [shouldShowCentered]);
+  return /*#__PURE__*/React.createElement(StyledCheckbox, {
+    ref: checkboxRootRef
+  }, /*#__PURE__*/React.createElement(StyledCheckboxInput, {
     checked: isChecked,
     disabled: isDisabled,
     id: uuid,
     onChange: handleChange,
     type: "checkbox"
-  }), /*#__PURE__*/React.createElement(StyledCheckboxBox, {
+  }), /*#__PURE__*/React.createElement(StyledCheckboxBoxWrapper, {
+    $shouldShowAsSwitch: shouldShowAsSwitch,
+    style: {
+      top: shouldShowCentered ? '50%' : checkboxTop,
+      transform: shouldShowCentered ? 'translateY(-50%)' : undefined
+    }
+  }, /*#__PURE__*/React.createElement(StyledCheckboxBox, {
     htmlFor: uuid,
+    ref: checkboxBoxRef,
     $isChecked: isChecked ?? isActive,
     $isDisabled: isDisabled,
-    $shouldShowAsSwitch: shouldShowAsSwitch,
-    $lineHeight: lineHeight
-  }), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
+    $shouldShowAsSwitch: shouldShowAsSwitch
+  })), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
     className: labelClassName,
     $isDisabled: isDisabled,
     $shouldChangeOnLabelClick: shouldChangeOnLabelClick,
+    $shouldShowAsSwitch: shouldShowAsSwitch,
     htmlFor: shouldChangeOnLabelClick ? uuid : undefined
   }, children));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","useCallback","useMemo","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","_ref","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","handleChange","event","target","checked","uuid","lineHeight","undefined","createElement","disabled","id","type","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","className","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [children, shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxBox\n                htmlFor={uuid}\n                $isChecked={isChecked ?? isActive}\n                $isDisabled={isDisabled}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                $lineHeight={lineHeight}\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACL,OAAO;AACd,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SACIC,cAAc,EACdC,iBAAiB,EACjBC,mBAAmB,EACnBC,mBAAmB,QAChB,mBAAmB;AAqC1B,MAAMC,QAA2B,GAAGC,IAAA,IAS9B;EAAA,IAT+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,cAAc;IACdC,QAAQ;IACRC,kBAAkB;IAClBC,kBAAkB,GAAG,KAAK;IAC1BC,wBAAwB,GAAG;EAC/B,CAAC,GAAAR,IAAA;EACG,MAAM,CAACS,QAAQ,EAAEC,WAAW,CAAC,GAAGlB,QAAQ,CAACU,SAAS,IAAI,KAAK,CAAC;EAE5D,MAAMS,YAAY,GAAGrB,WAAW,CAC3BsB,KAAoC,IAAK;IACtCF,WAAW,CAACE,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACO,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACP,QAAQ,CACb,CAAC;EAED,MAAMU,IAAI,GAAGtB,OAAO,CAAC,CAAC;EAEtB,MAAMuB,UAAU,GAAGzB,OAAO,CACtB,MAAO,CAACU,QAAQ,IAAIM,kBAAkB,GAAGU,SAAS,GAAGvB,yBAAyB,CAAC,CAAE,EACjF,CAACO,QAAQ,EAAEM,kBAAkB,CACjC,CAAC;EAED,oBACIlB,KAAA,CAAA6B,aAAA,CAACvB,cAAc,qBACXN,KAAA,CAAA6B,aAAA,CAACrB,mBAAmB;IAChBiB,OAAO,EAAEZ,SAAU;IACnBiB,QAAQ,EAAEhB,UAAW;IACrBiB,EAAE,EAAEL,IAAK;IACTV,QAAQ,EAAEM,YAAa;IACvBU,IAAI,EAAC;EAAU,CAClB,CAAC,eACFhC,KAAA,CAAA6B,aAAA,CAACtB,iBAAiB;IACd0B,OAAO,EAAEP,IAAK;IACdQ,UAAU,EAAErB,SAAS,IAAIO,QAAS;IAClCe,WAAW,EAAErB,UAAW;IACxBsB,mBAAmB,EAAEnB,kBAAmB;IACxCoB,WAAW,EAAEV;EAAW,CAC3B,CAAC,eACF3B,KAAA,CAAA6B,aAAA,CAACpB,mBAAmB;IAChB6B,SAAS,EAAEvB,cAAe;IAC1BoB,WAAW,EAAErB,UAAW;IACxByB,yBAAyB,EAAEpB,wBAAyB;IACpDc,OAAO,EAAEd,wBAAwB,GAAGO,IAAI,GAAGE;EAAU,GAEpDhB,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDF,QAAQ,CAAC8B,WAAW,GAAG,UAAU;AAEjC,eAAe9B,QAAQ","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","createElement","ref","disabled","id","type","$shouldShowAsSwitch","style","top","transform","htmlFor","$isChecked","$isDisabled","className","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef}>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n\n            <StyledCheckboxBoxWrapper\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { getCheckBoxPosition } from '../../utils/checkBox';
 export const StyledCheckbox = styled.div`
     align-items: center;
     display: flex;
@@ -10,49 +9,44 @@ export const StyledCheckbox = styled.div`
 export const StyledCheckboxInput = styled.input`
     display: none;
 `;
+export const StyledCheckboxBoxWrapper = styled.div`
+    display: flex;
+    flex-shrink: 0;
+    height: 16px;
+    position: absolute;
+
+    ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch && css`
+            right: 42px;
+        `}
+`;
 export const StyledCheckboxBox = styled.label`
-    color: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.text;
-}};
-    cursor: ${_ref2 => {
-  let {
-    $isDisabled
-  } = _ref2;
-  return $isDisabled ? 'default' : 'pointer';
-}};
-    opacity: ${_ref3 => {
-  let {
-    $isDisabled
-  } = _ref3;
-  return $isDisabled ? 0.5 : 1;
-}};
-    padding-left: ${_ref4 => {
-  let {
-    $shouldShowAsSwitch
-  } = _ref4;
-  return $shouldShowAsSwitch ? '48px' : '20px';
-}};
+    color: ${({
+  theme
+}) => theme.text};
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    position: relative;
     transition: opacity 0.2s ease;
     user-select: none;
+    height: 16px;
 
     &:after {
-        ${_ref5 => {
-  let {
-    $isChecked,
-    $shouldShowAsSwitch,
-    $lineHeight,
-    theme
-  } = _ref5;
-  return $shouldShowAsSwitch ? css`
+        ${({
+  $isChecked,
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? css`
                       background-color: white;
                       border-radius: 50%;
                       box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
                       height: 16px;
                       left: 7px;
-                      top: ${$lineHeight ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px` : '50%'};
+                      top: 50%;
                       transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
                       transition: transform 0.2s ease;
                       width: 16px;
@@ -62,103 +56,73 @@ export const StyledCheckboxBox = styled.label`
                       height: 10px;
                       left: 2px;
                       opacity: ${$isChecked ? 1 : 0};
-                      top: ${$lineHeight ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px` : 'calc(50% - 2px)'};
+                      top: calc(50% - 2px);
                       transform: rotateZ(37deg) translateY(-50%);
                       transition: opacity 0.2s ease;
-                      width: 5.5px;
-                  `;
-}}
+                      width: 5px;
+                  `}
 
         content: ' ';
         position: absolute;
     }
 
     &:before {
-        background-color: ${_ref6 => {
-  let {
-    $isChecked,
-    $shouldShowAsSwitch,
-    theme
-  } = _ref6;
+        background-color: ${({
+  $isChecked,
+  $shouldShowAsSwitch,
+  theme
+}) => {
   if ($shouldShowAsSwitch) {
     return $isChecked ? theme.green : theme.red;
   }
   return $isChecked ? theme['408'] : theme['403'];
 }};
 
-        ${_ref7 => {
-  let {
-    $shouldShowAsSwitch,
-    theme
-  } = _ref7;
-  return !$shouldShowAsSwitch && css`
+        ${({
+  $shouldShowAsSwitch,
+  theme
+}) => !$shouldShowAsSwitch && css`
                 border: 1px solid rgba(${theme['409-rgb']}, 0.5);
-            `;
-}}
+            `}
 
-        border-radius: ${_ref8 => {
-  let {
-    $shouldShowAsSwitch
-  } = _ref8;
-  return $shouldShowAsSwitch ? '100px' : 0;
-}};
+        border-radius: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '100px' : 0};
         content: ' ';
-        height: ${_ref9 => {
-  let {
-    $shouldShowAsSwitch
-  } = _ref9;
-  return $shouldShowAsSwitch ? '13px' : '15px';
-}};
-        left: ${_ref10 => {
-  let {
-    $shouldShowAsSwitch
-  } = _ref10;
-  return $shouldShowAsSwitch ? '10px' : 0;
-}};
+        height: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '13px' : '15px'};
+        left: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '10px' : 0};
         position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
         transition: background-color 0.2s ease;
-        width: ${_ref11 => {
-  let {
-    $shouldShowAsSwitch
-  } = _ref11;
-  return $shouldShowAsSwitch ? '28px' : '15px';
-}};
-        ${_ref12 => {
-  let {
-    $lineHeight,
-    theme,
-    $shouldShowAsSwitch
-  } = _ref12;
-  return $lineHeight ? css`
-                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ?? 5 + ($shouldShowAsSwitch ? 1 : 0)}px;
-                  ` : css`
-                      top: 50%;
-                      transform: translateY(-50%);
-                  `;
-}}
+        width: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '28px' : '15px'};
     }
 }
 `;
 export const StyledCheckboxLabel = styled.label`
-    color: ${_ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.text;
-}};
-    cursor: ${_ref14 => {
-  let {
-    $shouldChangeOnLabelClick
-  } = _ref14;
-  return !$shouldChangeOnLabelClick ? 'default' : 'pointer';
-}};
-    opacity: ${_ref15 => {
-  let {
-    $isDisabled
-  } = _ref15;
-  return $isDisabled ? 0.5 : 1;
-}};
+    color: ${({
+  theme
+}) => theme.text};
+    cursor: ${({
+  $shouldChangeOnLabelClick
+}) => !$shouldChangeOnLabelClick ? 'default' : 'pointer'};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
     transition: opacity 0.2s ease;
     user-select: none;
+    ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? css`
+                  padding-right: 48px;
+              ` : css`
+                  padding-left: 20px;
+              `}
 `;
 //# sourceMappingURL=Checkbox.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBox","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","Number","fontSize","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12","StyledCheckboxLabel","_ref13","_ref14","$shouldChangeOnLabelClick","_ref15"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '50%'};\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAG;AACxC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACK,KAAK;AAC/C;AACA,CAAC;AAMD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACG,GAAkC;AACjF;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEI;AAAoB,CAAC,KACtBA,mBAAmB,IACnBN,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAQD,OAAO,MAAMO,iBAAiB,GAAGR,MAAM,CAACS,KAA6B;AACrE,aAAa,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC9D,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,UAAU;EAAEN;AAA4C,CAAC,KAC1DA,mBAAmB,GACbN,GAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CY,UAAU,GAAG,MAAM,GAAG,CAAC;AACrE;AACA;AACA,mBAAmB,GACDZ,GAAG;AACrB;AACA;AACA;AACA;AACA,iCAAiCY,UAAU,GAAG,CAAC,GAAG,CAAC;AACnD;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;EACjBA,UAAU;EACVN,mBAAmB;EACnBG;AACoB,CAAC,KAAK;EAC1B,IAAIH,mBAAmB,EAAE;IACrB,OAAOM,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGJ,KAAK,CAACK,GAAG;EAC/C;EAEA,OAAOF,UAAU,GAAGH,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AACT;AACA,UAAU,CAAC;EAAEH,mBAAmB;EAAEG;AAAM,CAAC,KAC7B,CAACH,mBAAmB,IACpBN,GAAG;AACf,yCAAyCS,KAAK,CAAC,SAAS,CAAC;AACzD,aAAa;AACb;AACA,yBAAyB,CAAC;EAAEH;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,OAAO,GAAG,CAAE;AACzF;AACA,kBAAkB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACtF,gBAAgB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,CAAE;AAC/E;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACrF;AACA;AACA,CAAC;AAQD,OAAO,MAAMS,mBAAmB,GAAGhB,MAAM,CAACS,KAA+B;AACzE,aAAa,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAACC,IAAI;AAChE,cAAc,CAAC;EAAEM;AAA0B,CAAC,KACpC,CAACA,yBAAyB,GAAG,SAAS,GAAG,SAAS;AAC1D,eAAe,CAAC;EAAEL;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,MAAM,CAAC;EAAEL;AAAoB,CAAC,KACtBA,mBAAmB,GACbN,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,CAAC","ignoreList":[]}