@skbkontur/react-ui 0.0.0-38b6d1ada0 → 0.0.0-444dd4e7b3

package/components/Clickable/ClickableButtonArrow.styles.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const buttonArrowStyles: {
+    buttonArrowIconRoot(): string;
+    buttonArrowIconRootSmall(t: Theme): string;
+    buttonArrowIconRootMedium(t: Theme): string;
+    buttonArrowIconRootLarge(t: Theme): string;
+    buttonArrowIconLeft(): string;
+};

package/components/Clickable/ClickableButtonCaption/ClickableButtonCaption.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { cx } from "../../../lib/theming/Emotion";
+import { ClickableButtonIcon } from "../ClickableButtonIcon";
+import { ClickableButtonLoadingIcon } from "../ClickableButtonLoadingIcon";
+import { buttonCaptionStyles } from "../ClickableButtonCaption.styles";
+import { clickableGlobalClasses } from "../Clickable.styles";
+export var ClickableButtonCaption = function ClickableButtonCaption(_ref) {
+  var _cx, _cx2;
+
+  var leftIcon = _ref.leftIcon,
+      rightIcon = _ref.rightIcon,
+      isDisabled = _ref.isDisabled,
+      isLoading = _ref.isLoading,
+      size = _ref.size,
+      children = _ref.children;
+  var isLoadingWithoutIcons = !leftIcon && !rightIcon && isLoading;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx((_cx = {}, _cx[buttonCaptionStyles.buttonCaption()] = true, _cx[buttonCaptionStyles.buttonCaptionDisabled()] = isDisabled, _cx))
+  }, isLoadingWithoutIcons && /*#__PURE__*/React.createElement(ClickableButtonLoadingIcon, {
+    size: size
+  }), leftIcon && /*#__PURE__*/React.createElement(ClickableButtonIcon, {
+    size: size,
+    isLoading: isLoading,
+    position: "left",
+    icon: leftIcon
+  }, children), /*#__PURE__*/React.createElement("span", {
+    "data-tid": "test",
+    "aria-live": "assertive",
+    className: cx((_cx2 = {}, _cx2[clickableGlobalClasses.text] = true, _cx2[buttonCaptionStyles.buttonVisibilityHidden()] = isLoadingWithoutIcons, _cx2))
+  }, children), rightIcon && /*#__PURE__*/React.createElement(ClickableButtonIcon, {
+    size: size,
+    isLoading: isLoading,
+    position: "right",
+    icon: rightIcon,
+    hasBothIcons: !!leftIcon && !!rightIcon
+  }, children));
+};

package/components/Clickable/ClickableButtonCaption/ClickableButtonCaption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonCaption.tsx"],"names":["React","cx","ClickableButtonIcon","ClickableButtonLoadingIcon","buttonCaptionStyles","clickableGlobalClasses","ClickableButtonCaption","leftIcon","rightIcon","isDisabled","isLoading","size","children","isLoadingWithoutIcons","buttonCaption","buttonCaptionDisabled","text","buttonVisibilityHidden"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;;;AAGA,SAASC,mBAAT,QAAoC,uBAApC;AACA,SAASC,0BAAT,QAA2C,8BAA3C;AACA,SAASC,mBAAT,QAAoC,iCAApC;AACA,SAASC,sBAAT,QAAuC,oBAAvC;;AAEA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB;;;;;;;AAOhB,mBANpBC,QAMoB,QANpBA,QAMoB,CALpBC,SAKoB,QALpBA,SAKoB,CAJpBC,UAIoB,QAJpBA,UAIoB,CAHpBC,SAGoB,QAHpBA,SAGoB,CAFpBC,IAEoB,QAFpBA,IAEoB,CADpBC,QACoB,QADpBA,QACoB;AACpB,MAAMC,qBAAqB,GAAG,CAACN,QAAD,IAAa,CAACC,SAAd,IAA2BE,SAAzD;;AAEA;AACE;AACE,MAAA,SAAS,EAAET,EAAE;AACVG,MAAAA,mBAAmB,CAACU,aAApB,EADU,IAC4B,IAD5B;AAEVV,MAAAA,mBAAmB,CAACW,qBAApB,EAFU,IAEoCN,UAFpC,OADf;;;AAMGI,IAAAA,qBAAqB,iBAAI,oBAAC,0BAAD,IAA4B,IAAI,EAAEF,IAAlC,GAN5B;AAOGJ,IAAAA,QAAQ;AACP,wBAAC,mBAAD,IAAqB,IAAI,EAAEI,IAA3B,EAAiC,SAAS,EAAED,SAA5C,EAAuD,QAAQ,EAAC,MAAhE,EAAuE,IAAI,EAAEH,QAA7E;AACGK,IAAAA,QADH,CARJ;;;AAYE;AACE,kBAAS,MADX;AAEE,mBAAU,WAFZ;AAGE,MAAA,SAAS,EAAEX,EAAE;AACVI,MAAAA,sBAAsB,CAACW,IADb,IACoB,IADpB;AAEVZ,MAAAA,mBAAmB,CAACa,sBAApB,EAFU,IAEqCJ,qBAFrC,QAHf;;;AAQGD,IAAAA,QARH,CAZF;;AAsBGJ,IAAAA,SAAS;AACR,wBAAC,mBAAD;AACE,MAAA,IAAI,EAAEG,IADR;AAEE,MAAA,SAAS,EAAED,SAFb;AAGE,MAAA,QAAQ,EAAC,OAHX;AAIE,MAAA,IAAI,EAAEF,SAJR;AAKE,MAAA,YAAY,EAAE,CAAC,CAACD,QAAF,IAAc,CAAC,CAACC,SALhC;;AAOGI,IAAAA,QAPH,CAvBJ,CADF;;;;;AAoCD,CA9CM","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { ClickableProps } from './Clickable';\nimport { ClickableButtonIcon } from './ClickableButtonIcon';\nimport { ClickableButtonLoadingIcon } from './ClickableButtonLoadingIcon';\nimport { buttonCaptionStyles } from './ClickableButtonCaption.styles';\nimport { clickableGlobalClasses } from './Clickable.styles';\n\nexport const ClickableButtonCaption = ({\n  leftIcon,\n  rightIcon,\n  isDisabled,\n  isLoading,\n  size,\n  children,\n}: ClickableProps) => {\n  const isLoadingWithoutIcons = !leftIcon && !rightIcon && isLoading;\n\n  return (\n    <div\n      className={cx({\n        [buttonCaptionStyles.buttonCaption()]: true,\n        [buttonCaptionStyles.buttonCaptionDisabled()]: isDisabled,\n      })}\n    >\n      {isLoadingWithoutIcons && <ClickableButtonLoadingIcon size={size} />}\n      {leftIcon && (\n        <ClickableButtonIcon size={size} isLoading={isLoading} position=\"left\" icon={leftIcon}>\n          {children}\n        </ClickableButtonIcon>\n      )}\n      <span\n        data-tid=\"test\"\n        aria-live=\"assertive\"\n        className={cx({\n          [clickableGlobalClasses.text]: true,\n          [buttonCaptionStyles.buttonVisibilityHidden()]: isLoadingWithoutIcons,\n        })}\n      >\n        {children}\n      </span>\n      {rightIcon && (\n        <ClickableButtonIcon\n          size={size}\n          isLoading={isLoading}\n          position=\"right\"\n          icon={rightIcon}\n          hasBothIcons={!!leftIcon && !!rightIcon}\n        >\n          {children}\n        </ClickableButtonIcon>\n      )}\n    </div>\n  );\n};\n"]}

