@bikdotai/bik-component-library 0.0.833 → 0.0.834

package/dist/esm/components/dropdown-button/DropdownButton.js

@@ -1,30 +1,91 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { DropdownPopover as d } from "../dropdown/DropdownPopover/index.js";
-import { SpinnerColorMap as e } from "../button/themes.js";
-import { DropdownButtonStyle as s, LoaderContainer as a } from "./DropdownButton.style.js";
-import { Spinner as u } from "../spinner/Spinner.js";
-import { Button as r } from "../button/Button.js";
-const f = (o) => {
-  const { onClick: p, ...i } = o.buttonProps;
-  return /* @__PURE__ */ n(
-    s,
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { DropdownPopover as u } from "../dropdown/DropdownPopover/index.js";
+import { SpinnerColorMap as p } from "../button/themes.js";
+import { DropdownButtonStyle as a, LoaderContainer as m } from "./DropdownButton.style.js";
+import { IconButton as l } from "../icon-button/IconButton.js";
+import { Tooltip as y } from "../tooltips/Tooltip.js";
+import { Spinner as x } from "../spinner/Spinner.js";
+import { Button as b } from "../button/Button.js";
+const S = (o) => {
+  const e = !!o.iconButtonProps, r = e ? o.iconButtonProps?.disabled : o.buttonProps?.disabled;
+  if (e) {
+    const { iconButtonProps: n, iconButtonTooltip: i } = o, d = /* @__PURE__ */ t(
+      l,
+      {
+        ...n,
+        style: {
+          borderRadius: "0px",
+          borderTopLeftRadius: "4px",
+          borderBottomLeftRadius: "4px"
+        }
+      }
+    );
+    return /* @__PURE__ */ s(
+      a,
+      {
+        type: void 0,
+        disabled: r,
+        isIconButton: !0,
+        iconButtonType: n?.iconButtonType ?? "primary",
+        iconButtonSize: n?.size ?? "default",
+        children: [
+          i ? /* @__PURE__ */ t(
+            y,
+            {
+              body: i.body,
+              tooltipContent: i.tooltipContent,
+              placement: i.placement,
+              children: d
+            }
+          ) : d,
+          /* @__PURE__ */ t("div", { className: "dd-button-divider" }),
+          /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ t(u, { ...o.dropdownProps, isChildLoading: !1, children: /* @__PURE__ */ t(
+            l,
+            {
+              Icon: o.iconProps,
+              iconButtonType: n?.iconButtonType ?? "primary",
+              size: n?.size,
+              disabled: r,
+              style: {
+                display: "flex",
+                borderRadius: "0px",
+                borderTopRightRadius: "4px",
+                borderBottomRightRadius: "4px"
+              }
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+  const {
+    onClick: P,
+    LeadingIcon: B,
+    LeadingIconStyles: f,
+    IconComponent: R,
+    TrailingIcon: g,
+    ...c
+  } = o.buttonProps;
+  return /* @__PURE__ */ s(
+    a,
     {
       type: o.buttonProps.buttonType,
       disabled: o.buttonProps.disabled,
+      size: o.buttonProps.size,
       children: [
-        o.buttonProps?.isLoading && /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(
-          u,
+        o.buttonProps?.isLoading && /* @__PURE__ */ t(m, { type: o.buttonProps.buttonType, children: /* @__PURE__ */ t(
+          x,
           {
             className: "spinner",
             size: "small",
-            color: e(
+            color: p(
               o.buttonProps.buttonType || "primary",
               o.buttonProps.inverse
             )
           }
         ) }),
         /* @__PURE__ */ t(
-          r,
+          b,
           {
             ...o.buttonProps,
             isLoading: !1,
@@ -32,27 +93,29 @@ const f = (o) => {
               borderRadius: "0px",
               borderTopLeftRadius: "4px",
               borderBottomLeftRadius: "4px",
-              borderRight: "0px"
+              borderRight: "0px",
+              ...o.buttonProps?.size === "xs" ? { border: "none", borderRadius: "0px" } : {}
             }
           }
         ),
         /* @__PURE__ */ t("div", { className: "dd-button-divider" }),
         /* @__PURE__ */ t(
-          d,
+          u,
           {
             ...o.dropdownProps,
             isChildLoading: o.buttonProps?.isLoading,
             children: /* @__PURE__ */ t(
-              r,
+              b,
               {
-                ...i,
+                ...c,
                 isLoading: !1,
                 buttonText: "",
                 TrailingIcon: o.iconProps,
                 style: {
                   borderRadius: "0px",
                   borderTopRightRadius: "4px",
-                  borderBottomRightRadius: "4px"
+                  borderBottomRightRadius: "4px",
+                  ...o.buttonProps?.size === "xs" ? { border: "none", borderRadius: "0px" } : {}
                 }
               }
             )
@@ -63,6 +126,6 @@ const f = (o) => {
   );
 };
 export {
-  f as DropdownButton
+  S as DropdownButton
 };
 //# sourceMappingURL=DropdownButton.js.map

package/dist/esm/components/dropdown-button/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../../../../src/components/dropdown-button/DropdownButton.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownPopover, DropdownProps } from '@src/components/dropdown';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { SpinnerColorMap } from '../button/themes';\nimport { Spinner } from '../spinner';\nimport { DropdownButtonStyle, LoaderContainer } from './DropdownButton.style';\n\nexport interface DropdownButtonProps {\n\tdropdownProps: DropdownProps;\n\tbuttonProps: ButtonProps;\n\ticonProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n}\n\nexport const DropdownButton: React.FC<DropdownButtonProps> = (props) => {\n\tconst { onClick, ...childButtonProps } = props.buttonProps;\n\n\treturn (\n\t\t<DropdownButtonStyle\n\t\t\ttype={props.buttonProps.buttonType}\n\t\t\tdisabled={props.buttonProps.disabled}\n\t\t>\n\t\t\t{props.buttonProps?.isLoading && (\n\t\t\t\t<LoaderContainer>\n\t\t\t\t\t<Spinner\n\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tcolor={SpinnerColorMap(\n\t\t\t\t\t\t\tprops.buttonProps.buttonType || 'primary',\n\t\t\t\t\t\t\tprops.buttonProps.inverse,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</LoaderContainer>\n\t\t\t)}\n\n\t\t\t<Button\n\t\t\t\t{...props.buttonProps}\n\t\t\t\tisLoading={false}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t\tborderRight: '0px',\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t<DropdownPopover\n\t\t\t\t{...props.dropdownProps}\n\t\t\t\tisChildLoading={props.buttonProps?.isLoading}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\t{...childButtonProps}\n\t\t\t\t\tisLoading={false}\n\t\t\t\t\tbuttonText={''}\n\t\t\t\t\tTrailingIcon={props.iconProps}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</DropdownPopover>\n\t\t</DropdownButtonStyle>\n\t);\n};\n"],"names":["DropdownButton","props","onClick","childButtonProps","jsxs","DropdownButtonStyle","jsx","LoaderContainer","Spinner","SpinnerColorMap","Button","DropdownPopover"],"mappings":";;;;;;AAcO,MAAMA,IAAgD,CAACC,MAAU;AACvE,QAAM,EAAE,SAAAC,GAAS,GAAGC,EAAA,IAAqBF,EAAM;AAE/C,SACC,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAMJ,EAAM,YAAY;AAAA,MACxB,UAAUA,EAAM,YAAY;AAAA,MAE3B,UAAA;AAAA,QAAAA,EAAM,aAAa,aACnB,gBAAAK,EAACC,GAAA,EACA,UAAA,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAOC;AAAA,cACNR,EAAM,YAAY,cAAc;AAAA,cAChCA,EAAM,YAAY;AAAA,YAAA;AAAA,UACnB;AAAA,QAAA,GAEF;AAAA,QAGD,gBAAAK;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,GAAGT,EAAM;AAAA,YACV,WAAW;AAAA,YACX,OAAO;AAAA,cACN,cAAc;AAAA,cACd,qBAAqB;AAAA,cACrB,wBAAwB;AAAA,cACxB,aAAa;AAAA,YAAA;AAAA,UACd;AAAA,QAAA;AAAA,QAED,gBAAAK,EAAC,OAAA,EAAI,WAAU,oBAAA,CAAoB;AAAA,QACnC,gBAAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,GAAGV,EAAM;AAAA,YACV,gBAAgBA,EAAM,aAAa;AAAA,YAEnC,UAAA,gBAAAK;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,GAAGP;AAAA,gBACJ,WAAW;AAAA,gBACX,YAAY;AAAA,gBACZ,cAAcF,EAAM;AAAA,gBACpB,OAAO;AAAA,kBACN,cAAc;AAAA,kBACd,sBAAsB;AAAA,kBACtB,yBAAyB;AAAA,gBAAA;AAAA,cAC1B;AAAA,YAAA;AAAA,UACD;AAAA,QAAA;AAAA,MACD;AAAA,IAAA;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"DropdownButton.js","sources":["../../../../src/components/dropdown-button/DropdownButton.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownPopover, DropdownProps } from '@src/components/dropdown';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { SpinnerColorMap } from '../button/themes';\nimport { IconButton } from '../icon-button';\nimport { IconButtonProps } from '../icon-button/model';\nimport { Spinner } from '../spinner';\nimport { Placement, Tooltip } from '../tooltips';\nimport { DropdownButtonStyle, LoaderContainer } from './DropdownButton.style';\n\nexport interface DropdownButtonProps {\n\tdropdownProps: DropdownProps;\n\ticonProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tbuttonProps?: ButtonProps;\n\ticonButtonProps?: IconButtonProps;\n\t/**\n\t * Optional tooltip shown only on the main icon button (icon mode),\n\t * not on the dropdown/chevron trigger.\n\t */\n\ticonButtonTooltip?: {\n\t\tbody?: string;\n\t\ttooltipContent?: JSX.Element;\n\t\tplacement?: Placement;\n\t};\n}\n\nexport const DropdownButton: React.FC<DropdownButtonProps> = (props) => {\n\tconst isIconMode = !!props.iconButtonProps;\n\tconst disabled = isIconMode\n\t\t? props.iconButtonProps?.disabled\n\t\t: props.buttonProps?.disabled;\n\n\tif (isIconMode) {\n\t\tconst { iconButtonProps, iconButtonTooltip } = props;\n\t\tconst iconButton = (\n\t\t\t<IconButton\n\t\t\t\t{...iconButtonProps!}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t\treturn (\n\t\t\t<DropdownButtonStyle\n\t\t\t\ttype={undefined}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisIconButton\n\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\ticonButtonSize={iconButtonProps?.size ?? 'default'}\n\t\t\t>\n\t\t\t\t{iconButtonTooltip ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={iconButtonTooltip.body}\n\t\t\t\t\t\ttooltipContent={iconButtonTooltip.tooltipContent}\n\t\t\t\t\t\tplacement={iconButtonTooltip.placement}\n\t\t\t\t\t>\n\t\t\t\t\t\t{iconButton}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\ticonButton\n\t\t\t\t)}\n\t\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t\t<div style={{ display: 'flex', alignItems: 'center' }}>\n\t\t\t\t\t<DropdownPopover {...props.dropdownProps} isChildLoading={false}>\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={props.iconProps}\n\t\t\t\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\t\t\t\tsize={iconButtonProps?.size}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</DropdownButtonStyle>\n\t\t);\n\t}\n\n\tconst {\n\t\tonClick,\n\t\tLeadingIcon,\n\t\tLeadingIconStyles,\n\t\tIconComponent,\n\t\tTrailingIcon,\n\t\t...childButtonProps\n\t} = props.buttonProps!;\n\n\treturn (\n\t\t<DropdownButtonStyle\n\t\t\ttype={props.buttonProps!.buttonType}\n\t\t\tdisabled={props.buttonProps!.disabled}\n\t\t\tsize={props.buttonProps!.size}\n\t\t>\n\t\t\t{props.buttonProps?.isLoading && (\n\t\t\t\t<LoaderContainer type={props.buttonProps.buttonType}>\n\t\t\t\t\t<Spinner\n\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tcolor={SpinnerColorMap(\n\t\t\t\t\t\t\tprops.buttonProps.buttonType || 'primary',\n\t\t\t\t\t\t\tprops.buttonProps.inverse,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</LoaderContainer>\n\t\t\t)}\n\n\t\t\t<Button\n\t\t\t\t{...props.buttonProps!}\n\t\t\t\tisLoading={false}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t\tborderRight: '0px',\n\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t? { border: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t: {}),\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t<DropdownPopover\n\t\t\t\t{...props.dropdownProps}\n\t\t\t\tisChildLoading={props.buttonProps?.isLoading}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\t{...childButtonProps}\n\t\t\t\t\tisLoading={false}\n\t\t\t\t\tbuttonText={''}\n\t\t\t\t\tTrailingIcon={props.iconProps}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t\t? { border: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</DropdownPopover>\n\t\t</DropdownButtonStyle>\n\t);\n};\n"],"names":["DropdownButton","props","isIconMode","disabled","iconButtonProps","iconButtonTooltip","iconButton","jsx","IconButton","jsxs","DropdownButtonStyle","Tooltip","DropdownPopover","onClick","LeadingIcon","LeadingIconStyles","IconComponent","TrailingIcon","childButtonProps","LoaderContainer","Spinner","SpinnerColorMap","Button"],"mappings":"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"}

package/dist/esm/components/dropdown-button/DropdownButton.style.d.ts

@@ -1,6 +1,13 @@
-import { Type } from '../button/model';
+import { Size, Type } from '../button/model';
+import { IconButtonType } from '../icon-button/model';
 export declare const DropdownButtonStyle: import('styled-components').StyledComponent<"div", any, {
     type: Type | undefined;
     disabled: boolean | undefined;
+    isIconButton?: boolean | undefined;
+    iconButtonType?: IconButtonType | undefined;
+    iconButtonSize?: "default" | "xs" | undefined;
+    size?: Size | undefined;
+}, never>;
+export declare const LoaderContainer: import('styled-components').StyledComponent<"div", any, {
+    type: Type | undefined;
 }, never>;
-export declare const LoaderContainer: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/esm/components/dropdown-button/DropdownButton.style.js

@@ -1,16 +1,42 @@
-import i from "styled-components";
-import { BASE_COLORS as n, COLORS as e } from "../../constants/Theme.js";
-const o = (t, r) => r ? e.content.inactive : t === "primary" ? "#CDA2FC" : e.content.primaryInverse, c = i.div`
+import r from "styled-components";
+import { COLORS as e } from "../../constants/Theme.js";
+const i = (t, n) => n ? e.content.inactive : t === "primary" ? "#CDA2FC" : e.content.primaryInverse, a = (t) => {
+  switch (t) {
+    case "destructive":
+      return e.background.negative.light;
+    case "secondaryGray":
+      return e.surface.subdued;
+    default:
+      return e.background.brandLight;
+  }
+}, o = (t, n) => n ? e.background.inactive : t === "primary" ? e.background.inverseLight : "transparent", s = r.div`
 	display: flex;
 	flex-direction: row;
 	width: max-content;
 	position: relative;
 	align-items: stretch;
+	${(t) => t.isIconButton && `
+		border-radius: 4px;
+		background: ${o(
+  t.iconButtonType ?? "primary",
+  t.disabled
+)};
+		height: ${t.iconButtonSize === "xs" ? "24px" : "32px"};
+		align-items: center;
+	`}
+	${(t) => (t.size === "xs" || t.iconButtonSize === "xs") && `
+		height: 24px;
+		align-items: center;
+		border-radius: 4px;
+		${!t.isIconButton && t.type ? `border: 1px solid ${t.disabled ? e.stroke.primary : t.type === "secondaryGray" ? e.stroke.primary : t.type === "secondary" ? e.stroke.brand : "transparent"};` : ""}
+	`}
 	.dd-button-divider {
-		width: ${(t) => ["primary", "destructive"].includes(t.type) ? "1px" : "0px"};
-		background-color: ${(t) => o(t.type, t?.disabled)};
+		width: ${(t) => ["primary", "destructive"].includes(t.type) || t.isIconButton || t.size === "xs" ? "1px" : "0px"};
+		height: ${(t) => t.isIconButton || t.size === "xs" ? "12px" : "auto"};
+		flex-shrink: 0;
+		background-color: ${(t) => t.isIconButton ? "rgba(255, 255, 255, 0.3)" : t.size === "xs" ? e.stroke.primary : i(t.type, t?.disabled)};
 	}
-`, s = i.div`
+`, u = r.div`
 	position: absolute;
 	inset: 0;
 	display: flex;
@@ -19,11 +45,11 @@ const o = (t, r) => r ? e.content.inactive : t === "primary" ? "#CDA2FC" : e.con
 	justify-content: center;
 	width: 100%;
 	border-radius: 4px;
-	background: ${n.brand[50]};
+	background: ${(t) => a(t.type)};
 	z-index: 3;
 `;
 export {
-  c as DropdownButtonStyle,
-  s as LoaderContainer
+  s as DropdownButtonStyle,
+  u as LoaderContainer
 };
 //# sourceMappingURL=DropdownButton.style.js.map

package/dist/esm/components/dropdown-button/DropdownButton.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.style.js","sources":["../../../../src/components/dropdown-button/DropdownButton.style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS, COLORS } from '../../constants/Theme';\nimport { Type } from '../button/model';\n\nconst getColor = (type: Type | undefined, disabled: boolean | undefined) => {\n\tif (disabled) return COLORS.content.inactive;\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn '#CDA2FC';\n\t\tdefault:\n\t\t\treturn COLORS.content.primaryInverse;\n\t}\n};\n\nexport const DropdownButtonStyle = styled.div<{\n\ttype: Type | undefined;\n\tdisabled: boolean | undefined;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: max-content;\n\tposition: relative;\n\talign-items: stretch;\n\t.dd-button-divider {\n\t\twidth: ${(props) =>\n\t\t\t['primary', 'destructive'].includes(props.type!) ? '1px' : '0px'};\n\t\tbackground-color: ${(props) => getColor(props.type, props?.disabled)};\n\t}\n`;\n\nexport const LoaderContainer = styled.div`\n\tposition: absolute;\n\tinset: 0;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\tborder-radius: 4px;\n\tbackground: ${BASE_COLORS.brand['50']};\n\tz-index: 3;\n`;\n"],"names":["getColor","type","disabled","COLORS","DropdownButtonStyle","styled","props","LoaderContainer","BASE_COLORS"],"mappings":";;AAIA,MAAMA,IAAW,CAACC,GAAwBC,MACrCA,IAAiBC,EAAO,QAAQ,WAC5BF,MACF,YACG,YAEAE,EAAO,QAAQ,gBAIZC,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAU/B,CAACC,MACT,CAAC,WAAW,aAAa,EAAE,SAASA,EAAM,IAAK,IAAI,QAAQ,KAAK;AAAA,sBAC7C,CAACA,MAAUN,EAASM,EAAM,MAAMA,GAAO,QAAQ,CAAC;AAAA;AAAA,GAIzDC,IAAkBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eASvBG,EAAY,MAAM,EAAI,CAAC;AAAA;AAAA;"}
+{"version":3,"file":"DropdownButton.style.js","sources":["../../../../src/components/dropdown-button/DropdownButton.style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\nimport { Size, Type } from '../button/model';\nimport { IconButtonType } from '../icon-button/model';\n\nconst getColor = (type: Type | undefined, disabled: boolean | undefined) => {\n\tif (disabled) return COLORS.content.inactive;\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn '#CDA2FC';\n\t\tdefault:\n\t\t\treturn COLORS.content.primaryInverse;\n\t}\n};\n\nconst getLoaderBackground = (type: Type | undefined): string => {\n\tswitch (type) {\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.light;\n\t\tcase 'secondaryGray':\n\t\t\treturn COLORS.surface.subdued;\n\t\tdefault:\n\t\t\treturn COLORS.background.brandLight;\n\t}\n};\n\nconst getIconButtonBackground = (\n\ticonButtonType: IconButtonType,\n\tdisabled: boolean | undefined,\n): string => {\n\tif (disabled) return COLORS.background.inactive;\n\tswitch (iconButtonType) {\n\t\tcase 'primary':\n\t\t\treturn COLORS.background.inverseLight;\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const DropdownButtonStyle = styled.div<{\n\ttype: Type | undefined;\n\tdisabled: boolean | undefined;\n\tisIconButton?: boolean;\n\ticonButtonType?: IconButtonType;\n\ticonButtonSize?: 'xs' | 'default';\n\tsize?: Size;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: max-content;\n\tposition: relative;\n\talign-items: stretch;\n\t${(props) =>\n\t\tprops.isIconButton &&\n\t\t`\n\t\tborder-radius: 4px;\n\t\tbackground: ${getIconButtonBackground(\n\t\t\tprops.iconButtonType ?? 'primary',\n\t\t\tprops.disabled,\n\t\t)};\n\t\theight: ${props.iconButtonSize === 'xs' ? '24px' : '32px'};\n\t\talign-items: center;\n\t`}\n\t${(props) =>\n\t\t(props.size === 'xs' || props.iconButtonSize === 'xs') &&\n\t\t`\n\t\theight: 24px;\n\t\talign-items: center;\n\t\tborder-radius: 4px;\n\t\t${\n\t\t\t!props.isIconButton && props.type\n\t\t\t\t? `border: 1px solid ${\n\t\t\t\t\t\tprops.disabled\n\t\t\t\t\t\t\t? COLORS.stroke.primary\n\t\t\t\t\t\t\t: props.type === 'secondaryGray'\n\t\t\t\t\t\t\t? COLORS.stroke.primary\n\t\t\t\t\t\t\t: props.type === 'secondary'\n\t\t\t\t\t\t\t? COLORS.stroke.brand\n\t\t\t\t\t\t\t: 'transparent'\n\t\t\t\t  };`\n\t\t\t\t: ''\n\t\t}\n\t`}\n\t.dd-button-divider {\n\t\twidth: ${(props) =>\n\t\t\t['primary', 'destructive'].includes(props.type!) ||\n\t\t\tprops.isIconButton ||\n\t\t\tprops.size === 'xs'\n\t\t\t\t? '1px'\n\t\t\t\t: '0px'};\n\t\theight: ${(props) =>\n\t\t\tprops.isIconButton || props.size === 'xs' ? '12px' : 'auto'};\n\t\tflex-shrink: 0;\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isIconButton\n\t\t\t\t? 'rgba(255, 255, 255, 0.3)'\n\t\t\t\t: props.size === 'xs'\n\t\t\t\t? COLORS.stroke.primary\n\t\t\t\t: getColor(props.type, props?.disabled)};\n\t}\n`;\n\nexport const LoaderContainer = styled.div<{ type: Type | undefined }>`\n\tposition: absolute;\n\tinset: 0;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\tborder-radius: 4px;\n\tbackground: ${(props) => getLoaderBackground(props.type)};\n\tz-index: 3;\n`;\n"],"names":["getColor","type","disabled","COLORS","getLoaderBackground","getIconButtonBackground","iconButtonType","DropdownButtonStyle","styled","props","LoaderContainer"],"mappings":";;AAKA,MAAMA,IAAW,CAACC,GAAwBC,MACrCA,IAAiBC,EAAO,QAAQ,WAC5BF,MACF,YACG,YAEAE,EAAO,QAAQ,gBAInBC,IAAsB,CAACH,MAAmC;AAC/D,UAAQA,GAAA;AAAA,IACP,KAAK;AACJ,aAAOE,EAAO,WAAW,SAAS;AAAA,IACnC,KAAK;AACJ,aAAOA,EAAO,QAAQ;AAAA,IACvB;AACC,aAAOA,EAAO,WAAW;AAAA,EAAA;AAE5B,GAEME,IAA0B,CAC/BC,GACAJ,MAEIA,IAAiBC,EAAO,WAAW,WAC/BG,MACF,YACGH,EAAO,WAAW,eAElB,eAIGI,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAavC,CAACC,MACFA,EAAM,gBACN;AAAA;AAAA,gBAEcJ;AAAA,EACbI,EAAM,kBAAkB;AAAA,EACxBA,EAAM;AACP,CAAC;AAAA,YACSA,EAAM,mBAAmB,OAAO,SAAS,MAAM;AAAA;AAAA,EAEzD;AAAA,GACC,CAACA,OACDA,EAAM,SAAS,QAAQA,EAAM,mBAAmB,SACjD;AAAA;AAAA;AAAA;AAAA,IAKC,CAACA,EAAM,gBAAgBA,EAAM,OAC1B,qBACAA,EAAM,WACHN,EAAO,OAAO,UACdM,EAAM,SAAS,kBACfN,EAAO,OAAO,UACdM,EAAM,SAAS,cACfN,EAAO,OAAO,QACd,aACH,MACA,EACJ;AAAA,EACA;AAAA;AAAA,WAES,CAACM,MACT,CAAC,WAAW,aAAa,EAAE,SAASA,EAAM,IAAK,KAC/CA,EAAM,gBACNA,EAAM,SAAS,OACZ,QACA,KAAK;AAAA,YACC,CAACA,MACVA,EAAM,gBAAgBA,EAAM,SAAS,OAAO,SAAS,MAAM;AAAA;AAAA,sBAExC,CAACA,MACpBA,EAAM,eACH,6BACAA,EAAM,SAAS,OACfN,EAAO,OAAO,UACdH,EAASS,EAAM,MAAMA,GAAO,QAAQ,CAAC;AAAA;AAAA,GAI9BC,IAAkBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eASvB,CAACC,MAAUL,EAAoBK,EAAM,IAAI,CAAC;AAAA;AAAA;"}

package/dist/esm/components/dual-icon-button/DualIconButton.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DualIconButtonProps } from './model';
+export declare const DualIconButton: React.ForwardRefExoticComponent<DualIconButtonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/dual-icon-button/DualIconButton.js

@@ -0,0 +1,53 @@
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import n, { forwardRef as v } from "react";
+import { COLORS as e } from "../../constants/Theme.js";
+import { Container as C, IconHalf as c, Divider as k } from "./DualIconButton.styled.js";
+const I = v(
+  ({
+    id: i,
+    LeftIcon: l,
+    RightIcon: m,
+    onLeftClick: a,
+    onRightClick: h,
+    disabled: o,
+    leftIconColor: p,
+    rightIconColor: f,
+    style: s
+  }, u) => {
+    const r = o ? e.content.inactive : e.content.primaryInverse;
+    return /* @__PURE__ */ y(C, { id: i, ref: u, disabled: o, style: s, children: [
+      /* @__PURE__ */ t(
+        c,
+        {
+          disabled: o,
+          onClick: o ? void 0 : a,
+          children: n.createElement(l, {
+            height: 16,
+            width: 16,
+            color: p || r,
+            style: { display: "block" }
+          })
+        }
+      ),
+      /* @__PURE__ */ t(k, {}),
+      /* @__PURE__ */ t(
+        c,
+        {
+          disabled: o,
+          onClick: o ? void 0 : h,
+          children: n.createElement(m, {
+            height: 16,
+            width: 16,
+            color: f || r,
+            style: { display: "block" }
+          })
+        }
+      )
+    ] });
+  }
+);
+I.displayName = "DualIconButton";
+export {
+  I as DualIconButton
+};
+//# sourceMappingURL=DualIconButton.js.map

package/dist/esm/components/dual-icon-button/DualIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DualIconButton.js","sources":["../../../../src/components/dual-icon-button/DualIconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { forwardRef } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport * as Sc from './DualIconButton.styled';\nimport { DualIconButtonProps } from './model';\n\nexport const DualIconButton = forwardRef<HTMLDivElement, DualIconButtonProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\tLeftIcon,\n\t\t\tRightIcon,\n\t\t\tonLeftClick,\n\t\t\tonRightClick,\n\t\t\tdisabled,\n\t\t\tleftIconColor,\n\t\t\trightIconColor,\n\t\t\tstyle,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst iconColor = disabled\n\t\t\t? COLORS.content.inactive\n\t\t\t: COLORS.content.primaryInverse;\n\n\t\treturn (\n\t\t\t<Sc.Container id={id} ref={ref} disabled={disabled} style={style}>\n\t\t\t\t<Sc.IconHalf\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={disabled ? undefined : onLeftClick}\n\t\t\t\t>\n\t\t\t\t\t{React.createElement(LeftIcon, {\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\tcolor: leftIconColor || iconColor,\n\t\t\t\t\t\tstyle: { display: 'block' },\n\t\t\t\t\t})}\n\t\t\t\t</Sc.IconHalf>\n\t\t\t\t<Sc.Divider />\n\t\t\t\t<Sc.IconHalf\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={disabled ? undefined : onRightClick}\n\t\t\t\t>\n\t\t\t\t\t{React.createElement(RightIcon, {\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\tcolor: rightIconColor || iconColor,\n\t\t\t\t\t\tstyle: { display: 'block' },\n\t\t\t\t\t})}\n\t\t\t\t</Sc.IconHalf>\n\t\t\t</Sc.Container>\n\t\t);\n\t},\n);\n\nDualIconButton.displayName = 'DualIconButton';\n"],"names":["DualIconButton","forwardRef","id","LeftIcon","RightIcon","onLeftClick","onRightClick","disabled","leftIconColor","rightIconColor","style","ref","iconColor","COLORS","Sc.Container","jsx","Sc.IconHalf","React","Sc.Divider"],"mappings":";;;;AAMO,MAAMA,IAAiBC;AAAA,EAC7B,CACC;AAAA,IACC,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,GAEDC,MACI;AACJ,UAAMC,IAAYL,IACfM,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAElB,6BACEC,GAAA,EAAa,IAAAZ,GAAQ,KAAAS,GAAU,UAAAJ,GAAoB,OAAAG,GACnD,UAAA;AAAA,MAAA,gBAAAK;AAAA,QAACC;AAAAA,QAAA;AAAA,UACA,UAAAT;AAAA,UACA,SAASA,IAAW,SAAYF;AAAA,UAE/B,UAAAY,EAAM,cAAcd,GAAU;AAAA,YAC9B,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,OAAOK,KAAiBI;AAAA,YACxB,OAAO,EAAE,SAAS,QAAA;AAAA,UAAQ,CAC1B;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF,gBAAAG,EAACG,GAAA,EAAW;AAAA,MACZ,gBAAAH;AAAA,QAACC;AAAAA,QAAA;AAAA,UACA,UAAAT;AAAA,UACA,SAASA,IAAW,SAAYD;AAAA,UAE/B,UAAAW,EAAM,cAAcb,GAAW;AAAA,YAC/B,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,OAAOK,KAAkBG;AAAA,YACzB,OAAO,EAAE,SAAS,QAAA;AAAA,UAAQ,CAC1B;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACD;AAAA,EAEF;AACD;AAEAZ,EAAe,cAAc;"}

package/dist/esm/components/dual-icon-button/DualIconButton.styled.d.ts

@@ -0,0 +1,7 @@
+export declare const Container: import('styled-components').StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const IconHalf: import('styled-components').StyledComponent<"button", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const Divider: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/esm/components/dual-icon-button/DualIconButton.styled.js

@@ -0,0 +1,40 @@
+import n from "styled-components";
+import { COLORS as i } from "../../constants/Theme.js";
+const t = n.div`
+	display: inline-flex;
+	align-items: center;
+	border-radius: 4px;
+	overflow: hidden;
+	background: ${(e) => e.disabled ? i.background.inactive : i.background.inverseLight};
+`, d = n.button`
+	all: unset;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	padding: 4px;
+	box-sizing: border-box;
+	cursor: ${(e) => e.disabled ? "not-allowed" : "pointer"};
+	background: transparent;
+
+	${(e) => e.disabled ? "" : `
+		:hover {
+			background-color: ${i.background.inverse};
+		}
+		:active {
+			box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);
+		}
+	`}
+`, a = n.div`
+	width: 1px;
+	height: 12px;
+	background: rgba(255, 255, 255, 0.3);
+	flex-shrink: 0;
+`;
+export {
+  t as Container,
+  a as Divider,
+  d as IconHalf
+};
+//# sourceMappingURL=DualIconButton.styled.js.map

package/dist/esm/components/dual-icon-button/DualIconButton.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DualIconButton.styled.js","sources":["../../../../src/components/dual-icon-button/DualIconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{ disabled?: boolean }>`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tborder-radius: 4px;\n\toverflow: hidden;\n\tbackground: ${(props) =>\n\t\tprops.disabled\n\t\t\t? COLORS.background.inactive\n\t\t\t: COLORS.background.inverseLight};\n`;\n\nexport const IconHalf = styled.button<{ disabled?: boolean }>`\n\tall: unset;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tpadding: 4px;\n\tbox-sizing: border-box;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tbackground: transparent;\n\n\t${(props) =>\n\t\t!props.disabled\n\t\t\t? `\n\t\t:hover {\n\t\t\tbackground-color: ${COLORS.background.inverse};\n\t\t}\n\t\t:active {\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const Divider = styled.div`\n\twidth: 1px;\n\theight: 12px;\n\tbackground: rgba(255, 255, 255, 0.3);\n\tflex-shrink: 0;\n`;\n"],"names":["Container","styled","props","COLORS","IconHalf","Divider"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB,CAACC,MACdA,EAAM,WACHC,EAAO,WAAW,WAClBA,EAAO,WAAW,YAAY;AAAA,GAGtBC,IAAWH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASpB,CAACC,MAAWA,EAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA;AAAA,GAG/D,CAACA,MACDA,EAAM,WASJ,KARA;AAAA;AAAA,uBAEkBC,EAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzC;AAAA,GAGME,IAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/esm/components/dual-icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DualIconButton';
+export type { DualIconButtonProps } from './model';

package/dist/esm/components/dual-icon-button/model.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface DualIconButtonProps {
+    LeftIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    RightIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    onLeftClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onRightClick?: React.MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+    leftIconColor?: string;
+    rightIconColor?: string;
+    id?: string;
+    style?: React.CSSProperties;
+}

package/dist/esm/components/fab-menu/FABMenu.d.ts

@@ -21,5 +21,5 @@ export declare const FABMenu: React.FC<{
     isRound?: boolean;
     dropPosition?: DROP_POSITION;
     menuAligment?: MENU_ALIGNMENT;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/fab-menu/FABMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"FABMenu.js","sources":["../../../../src/components/fab-menu/FABMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { OpenedDropdown } from '../dropdown/OpenedDropdown';\nimport { DropdownOption } from '../dropdown/type';\nimport { FloatingActionButton } from '../floating-action-button';\nimport {\n\tDROP_POSITION,\n\tFAB_POSITION,\n\tMENU_ALIGNMENT,\n} from '../floating-action-button/FloatingActionButton.styles';\nimport { Placement } from '../tooltips';\n\nexport const FABMenu: React.FC<{\n\tonSelect: (selected: DropdownOption | DropdownOption[]) => void;\n\tmenuOptions: DropdownOption[];\n\tbuttonWidth?: number;\n\tbuttonHeight?: number;\n\tbuttonColor?: string;\n\tbuttonPosition?: FAB_POSITION;\n\tmenuWidth?: number;\n\tmenuHeight?: number;\n\tbuttonIcon?: JSX.Element;\n\tbuttonPaddingHorizontal?: number;\n\tbuttonPaddingVertical?: number;\n\ttooltipPlacement?: Placement;\n\ttooltipText?: string;\n\ttooltipWidth?: number;\n\tzIndex?: number;\n\tisRound?: boolean;\n\tdropPosition?: DROP_POSITION;\n\tmenuAligment?: MENU_ALIGNMENT;\n\tversion?: '1.0' | '2.0';\n}> = (props) => {\n\tconst {\n\t\tonSelect,\n\t\tmenuOptions,\n\t\tbuttonWidth,\n\t\tbuttonHeight,\n\t\tbuttonColor,\n\t\tbuttonPosition,\n\t\tmenuWidth,\n\t\tmenuHeight,\n\t\tbuttonIcon,\n\t\tbuttonPaddingHorizontal,\n\t\tbuttonPaddingVertical,\n\t\ttooltipPlacement,\n\t\ttooltipText,\n\t\tzIndex,\n\t\tisRound,\n\t\tdropPosition,\n\t\tmenuAligment,\n\t\ttooltipWidth,\n\t} = props;\n\treturn (\n\t\t<div>\n\t\t\t<FloatingActionButton\n\t\t\t\ticon={buttonIcon}\n\t\t\t\twidth={buttonWidth}\n\t\t\t\theight={buttonHeight}\n\t\t\t\tcolor={buttonColor}\n\t\t\t\tposition={buttonPosition}\n\t\t\t\tbuttonPaddingHorizontal={buttonPaddingHorizontal}\n\t\t\t\tbuttonPaddingVertical={buttonPaddingVertical}\n\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\ttooltipText={tooltipText}\n\t\t\t\tzIndex={zIndex}\n\t\t\t\tisRound={isRound}\n\t\t\t\tdropPosition={dropPosition}\n\t\t\t\tmenuAligment={menuAligment}\n\t\t\t\ttootipWidth={tooltipWidth}\n\t\t\t>\n\t\t\t\t<OpenedDropdown\n\t\t\t\t\toptions={menuOptions}\n\t\t\t\t\theight={menuHeight || 90}\n\t\t\t\t\twidth={`${menuWidth}px`}\n\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\tversion={props.version}\n\t\t\t\t/>\n\t\t\t</FloatingActionButton>\n\t\t</div>\n\t);\n};\n"],"names":["FABMenu","props","onSelect","menuOptions","buttonWidth","buttonHeight","buttonColor","buttonPosition","menuWidth","menuHeight","buttonIcon","buttonPaddingHorizontal","buttonPaddingVertical","tooltipPlacement","tooltipText","zIndex","isRound","dropPosition","menuAligment","tooltipWidth","jsx","FloatingActionButton","OpenedDropdown"],"mappings":";;;AAWO,MAAMA,IAoBR,CAACC,MAAU;AACf,QAAM;AAAA,IACL,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,EAAA,IACGlB;AACJ,2BACE,OAAA,EACA,UAAA,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAMX;AAAA,MACN,OAAON;AAAA,MACP,QAAQC;AAAA,MACR,OAAOC;AAAA,MACP,UAAUC;AAAA,MACV,yBAAAI;AAAA,MACA,uBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,aAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAaC;AAAA,MAEb,UAAA,gBAAAC;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,SAASnB;AAAA,UACT,QAAQM,KAAc;AAAA,UACtB,OAAO,GAAGD,CAAS;AAAA,UACnB,UAAAN;AAAA,UACA,SAASD,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAChB;AAAA,EAAA,GAEF;AAEF;"}
+{"version":3,"file":"FABMenu.js","sources":["../../../../src/components/fab-menu/FABMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { OpenedDropdown } from '../dropdown/OpenedDropdown';\nimport { DropdownOption } from '../dropdown/type';\nimport { FloatingActionButton } from '../floating-action-button';\nimport {\n\tDROP_POSITION,\n\tFAB_POSITION,\n\tMENU_ALIGNMENT,\n} from '../floating-action-button/FloatingActionButton.styles';\nimport { Placement } from '../tooltips';\n\nexport const FABMenu: React.FC<{\n\tonSelect: (selected: DropdownOption | DropdownOption[]) => void;\n\tmenuOptions: DropdownOption[];\n\tbuttonWidth?: number;\n\tbuttonHeight?: number;\n\tbuttonColor?: string;\n\tbuttonPosition?: FAB_POSITION;\n\tmenuWidth?: number;\n\tmenuHeight?: number;\n\tbuttonIcon?: JSX.Element;\n\tbuttonPaddingHorizontal?: number;\n\tbuttonPaddingVertical?: number;\n\ttooltipPlacement?: Placement;\n\ttooltipText?: string;\n\ttooltipWidth?: number;\n\tzIndex?: number;\n\tisRound?: boolean;\n\tdropPosition?: DROP_POSITION;\n\tmenuAligment?: MENU_ALIGNMENT;\n\tversion?: '1.0' | '2.0' | '3.0';\n}> = (props) => {\n\tconst {\n\t\tonSelect,\n\t\tmenuOptions,\n\t\tbuttonWidth,\n\t\tbuttonHeight,\n\t\tbuttonColor,\n\t\tbuttonPosition,\n\t\tmenuWidth,\n\t\tmenuHeight,\n\t\tbuttonIcon,\n\t\tbuttonPaddingHorizontal,\n\t\tbuttonPaddingVertical,\n\t\ttooltipPlacement,\n\t\ttooltipText,\n\t\tzIndex,\n\t\tisRound,\n\t\tdropPosition,\n\t\tmenuAligment,\n\t\ttooltipWidth,\n\t} = props;\n\treturn (\n\t\t<div>\n\t\t\t<FloatingActionButton\n\t\t\t\ticon={buttonIcon}\n\t\t\t\twidth={buttonWidth}\n\t\t\t\theight={buttonHeight}\n\t\t\t\tcolor={buttonColor}\n\t\t\t\tposition={buttonPosition}\n\t\t\t\tbuttonPaddingHorizontal={buttonPaddingHorizontal}\n\t\t\t\tbuttonPaddingVertical={buttonPaddingVertical}\n\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\ttooltipText={tooltipText}\n\t\t\t\tzIndex={zIndex}\n\t\t\t\tisRound={isRound}\n\t\t\t\tdropPosition={dropPosition}\n\t\t\t\tmenuAligment={menuAligment}\n\t\t\t\ttootipWidth={tooltipWidth}\n\t\t\t>\n\t\t\t\t<OpenedDropdown\n\t\t\t\t\toptions={menuOptions}\n\t\t\t\t\theight={menuHeight || 90}\n\t\t\t\t\twidth={`${menuWidth}px`}\n\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\tversion={props.version}\n\t\t\t\t/>\n\t\t\t</FloatingActionButton>\n\t\t</div>\n\t);\n};\n"],"names":["FABMenu","props","onSelect","menuOptions","buttonWidth","buttonHeight","buttonColor","buttonPosition","menuWidth","menuHeight","buttonIcon","buttonPaddingHorizontal","buttonPaddingVertical","tooltipPlacement","tooltipText","zIndex","isRound","dropPosition","menuAligment","tooltipWidth","jsx","FloatingActionButton","OpenedDropdown"],"mappings":";;;AAWO,MAAMA,IAoBR,CAACC,MAAU;AACf,QAAM;AAAA,IACL,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,EAAA,IACGlB;AACJ,2BACE,OAAA,EACA,UAAA,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAMX;AAAA,MACN,OAAON;AAAA,MACP,QAAQC;AAAA,MACR,OAAOC;AAAA,MACP,UAAUC;AAAA,MACV,yBAAAI;AAAA,MACA,uBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,aAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAaC;AAAA,MAEb,UAAA,gBAAAC;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,SAASnB;AAAA,UACT,QAAQM,KAAc;AAAA,UACtB,OAAO,GAAGD,CAAS;AAAA,UACnB,UAAAN;AAAA,UACA,SAASD,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAChB;AAAA,EAAA,GAEF;AAEF;"}

package/dist/esm/components/icon-button/IconButton.js

@@ -1,52 +1,56 @@
 import { jsx as t } from "react/jsx-runtime";
-import h, { forwardRef as B } from "react";
-import { IconButton as C } from "./IconButton.styled.js";
-import { getIconColor as k } from "./theme.js";
-import { Tooltip as w } from "../tooltips/Tooltip.js";
-const x = B(
+import C, { forwardRef as k } from "react";
+import { IconButton as v } from "./IconButton.styled.js";
+import { getIconColor as R } from "./theme.js";
+import { Tooltip as _ } from "../tooltips/Tooltip.js";
+const b = k(
   ({
-    id: e,
+    id: m,
     iconButtonType: r = "default",
-    Icon: m,
-    height: p = 20,
-    width: a = 20,
+    size: n = "default",
+    Icon: s,
+    height: a,
+    width: d,
     bordered: f,
     disabled: o,
-    isSelected: n,
-    style: i,
-    svgStyle: u,
-    iconColor: s,
+    isSelected: e,
+    style: u,
+    svgStyle: p,
+    iconColor: h,
+    iconPadding: I,
     disabledTooltip: c,
-    ...d
-  }, y) => {
-    const I = k(
+    ...y
+  }, g) => {
+    const l = n === "xs" ? 16 : 20, w = a ?? l, x = d ?? l, B = R(
       r,
       o,
-      n
-    ), l = /* @__PURE__ */ t(
-      C,
+      e
+    ), i = /* @__PURE__ */ t(
+      v,
       {
-        id: e,
-        ref: y,
-        style: i,
+        id: m,
+        ref: g,
+        style: u,
         iconButtonType: r,
         bordered: f,
         disabled: o,
-        isSelected: n,
-        ...d,
-        children: h.createElement(m, {
-          height: p,
-          width: a,
-          color: s || I,
-          style: { display: "block", ...u ?? {} }
+        isSelected: e,
+        iconPadding: I,
+        size: n,
+        ...y,
+        children: C.createElement(s, {
+          height: w,
+          width: x,
+          color: h || B,
+          style: { display: "block", ...p ?? {} }
         })
       }
     );
-    return o && c ? /* @__PURE__ */ t(w, { body: c, children: /* @__PURE__ */ t("span", { style: { display: "inline-block", cursor: "not-allowed" }, children: l }) }) : l;
+    return o && c ? /* @__PURE__ */ t(_, { body: c, children: /* @__PURE__ */ t("span", { style: { display: "inline-block", cursor: "not-allowed" }, children: i }) }) : i;
   }
 );
-x.displayName = "IconButton";
+b.displayName = "IconButton";
 export {
-  x as IconButton
+  b as IconButton
 };
 //# sourceMappingURL=IconButton.js.map

package/dist/esm/components/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { forwardRef } from 'react';\nimport { Tooltip } from '../tooltips';\nimport * as Sc from './IconButton.styled';\nimport { IconButtonProps } from './model';\nimport { getIconColor } from './theme';\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\ticonButtonType = 'default',\n\t\t\tIcon,\n\t\t\theight = 20,\n\t\t\twidth = 20,\n\t\t\tbordered,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t\tstyle,\n\t\t\tsvgStyle,\n\t\t\ticonColor,\n\t\t\tdisabledTooltip,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst iconColorComputed = getIconColor(\n\t\t\ticonButtonType,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t);\n\t\tconst button = (\n\t\t\t<Sc.IconButton\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={style}\n\t\t\t\ticonButtonType={iconButtonType}\n\t\t\t\tbordered={bordered}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisSelected={isSelected}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{React.createElement(Icon, {\n\t\t\t\t\theight: height,\n\t\t\t\t\twidth: width,\n\t\t\t\t\tcolor: iconColor || iconColorComputed,\n\t\t\t\t\tstyle: { display: 'block', ...(svgStyle ?? {}) },\n\t\t\t\t})}\n\t\t\t</Sc.IconButton>\n\t\t);\n\n\t\treturn disabled && disabledTooltip ? (\n\t\t\t<Tooltip body={disabledTooltip}>\n\t\t\t\t<span style={{ display: 'inline-block', cursor: 'not-allowed' }}>\n\t\t\t\t\t{button}\n\t\t\t\t</span>\n\t\t\t</Tooltip>\n\t\t) : (\n\t\t\tbutton\n\t\t);\n\t},\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["IconButton","forwardRef","id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip","rest","ref","iconColorComputed","getIconColor","button","jsx","Sc.IconButton","React","Tooltip"],"mappings":";;;;;AAOO,MAAMA,IAAaC;AAAA,EACzB,CACC;AAAA,IACC,IAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,MAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IAAoBC;AAAA,MACzBd;AAAA,MACAK;AAAA,MACAC;AAAA,IAAA,GAEKS,IACL,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACA,IAAAlB;AAAA,QACA,KAAAa;AAAA,QACA,OAAAL;AAAA,QACA,gBAAAP;AAAA,QACA,UAAAI;AAAA,QACA,UAAAC;AAAA,QACA,YAAAC;AAAA,QACC,GAAGK;AAAA,QAEH,UAAAO,EAAM,cAAcjB,GAAM;AAAA,UAC1B,QAAAC;AAAA,UACA,OAAAC;AAAA,UACA,OAAOM,KAAaI;AAAA,UACpB,OAAO,EAAE,SAAS,SAAS,GAAIL,KAAY,CAAA,EAAC;AAAA,QAAG,CAC/C;AAAA,MAAA;AAAA,IAAA;AAIH,WAAOH,KAAYK,IAClB,gBAAAM,EAACG,GAAA,EAAQ,MAAMT,GACd,UAAA,gBAAAM,EAAC,QAAA,EAAK,OAAO,EAAE,SAAS,gBAAgB,QAAQ,iBAC9C,UAAAD,EAAA,CACF,GACD,IAEAA;AAAA,EAEF;AACD;AAEAlB,EAAW,cAAc;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { forwardRef } from 'react';\nimport { Tooltip } from '../tooltips';\nimport * as Sc from './IconButton.styled';\nimport { IconButtonProps } from './model';\nimport { getIconColor } from './theme';\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\ticonButtonType = 'default',\n\t\t\tsize = 'default',\n\t\t\tIcon,\n\t\t\theight,\n\t\t\twidth,\n\t\t\tbordered,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t\tstyle,\n\t\t\tsvgStyle,\n\t\t\ticonColor,\n\t\t\ticonPadding,\n\t\t\tdisabledTooltip,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst defaultIconSize = size === 'xs' ? 16 : 20;\n\t\tconst resolvedHeight = height ?? defaultIconSize;\n\t\tconst resolvedWidth = width ?? defaultIconSize;\n\n\t\tconst iconColorComputed = getIconColor(\n\t\t\ticonButtonType,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t);\n\t\tconst button = (\n\t\t\t<Sc.IconButton\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={style}\n\t\t\t\ticonButtonType={iconButtonType}\n\t\t\t\tbordered={bordered}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisSelected={isSelected}\n\t\t\t\ticonPadding={iconPadding}\n\t\t\t\tsize={size}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{React.createElement(Icon, {\n\t\t\t\t\theight: resolvedHeight,\n\t\t\t\t\twidth: resolvedWidth,\n\t\t\t\t\tcolor: iconColor || iconColorComputed,\n\t\t\t\t\tstyle: { display: 'block', ...(svgStyle ?? {}) },\n\t\t\t\t})}\n\t\t\t</Sc.IconButton>\n\t\t);\n\n\t\treturn disabled && disabledTooltip ? (\n\t\t\t<Tooltip body={disabledTooltip}>\n\t\t\t\t<span style={{ display: 'inline-block', cursor: 'not-allowed' }}>\n\t\t\t\t\t{button}\n\t\t\t\t</span>\n\t\t\t</Tooltip>\n\t\t) : (\n\t\t\tbutton\n\t\t);\n\t},\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["IconButton","forwardRef","id","iconButtonType","size","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","iconPadding","disabledTooltip","rest","ref","defaultIconSize","resolvedHeight","resolvedWidth","iconColorComputed","getIconColor","button","jsx","Sc.IconButton","React","Tooltip"],"mappings":";;;;;AAOO,MAAMA,IAAaC;AAAA,EACzB,CACC;AAAA,IACC,IAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IAAkBd,MAAS,OAAO,KAAK,IACvCe,IAAiBb,KAAUY,GAC3BE,IAAgBb,KAASW,GAEzBG,IAAoBC;AAAA,MACzBnB;AAAA,MACAM;AAAA,MACAC;AAAA,IAAA,GAEKa,IACL,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACA,IAAAvB;AAAA,QACA,KAAAe;AAAA,QACA,OAAAN;AAAA,QACA,gBAAAR;AAAA,QACA,UAAAK;AAAA,QACA,UAAAC;AAAA,QACA,YAAAC;AAAA,QACA,aAAAI;AAAA,QACA,MAAAV;AAAA,QACC,GAAGY;AAAA,QAEH,UAAAU,EAAM,cAAcrB,GAAM;AAAA,UAC1B,QAAQc;AAAA,UACR,OAAOC;AAAA,UACP,OAAOP,KAAaQ;AAAA,UACpB,OAAO,EAAE,SAAS,SAAS,GAAIT,KAAY,CAAA,EAAC;AAAA,QAAG,CAC/C;AAAA,MAAA;AAAA,IAAA;AAIH,WAAOH,KAAYM,IAClB,gBAAAS,EAACG,GAAA,EAAQ,MAAMZ,GACd,UAAA,gBAAAS,EAAC,QAAA,EAAK,OAAO,EAAE,SAAS,gBAAgB,QAAQ,iBAC9C,UAAAD,EAAA,CACF,GACD,IAEAA;AAAA,EAEF;AACD;AAEAvB,EAAW,cAAc;"}

package/dist/esm/components/icon-button/IconButton.styled.d.ts

@@ -1,6 +1,8 @@
-import { IconButtonType } from './model';
+import { IconButtonSize, IconButtonType } from './model';
 export declare const IconButton: import('styled-components').StyledComponent<"button", any, {
     bordered?: boolean | undefined;
     iconButtonType: IconButtonType;
     isSelected?: boolean | undefined;
+    iconPadding?: number | undefined;
+    size?: IconButtonSize | undefined;
 }, never>;

package/dist/esm/components/icon-button/IconButton.styled.js

@@ -1,29 +1,35 @@
-import r from "styled-components";
-import { COLORS as t } from "../../constants/Theme.js";
-import { generateBackgroundColor as e } from "./theme.js";
-const i = r.button`
+import a from "styled-components";
+import { COLORS as r } from "../../constants/Theme.js";
+import { generateBackgroundColor as n } from "./theme.js";
+const c = a.button`
 	${(o) => `
 	all: unset;
 	cursor: pointer;
-	padding: 6px;
+	padding: ${o.iconPadding !== void 0 ? o.iconPadding : o.size === "xs" ? 4 : 6}px;
 	border-radius: 4px;
 	flex-wrap: wrap;
-	${o.bordered && o.iconButtonType !== "ai" ? `border: 1px solid ${t.stroke.primary};` : ""}
-	${o.isSelected ? `
-			background: ${e(o.iconButtonType)};
-				` : `
+	${o.bordered && o.iconButtonType !== "ai" && o.iconButtonType !== "primary" ? `border: 1px solid ${r.stroke.primary};` : ""}
+	${o.iconButtonType === "primary" ? `
+				background: ${n("primary")};
+				${o.isSelected ? "" : `:hover { background-color: ${r.background.inverse}; }`}
+				:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }
+			` : o.isSelected ? `background: ${n(o.iconButtonType)};` : `
 				:hover {
 					background-color: rgba(0, 0, 0, 0.03);
 				}
 			`}
-	${o.disabled && `
-			cursor: not-allowed !important;
-			background-color: rgba(0, 0, 0, 0.03);
-		`}
+	${o.disabled ? o.iconButtonType === "primary" ? `
+					cursor: not-allowed !important;
+					background-color: ${r.background.inactive};
+					:hover { background-color: ${r.background.inactive}; }
+				` : `
+					cursor: not-allowed !important;
+					background-color: rgba(0, 0, 0, 0.03);
+				` : ""}
 
 	`}
 `;
 export {
-  i as IconButton
+  c as IconButton
 };
 //# sourceMappingURL=IconButton.styled.js.map