@ledgerhq/react-ui 0.45.0 → 0.46.0-nightly.20260217030329

package/lib/cjs/components/cta/Button/index.js

@@ -1,75 +1,541 @@
+(() => {
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+var __webpack_modules__ = ({
+7680(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styles_system_gaps__rspack_import_2 = __webpack_require__(4182);
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+/* import */ var styled_system__rspack_import_1 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_1);
+
+
+
+const baseStyles = (0,styled_system__rspack_import_1.compose)(styled_system__rspack_import_1.flexbox, styled_system__rspack_import_1.space, styled_system__rspack_import_1.position, styled_system__rspack_import_1.color, styled_system__rspack_import_1.layout, styled_system__rspack_import_1.overflow, _styles_system_gaps__rspack_import_2["default"], styled_system__rspack_import_1.border);
+const proxyStyled = new Proxy((styled_components__rspack_import_0_default()), {
+    apply (target, thisArg, argumentsList) {
+        return styled_components__rspack_import_0_default()(target.apply(thisArg, argumentsList)(baseStyles));
+    },
+    get (target, property) {
+        if (typeof target[property] === "function") {
+            return styled_components__rspack_import_0_default()(target[property].apply((styled_components__rspack_import_0_default()), [
+                baseStyles
+            ]));
+        }
+        return target[property];
+    }
+});
+/* export default */ const __rspack_default_export = (proxyStyled);
+
+
+},
+4336(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  rgba: () => (/* binding */ rgba),
+  ff: () => (/* binding */ ff)
+});
+
+// UNUSED EXPORTS: darken, ensureContrast, mix, lighten
+
+;// CONCATENATED MODULE: external "color"
+const external_color_namespaceObject = require("color");
+var external_color_default = /*#__PURE__*/__webpack_require__.n(external_color_namespaceObject);
+// EXTERNAL MODULE: ./src/styles/theme.ts
+var theme = __webpack_require__(5548);
+;// CONCATENATED MODULE: ./src/styles/helpers.ts
+
+
+const rgba = (c, a)=>external_color_default()(c).alpha(a).rgb().toString();
+const darken = (c, a)=>Color(c).darken(a).toString();
+const lighten = (c, a)=>Color(c).lighten(a).toString();
+const mix = (c, b, a)=>Color(c).mix(Color(b), a).toString();
+const ff = (v)=>{
+    const [font, type = "Regular"] = v.split("|");
+    // @ts-expect-error FIXME
+    const { style, weight } = theme.fontFamilies[font][type];
+    // @ts-expect-error FIXME
+    const fallback = theme.fontFamilies[font].fallback ?? "Arial";
+    return {
+        fontFamily: `${font}, ${fallback}`,
+        fontWeight: weight,
+        fontStyle: style
+    };
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
+const ensureContrast = (color1, color2)=>{
+    const colorL1 = Color(color1).luminosity() + 0.05;
+    const colorL2 = Color(color2).luminosity() + 0.05;
+    const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;
+    if (lRatio < 1.5) {
+        return Color(color1).rotate(180).negate().string();
+    }
+    return color1;
+};
+
+
+},
+3364(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _helpers__rspack_import_0 = __webpack_require__(4336);
+
+/* export default */ const __rspack_default_export = ((props)=>{
+    const prop = props.ff;
+    if (prop == null) {
+        return null;
+    }
+    return (0,_helpers__rspack_import_0.ff)(prop);
+});
+
+
+},
+4182(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var styled_system__rspack_import_0 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_0);
+
+const gaps = (0,styled_system__rspack_import_0.system)({
+    rowGap: {
+        property: "rowGap",
+        scale: "space"
+    },
+    columnGap: {
+        property: "columnGap",
+        scale: "space"
+    }
+});
+/* export default */ const __rspack_default_export = (gaps);
+
+
+},
+5548(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  fontFamilies: () => (fontFamilies),
+  fontSizes: () => (fontSizes)
+});
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+/* import */ var _ledgerhq_ui_shared__rspack_import_1 = __webpack_require__(2993);
+/* import */ var _ledgerhq_ui_shared__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_ui_shared__rspack_import_1);
+
+
+const breakpoints = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    xxl: "1536px"
+};
+const space = [
+    /* space indexes:
+  0, 1, 2, 3, 4,  5,  6,  7,  8,  9,  10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */ 0,
+    2,
+    4,
+    8,
+    10,
+    12,
+    16,
+    20,
+    24,
+    28,
+    32,
+    36,
+    40,
+    44,
+    48,
+    52,
+    56,
+    60,
+    64,
+    68,
+    72,
+    76
+];
+const fontSizes = [
+    8,
+    10,
+    11,
+    12,
+    13,
+    14,
+    16,
+    20,
+    24,
+    28,
+    32,
+    36
+];
+[fontSizes.micro, fontSizes.tiny, fontSizes.extraSmall, fontSizes.small, fontSizes.paragraph, fontSizes.body, fontSizes.large, fontSizes.h5, fontSizes.h4, fontSizes.h3, fontSizes.h2, fontSizes.h1] = fontSizes;
+fontSizes.largeLineHeight = fontSizes.large;
+fontSizes.bodyLineHeight = fontSizes.body;
+fontSizes.paragraphLineHeight = fontSizes.paragraph;
+fontSizes.subtitle = fontSizes.extraSmall;
+fontSizes.h1Inter = fontSizes.h1;
+fontSizes.h2Inter = fontSizes.h2;
+fontSizes.h3Inter = fontSizes.h3;
+fontSizes.h4Inter = fontSizes.h4;
+fontSizes.h5Inter = fontSizes.h5;
+const fontWeights = {
+    extraLight: "100",
+    light: "300",
+    regular: "400",
+    medium: "500",
+    semiBold: "600",
+    bold: "700",
+    extraBold: "800"
+};
+const radii = [
+    0,
+    4,
+    8,
+    12,
+    16,
+    20
+];
+const shadows = [
+    "0 4px 8px 0 rgba(0, 0, 0, 0.03)"
+];
+const zIndexes = [
+    -1,
+    0,
+    1,
+    9,
+    10,
+    90,
+    100,
+    900,
+    1000
+];
+// Those fonts are now defined in global.css, this is just a mapping for styled-system
+const fontFamilies = {
+    Inter: {
+        ExtraLight: {
+            weight: 100,
+            style: "normal"
+        },
+        Light: {
+            weight: 300,
+            style: "normal"
+        },
+        Regular: {
+            weight: 400,
+            style: "normal"
+        },
+        Medium: {
+            weight: 500,
+            style: "normal"
+        },
+        SemiBold: {
+            weight: 600,
+            style: "normal"
+        },
+        Bold: {
+            weight: 700,
+            style: "normal"
+        },
+        ExtraBold: {
+            weight: 800,
+            style: "normal"
+        }
+    },
+    Alpha: {
+        Medium: {
+            weight: 500,
+            style: "normal"
+        }
+    }
+};
+const animationDuration = "0.33s";
+const easings = {
+    outQuadratic: "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
+};
+const transition = (properties = [
+    "all"
+], duration = animationDuration, easing = easings.outQuadratic)=>(0,styled_components__rspack_import_0.css)`
+  transition-property: ${properties.join(",")};
+  transition-duration: ${duration};
+  transition-timing-function: ${easing};
+`;
+const fadeIn = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  `;
+const fadeOut = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  `;
+const fadeInGrowX = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 0;
+      transform: scaleX(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+`;
+const fadeInUp = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 0;
+      transform: translateY(66%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0%);
+    }
+  `;
+const animations = {
+    fadeIn: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards
+  `,
+    fadeOut: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards
+  `,
+    fadeInGrowX: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards
+  `,
+    fadeInUp: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards
+  `
+};
+const overflow = {
+    x: (0,styled_components__rspack_import_0.css)`
+    overflow-y: hidden;
+    overflow-x: scroll;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    y: (0,styled_components__rspack_import_0.css)`
+    overflow-x: hidden;
+    overflow-y: scroll;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    yAuto: (0,styled_components__rspack_import_0.css)`
+    overflow-x: hidden;
+    overflow-y: auto;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    xy: (0,styled_components__rspack_import_0.css)`
+    overflow: scroll;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    trackSize: 12
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Button_exports = {};
-__export(Button_exports, {
-  Base: () => Base,
-  ButtonExpand: () => ButtonExpand,
-  ButtonUnstyled: () => ButtonUnstyled,
-  buttonSizeStyle: () => buttonSizeStyle,
-  default: () => Button_default
+const theme = {
+    theme: "light",
+    sizes: {
+        drawer: {
+            side: {
+                big: {
+                    width: 580
+                },
+                small: {
+                    width: 420
+                }
+            },
+            popin: {
+                min: {
+                    height: 158,
+                    width: 462
+                },
+                max: {
+                    height: 522,
+                    width: 622
+                }
+            }
+        },
+        topBarHeight: 58,
+        sideBarWidth: 230
+    },
+    radii,
+    fontFamilies,
+    fontSizes,
+    fontWeights,
+    space,
+    shadows,
+    colors: _ledgerhq_ui_shared__rspack_import_1.palettes.light,
+    animations,
+    overflow,
+    transition,
+    zIndexes,
+    breakpoints
+};
+/* unused export default */ var __rspack_default_export = ((/* unused pure expression or super */ null && (theme)));
+
+
+},
+2993(module) {
+module.exports = require("@ledgerhq/ui-shared");
+
+},
+2015(module) {
+module.exports = require("react");
+
+},
+2770(module) {
+module.exports = require("styled-components");
+
+},
+9351(module) {
+module.exports = require("styled-system");
+
+},
+
+});
+// The module cache
+var __webpack_module_cache__ = {};
+
+// The require function
+function __webpack_require__(moduleId) {
+
+// Check if module is in cache
+var cachedModule = __webpack_module_cache__[moduleId];
+if (cachedModule !== undefined) {
+return cachedModule.exports;
+}
+// Create a new module (and put it into the cache)
+var module = (__webpack_module_cache__[moduleId] = {
+exports: {}
 });
-module.exports = __toCommonJS(Button_exports);
-var import_ChevronBottomMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium"));
-var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_styled_system = require("styled-system");
-var import_helpers = require("../../../styles/helpers");
-var import_fontFamily = __toESM(require("../../../styles/styled/fontFamily"));
-var import_theme = require("../../../styles/theme");
-var import_styled = __toESM(require("../../styled"));
-const IconContainer = import_styled_components.default.div`
+// Execute the module function
+__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+
+// Return the exports of the module
+return module.exports;
+
+}
+
+// webpack/runtime/compat_get_default_export
+(() => {
+// getDefaultExport function for compatibility with non-ESM modules
+__webpack_require__.n = (module) => {
+	var getter = module && module.__esModule ?
+		() => (module['default']) :
+		() => (module);
+	__webpack_require__.d(getter, { a: getter });
+	return getter;
+};
+
+})();
+// webpack/runtime/define_property_getters
+(() => {
+__webpack_require__.d = (exports, definition) => {
+	for(var key in definition) {
+        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+        }
+    }
+};
+})();
+// webpack/runtime/has_own_property
+(() => {
+__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+})();
+// webpack/runtime/make_namespace_object
+(() => {
+// define __esModule on exports
+__webpack_require__.r = (exports) => {
+	if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+	}
+	Object.defineProperty(exports, '__esModule', { value: true });
+};
+})();
+var __webpack_exports__ = {};
+// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  ButtonUnstyled: () => (/* binding */ ButtonUnstyled),
+  ButtonExpand: () => (/* binding */ ButtonExpand),
+  "default": () => (/* binding */ cta_Button),
+  buttonSizeStyle: () => (/* binding */ buttonSizeStyle),
+  Base: () => (/* binding */ Base)
+});
+
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium"
+const ChevronBottomMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium");
+var ChevronBottomMedium_default = /*#__PURE__*/__webpack_require__.n(ChevronBottomMedium_namespaceObject);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(2770);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+// EXTERNAL MODULE: external "styled-system"
+var external_styled_system_ = __webpack_require__(9351);
+// EXTERNAL MODULE: ./src/styles/helpers.ts + 1 modules
+var helpers = __webpack_require__(4336);
+// EXTERNAL MODULE: ./src/styles/styled/fontFamily.ts
+var fontFamily = __webpack_require__(3364);
+// EXTERNAL MODULE: ./src/styles/theme.ts
+var theme = __webpack_require__(5548);
+// EXTERNAL MODULE: ./src/components/styled.ts
+var styled = __webpack_require__(7680);
+;// CONCATENATED MODULE: ./src/components/cta/Button/index.tsx
+
+
+
+
+
+
+
+
+const IconContainer = (external_styled_components_default()).div`
   display: inline-block;
-  ${(p) => `${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
+  ${(p)=>`${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
   padding-top: 0.2em;
 `;
-const getVariantColors = (p) => ({
-  main: {
-    outline: `
+const getVariantColors = (p)=>({
+        main: {
+            outline: `
         border-color: ${p.theme.colors.neutral.c100};
         color: ${p.theme.colors.neutral.c100};
         background-color: transparent;
         &:hover, &:focus {
-          background-color: ${(0, import_helpers.rgba)(p.theme.colors.neutral.c100, 0.03)};
+          background-color: ${(0,helpers.rgba)(p.theme.colors.neutral.c100, 0.03)};
         }
         &:active {
-          background-color: ${(0, import_helpers.rgba)(p.theme.colors.neutral.c100, 0.05)};
+          background-color: ${(0,helpers.rgba)(p.theme.colors.neutral.c100, 0.05)};
         }
       `,
-    filled: `
+            filled: `
         color: ${p.theme.colors.neutral.c00};
         background-color: ${p.theme.colors.neutral.c100};
         &:hover, &:focus {
           background-color: ${p.theme.colors.neutral.c90};
         }
       `
-  },
-  shade: `
+        },
+        shade: `
       border-color: ${p.theme.colors.neutral.c40};
       color: ${p.theme.colors.neutral.c100};
       &:focus {
@@ -84,55 +550,55 @@ const getVariantColors = (p) => ({
         background-color: ${p.theme.colors.neutral.c30};
       }
     `,
-  error: {
-    outline: `
+        error: {
+            outline: `
       border-color: ${p.theme.colors.error.c50};
       color: ${p.theme.colors.error.c50};
       background-color: transparent;
       &:hover {
-        background-color: ${(0, import_helpers.rgba)(p.theme.colors.error.c50, 0.02)};
+        background-color: ${(0,helpers.rgba)(p.theme.colors.error.c50, 0.02)};
       }
       &:active {
-        background-color: ${(0, import_helpers.rgba)(p.theme.colors.error.c50, 0.05)};
+        background-color: ${(0,helpers.rgba)(p.theme.colors.error.c50, 0.05)};
       }
     `,
-    filled: `
+            filled: `
       color: ${p.theme.colors.neutral.c00};
       background-color: ${p.theme.colors.error.c50};
       &:hover {
         background-color: ${p.theme.colors.error.c40};
       }
     `
-  },
-  neutral: `
+        },
+        neutral: `
     color: ${p.theme.colors.neutral.c100};
     background-color: ${p.theme.colors.neutral.c30};
     &:hover {
       background-color: ${p.theme.colors.neutral.c40};
     }
   `,
-  color: {
-    outline: `
+        color: {
+            outline: `
       border-color: ${p.theme.colors.primary.c80};
       color: ${p.theme.colors.primary.c80};
       background-color: transparent;
       &:hover {
-        background-color: ${(0, import_helpers.rgba)(p.theme.colors.primary.c100, 0.02)};
+        background-color: ${(0,helpers.rgba)(p.theme.colors.primary.c100, 0.02)};
       }
       &:active {
-        background-color: ${(0, import_helpers.rgba)(p.theme.colors.primary.c100, 0.05)};
+        background-color: ${(0,helpers.rgba)(p.theme.colors.primary.c100, 0.05)};
       }
     `,
-    filled: `
+            filled: `
       color: ${p.theme.colors.neutral.c00};
       background-color: ${p.theme.colors.primary.c80};
       &:hover {
         background-color: ${p.theme.colors.primary.c70};
       }
     `
-  },
-  disabled: {
-    outline: `
+        },
+        disabled: {
+            outline: `
         border-color: ${p.theme.colors.neutral.c50};
         color: ${p.theme.colors.neutral.c50};
         background-color: transparent;
@@ -140,23 +606,23 @@ const getVariantColors = (p) => ({
           box-shadow: none;
         }
       `,
-    filled: `
+            filled: `
         color: ${p.theme.colors.neutral.c50};
         background-color: ${p.theme.colors.neutral.c30};
         &:focus, &:hover {
           box-shadow: none;
         }
       `
-  },
-  default: `
+        },
+        default: `
     color: ${p.theme.colors.neutral.c100};
     background-color: transparent;
     &:hover {
       text-decoration: underline;
     }
   `
-});
-const ButtonUnstyled = import_styled.default.button`
+    });
+const ButtonUnstyled = styled["default"].button`
   all: unset;
   cursor: pointer;
 
@@ -164,130 +630,148 @@ const ButtonUnstyled = import_styled.default.button`
     cursor: default;
   }
 `;
-const Base = import_styled.default.button.attrs((p) => ({
-  fontFamily: "Inter",
-  fontSize: p.fontSize ?? 4
-}))`
+const Base = styled["default"].button.attrs((p)=>({
+        fontFamily: "Inter",
+        fontSize: p.fontSize ?? 4
+    }))`
   background-color: transparent;
   border-color: transparent;
   border-radius: 44px;
   border-style: solid;
-  border-width: ${(p) => p.outline || p.variant === "shade" ? 1 : 0}px;
+  border-width: ${(p)=>p.outline || p.variant === "shade" ? 1 : 0}px;
   font-weight: 600;
-  ${(0, import_styled_system.compose)(import_fontFamily.default, import_styled_system.fontSize, import_styled_system.border)};
-  line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
+  ${(0,external_styled_system_.compose)(fontFamily["default"], external_styled_system_.fontSize, external_styled_system_.border)};
+  line-height: ${(p)=>p.theme.fontSizes[p.fontSize]}px;
   text-align: center;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  ${(p) => buttonSizeStyle[p.size || "medium"]}
+  ${(p)=>buttonSizeStyle[p.size || "medium"]}
   text-overflow: ellipsis;
-  white-space: ${(p) => p.whiteSpace ? p.whiteSpace : "nowrap"};
+  white-space: ${(p)=>p.whiteSpace ? p.whiteSpace : "nowrap"};
   max-width: 100%;
   position: relative;
-  cursor: ${(p) => p.disabled ? "default" : "pointer"};
+  cursor: ${(p)=>p.disabled ? "default" : "pointer"};
   &:active {
-    box-shadow: 0 0 0 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
+    box-shadow: 0 0 0 4px ${(p)=>(0,helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
   }
   &:focus, &:hover {
-    box-shadow: 0 0 0 2px ${(p) => (0, import_helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
+    box-shadow: 0 0 0 2px ${(p)=>(0,helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
   }
 
-  ${(p) => {
-  const variants = getVariantColors(p);
-  if (p.disabled) {
-    return p.outline || p.variant === "shade" ? variants.disabled.outline : variants.disabled.filled;
-  }
-  const variant = p.variant ?? "default";
-  switch (variant) {
-    case "main":
-      return p.outline ? variants.main.outline : variants.main.filled;
-    case "shade":
-      return variants.shade;
-    case "error":
-      return p.outline ? variants.error.outline : variants.error.filled;
-    case "color":
-      return p.outline ? variants.color.outline : variants.color.filled;
-    case "neutral":
-      return variants.neutral;
-    case "default":
-    default:
-      return variants.default;
-  }
+  ${(p)=>{
+    const variants = getVariantColors(p);
+    if (p.disabled) {
+        return p.outline || p.variant === "shade" ? variants.disabled.outline : variants.disabled.filled;
+    }
+    const variant = p.variant ?? "default";
+    switch(variant){
+        case "main":
+            return p.outline ? variants.main.outline : variants.main.filled;
+        case "shade":
+            return variants.shade;
+        case "error":
+            return p.outline ? variants.error.outline : variants.error.filled;
+        case "color":
+            return p.outline ? variants.color.outline : variants.color.filled;
+        case "neutral":
+            return variants.neutral;
+        case "default":
+        default:
+            return variants.default;
+    }
 }}
-  ${(p) => p.iconButton ? import_styled_components.css`
+  ${(p)=>p.iconButton ? (0,external_styled_components_.css)`
           width: ${p.theme.space[12]}px;
           padding: 0;
           ${IconContainer} {
             margin: 0;
           }
         ` : ""}
-  ${(p) => p.theme.transition(["background-color", "color", "border-color", "box-shadow"], "0.2s")}
+  ${(p)=>p.theme.transition([
+        "background-color",
+        "color",
+        "border-color",
+        "box-shadow"
+    ], "0.2s")}
 `;
-const ContentContainer = import_styled_components.default.div``;
-const Button = ({ Icon, iconPosition = "right", iconSize = 16, children, onClick, ...props }, ref) => {
-  const iconNodeSize = iconSize || import_theme.fontSizes[props.fontSize ?? 4];
-  const IconNode = (0, import_react.useMemo)(() => {
-    if (!Icon)
-      return null;
-    if (typeof Icon === "object")
-      return Icon;
-    return /* @__PURE__ */ import_react.default.createElement(Icon, { size: iconNodeSize });
-  }, [iconNodeSize, Icon]);
-  return /* @__PURE__ */ import_react.default.createElement(Base, { ...props, ref, iconButton: !(Icon == null) && !children, onClick }, iconPosition === "right" ? /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, children) : null, IconNode && /* @__PURE__ */ import_react.default.createElement(IconContainer, { iconPosition }, IconNode), iconPosition === "left" ? /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, children) : null);
+const ContentContainer = (external_styled_components_default()).div``;
+const Button = ({ Icon, iconPosition = "right", iconSize = 16, children, onClick, ...props }, ref)=>{
+    const iconNodeSize = iconSize || theme.fontSizes[props.fontSize ?? 4];
+    const IconNode = (0,external_react_.useMemo)(()=>{
+        if (!Icon) return null;
+        if (typeof Icon === "object") return Icon;
+        return /*#__PURE__*/ external_react_default().createElement(Icon, {
+            size: iconNodeSize
+        });
+    }, [
+        iconNodeSize,
+        Icon
+    ]);
+    return /*#__PURE__*/ external_react_default().createElement(Base, {
+        ...props,
+        ref: ref,
+        iconButton: !(Icon == null) && !children,
+        onClick: onClick
+    }, iconPosition === "right" ? /*#__PURE__*/ external_react_default().createElement(ContentContainer, null, children) : null, IconNode && /*#__PURE__*/ external_react_default().createElement(IconContainer, {
+        iconPosition: iconPosition
+    }, IconNode), iconPosition === "left" ? /*#__PURE__*/ external_react_default().createElement(ContentContainer, null, children) : null);
 };
-const ButtonWithRef = import_react.default.forwardRef(Button);
-const StyledButtonExpand = (0, import_styled_components.default)(ButtonWithRef).attrs((props) => ({
-  Icon: props.Icon != null || import_ChevronBottomMedium.default,
-  iconPosition: props.iconPosition || "right"
-}))`
+const ButtonWithRef = /*#__PURE__*/ external_react_default().forwardRef(Button);
+const StyledButtonExpand = external_styled_components_default()(ButtonWithRef).attrs((props)=>({
+        Icon: props.Icon != null || (ChevronBottomMedium_default()),
+        iconPosition: props.iconPosition || "right"
+    }))`
   ${IconContainer} {
     transition: transform 0.25s;
-    ${(p) => p.expanded ? "transform: rotate(180deg)" : ""}
+    ${(p)=>p.expanded ? "transform: rotate(180deg)" : ""}
   }
 `;
 function ButtonExpand({ onToggle, onClick, ...props }, ref) {
-  const [expanded, setExpanded] = (0, import_react.useState)(false);
-  return /* @__PURE__ */ import_react.default.createElement(
-    StyledButtonExpand,
-    {
-      ...props,
-      ref,
-      expanded,
-      onClick: (event) => {
-        setExpanded((expanded2) => !expanded2);
-        onToggle != null && onToggle(!expanded);
-        onClick != null && onClick(event);
-      }
-    }
-  );
+    const [expanded, setExpanded] = (0,external_react_.useState)(false);
+    return /*#__PURE__*/ external_react_default().createElement(StyledButtonExpand, {
+        ...props,
+        ref: ref,
+        expanded: expanded,
+        onClick: (event)=>{
+            setExpanded((expanded)=>!expanded);
+            onToggle != null && onToggle(!expanded);
+            onClick != null && onClick(event);
+        }
+    });
 }
 const buttonSizeStyle = {
-  xs: {
-    padding: "0 12px",
-    height: "28px"
-  },
-  small: {
-    padding: "0 20px",
-    height: "32px"
-  },
-  medium: {
-    padding: "0 24px",
-    height: "40px"
-  },
-  large: {
-    padding: "0 28px",
-    height: "48px"
-  },
-  xl: {
-    padding: "0 28px",
-    height: "56px"
-  }
+    xs: {
+        padding: "0 12px",
+        height: "28px"
+    },
+    small: {
+        padding: "0 20px",
+        height: "32px"
+    },
+    medium: {
+        padding: "0 24px",
+        height: "40px"
+    },
+    large: {
+        padding: "0 28px",
+        height: "48px"
+    },
+    xl: {
+        padding: "0 28px",
+        height: "56px"
+    }
 };
 Button.Unstyled = ButtonUnstyled;
-Button.Expand = import_react.default.forwardRef(ButtonExpand);
+Button.Expand = /*#__PURE__*/ external_react_default().forwardRef(ButtonExpand);
 ButtonWithRef.Unstyled = Button.Unstyled;
 ButtonWithRef.Expand = Button.Expand;
-var Button_default = ButtonWithRef;
-//# sourceMappingURL=index.js.map
+/* export default */ const cta_Button = (ButtonWithRef);
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=index.js.map