package/components/Clickable/ClickableButtonCaption/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonCaption.js",
+  "module": "ClickableButtonCaption",
+  "types": "../ClickableButtonCaption.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonCaption.d.ts

@@ -0,0 +1,2 @@
+import { ClickableProps } from './Clickable';
+export declare const ClickableButtonCaption: ({ leftIcon, rightIcon, isDisabled, isLoading, size, children, }: ClickableProps) => JSX.Element;

package/components/Clickable/ClickableButtonCaption.styles/ClickableButtonCaption.styles.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var buttonCaptionStyles = memoizeStyle({
+  buttonCaption: function buttonCaption() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: relative;\n      white-space: nowrap;\n      display: inline-block;\n      width: 100%;\n      vertical-align: top;\n    "])));
+  },
+  buttonCaptionDisabled: function buttonCaptionDisabled() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      transform: none !important; // override root:active style\n    "])));
+  },
+  buttonVisibilityHidden: function buttonVisibilityHidden() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      visibility: hidden;\n    "])));
+  }
+});

package/components/Clickable/ClickableButtonCaption.styles/ClickableButtonCaption.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonCaption.styles.ts"],"names":["css","memoizeStyle","buttonCaptionStyles","buttonCaption","buttonCaptionDisabled","buttonVisibilityHidden"],"mappings":"wJAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,mBAAmB,GAAGD,YAAY,CAAC;AAC9CE,EAAAA,aAD8C,2BAC9B;AACd,WAAOH,GAAP;;;;;;;AAOD,GAT6C;AAU9CI,EAAAA,qBAV8C,mCAUtB;AACtB,WAAOJ,GAAP;;;AAGD,GAd6C;;AAgB9CK,EAAAA,sBAhB8C,oCAgBrB;AACvB,WAAOL,GAAP;;;AAGD,GApB6C,EAAD,CAAxC","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonCaptionStyles = memoizeStyle({\n  buttonCaption() {\n    return css`\n      position: relative;\n      white-space: nowrap;\n      display: inline-block;\n      width: 100%;\n      vertical-align: top;\n    `;\n  },\n  buttonCaptionDisabled() {\n    return css`\n      transform: none !important; // override root:active style\n    `;\n  },\n\n  buttonVisibilityHidden() {\n    return css`\n      visibility: hidden;\n    `;\n  },\n});\n"]}

package/components/Clickable/ClickableButtonCaption.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonCaption.styles.js",
+  "module": "ClickableButtonCaption.styles",
+  "types": "../ClickableButtonCaption.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonCaption.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const buttonCaptionStyles: {
+    buttonCaption(): string;
+    buttonCaptionDisabled(): string;
+    buttonVisibilityHidden(): string;
+};

package/components/Clickable/ClickableButtonIcon/ClickableButtonIcon.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext } from 'react';
+import { isKonturIcon } from "../../../lib/utils";
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { buttonIconStyles, getButtonIconSizeClassName } from "../ClickableButtonIcon.styles";
+import { ClickableButtonLoadingIcon } from "../ClickableButtonLoadingIcon";
+import { buttonGlobalClasses } from "../ClickableButton.styles";
+
+var getButtonIconSizes = function getButtonIconSizes(theme) {
+  return {
+    small: parseInt(theme.btnIconSizeSmall),
+    medium: parseInt(theme.btnIconSizeMedium),
+    large: parseInt(theme.btnIconSizeLarge)
+  };
+};
+
+var getIcon = function getIcon(icon, size, theme) {
+  if (icon && /*#__PURE__*/React.isValidElement(icon) && isKonturIcon(icon)) {
+    var _icon$props$size;
+
+    var sizes = getButtonIconSizes(theme);
+    return /*#__PURE__*/React.cloneElement(icon, {
+      size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[size]
+    });
+  }
+
+  return icon;
+};
+
+export var ClickableButtonIcon = function ClickableButtonIcon(_ref) {
+  var _extends2, _extends3;
+
+  var icon = _ref.icon,
+      position = _ref.position,
+      children = _ref.children,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$hasBothIcons = _ref.hasBothIcons,
+      hasBothIcons = _ref$hasBothIcons === void 0 ? false : _ref$hasBothIcons,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size;
+  var theme = useContext(ThemeContext);
+  var hasNoChildren = !children;
+  return /*#__PURE__*/React.createElement("span", {
+    className: cx(_extends((_extends2 = {}, _extends2[buttonGlobalClasses.icon] = true, _extends2[buttonIconStyles.icon()] = true, _extends2), getButtonIconSizeClassName(size, position, theme), (_extends3 = {}, _extends3[buttonIconStyles.iconNoMargin()] = hasNoChildren, _extends3)))
+  }, isLoading && !hasBothIcons ? /*#__PURE__*/React.createElement(ClickableButtonLoadingIcon, {
+    isCentered: false,
+    size: size
+  }) : getIcon(icon, size, theme));
+};

