@bikdotai/bik-component-library 0.0.821-beta.9 → 0.0.821

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 { IconButton } from '../icon-button';\nimport { IconButtonProps } from '../icon-button/model';\nimport { Spinner } from '../spinner';\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}\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 } = props;\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<IconButton\n\t\t\t\t\t{...iconButtonProps!}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t\t}}\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","jsxs","DropdownButtonStyle","jsx","IconButton","DropdownPopover","onClick","LeadingIcon","LeadingIconStyles","IconComponent","TrailingIcon","childButtonProps","LoaderContainer","Spinner","SpinnerColorMap","Button"],"mappings":"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"}
+{"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;"}

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

@@ -1,13 +1,6 @@
-import { Size, Type } from '../button/model';
-import { IconButtonType } from '../icon-button/model';
+import { Type } from '../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,42 +1,16 @@
-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`
+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`
 	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) || 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)};
+		width: ${(t) => ["primary", "destructive"].includes(t.type) ? "1px" : "0px"};
+		background-color: ${(t) => o(t.type, t?.disabled)};
 	}
-`, u = r.div`
+`, s = i.div`
 	position: absolute;
 	inset: 0;
 	display: flex;
@@ -45,11 +19,11 @@ const i = (t, n) => n ? e.content.inactive : t === "primary" ? "#CDA2FC" : e.con
 	justify-content: center;
 	width: 100%;
 	border-radius: 4px;
-	background: ${(t) => a(t.type)};
+	background: ${n.brand[50]};
 	z-index: 3;
 `;
 export {
-  s as DropdownButtonStyle,
-  u as LoaderContainer
+  c as DropdownButtonStyle,
+  s 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 { 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;"}
+{"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;"}

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' | '3.0';
+    version?: '1.0' | '2.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' | '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;"}
+{"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;"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonSize, IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n\ticonPadding?: number;\n\tsize?: IconButtonSize;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${\n\t\tprops.iconPadding !== undefined\n\t\t\t? props.iconPadding\n\t\t\t: props.size === 'xs'\n\t\t\t? 4\n\t\t\t: 6\n\t}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered &&\n\t\tprops.iconButtonType !== 'ai' &&\n\t\tprops.iconButtonType !== 'primary'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.iconButtonType === 'primary'\n\t\t\t? `\n\t\t\t\tbackground: ${generateBackgroundColor('primary')};\n\t\t\t\t${\n\t\t\t\t\t!props.isSelected\n\t\t\t\t\t\t? `:hover { background-color: ${COLORS.background.inverse}; }`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }\n\t\t\t`\n\t\t\t: props.isSelected\n\t\t\t? `background: ${generateBackgroundColor(props.iconButtonType)};`\n\t\t\t: `\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled\n\t\t\t? props.iconButtonType === 'primary'\n\t\t\t\t? `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: ${COLORS.background.inactive};\n\t\t\t\t\t:hover { background-color: ${COLORS.background.inactive}; }\n\t\t\t\t`\n\t\t\t\t: `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t`\n\t\t\t: ''\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":";;;AAKO,MAAMA,IAAaC,EAAO;AAAA,GAO9B,CAACC,MAAU;AAAA;AAAA;AAAA,YAIZA,EAAM,gBAAgB,SACnBA,EAAM,cACNA,EAAM,SAAS,OACf,IACA,CACJ;AAAA;AAAA;AAAA,GAICA,EAAM,YACNA,EAAM,mBAAmB,QACzBA,EAAM,mBAAmB,YACtB,qBAAqBC,EAAO,OAAO,OAAO,MAC1C,EACJ;AAAA,GAECD,EAAM,mBAAmB,YACtB;AAAA,kBACaE,EAAwB,SAAS,CAAC;AAAA,MAE9CF,EAAM,aAEJ,KADA,8BAA8BC,EAAO,WAAW,OAAO,KAE3D;AAAA;AAAA,OAGCD,EAAM,aACN,eAAeE,EAAwBF,EAAM,cAAc,CAAC,MAC5D;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,WACHA,EAAM,mBAAmB,YACxB;AAAA;AAAA,yBAEmBC,EAAO,WAAW,QAAQ;AAAA,kCACjBA,EAAO,WAAW,QAAQ;AAAA,QAEtD;AAAA;AAAA;AAAA,QAID,EACJ;AAAA;AAAA,EAEC;AAAA;"}
+{"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered && props.iconButtonType !== 'ai'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.isSelected\n\t\t\t? `\n\t\t\tbackground: ${generateBackgroundColor(props.iconButtonType)};\n\t\t\t\t`\n\t\t\t: `\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled &&\n\t\t`\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t`\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":";;;AAKO,MAAMA,IAAaC,EAAO;AAAA,GAK9B,CAACC,MAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOZA,EAAM,YAAYA,EAAM,mBAAmB,OACxC,qBAAqBC,EAAO,OAAO,OAAO,MAC1C,EACJ;AAAA,GAECD,EAAM,aACH;AAAA,iBACYE,EAAwBF,EAAM,cAAc,CAAC;AAAA,QAEzD;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,YACN;AAAA;AAAA;AAAA,GAID;AAAA;AAAA,EAEC;AAAA;"}

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning' | 'ai' | 'primary';
-export type IconButtonSize = 'default' | 'xs';
+export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning' | 'ai';
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Icon to render
@@ -31,11 +30,6 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * @default default default
      */
     iconButtonType?: IconButtonType;