package/components/Clickable/ClickableButtonIcon/ClickableButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonIcon.tsx"],"names":["React","useContext","isKonturIcon","cx","ThemeContext","buttonIconStyles","getButtonIconSizeClassName","ClickableButtonLoadingIcon","buttonGlobalClasses","getButtonIconSizes","theme","small","parseInt","btnIconSizeSmall","medium","btnIconSizeMedium","large","btnIconSizeLarge","getIcon","icon","size","isValidElement","sizes","cloneElement","props","ClickableButtonIcon","position","children","isLoading","hasBothIcons","hasNoChildren","iconNoMargin"],"mappings":"0DAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;;AAGA,SAASC,YAAT,QAA6B,iBAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;;;AAIA,SAASC,gBAAT,EAA2BC,0BAA3B,QAA6D,8BAA7D;AACA,SAASC,0BAAT,QAA2C,8BAA3C;AACA,SAASC,mBAAT,QAAoC,0BAApC;;;;;;;;AAQA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAA4C;AACrE,SAAO;AACLC,IAAAA,KAAK,EAAEC,QAAQ,CAACF,KAAK,CAACG,gBAAP,CADV;AAELC,IAAAA,MAAM,EAAEF,QAAQ,CAACF,KAAK,CAACK,iBAAP,CAFX;AAGLC,IAAAA,KAAK,EAAEJ,QAAQ,CAACF,KAAK,CAACO,gBAAP,CAHV,EAAP;;AAKD,CAND;;AAQA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAwBC,IAAxB,EAAwCV,KAAxC,EAAyD;AACvE,MAAIS,IAAI,iBAAInB,KAAK,CAACqB,cAAN,CAAqBF,IAArB,CAAR,IAAsCjB,YAAY,CAACiB,IAAD,CAAtD,EAA8D;AAC5D,QAAMG,KAAK,GAAGb,kBAAkB,CAACC,KAAD,CAAhC;AACA,wBAAOV,KAAK,CAACuB,YAAN,CAAmBJ,IAAnB,EAAyB,EAAEC,IAAI,sBAAED,IAAI,CAACK,KAAL,CAAWJ,IAAb,+BAAqBE,KAAK,CAACF,IAAD,CAAhC,EAAzB,CAAP;AACD;;AAED,SAAOD,IAAP;AACD,CAPD;;AASA,OAAO,IAAMM,mBAAmB,GAAG,SAAtBA,mBAAsB;;;;;;;AAOH,8BAN9BN,IAM8B,QAN9BA,IAM8B,CAL9BO,QAK8B,QAL9BA,QAK8B,CAJ9BC,QAI8B,QAJ9BA,QAI8B,uBAH9BC,SAG8B,CAH9BA,SAG8B,+BAHlB,KAGkB,2CAF9BC,YAE8B,CAF9BA,YAE8B,kCAFf,KAEe,sCAD9BT,IAC8B,CAD9BA,IAC8B,0BADvB,OACuB;AAC9B,MAAMV,KAAK,GAAGT,UAAU,CAACG,YAAD,CAAxB;AACA,MAAM0B,aAAa,GAAG,CAACH,QAAvB;;AAEA;AACE;AACE,MAAA,SAAS,EAAExB,EAAE;AACVK,MAAAA,mBAAmB,CAACW,IADV,IACiB,IADjB;AAEVd,MAAAA,gBAAgB,CAACc,IAAjB,EAFU,IAEgB,IAFhB;AAGRb,MAAAA,0BAA0B,CAACc,IAAD,EAAOM,QAAP,EAAiBhB,KAAjB,CAHlB;AAIVL,MAAAA,gBAAgB,CAAC0B,YAAjB,EAJU,IAIwBD,aAJxB,cADf;;;AAQGF,IAAAA,SAAS,IAAI,CAACC,YAAd;AACC,wBAAC,0BAAD,IAA4B,UAAU,EAAE,KAAxC,EAA+C,IAAI,EAAET,IAArD,GADD;;AAGCF,IAAAA,OAAO,CAACC,IAAD,EAAOC,IAAP,EAAaV,KAAb,CAXX,CADF;;;;AAgBD,CA3BM","sourcesContent":["import React, { useContext } from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { isKonturIcon } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { ClickableProps } from './Clickable';\nimport { buttonIconStyles, getButtonIconSizeClassName } from './ClickableButtonIcon.styles';\nimport { ClickableButtonLoadingIcon } from './ClickableButtonLoadingIcon';\nimport { buttonGlobalClasses } from './ClickableButton.styles';\n\nexport interface ClickableButtonIconProps extends Pick<ClickableProps, 'size' | 'isLoading' | 'children'> {\n  icon: ClickableProps['leftIcon'];\n  position: 'right' | 'left';\n  hasBothIcons?: boolean;\n}\n\nconst getButtonIconSizes = (theme: Theme): Record<SizeProp, number> => {\n  return {\n    small: parseInt(theme.btnIconSizeSmall),\n    medium: parseInt(theme.btnIconSizeMedium),\n    large: parseInt(theme.btnIconSizeLarge),\n  };\n};\n\nconst getIcon = (icon: React.ReactNode, size: SizeProp, theme: Theme) => {\n  if (icon && React.isValidElement(icon) && isKonturIcon(icon)) {\n    const sizes = getButtonIconSizes(theme);\n    return React.cloneElement(icon, { size: icon.props.size ?? sizes[size] });\n  }\n\n  return icon;\n};\n\nexport const ClickableButtonIcon = ({\n  icon,\n  position,\n  children,\n  isLoading = false,\n  hasBothIcons = false,\n  size = 'small',\n}: ClickableButtonIconProps) => {\n  const theme = useContext(ThemeContext);\n  const hasNoChildren = !children;\n\n  return (\n    <span\n      className={cx({\n        [buttonGlobalClasses.icon]: true,\n        [buttonIconStyles.icon()]: true,\n        ...getButtonIconSizeClassName(size, position, theme),\n        [buttonIconStyles.iconNoMargin()]: hasNoChildren,\n      })}\n    >\n      {isLoading && !hasBothIcons ? (\n        <ClickableButtonLoadingIcon isCentered={false} size={size} />\n      ) : (\n        getIcon(icon, size, theme)\n      )}\n    </span>\n  );\n};\n"]}

package/components/Clickable/ClickableButtonIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonIcon.js",
+  "module": "ClickableButtonIcon",
+  "types": "../ClickableButtonIcon.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonIcon.d.ts

@@ -0,0 +1,7 @@
+import { ClickableProps } from './Clickable';
+export interface ClickableButtonIconProps extends Pick<ClickableProps, 'size' | 'isLoading' | 'children'> {
+    icon: ClickableProps['leftIcon'];
+    position: 'right' | 'left';
+    hasBothIcons?: boolean;
+}
+export declare const ClickableButtonIcon: ({ icon, position, children, isLoading, hasBothIcons, size, }: ClickableButtonIconProps) => JSX.Element;

package/components/Clickable/ClickableButtonIcon.styles/ClickableButtonIcon.styles.js

@@ -0,0 +1,58 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+import { ZERO_WIDTH_SPACE_CSS } from "../../../lib/chars";
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var buttonIconStyles = memoizeStyle({
+  icon: function icon() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n\n      &::before {\n        content: '", "';\n      }\n    "])), ZERO_WIDTH_SPACE_CSS);
+  },
+  iconSmall: function iconSmall(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.btnIconSizeSmall);
+  },
+  iconSmallLeft: function iconSmallLeft(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n    "])), t.btnIconGapSmall);
+  },
+  iconSmallRight: function iconSmallRight(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n    "])), t.btnIconGapSmallRight);
+  },
+  iconMedium: function iconMedium(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.btnIconSizeMedium);
+  },
+  iconMediumLeft: function iconMediumLeft(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n    "])), t.btnIconGapMediumRight);
+  },
+  iconMediumRight: function iconMediumRight(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n    "])), t.btnIconGapMedium);
+  },
+  iconLarge: function iconLarge(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.btnIconSizeLarge);
+  },
+  iconLargeLeft: function iconLargeLeft(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n    "])), t.btnIconGapLarge);
+  },
+  iconLargeRight: function iconLargeRight(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n    "])), t.btnIconGapLargeRight);
+  },
+  iconNoMargin: function iconNoMargin() {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      margin-right: 0;\n      margin-left: 0;\n    "])));
+  }
+});
+export var getButtonIconSizeClassName = function getButtonIconSizeClassName(size, position, theme) {
+  var _ref3;
+
+  if (size === 'large') {
+    var _ref;
+
+    return _ref = {}, _ref[buttonIconStyles.iconLarge(theme)] = true, _ref[buttonIconStyles.iconLargeLeft(theme)] = position === 'left', _ref[buttonIconStyles.iconLargeRight(theme)] = position === 'right', _ref;
+  }
+
+  if (size === 'medium') {
+    var _ref2;
+
+    return _ref2 = {}, _ref2[buttonIconStyles.iconMedium(theme)] = true, _ref2[buttonIconStyles.iconMediumLeft(theme)] = position === 'left', _ref2[buttonIconStyles.iconMediumRight(theme)] = position === 'right', _ref2;
+  }
+
+  return _ref3 = {}, _ref3[buttonIconStyles.iconSmall(theme)] = true, _ref3[buttonIconStyles.iconSmallLeft(theme)] = position === 'left', _ref3[buttonIconStyles.iconSmallRight(theme)] = position === 'right', _ref3;
+};

package/components/Clickable/ClickableButtonIcon.styles/ClickableButtonIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonIcon.styles.ts"],"names":["ZERO_WIDTH_SPACE_CSS","css","memoizeStyle","buttonIconStyles","icon","iconSmall","t","btnIconSizeSmall","iconSmallLeft","btnIconGapSmall","iconSmallRight","btnIconGapSmallRight","iconMedium","btnIconSizeMedium","iconMediumLeft","btnIconGapMediumRight","iconMediumRight","btnIconGapMedium","iconLarge","btnIconSizeLarge","iconLargeLeft","btnIconGapLarge","iconLargeRight","btnIconGapLargeRight","iconNoMargin","getButtonIconSizeClassName","size","position","theme"],"mappings":"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","sourcesContent":["import { ZERO_WIDTH_SPACE_CSS } from '../../lib/chars';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { ClickableProps } from './Clickable';\nimport { ClickableButtonIconProps } from './ClickableButtonIcon';\n\nexport const buttonIconStyles = memoizeStyle({\n  icon() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n\n      &::before {\n        content: '${ZERO_WIDTH_SPACE_CSS}';\n      }\n    `;\n  },\n\n  iconSmall(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeSmall};\n    `;\n  },\n\n  iconSmallLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapSmall};\n    `;\n  },\n\n  iconSmallRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapSmallRight};\n    `;\n  },\n\n  iconMedium(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeMedium};\n    `;\n  },\n\n  iconMediumLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapMediumRight};\n    `;\n  },\n\n  iconMediumRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapMedium};\n    `;\n  },\n\n  iconLarge(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeLarge};\n    `;\n  },\n\n  iconLargeLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapLarge};\n    `;\n  },\n\n  iconLargeRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapLargeRight};\n    `;\n  },\n\n  iconNoMargin() {\n    return css`\n      margin-right: 0;\n      margin-left: 0;\n    `;\n  },\n});\n\nexport const getButtonIconSizeClassName = (\n  size: ClickableProps['size'],\n  position: ClickableButtonIconProps['position'],\n  theme: Theme,\n) => {\n  if (size === 'large') {\n    return {\n      [buttonIconStyles.iconLarge(theme)]: true,\n      [buttonIconStyles.iconLargeLeft(theme)]: position === 'left',\n      [buttonIconStyles.iconLargeRight(theme)]: position === 'right',\n    };\n  }\n\n  if (size === 'medium') {\n    return {\n      [buttonIconStyles.iconMedium(theme)]: true,\n      [buttonIconStyles.iconMediumLeft(theme)]: position === 'left',\n      [buttonIconStyles.iconMediumRight(theme)]: position === 'right',\n    };\n  }\n\n  return {\n    [buttonIconStyles.iconSmall(theme)]: true,\n    [buttonIconStyles.iconSmallLeft(theme)]: position === 'left',\n    [buttonIconStyles.iconSmallRight(theme)]: position === 'right',\n  };\n};\n"]}