-    /**
-     * Size of the icon button
-     * @default 'default'
-     */
-    size?: IconButtonSize;
     /**
      * Add border to the button
      * @default default false
@@ -46,10 +40,5 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     isSelected?: boolean;
     iconColor?: string;
-    /**
-     * Custom padding for the icon button container
-     * @default 6
-     */
-    iconPadding?: number;
     disabledTooltip?: string;
 }

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

@@ -1,22 +1,20 @@
-import { COLORS as r } from "../../constants/Theme.js";
-const a = (n, e, t) => {
+import { COLORS as n } from "../../constants/Theme.js";
+const a = (t, e, r) => {
   if (e)
-    return r.content.inactive;
-  switch (n) {
+    return n.content.inactive;
+  switch (t) {
     case "default":
-      return t ? r.content.brand : r.content.primary;
+      return r ? n.content.brand : n.content.primary;
     case "negative":
-      return r.content.negative;
+      return n.content.negative;
     case "positive":
-      return r.content.positive;
+      return n.content.positive;
     case "warning":
-      return t ? r.content.warning : r.content.primary;
-    case "primary":
-      return r.content.primaryInverse;
+      return r ? n.content.warning : n.content.primary;
     default:
-      return r.content.primary;
+      return n.content.primary;
   }
-}, o = (n) => n === "default" ? r.background.brandLight : n === "negative" ? r.background.negative.light : n === "positive" ? r.background.positive.light : n === "ai" ? r.surface.aiLight : n === "primary" ? r.background.inverseLight : r.background.warning.light;
+}, o = (t) => t === "default" ? n.background.brandLight : t === "negative" ? n.background.negative.light : t === "positive" ? n.background.positive.light : t === "ai" ? n.surface.aiLight : n.background.warning.light;
 export {
   o as generateBackgroundColor,
   a as getIconColor

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

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../../../src/components/icon-button/theme.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport { IconButtonType } from './model';\n\nexport const getIconColor = (\n\ttype: IconButtonType,\n\tdisabled?: boolean,\n\tisSelected?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn COLORS.content.inactive;\n\t}\n\tswitch (type) {\n\t\tcase 'default':\n\t\t\treturn isSelected ? COLORS.content.brand : COLORS.content.primary;\n\t\tcase 'negative':\n\t\t\treturn COLORS.content.negative;\n\t\tcase 'positive':\n\t\t\treturn COLORS.content.positive;\n\t\tcase 'warning':\n\t\t\treturn isSelected ? COLORS.content.warning : COLORS.content.primary;\n\t\tcase 'primary':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tdefault:\n\t\t\treturn COLORS.content.primary;\n\t}\n};\n\nexport const generateBackgroundColor = (type: IconButtonType) => {\n\tif (type === 'default') {\n\t\treturn COLORS.background.brandLight;\n\t}\n\tif (type === 'negative') {\n\t\treturn COLORS.background.negative.light;\n\t}\n\tif (type === 'positive') {\n\t\treturn COLORS.background.positive.light;\n\t}\n\tif (type === 'ai') {\n\t\treturn COLORS.surface.aiLight;\n\t}\n\tif (type === 'primary') {\n\t\treturn COLORS.background.inverseLight;\n\t}\n\n\treturn COLORS.background.warning.light;\n};\n"],"names":["getIconColor","type","disabled","isSelected","COLORS","generateBackgroundColor"],"mappings":";AAGO,MAAMA,IAAe,CAC3BC,GACAC,GACAC,MACI;AACJ,MAAID;AACH,WAAOE,EAAO,QAAQ;AAEvB,UAAQH,GAAA;AAAA,IACP,KAAK;AACJ,aAAOE,IAAaC,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,IAC3D,KAAK;AACJ,aAAOA,EAAO,QAAQ;AAAA,IACvB,KAAK;AACJ,aAAOA,EAAO,QAAQ;AAAA,IACvB,KAAK;AACJ,aAAOD,IAAaC,EAAO,QAAQ,UAAUA,EAAO,QAAQ;AAAA,IAC7D,KAAK;AACJ,aAAOA,EAAO,QAAQ;AAAA,IACvB;AACC,aAAOA,EAAO,QAAQ;AAAA,EAAA;AAEzB,GAEaC,IAA0B,CAACJ,MACnCA,MAAS,YACLG,EAAO,WAAW,aAEtBH,MAAS,aACLG,EAAO,WAAW,SAAS,QAE/BH,MAAS,aACLG,EAAO,WAAW,SAAS,QAE/BH,MAAS,OACLG,EAAO,QAAQ,UAEnBH,MAAS,YACLG,EAAO,WAAW,eAGnBA,EAAO,WAAW,QAAQ;"}
+{"version":3,"file":"theme.js","sources":["../../../../src/components/icon-button/theme.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport { IconButtonType } from './model';\n\nexport const getIconColor = (\n\ttype: IconButtonType,\n\tdisabled?: boolean,\n\tisSelected?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn COLORS.content.inactive;\n\t}\n\tswitch (type) {\n\t\tcase 'default':\n\t\t\treturn isSelected ? COLORS.content.brand : COLORS.content.primary;\n\t\tcase 'negative':\n\t\t\treturn COLORS.content.negative;\n\t\tcase 'positive':\n\t\t\treturn COLORS.content.positive;\n\t\tcase 'warning':\n\t\t\treturn isSelected ? COLORS.content.warning : COLORS.content.primary;\n\t\tdefault:\n\t\t\treturn COLORS.content.primary;\n\t}\n};\n\nexport const generateBackgroundColor = (type: IconButtonType) => {\n\tif (type === 'default') {\n\t\treturn COLORS.background.brandLight;\n\t}\n\tif (type === 'negative') {\n\t\treturn COLORS.background.negative.light;\n\t}\n\tif (type === 'positive') {\n\t\treturn COLORS.background.positive.light;\n\t}\n\n\tif (type === 'ai') {\n\t\treturn COLORS.surface.aiLight;\n\t}\n\n\treturn COLORS.background.warning.light;\n};\n"],"names":["getIconColor","type","disabled","isSelected","COLORS","generateBackgroundColor"],"mappings":";AAGO,MAAMA,IAAe,CAC3BC,GACAC,GACAC,MACI;AACJ,MAAID;AACH,WAAOE,EAAO,QAAQ;AAEvB,UAAQH,GAAA;AAAA,IACP,KAAK;AACJ,aAAOE,IAAaC,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,IAC3D,KAAK;AACJ,aAAOA,EAAO,QAAQ;AAAA,IACvB,KAAK;AACJ,aAAOA,EAAO,QAAQ;AAAA,IACvB,KAAK;AACJ,aAAOD,IAAaC,EAAO,QAAQ,UAAUA,EAAO,QAAQ;AAAA,IAC7D;AACC,aAAOA,EAAO,QAAQ;AAAA,EAAA;AAEzB,GAEaC,IAA0B,CAACJ,MACnCA,MAAS,YACLG,EAAO,WAAW,aAEtBH,MAAS,aACLG,EAAO,WAAW,SAAS,QAE/BH,MAAS,aACLG,EAAO,WAAW,SAAS,QAG/BH,MAAS,OACLG,EAAO,QAAQ,UAGhBA,EAAO,WAAW,QAAQ;"}