package/components/Clickable/ClickableButtonIcon.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonIcon.styles.js",
+  "module": "ClickableButtonIcon.styles",
+  "types": "../ClickableButtonIcon.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonIcon.styles.d.ts

@@ -0,0 +1,19 @@
+import { Theme } from '../../lib/theming/Theme';
+import { ClickableProps } from './Clickable';
+import { ClickableButtonIconProps } from './ClickableButtonIcon';
+export declare const buttonIconStyles: {
+    icon(): string;
+    iconSmall(t: Theme): string;
+    iconSmallLeft(t: Theme): string;
+    iconSmallRight(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconMediumLeft(t: Theme): string;
+    iconMediumRight(t: Theme): string;
+    iconLarge(t: Theme): string;
+    iconLargeLeft(t: Theme): string;
+    iconLargeRight(t: Theme): string;
+    iconNoMargin(): string;
+};
+export declare const getButtonIconSizeClassName: (size: ClickableProps['size'], position: ClickableButtonIconProps['position'], theme: Theme) => {
+    [x: string]: boolean;
+};

package/components/Clickable/ClickableButtonLoadingIcon/ClickableButtonLoadingIcon.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { cx } from "../../../lib/theming/Emotion";
+import { LoadingIcon } from "../../../internal/icons2022/LoadingIcon";
+import { ClickableDataTids } from "../Clickable";
+import { buttonLoadingIconStyles } from "../ClickableButtonLoadingIcon.styles";
+export var ClickableButtonLoadingIcon = function ClickableButtonLoadingIcon(_ref) {
+  var _cx;
+
+  var size = _ref.size,
+      _ref$isCentered = _ref.isCentered,
+      isCentered = _ref$isCentered === void 0 ? true : _ref$isCentered;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-tid": ClickableDataTids.spinner,
+    className: cx((_cx = {}, _cx[buttonLoadingIconStyles.buttonLoading()] = isCentered, _cx))
+  }, /*#__PURE__*/React.createElement(LoadingIcon, {
+    size: size
+  }));
+};

package/components/Clickable/ClickableButtonLoadingIcon/ClickableButtonLoadingIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonLoadingIcon.tsx"],"names":["React","cx","LoadingIcon","ClickableDataTids","buttonLoadingIconStyles","ClickableButtonLoadingIcon","size","isCentered","spinner","buttonLoading"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,sCAA5B;;AAEA,SAASC,iBAAT,QAAkD,aAAlD;AACA,SAASC,uBAAT,QAAwC,qCAAxC;;;;;;AAMA,OAAO,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B,OAAkE,aAA/DC,IAA+D,QAA/DA,IAA+D,wBAAzDC,UAAyD,CAAzDA,UAAyD,gCAA5C,IAA4C;AAC1G;AACE,iCAAK,YAAUJ,iBAAiB,CAACK,OAAjC,EAA0C,SAAS,EAAEP,EAAE,gBAAIG,uBAAuB,CAACK,aAAxB,EAAJ,IAA8CF,UAA9C,OAAvD;AACE,wBAAC,WAAD,IAAa,IAAI,EAAED,IAAnB,GADF,CADF;;;AAKD,CANM","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { LoadingIcon } from '../../internal/icons2022/LoadingIcon';\n\nimport { ClickableDataTids, ClickableProps } from './Clickable';\nimport { buttonLoadingIconStyles } from './ClickableButtonLoadingIcon.styles';\n\ninterface ClickableButtonLoadingIconProps extends Pick<ClickableProps, 'size'> {\n  isCentered?: boolean;\n}\n\nexport const ClickableButtonLoadingIcon = ({ size, isCentered = true }: ClickableButtonLoadingIconProps) => {\n  return (\n    <div data-tid={ClickableDataTids.spinner} className={cx({ [buttonLoadingIconStyles.buttonLoading()]: isCentered })}>\n      <LoadingIcon size={size} />\n    </div>\n  );\n};\n"]}

package/components/Clickable/ClickableButtonLoadingIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonLoadingIcon.js",
+  "module": "ClickableButtonLoadingIcon",
+  "types": "../ClickableButtonLoadingIcon.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonLoadingIcon.d.ts

@@ -0,0 +1,6 @@
+import { ClickableProps } from './Clickable';
+interface ClickableButtonLoadingIconProps extends Pick<ClickableProps, 'size'> {
+    isCentered?: boolean;
+}
+export declare const ClickableButtonLoadingIcon: ({ size, isCentered }: ClickableButtonLoadingIconProps) => JSX.Element;
+export {};

package/components/Clickable/ClickableButtonLoadingIcon.styles/ClickableButtonLoadingIcon.styles.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var buttonLoadingIconStyles = memoizeStyle({
+  buttonLoading: function buttonLoading() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n    "])));
+  }
+});

package/components/Clickable/ClickableButtonLoadingIcon.styles/ClickableButtonLoadingIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonLoadingIcon.styles.ts"],"names":["css","memoizeStyle","buttonLoadingIconStyles","buttonLoading"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,uBAAuB,GAAGD,YAAY,CAAC;AAClDE,EAAAA,aADkD,2BAClC;AACd,WAAOH,GAAP;;;;;;;;;;;;AAYD,GAdiD,EAAD,CAA5C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonLoadingIconStyles = memoizeStyle({\n  buttonLoading() {\n    return css`\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n    `;\n  },\n});\n"]}

package/components/Clickable/ClickableButtonLoadingIcon.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonLoadingIcon.styles.js",
+  "module": "ClickableButtonLoadingIcon.styles",
+  "types": "../ClickableButtonLoadingIcon.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonLoadingIcon.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const buttonLoadingIconStyles: {
+    buttonLoading(): string;
+};

package/components/Clickable/ClickableButtonOutline/ClickableButtonOutline.js

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { buttonOutlineStyles } from "../ClickableButtonOutline.styles";
+export var ClickableButtonOutline = function ClickableButtonOutline(_ref) {
+  var _cx;
+
+  var isWarning = _ref.isWarning,
+      isError = _ref.isError,
+      isDisabled = _ref.isDisabled,
+      isLoading = _ref.isLoading,
+      isFocused = _ref.isFocused;
+  var theme = useContext(ThemeContext);
+
+  if (isFocused || isDisabled || isLoading) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx((_cx = {}, _cx[buttonOutlineStyles.buttonOutline()] = true, _cx[buttonOutlineStyles.buttonOutlineWarning(theme)] = isWarning, _cx[buttonOutlineStyles.buttonOutlineError(theme)] = isError, _cx))
+  });
+};

package/components/Clickable/ClickableButtonOutline/ClickableButtonOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonOutline.tsx"],"names":["React","useContext","ThemeContext","cx","buttonOutlineStyles","ClickableButtonOutline","isWarning","isError","isDisabled","isLoading","isFocused","theme","buttonOutline","buttonOutlineWarning","buttonOutlineError"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;;;AAGA,SAASC,mBAAT,QAAoC,iCAApC;;;;;;;AAOA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB;;;;;;AAMH,aALjCC,SAKiC,QALjCA,SAKiC,CAJjCC,OAIiC,QAJjCA,OAIiC,CAHjCC,UAGiC,QAHjCA,UAGiC,CAFjCC,SAEiC,QAFjCA,SAEiC,CADjCC,SACiC,QADjCA,SACiC;AACjC,MAAMC,KAAK,GAAGV,UAAU,CAACC,YAAD,CAAxB;;AAEA,MAAIQ,SAAS,IAAIF,UAAb,IAA2BC,SAA/B,EAA0C;AACxC,WAAO,IAAP;AACD;;AAED;AACE;AACE,MAAA,SAAS,EAAEN,EAAE;AACVC,MAAAA,mBAAmB,CAACQ,aAApB,EADU,IAC4B,IAD5B;AAEVR,MAAAA,mBAAmB,CAACS,oBAApB,CAAyCF,KAAzC,CAFU,IAEwCL,SAFxC;AAGVF,MAAAA,mBAAmB,CAACU,kBAApB,CAAuCH,KAAvC,CAHU,IAGsCJ,OAHtC,OADf,GADF;;;;AASD,CAtBM","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { ClickableButtonProps } from './ClickableButton';\nimport { buttonOutlineStyles } from './ClickableButtonOutline.styles';\n\ntype ClickableButtonOutlineProps = Pick<\n  ClickableButtonProps,\n  'isWarning' | 'isError' | 'isDisabled' | 'isLoading' | 'isFocused'\n>;\n\nexport const ClickableButtonOutline = ({\n  isWarning,\n  isError,\n  isDisabled,\n  isLoading,\n  isFocused,\n}: ClickableButtonOutlineProps) => {\n  const theme = useContext(ThemeContext);\n\n  if (isFocused || isDisabled || isLoading) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cx({\n        [buttonOutlineStyles.buttonOutline()]: true,\n        [buttonOutlineStyles.buttonOutlineWarning(theme)]: isWarning,\n        [buttonOutlineStyles.buttonOutlineError(theme)]: isError,\n      })}\n    />\n  );\n};\n"]}

package/components/Clickable/ClickableButtonOutline/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonOutline.js",
+  "module": "ClickableButtonOutline",
+  "types": "../ClickableButtonOutline.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonOutline.d.ts

@@ -0,0 +1,4 @@
+import { ClickableButtonProps } from './ClickableButton';
+declare type ClickableButtonOutlineProps = Pick<ClickableButtonProps, 'isWarning' | 'isError' | 'isDisabled' | 'isLoading' | 'isFocused'>;
+export declare const ClickableButtonOutline: ({ isWarning, isError, isDisabled, isLoading, isFocused, }: ClickableButtonOutlineProps) => JSX.Element | null;
+export {};

package/components/Clickable/ClickableButtonOutline.styles/ClickableButtonOutline.styles.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var buttonOutlineStyles = memoizeStyle({
+  buttonOutline: function buttonOutline() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      border-radius: inherit;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    "])));
+  },
+  buttonOutlineWarning: function buttonOutlineWarning(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 ", " ", ",\n        inset 0 0 0 ", " ", ";\n    "])), t.btnOutlineWidth, t.btnBorderColorWarning, t.btnInsetWidth, t.btnInsetColor);
+  },
+  buttonOutlineError: function buttonOutlineError(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 ", " ", ", inset 0 0 0 ", " ", ";\n    "])), t.btnOutlineWidth, t.btnBorderColorError, t.btnInsetWidth, t.btnInsetColor);
+  }
+});

package/components/Clickable/ClickableButtonOutline.styles/ClickableButtonOutline.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonOutline.styles.ts"],"names":["css","memoizeStyle","buttonOutlineStyles","buttonOutline","buttonOutlineWarning","t","btnOutlineWidth","btnBorderColorWarning","btnInsetWidth","btnInsetColor","buttonOutlineError","btnBorderColorError"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,mBAAmB,GAAGD,YAAY,CAAC;AAC9CE,EAAAA,aAD8C,2BAC9B;AACd,WAAOH,GAAP;;;;;;;;AAQD,GAV6C;AAW9CI,EAAAA,oBAX8C,gCAWzBC,CAXyB,EAWf;AAC7B,WAAOL,GAAP;AACsBK,IAAAA,CAAC,CAACC,eADxB,EAC2CD,CAAC,CAACE,qBAD7C;AAEkBF,IAAAA,CAAC,CAACG,aAFpB,EAEqCH,CAAC,CAACI,aAFvC;;AAID,GAhB6C;AAiB9CC,EAAAA,kBAjB8C,8BAiB3BL,CAjB2B,EAiBjB;AAC3B,WAAOL,GAAP;AACsBK,IAAAA,CAAC,CAACC,eADxB,EAC2CD,CAAC,CAACM,mBAD7C,EACiFN,CAAC,CAACG,aADnF,EACoGH,CAAC,CAACI,aADtG;;AAGD,GArB6C,EAAD,CAAxC","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonOutlineStyles = memoizeStyle({\n  buttonOutline() {\n    return css`\n      border-radius: inherit;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    `;\n  },\n  buttonOutlineWarning(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 ${t.btnOutlineWidth} ${t.btnBorderColorWarning},\n        inset 0 0 0 ${t.btnInsetWidth} ${t.btnInsetColor};\n    `;\n  },\n  buttonOutlineError(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 ${t.btnOutlineWidth} ${t.btnBorderColorError}, inset 0 0 0 ${t.btnInsetWidth} ${t.btnInsetColor};\n    `;\n  },\n});\n"]}

package/components/Clickable/ClickableButtonOutline.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonOutline.styles.js",
+  "module": "ClickableButtonOutline.styles",
+  "types": "../ClickableButtonOutline.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonOutline.styles.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const buttonOutlineStyles: {
+    buttonOutline(): string;
+    buttonOutlineWarning(t: Theme): string;
+    buttonOutlineError(t: Theme): string;
+};

package/components/Clickable/ClickableButtonWrapper/ClickableButtonWrapper.js

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { buttonWrapperStyles } from "../ClickableButtonWrapper.styles";
+export var ClickableButtonWrapper = function ClickableButtonWrapper(_ref) {
+  var _cx;
+
+  var width = _ref.width,
+      size = _ref.size,
+      children = _ref.children;
+  var theme = useContext(ThemeContext);
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: width
+    },
+    className: cx((_cx = {}, _cx[buttonWrapperStyles.buttonWrapper(theme)] = true, _cx[buttonWrapperStyles.buttonWrapperSmall(theme)] = size === 'small' || size === undefined, _cx[buttonWrapperStyles.buttonWrapperMedium(theme)] = size === 'medium', _cx[buttonWrapperStyles.buttonWrapperLarge(theme)] = size === 'large', _cx))
+  }, children);
+};

package/components/Clickable/ClickableButtonWrapper/ClickableButtonWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonWrapper.tsx"],"names":["React","useContext","ThemeContext","cx","buttonWrapperStyles","ClickableButtonWrapper","width","size","children","theme","buttonWrapper","buttonWrapperSmall","undefined","buttonWrapperMedium","buttonWrapperLarge"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;;;AAGA,SAASC,mBAAT,QAAoC,iCAApC;;;;AAIA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,OAA4D,aAAzDC,KAAyD,QAAzDA,KAAyD,CAAlDC,IAAkD,QAAlDA,IAAkD,CAA5CC,QAA4C,QAA5CA,QAA4C;AAChG,MAAMC,KAAK,GAAGR,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE;AACE,MAAA,KAAK,EAAE,EAAEI,KAAK,EAALA,KAAF,EADT;AAEE,MAAA,SAAS,EAAEH,EAAE;AACVC,MAAAA,mBAAmB,CAACM,aAApB,CAAkCD,KAAlC,CADU,IACiC,IADjC;AAEVL,MAAAA,mBAAmB,CAACO,kBAApB,CAAuCF,KAAvC,CAFU,IAEsCF,IAAI,KAAK,OAAT,IAAoBA,IAAI,KAAKK,SAFnE;AAGVR,MAAAA,mBAAmB,CAACS,mBAApB,CAAwCJ,KAAxC,CAHU,IAGuCF,IAAI,KAAK,QAHhD;AAIVH,MAAAA,mBAAmB,CAACU,kBAApB,CAAuCL,KAAvC,CAJU,IAIsCF,IAAI,KAAK,OAJ/C,OAFf;;;AASGC,IAAAA,QATH,CADF;;;AAaD,CAhBM","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { ClickableProps } from './Clickable';\nimport { buttonWrapperStyles } from './ClickableButtonWrapper.styles';\n\nexport type ClickableButtonWrapperProps = Pick<ClickableProps, 'width' | 'size' | 'children'>;\n\nexport const ClickableButtonWrapper = ({ width, size, children }: ClickableButtonWrapperProps) => {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <span\n      style={{ width }}\n      className={cx({\n        [buttonWrapperStyles.buttonWrapper(theme)]: true,\n        [buttonWrapperStyles.buttonWrapperSmall(theme)]: size === 'small' || size === undefined,\n        [buttonWrapperStyles.buttonWrapperMedium(theme)]: size === 'medium',\n        [buttonWrapperStyles.buttonWrapperLarge(theme)]: size === 'large',\n      })}\n    >\n      {children}\n    </span>\n  );\n};\n"]}

package/components/Clickable/ClickableButtonWrapper/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonWrapper.js",
+  "module": "ClickableButtonWrapper",
+  "types": "../ClickableButtonWrapper.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonWrapper.d.ts

@@ -0,0 +1,3 @@
+import { ClickableProps } from './Clickable';
+export declare type ClickableButtonWrapperProps = Pick<ClickableProps, 'width' | 'size' | 'children'>;
+export declare const ClickableButtonWrapper: ({ width, size, children }: ClickableButtonWrapperProps) => JSX.Element;

package/components/Clickable/ClickableButtonWrapper.styles/ClickableButtonWrapper.styles.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var buttonWrapperStyles = memoizeStyle({
+  buttonWrapper: function buttonWrapper(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      display: inline-block;\n      line-height: normal;\n      padding: ", ";\n    "])), t.btnBorderWidth);
+  },
+  buttonWrapperSmall: function buttonWrapperSmall(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.btnHeightSmall);
+  },
+  buttonWrapperMedium: function buttonWrapperMedium(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.btnHeightMedium);
+  },
+  buttonWrapperLarge: function buttonWrapperLarge(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.btnHeightLarge);
+  }
+});

package/components/Clickable/ClickableButtonWrapper.styles/ClickableButtonWrapper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonWrapper.styles.ts"],"names":["css","memoizeStyle","buttonWrapperStyles","buttonWrapper","t","btnBorderWidth","buttonWrapperSmall","btnHeightSmall","buttonWrapperMedium","btnHeightMedium","buttonWrapperLarge","btnHeightLarge"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,mBAAmB,GAAGD,YAAY,CAAC;AAC9CE,EAAAA,aAD8C,yBAChCC,CADgC,EACtB;AACtB,WAAOJ,GAAP;;;;AAIaI,IAAAA,CAAC,CAACC,cAJf;;AAMD,GAR6C;AAS9CC,EAAAA,kBAT8C,8BAS3BF,CAT2B,EASjB;AAC3B,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACG,cADd;;AAGD,GAb6C;AAc9CC,EAAAA,mBAd8C,+BAc1BJ,CAd0B,EAchB;AAC5B,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACK,eADd;;AAGD,GAlB6C;AAmB9CC,EAAAA,kBAnB8C,8BAmB3BN,CAnB2B,EAmBjB;AAC3B,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACO,cADd;;AAGD,GAvB6C,EAAD,CAAxC","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonWrapperStyles = memoizeStyle({\n  buttonWrapper(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      display: inline-block;\n      line-height: normal;\n      padding: ${t.btnBorderWidth};\n    `;\n  },\n  buttonWrapperSmall(t: Theme) {\n    return css`\n      height: ${t.btnHeightSmall};\n    `;\n  },\n  buttonWrapperMedium(t: Theme) {\n    return css`\n      height: ${t.btnHeightMedium};\n    `;\n  },\n  buttonWrapperLarge(t: Theme) {\n    return css`\n      height: ${t.btnHeightLarge};\n    `;\n  },\n});\n"]}

package/components/Clickable/ClickableButtonWrapper.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonWrapper.styles.js",
+  "module": "ClickableButtonWrapper.styles",
+  "types": "../ClickableButtonWrapper.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonWrapper.styles.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const buttonWrapperStyles: {
+    buttonWrapper(t: Theme): string;
+    buttonWrapperSmall(t: Theme): string;
+    buttonWrapperMedium(t: Theme): string;
+    buttonWrapperLarge(t: Theme): string;
+};

package/components/Clickable/ClickableLink/ClickableLink.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ClickableLinkChild } from "../ClickableLinkChild";
+import { ClickableLinkIcon } from "../ClickableLinkIcon";
+export var ClickableLink = function ClickableLink(_ref) {
+  var leftIcon = _ref.leftIcon,
+      rightIcon = _ref.rightIcon,
+      isLoading = _ref.isLoading,
+      isFocused = _ref.isFocused,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, leftIcon && /*#__PURE__*/React.createElement(ClickableLinkIcon, {
+    icon: leftIcon,
+    isLoading: isLoading,
+    position: "left"
+  }), /*#__PURE__*/React.createElement(ClickableLinkChild, {
+    isFocused: isFocused
+  }, children), rightIcon && /*#__PURE__*/React.createElement(ClickableLinkIcon, {
+    icon: rightIcon,
+    isLoading: isLoading,
+    position: "right",
+    hasBothIcons: !!leftIcon && !!rightIcon
+  }));
+};

package/components/Clickable/ClickableLink/ClickableLink.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableLink.tsx"],"names":["React","ClickableLinkChild","ClickableLinkIcon","ClickableLink","leftIcon","rightIcon","isLoading","isFocused","children"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,kBAAT,QAA4D,sBAA5D;AACA,SAASC,iBAAT,QAAkC,qBAAlC;;;;;;AAMA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAAiF,KAA9EC,QAA8E,QAA9EA,QAA8E,CAApEC,SAAoE,QAApEA,SAAoE,CAAzDC,SAAyD,QAAzDA,SAAyD,CAA9CC,SAA8C,QAA9CA,SAA8C,CAAnCC,QAAmC,QAAnCA,QAAmC;AAC5G;AACE;AACGJ,IAAAA,QAAQ,iBAAI,oBAAC,iBAAD,IAAmB,IAAI,EAAEA,QAAzB,EAAmC,SAAS,EAAEE,SAA9C,EAAyD,QAAQ,EAAC,MAAlE,GADf;AAEE,wBAAC,kBAAD,IAAoB,SAAS,EAAEC,SAA/B,IAA2CC,QAA3C,CAFF;AAGGH,IAAAA,SAAS;AACR,wBAAC,iBAAD;AACE,MAAA,IAAI,EAAEA,SADR;AAEE,MAAA,SAAS,EAAEC,SAFb;AAGE,MAAA,QAAQ,EAAC,OAHX;AAIE,MAAA,YAAY,EAAE,CAAC,CAACF,QAAF,IAAc,CAAC,CAACC,SAJhC,GAJJ,CADF;;;;;AAcD,CAfM","sourcesContent":["import React from 'react';\n\nimport { ClickableProps } from './Clickable';\nimport { ClickableLinkChild, ClickableLinkChildProps } from './ClickableLinkChild';\nimport { ClickableLinkIcon } from './ClickableLinkIcon';\n\nexport interface ClickableLinkProps\n  extends ClickableLinkChildProps,\n    Pick<ClickableProps, 'leftIcon' | 'rightIcon' | 'isLoading'> {}\n\nexport const ClickableLink = ({ leftIcon, rightIcon, isLoading, isFocused, children }: ClickableLinkProps) => {\n  return (\n    <>\n      {leftIcon && <ClickableLinkIcon icon={leftIcon} isLoading={isLoading} position=\"left\" />}\n      <ClickableLinkChild isFocused={isFocused}>{children}</ClickableLinkChild>\n      {rightIcon && (\n        <ClickableLinkIcon\n          icon={rightIcon}\n          isLoading={isLoading}\n          position=\"right\"\n          hasBothIcons={!!leftIcon && !!rightIcon}\n        />\n      )}\n    </>\n  );\n};\n"]}

package/components/Clickable/ClickableLink/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableLink.js",
+  "module": "ClickableLink",
+  "types": "../ClickableLink.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableLink.d.ts

@@ -0,0 +1,5 @@
+import { ClickableProps } from './Clickable';
+import { ClickableLinkChildProps } from './ClickableLinkChild';
+export interface ClickableLinkProps extends ClickableLinkChildProps, Pick<ClickableProps, 'leftIcon' | 'rightIcon' | 'isLoading'> {
+}
+export declare const ClickableLink: ({ leftIcon, rightIcon, isLoading, isFocused, children }: ClickableLinkProps) => JSX.Element;