@bikdotai/bik-component-library 0.0.804-beta.17 → 0.0.804-beta.18

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts

@@ -0,0 +1,42 @@
+export declare const DropdownContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
+export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
+export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
+export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
+export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
+export interface MenuItemContainerProps {
+    isSelected?: boolean;
+    isHovered?: boolean;
+    isSubMenuOpen?: boolean;
+    isDisabled?: boolean;
+    version?: '1.0' | '2.0' | '3.0';
+}
+export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", any, MenuItemContainerProps, never>;
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubMenuListContainer: import("styled-components").StyledComponent<"div", any, {
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
+export declare const LeadingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TrailingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubMenuContainer: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+}, never>;
+export declare const StyledSubMenuWrapper: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+    top: number;
+    left: number;
+}, never>;

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js

@@ -1,75 +1,78 @@
-import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const t=e.div`
+import e from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const i=e.div`
 	position: relative;
-	border-radius: 8px;
+	border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-	padding-bottom: 4px;
+	padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
 `,r=e.div`
-	width: ${e=>{let{width:i}=e;return i||"200px"}};
+	width: ${e=>{let{width:t}=e;return t||"200px"}};
 	max-width: 300px;
 	max-height: 280px;
 	overflow-y: scroll;
-	padding: 4px 0 0;
+	padding: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0 0"}};
 	&::-webkit-scrollbar {
 		width: 0px;
 	}
 `,n=e.div`
-	margin-top: 64px;
-	height: 200px;
-	width: ${e=>{let{width:i}=e;return i||"200px"}};
-`,d=e.div`
+	margin-top: ${e=>{let{version:t}=e;return"3.0"===t?0:64}}px;
+	height: ${e=>{let{version:t}=e;return"3.0"===t?236:200}}px;
+	width: ${e=>{let{width:t}=e;return t||"200px"}};
+	display: ${e=>{let{version:t}=e;return"3.0"===t?"flex":"block"}};
+	align-items: center;
+	justify-content: center;
+`,o=e.div`
 	width: 100%;
 	justify-content: center;
 	cursor: pointer;
 	align-items: center;
 	justify-content: space-between;
-	margin: 4px 0;
-`,o=e.div`
+	margin: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0"}};
+`,d=e.div`
 	z-index: 1000;
 	position: relative;
 	margin: 0px;
 	padding: 0px;
 	width: 100%;
-`,p=e.div`
+`,s=e.div`
 	position: relative;
-	padding: 1px 4px;
+	padding: ${e=>{let{version:t}=e;return"3.0"===t?"0px":"1px 4px"}};
 	cursor: pointer;
 	width: 100%;
 	&:hover > .submenu,
 	&:focus-within > .submenu {
 		display: block;
 	}
-`,s=e.div`
+`,p=e.div`
 	position: relative;
-	padding: 4px 8px 4px 8px;
+	padding: ${e=>{let{version:t}=e;return"3.0"===t?"8px":"4px 8px"}};
 	transition: background-color 0.2s;
 	width: 100%;
-	border-radius: 8px;
+	border-radius: ${e=>{let{version:t}=e;return"3.0"===t?0:8}}px;
 	justify-content: center;
-	background-color: ${e=>{let{isSelected:t,isHovered:r,isSubMenuOpen:n,isDisabled:d}=e;return d?i.surface.standard:t||n?i.background.positive.light:r?i.surface.hovered:i.surface.standard}};
-	color: ${e=>{let{isSelected:t,isSubMenuOpen:r}=e;return t||r?i.content.positive:i.content.primary}};
+	background-color: ${e=>{let{isSelected:i,isHovered:r,isSubMenuOpen:n,isDisabled:o,version:d}=e;return o?t.surface.standard:i||n?"3.0"===d?t.background.brandLight:t.background.positive.light:r?t.surface.hovered:t.surface.standard}};
+	color: ${e=>{let{isSelected:i,isSubMenuOpen:r,version:n}=e;return i||r?"3.0"===n?t.text.primary:t.content.positive:t.content.primary}};
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 
 	&:hover {
-		background-color: ${e=>{let{isSelected:t,isDisabled:r}=e;return r?i.surface.standard:t?i.background.positive.light:i.surface.hovered}};
+		background-color: ${e=>{let{isSelected:i,isDisabled:r,version:n}=e;return r?t.surface.standard:i?"3.0"===n?t.background.brandLight:t.background.positive.light:t.surface.hovered}};
 	}
 `,a=e.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`,x=e.div`
+`,l=e.div`
 	z-index: 1001;
 	position: fixed;
 	border-left: 4px solid transparent;
-`,l=e.div`
+`,x=e.div`
 	margin: 4px;
-	background-color: ${i.surface.standard};
+	background-color: ${t.surface.standard};
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-	border-radius: 8px;
-	padding-top: 4px;
+	border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
+	padding-top: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
 	max-height: 480px;
-	padding-bottom: 4px;
+	padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
 	overflow-y: scroll;
 
 	&::-webkit-scrollbar {
@@ -82,18 +85,18 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	align-items: center;
 	justify-content: center;
 	margin-right: 4px;
-`,h=e.div`
+`,u=e.div`
 	width: 16px;
 	height: 16px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-left: 4px;
-`,u=e.div`
+`,v=e.div`
 	width: ${e=>e.width};
-`,g=e(x)`
+`,g=e(l)`
 	width: ${e=>e.width};
 	top: ${e=>e.top}px;
 	left: ${e=>e.left}px;
-`;export{a as ContentContainer,t as DropdownContainer,d as GroupedMenuListContainer,c as LeadingIconContainer,s as MenuItemContainer,p as MenuItemWrapper,n as NoResultsContainer,r as OptionsContainer,o as StyledMenuList,g as StyledSubMenuWrapper,u as SubMenuContainer,l as SubMenuListContainer,x as SubMenuWrapper,h as TrailingIconContainer};
+`;export{a as ContentContainer,i as DropdownContainer,o as GroupedMenuListContainer,c as LeadingIconContainer,p as MenuItemContainer,s as MenuItemWrapper,n as NoResultsContainer,r as OptionsContainer,d as StyledMenuList,g as StyledSubMenuWrapper,v as SubMenuContainer,x as SubMenuListContainer,l as SubMenuWrapper,u as TrailingIconContainer};
 //# sourceMappingURL=MultiLevelDropdown.styled.js.map

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{ width?: string }>`\n\tposition: relative;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: 4px;\n`;\n\nexport const OptionsContainer = styled.div<{ width?: string }>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: 4px 0 0;\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\nexport const NoResultsContainer = styled.div<{ width?: string }>`\n\tmargin-top: 64px;\n\theight: 200px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n`;\n\nexport const GroupedMenuListContainer = styled.div`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: 4px 0;\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div`\n\tposition: relative;\n\tpadding: 1px 4px;\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: 4px 8px 4px 8px;\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: 8px;\n\tjustify-content: center;\n\tbackground-color: ${({ isSelected, isHovered, isSubMenuOpen, isDisabled }) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\tpadding-top: 4px;\n\tmax-height: 480px;\n\tpadding-bottom: 4px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","div","OptionsContainer","_ref","width","NoResultsContainer","_ref2","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","_ref3","isSelected","isHovered","isSubMenuOpen","isDisabled","COLORS","surface","standard","background","positive","light","hovered","_ref4","content","primary","_ref5","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper","top","left"],"mappings":"mFAGaA,MAAAA,EAAoBC,EAAOC,GAAuB;;;;;EAOlDC,EAAmBF,EAAOC,GAAuB;UACpDE,IAAA,IAACC,MAAEA,GAAOD,EAAA,OAAMC,GAAgB,OAAO;;;;;;;;EAUpCC,EAAqBL,EAAOC,GAAuB;;;UAGtDK,IAAA,IAACF,MAAEA,GAAOE,EAAA,OAAMF,GAAgB,OAAO;EAGpCG,EAA2BP,EAAOC,GAAG;;;;;;;EASrCO,EAAiBR,EAAOC,GAAG;;;;;;EAQ3BQ,EAAkBT,EAAOC,GAAG;;;;;;;;;EAkB5BS,EAAoBV,EAAOC,GAA2B;;;;;;;qBAO9CU,IAAA,IAACC,WAAEA,EAAUC,UAAEA,EAASC,cAAEA,EAAaC,WAAEA,GAAYJ,EAAA,OACxEI,EACGC,EAAOC,QAAQC,SACfN,GAAcE,EACdE,EAAOG,WAAWC,SAASC,MAC3BR,EACAG,EAAOC,QAAQK,QACfN,EAAOC,QAAQC,QAAQ;UAClBK,IAAA,IAACX,WAAEA,EAAUE,cAAEA,GAAeS,EAAA,OACtCX,GAAcE,EACXE,EAAOQ,QAAQJ,SACfJ,EAAOQ,QAAQC,OAAO;;;;;;sBAMLC,IAAA,IAACd,WAAEA,EAAUG,WAAEA,GAAYW,EAAA,OAC9CX,EACGC,EAAOC,QAAQC,SACfN,EACAI,EAAOG,WAAWC,SAASC,MAC3BL,EAAOC,QAAQK,OAAO;;EAIfK,EAAmB3B,EAAOC,GAAG;;;;EAM7B2B,EAAiB5B,EAAOC,GAAG;;;;EAM3B4B,EAAuB7B,EAAOC,GAAG;;qBAEzBe,EAAOC,QAAQC;;;;;;;;;;;EAavBY,EAAuB9B,EAAOC,GAAG;;;;;;;EASjC8B,EAAwB/B,EAAOC,GAAG;;;;;;;EASlC+B,EAAmBhC,EAAOC,GAAsB;UAClDgC,GAAUA,EAAM7B;EAGd8B,EAAuBlC,EAAO4B,EAIzC;UACSK,GAAUA,EAAM7B;QAClB6B,GAAUA,EAAME;SACfF,GAAUA,EAAMG;"}
+{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tposition: relative;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n`;\n\nexport const OptionsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: ${({ version }) => (version === '3.0' ? '0' : '4px 0 0')};\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\nexport const NoResultsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin-top: ${({ version }) => (version === '3.0' ? 0 : 64)}px;\n\theight: ${({ version }) => (version === '3.0' ? 236 : 200)}px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tdisplay: ${({ version }) => (version === '3.0' ? 'flex' : 'block')};\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const GroupedMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: ${({ version }) => (version === '3.0' ? '0' : '4px 0')};\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div<{ version?: '1.0' | '2.0' | '3.0' }>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '0px' : '1px 4px')};\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '8px' : '4px 8px')};\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 0 : 8)}px;\n\tjustify-content: center;\n\tbackground-color: ${({\n\t\tisSelected,\n\t\tisHovered,\n\t\tisSubMenuOpen,\n\t\tisDisabled,\n\t\tversion,\n\t}) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen, version }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.text.primary\n\t\t\t\t: COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled, version }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? version === '3.0'\n\t\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t\t: COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tpadding-top: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\tmax-height: 480px;\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","div","_ref","version","_ref2","OptionsContainer","_ref3","width","_ref4","NoResultsContainer","_ref5","_ref6","_ref7","_ref8","GroupedMenuListContainer","_ref9","StyledMenuList","MenuItemWrapper","_ref10","MenuItemContainer","_ref11","_ref12","_ref13","isSelected","isHovered","isSubMenuOpen","isDisabled","COLORS","surface","standard","background","brandLight","positive","light","hovered","_ref14","text","primary","content","_ref15","ContentContainer","SubMenuWrapper","SubMenuListContainer","_ref16","_ref17","_ref18","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper","top","left"],"mappings":"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"}

package/dist/esm/components/multi-level-dropdown/type.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import { FloaterProps } from '../floater/floater';
+export interface MultiLevelDropdownProps extends FloaterProps {
+    options: MultiLevelDropdownOption[];
+    width?: string;
+    isSearchable?: boolean;
+    isDropdownOpen?: boolean;
+    allowParentSelection?: boolean;
+    maxLevels?: number;
+    hideGroupLabel?: boolean;
+    version?: '1.0' | '2.0' | '3.0';
+    onDropdownOutsideClick?: (isOutsideClick: any) => void;
+    onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
+}
+export type GroupedOption = {
+    label: string;
+    options: SingleOption[];
+    trailingIcon?: JSX.Element;
+    leadingIcon?: JSX.Element;
+};
+export type SingleOption = {
+    label: string;
+    value: string;
+    subText?: string;
+    trailingIcon?: JSX.Element;
+    leadingIcon?: JSX.Element;
+    customComponent?: JSX.Element;
+    disabled?: boolean;
+    selected?: boolean;
+    children?: SingleOption[];
+};
+export type MultiLevelDropdownOption = SingleOption | GroupedOption;
+export type RenderNestedMenu = (options: MultiLevelDropdownOption[], parents: MultiLevelDropdownOption[], currentLevel: number) => ReactNode;

package/dist/esm/components/tag/Tag.d.ts

@@ -0,0 +1,5 @@
+import { TagProps } from './model';
+export declare const Tag: {
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/esm/components/tag/Tag.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import n from"react";import{Tooltip as a}from"../tooltips/Tooltip.js";import{AiBodyTiny as r,AiBodyCaption as t,BodyTiny as s,BodyCaption as c}from"../TypographyStyle.js";import{ValidTagTypeMap as o}from"./model.js";import{Tag as l}from"./Tag.styled.js";import{getTagIconColor as g}from"./themes.js";const d=d=>{let{tagText:m,LeadingIcon:p,TrailingIcon:b,onLeadingIconClicked:j,leadingIconId:O,trailingIconId:h,onTrailingIconClicked:u,theme:f="light",type:I="neutral",variant:T="regular",version:y,cursor:k,alignIcon:w,noBorder:C,tagHtmlText:N,contentPadding:L,leadingIconTooltip:x,trailingIconTooltip:v,tagColor:E,numberOfLines:$,backgroundColor:z,borderRadius:B,size:P="regular"}=d,R=m;const H=f;let S=I;o[T][I]||(S="neutral"),"circle"===T&&"number"==typeof R&&R>99&&(R="99+");const q={height:"compressed"===T?12:16,width:"compressed"===T?12:16,color:g(f,S),style:{display:"block"}};return e(l,Object.assign({cursor:k,theme:H,type:S,variant:T,version:y,alignIcon:w,noBorder:C,contentPadding:L,backgroundColor:z,borderRadius:B,size:P},{children:i("div",Object.assign({className:"container"},{children:[p&&(x?e(a,Object.assign({},x,{children:e("button",Object.assign({className:"icon-leading",onClick:j,id:`${O}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(p,Object.assign(Object.assign({},q),{id:O||"leading-icon"}))}))})):e("button",Object.assign({className:"icon-leading",onClick:j,id:`${O}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(p,Object.assign(Object.assign({},q),{id:O||"leading-icon"}))}))),N&&("ai"===I&&"light"===f?e("small"===P?r:t,Object.assign({numberOfLines:$},{children:N})):e("small"===P?s:c,Object.assign({className:"text",numberOfLines:$},{children:N}))),!N&&""!==R&&("ai"===I&&"light"===f?e("small"===P?r:t,Object.assign({numberOfLines:$},{children:R})):e("small"===P?s:c,Object.assign({className:"text",color:E,numberOfLines:$},{children:R}))),b&&(v?e(a,Object.assign({},v,{children:e("button",Object.assign({className:"icon-trailing",onClick:u,id:`${h}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(b,Object.assign(Object.assign({},q),{id:h||"trailing-icon"}))}))})):e("button",Object.assign({className:"icon-trailing",onClick:u,id:`${h}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(b,Object.assign(Object.assign({},q),{id:h||"trailing-icon"}))})))]}))}))};d.displayName="Tag";export{d as Tag};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import n from"react";import{Tooltip as a}from"../tooltips/Tooltip.js";import{AiBodyTiny as r,AiBodyCaption as t,BodyTiny as s,BodyCaption as c}from"../TypographyStyle.js";import{ValidTagTypeMap as o}from"./model.js";import{Tag as l}from"./Tag.styled.js";import{getTagIconColor as g}from"./themes.js";const d=d=>{let{tagText:m,LeadingIcon:p,TrailingIcon:b,onLeadingIconClicked:h,leadingIconId:j,trailingIconId:O,onTrailingIconClicked:u,theme:f="light",type:I="neutral",variant:T="regular",version:y,cursor:k,alignIcon:w,noBorder:C,tagHtmlText:N,contentPadding:L,padding:x,height:v,leadingIconTooltip:E,trailingIconTooltip:$,tagColor:z,numberOfLines:B,backgroundColor:P,borderRadius:R,size:H="regular"}=d,S=m;const q=f;let A=I;o[T][I]||(A="neutral"),"circle"===T&&"number"==typeof S&&S>99&&(S="99+");const D={height:"compressed"===T?12:16,width:"compressed"===T?12:16,color:g(f,A),style:{display:"block"}};return e(l,Object.assign({cursor:k,theme:q,type:A,variant:T,version:y,alignIcon:w,noBorder:C,contentPadding:L,padding:x,height:v,backgroundColor:P,borderRadius:R,size:H},{children:i("div",Object.assign({className:"container"},{children:[p&&(E?e(a,Object.assign({},E,{children:e("button",Object.assign({className:"icon-leading",onClick:h,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(p,Object.assign(Object.assign({},D),{id:j||"leading-icon"}))}))})):e("button",Object.assign({className:"icon-leading",onClick:h,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(p,Object.assign(Object.assign({},D),{id:j||"leading-icon"}))}))),N&&("ai"===I&&"light"===f?e("small"===H?r:t,Object.assign({numberOfLines:B},{children:N})):e("small"===H?s:c,Object.assign({className:"text",numberOfLines:B},{children:N}))),!N&&""!==S&&("ai"===I&&"light"===f?e("small"===H?r:t,Object.assign({numberOfLines:B},{children:S})):e("small"===H?s:c,Object.assign({className:"text",color:z,numberOfLines:B},{children:S}))),b&&($?e(a,Object.assign({},$,{children:e("button",Object.assign({className:"icon-trailing",onClick:u,id:`${O}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(b,Object.assign(Object.assign({},D),{id:O||"trailing-icon"}))}))})):e("button",Object.assign({className:"icon-trailing",onClick:u,id:`${O}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(b,Object.assign(Object.assign({},D),{id:O||"trailing-icon"}))})))]}))}))};d.displayName="Tag";export{d as Tag};
 //# sourceMappingURL=Tag.js.map

package/dist/esm/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","_ref","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconProps","height","width","color","getTagIconColor","style","display","_jsx","Sc","children","_jsxs","Object","assign","className","Tooltip","onClick","id","React","createElement","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption","displayName"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","_ref","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconProps","width","color","getTagIconColor","style","display","_jsx","Sc","Object","assign","children","_jsxs","className","Tooltip","onClick","id","React","createElement","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption","displayName"],"mappings":"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"}

package/dist/esm/components/tag/Tag.stories.d.ts

@@ -0,0 +1,22 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<{
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export default _default;
+export declare const Default: ComponentStory<{
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export declare const WithIcons: ComponentStory<{
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export declare const WithIconTooltips: ComponentStory<{
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export declare const DarkTheme: ComponentStory<{
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;

package/dist/esm/components/tag/Tag.styled.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { TagTheme, TagType, TagVariant } from './model';
+export declare const Tag: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    theme: TagTheme;
+    type: TagType;
+    variant: TagVariant;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+    cursor?: string | undefined;
+    alignIcon?: string | undefined;
+    noBorder?: boolean | undefined;
+    contentPadding?: number | undefined;
+    padding?: string | undefined;
+    height?: number | undefined;
+    backgroundColor?: string | undefined;
+    borderRadius?: string | number | undefined;
+    size?: "small" | "regular" | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/tag/Tag.styled.js

@@ -1,2 +1,2 @@
-import c from"@emotion/styled/base";import{getPadding as I,getBackgroundColor as b,generateBorder as g,getTextColor as l}from"./themes.js";const i=c("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var I;return null!==(I=c.cursor)&&void 0!==I?I:"default"}),";",(c=>"small"!==c.size&&("regular"===c.variant?"display: block;\n\t\t     min-height: 26px;\n\t\t":"min-height: 20px;"))," .container{display:flex;align-items:",(c=>c.alignIcon?c.alignIcon:"center"),";gap:6px;",(c=>"small"===c.size?"height: 16px; box-sizing: border-box;":"")," padding:",(c=>"small"===c.size?"2px 6px":c.contentPadding?`${c.contentPadding}px`:I(c.variant)),";background:",(c=>{var I;return null!==(I=c.backgroundColor)&&void 0!==I?I:b(c.theme,c.type)}),";border-radius:",(c=>void 0!==c.borderRadius?"number"==typeof c.borderRadius?`${c.borderRadius}px`:c.borderRadius:"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${g(c.type,c.theme)};`)," .text{color:",(c=>l(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmN1cnNvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ2RlZmF1bHQnOyB9fTtcblx0JHsocHJvcHMpID0+IHByb3BzLnNpemUgIT09ICdzbWFsbCcgJiZcclxuICAgIChwcm9wcy52YXJpYW50ID09PSAncmVndWxhcidcclxuICAgICAgICA/IGBkaXNwbGF5OiBibG9jaztcblx0XHQgICAgIG1pbi1oZWlnaHQ6IDI2cHg7XG5cdFx0YFxyXG4gICAgICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YCl9XG5cdC5jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6ICR7KHByb3BzKSA9PiAocHJvcHMuYWxpZ25JY29uID8gcHJvcHMuYWxpZ25JY29uIDogJ2NlbnRlcicpfTtcblx0XHRnYXA6IDZweDtcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuc2l6ZSA9PT0gJ3NtYWxsJyA/ICdoZWlnaHQ6IDE2cHg7IGJveC1zaXppbmc6IGJvcmRlci1ib3g7JyA6ICcnfVxuXHRcdHBhZGRpbmc6ICR7KHByb3BzKSA9PiBwcm9wcy5zaXplID09PSAnc21hbGwnXHJcbiAgICA/ICcycHggNnB4J1xyXG4gICAgOiBwcm9wcy5jb250ZW50UGFkZGluZ1xyXG4gICAgICAgID8gYCR7cHJvcHMuY29udGVudFBhZGRpbmd9cHhgXHJcbiAgICAgICAgOiBnZXRQYWRkaW5nKHByb3BzLnZhcmlhbnQpfTtcblx0XHRiYWNrZ3JvdW5kOiAkeyhwcm9wcykgPT4geyB2YXIgX2E7IHJldHVybiAoX2EgPSBwcm9wcy5iYWNrZ3JvdW5kQ29sb3IpICE9PSBudWxsICYmIF9hICE9PSB2b2lkIDAgPyBfYSA6IGdldEJhY2tncm91bmRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSk7IH19O1xuXG5cdFx0Ym9yZGVyLXJhZGl1czogJHsocHJvcHMpID0+IHByb3BzLmJvcmRlclJhZGl1cyAhPT0gdW5kZWZpbmVkXHJcbiAgICA/IHR5cGVvZiBwcm9wcy5ib3JkZXJSYWRpdXMgPT09ICdudW1iZXInXHJcbiAgICAgICAgPyBgJHtwcm9wcy5ib3JkZXJSYWRpdXN9cHhgXHJcbiAgICAgICAgOiBwcm9wcy5ib3JkZXJSYWRpdXNcclxuICAgIDogcHJvcHMudmFyaWFudCA9PT0gJ3JlZ3VsYXInXHJcbiAgICAgICAgPyAnNHB4J1xyXG4gICAgICAgIDogJzEycHgnfTtcblxuXHRcdCR7KHByb3BzKSA9PiAhcHJvcHMubm9Cb3JkZXIgJiZcclxuICAgIHByb3BzLnRoZW1lID09PSAnbGlnaHQnICYmXHJcbiAgICBgYm9yZGVyOiAke3Byb3BzLnZlcnNpb24gPT09ICcyLjAnID8gMC41IDogMX1weCBzb2xpZCAke2dlbmVyYXRlQm9yZGVyKHByb3BzLnR5cGUsIHByb3BzLnRoZW1lKX07YH1cblxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0VGV4dENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cdFx0fVxuXG5cdFx0Lmljb24tdHJhaWxpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXG5cdFx0Lmljb24tbGVhZGluZyB7XG5cdFx0XHRhbGw6IHVuc2V0O1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHR9XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRhZy5zdHlsZWQuanMubWFwIl19 */"));export{i as Tag};
+import c from"@emotion/styled/base";import{getPadding as g,getBackgroundColor as I,generateBorder as b,getTextColor as l}from"./themes.js";const i=c("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var g;return null!==(g=c.cursor)&&void 0!==g?g:"default"}),";",(c=>"small"!==c.size&&("regular"===c.variant?"display: block;\n\t\t     min-height: 26px;\n\t\t":"min-height: 20px;"))," .container{display:flex;align-items:",(c=>c.alignIcon?c.alignIcon:"center"),";gap:6px;",(c=>c.height?`height: ${c.height}px; box-sizing: border-box;`:"small"===c.size?"height: 16px; box-sizing: border-box;":"")," padding:",(c=>c.padding?c.padding:"small"===c.size?"2px 6px":c.contentPadding?`${c.contentPadding}px`:g(c.variant)),";background:",(c=>{var g;return null!==(g=c.backgroundColor)&&void 0!==g?g:I(c.theme,c.type)}),";border-radius:",(c=>void 0!==c.borderRadius?"number"==typeof c.borderRadius?`${c.borderRadius}px`:c.borderRadius:"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${b(c.type,c.theme)};`)," .text{color:",(c=>l(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmN1cnNvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ2RlZmF1bHQnOyB9fTtcblx0JHsocHJvcHMpID0+IHByb3BzLnNpemUgIT09ICdzbWFsbCcgJiZcclxuICAgIChwcm9wcy52YXJpYW50ID09PSAncmVndWxhcidcclxuICAgICAgICA/IGBkaXNwbGF5OiBibG9jaztcblx0XHQgICAgIG1pbi1oZWlnaHQ6IDI2cHg7XG5cdFx0YFxyXG4gICAgICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YCl9XG5cdC5jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6ICR7KHByb3BzKSA9PiAocHJvcHMuYWxpZ25JY29uID8gcHJvcHMuYWxpZ25JY29uIDogJ2NlbnRlcicpfTtcblx0XHRnYXA6IDZweDtcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuaGVpZ2h0XHJcbiAgICA/IGBoZWlnaHQ6ICR7cHJvcHMuaGVpZ2h0fXB4OyBib3gtc2l6aW5nOiBib3JkZXItYm94O2BcclxuICAgIDogcHJvcHMuc2l6ZSA9PT0gJ3NtYWxsJ1xyXG4gICAgICAgID8gJ2hlaWdodDogMTZweDsgYm94LXNpemluZzogYm9yZGVyLWJveDsnXHJcbiAgICAgICAgOiAnJ31cblx0XHRwYWRkaW5nOiAkeyhwcm9wcykgPT4gcHJvcHMucGFkZGluZ1xyXG4gICAgPyBwcm9wcy5wYWRkaW5nXHJcbiAgICA6IHByb3BzLnNpemUgPT09ICdzbWFsbCdcclxuICAgICAgICA/ICcycHggNnB4J1xyXG4gICAgICAgIDogcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgICAgICAgICAgPyBgJHtwcm9wcy5jb250ZW50UGFkZGluZ31weGBcclxuICAgICAgICAgICAgOiBnZXRQYWRkaW5nKHByb3BzLnZhcmlhbnQpfTtcblx0XHRiYWNrZ3JvdW5kOiAkeyhwcm9wcykgPT4geyB2YXIgX2E7IHJldHVybiAoX2EgPSBwcm9wcy5iYWNrZ3JvdW5kQ29sb3IpICE9PSBudWxsICYmIF9hICE9PSB2b2lkIDAgPyBfYSA6IGdldEJhY2tncm91bmRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSk7IH19O1xuXG5cdFx0Ym9yZGVyLXJhZGl1czogJHsocHJvcHMpID0+IHByb3BzLmJvcmRlclJhZGl1cyAhPT0gdW5kZWZpbmVkXHJcbiAgICA/IHR5cGVvZiBwcm9wcy5ib3JkZXJSYWRpdXMgPT09ICdudW1iZXInXHJcbiAgICAgICAgPyBgJHtwcm9wcy5ib3JkZXJSYWRpdXN9cHhgXHJcbiAgICAgICAgOiBwcm9wcy5ib3JkZXJSYWRpdXNcclxuICAgIDogcHJvcHMudmFyaWFudCA9PT0gJ3JlZ3VsYXInXHJcbiAgICAgICAgPyAnNHB4J1xyXG4gICAgICAgIDogJzEycHgnfTtcblxuXHRcdCR7KHByb3BzKSA9PiAhcHJvcHMubm9Cb3JkZXIgJiZcclxuICAgIHByb3BzLnRoZW1lID09PSAnbGlnaHQnICYmXHJcbiAgICBgYm9yZGVyOiAke3Byb3BzLnZlcnNpb24gPT09ICcyLjAnID8gMC41IDogMX1weCBzb2xpZCAke2dlbmVyYXRlQm9yZGVyKHByb3BzLnR5cGUsIHByb3BzLnRoZW1lKX07YH1cblxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0VGV4dENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cdFx0fVxuXG5cdFx0Lmljb24tdHJhaWxpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXG5cdFx0Lmljb24tbGVhZGluZyB7XG5cdFx0XHRhbGw6IHVuc2V0O1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHR9XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRhZy5zdHlsZWQuanMubWFwIl19 */"));export{i as Tag};
 //# sourceMappingURL=Tag.styled.js.map

package/dist/esm/components/tag/Tag.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' | '2.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string | number;\n\tsize?: 'regular' | 'small';\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t     min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.size === 'small' ? 'height: 16px; box-sizing: border-box;' : ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n`;\n"],"names":["Tag","_styled","process","env","NODE_ENV","target","label","props","_a","cursor","size","variant","alignIcon","contentPadding","getPadding","backgroundColor","getBackgroundColor","theme","type","undefined","borderRadius","noBorder","version","generateBorder","getTextColor"],"mappings":"2IASO,MAAMA,EAAGC,QAAA,eAAAC,QAAAC,IAAAC,SAAA,CAAAC,OAAA,YAAA,CAAAA,OAAA,WAAAC,MAAA,OAAAL,CAAA,WAaJM,IAAS,IAAAC,EAAC,OAAY,QAAZA,EAAAD,EAAME,cAAM,IAAAD,EAAAA,EAAI,SAAS,GAC3CD,KAAAA,GACa,UAAfA,EAAMG,OACa,YAAlBH,EAAMI,QACJ,0EAMaJ,yCAAAA,GAAWA,EAAMK,UAAYL,EAAMK,UAAY,UAAS,aAErEL,GACa,UAAfA,EAAMG,KAAmB,wCAA0C,IAAE,aAC1DH,GACI,UAAfA,EAAMG,KACH,UACAH,EAAMM,eACN,GAAGN,EAAMM,mBACTC,EAAWP,EAAMI,UACNJ,gBAAAA,IAAS,IAAAC,EACvB,OAAqB,QAArBA,EAAAD,EAAMQ,uBAAe,IAAAP,EAAAA,EAAIQ,EAAmBT,EAAMU,MAAOV,EAAMW,KAAK,sBAEnDX,QACMY,IAAvBZ,EAAMa,aAC2B,iBAAvBb,EAAMa,aACZ,GAAGb,EAAMa,iBACTb,EAAMa,aACW,YAAlBb,EAAMI,QACN,MACA,QAAM,KAEPJ,IACDA,EAAMc,UACS,UAAhBd,EAAMU,OACK,WAAkB,QAAlBV,EAAMe,QAAoB,GAAM,aAAaC,EACvDhB,EAAMW,KACNX,EAAMU,4BAIGV,GAAUiB,EAAajB,EAAMU,MAAOV,EAAMW,OAAKhB,oFAa3D,eAb2DA,QAAAC,IAAAC,SAa3D,GAAA"}
+{"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tpadding?: string;\n\theight?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string | number;\n\tsize?: 'regular' | 'small';\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t     min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.height\n\t\t\t\t? `height: ${props.height}px; box-sizing: border-box;`\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? 'height: 16px; box-sizing: border-box;'\n\t\t\t\t: ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.padding\n\t\t\t\t? props.padding\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n`;\n"],"names":["Tag","_styled","process","env","NODE_ENV","target","label","props","_a","cursor","size","variant","alignIcon","height","padding","contentPadding","getPadding","backgroundColor","getBackgroundColor","theme","type","undefined","borderRadius","noBorder","version","generateBorder","getTextColor"],"mappings":"2IASO,MAAMA,EAAGC,QAAA,eAAAC,QAAAC,IAAAC,SAAA,CAAAC,OAAA,YAAA,CAAAA,OAAA,WAAAC,MAAA,OAAAL,CAAA,WAeJM,IAAS,IAAAC,EAAC,OAAY,QAAZA,EAAAD,EAAME,cAAM,IAAAD,EAAAA,EAAI,SAAS,GAC3CD,KAAAA,GACa,UAAfA,EAAMG,OACa,YAAlBH,EAAMI,QACJ,0EAGoB,yCAGPJ,GAAWA,EAAMK,UAAYL,EAAMK,UAAY,UAE5DL,aAAAA,GACFA,EAAMM,OACH,WAAWN,EAAMM,oCACF,UAAfN,EAAMG,KACN,wCACA,IACQH,aAAAA,GACXA,EAAMO,QACHP,EAAMO,QACS,UAAfP,EAAMG,KACN,UACAH,EAAMQ,eACN,GAAGR,EAAMQ,mBACTC,EAAWT,EAAMI,UAAQ,gBACdJ,IAAS,IAAAC,EACvB,OAAqB,QAArBA,EAAAD,EAAMU,uBAAe,IAAAT,EAAAA,EAAIU,EAAmBX,EAAMY,MAAOZ,EAAMa,KAAK,sBAEnDb,QACMc,IAAvBd,EAAMe,aAC2B,iBAAvBf,EAAMe,aACZ,GAAGf,EAAMe,iBACTf,EAAMe,aACW,YAAlBf,EAAMI,QACN,MACA,QAAM,KAEPJ,IACDA,EAAMgB,UACS,UAAhBhB,EAAMY,OACK,WAAkB,QAAlBZ,EAAMiB,QAAoB,GAAM,aAAaC,EACvDlB,EAAMa,KACNb,EAAMY,4BAIGZ,GAAUmB,EAAanB,EAAMY,MAAOZ,EAAMa,OAAKlB,oFAa3D,eAb2DA,QAAAC,IAAAC,SAa3D,GAAA"}

package/dist/esm/components/tag/model.d.ts

@@ -0,0 +1,122 @@
+import React from 'react';
+import { MouseEventHandler } from 'react';
+import { TooltipProps } from '../tooltips/Tooltip';
+export type TagTheme = 'light' | 'dark';
+export type TagVariant = 'regular' | 'circle' | 'compressed';
+export type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
+export declare const ValidTagTypeMap: {
+    regular: {
+        negative: boolean;
+        warning: boolean;
+        positive: boolean;
+        neutral: boolean;
+        white: boolean;
+        purple: boolean;
+        blue: boolean;
+        ai: boolean;
+    };
+    circle: {
+        negative: boolean;
+        warning: boolean;
+        positive: boolean;
+        neutral: boolean;
+        blue: boolean;
+        grey: boolean;
+        ai: boolean;
+    };
+    compressed: {
+        negative: boolean;
+        warning: boolean;
+        positive: boolean;
+        neutral: boolean;
+        white: boolean;
+        purple: boolean;
+        blue: boolean;
+        ai: boolean;
+    };
+};
+export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
+    /**
+     * Set the theme of the Tag
+     * @default default light
+     */
+    theme?: TagTheme;
+    /**
+     * Set the color of the Tag
+     * @default default neutral
+     */
+    type?: TagType;
+    /**
+     * Set the color of the Tag
+     * @default default regular
+     */
+    variant?: TagVariant;
+    /**
+     * The icon component that is the right of the text
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    TrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * The right icon id,
+     * @default trailing-icon
+     */
+    trailingIconId?: string;
+    /**
+     * The right icon on click event, defaults to () => {}
+     */
+    onTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Tooltip props for the trailing icon
+     * @default undefined
+     */
+    trailingIconTooltip?: Omit<TooltipProps, 'children'>;
+    /**
+     * The icon component that is to the left of the text
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * The right icon on click event, defaults to () => {}
+     */
+    onLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The left icon id,
+     * @default leading-icon
+     */
+    leadingIconId?: string;
+    /**
+     * Tooltip props for the leading icon
+     * @default undefined
+     */
+    leadingIconTooltip?: Omit<TooltipProps, 'children'>;
+    tagText: string | number;
+    version?: '1.0' | '2.0' | '3.0';
+    /** Custom CSS padding string, e.g. '4px 8px' */
+    padding?: string;
+    /** Custom height in px */
+    height?: number;
+    cursor?: string;
+    alignIcon?: string;
+    noBorder?: boolean;
+    tagHtmlText?: JSX.Element;
+    contentPadding?: number;
+    tagColor?: string;
+    numberOfLines?: number;
+    /**
+     * Override the computed background color of the tag container.
+     * @default undefined (uses theme/type color)
+     */
+    backgroundColor?: string;
+    /**
+     * Override the border-radius of the tag container.
+     * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)
+     */
+    borderRadius?: string | number;
+    /**
+     * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.
+     * @default 'regular'
+     */
+    size?: 'regular' | 'small';
+}

package/dist/esm/components/tag/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n}\n"],"names":["ValidTagTypeMap","regular","negative","warning","positive","neutral","white","purple","blue","ai","circle","grey","compressed"],"mappings":"AAmBO,MAAMA,EAAkB,CAC9BC,QAAS,CACRC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,IAAI,GAELC,OAAQ,CACPR,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTG,MAAM,EACNG,MAAM,EACNF,IAAI,GAELG,WAAY,CACXV,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,IAAI"}
+{"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0' | '3.0';\n\t/** Custom CSS padding string, e.g. '4px 8px' */\n\tpadding?: string;\n\t/** Custom height in px */\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n}\n"],"names":["ValidTagTypeMap","regular","negative","warning","positive","neutral","white","purple","blue","ai","circle","grey","compressed"],"mappings":"AAmBO,MAAMA,EAAkB,CAC9BC,QAAS,CACRC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,IAAI,GAELC,OAAQ,CACPR,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTG,MAAM,EACNG,MAAM,EACNF,IAAI,GAELG,WAAY,CACXV,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,IAAI"}

package/dist/esm/components/whats-new/WhatsNew.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { WhatsNewContent } from './WhatsNew.types';
+interface WhatsNewProps {
+    title?: string;
+    tooltip?: string;
+    searchPlaceholder?: string;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    noResultsText?: string;
+    width?: string;
+    onContentClick?: (content: WhatsNewContent) => void;
+    renderCustomContent?: (content: WhatsNewContent) => React.ReactNode;
+    buttonTestId?: string;
+    iconWidth?: number;
+    iconHeight?: number;
+    iconColor?: string;
+    iconPadding?: number;
+    customIcon?: React.ComponentType<{
+        width?: number;
+        height?: number;
+        color?: string;
+    }>;
+}
+export declare const WhatsNew: React.FC<WhatsNewProps>;
+export {};

package/dist/esm/components/whats-new/WhatsNew.js

@@ -1,2 +1,2 @@
-import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const a=a=>{let{title:c="What's new",tooltip:h="What's new",searchPlaceholder:m="Search posts",emptyStateTitle:l="Nothing new!",emptyStateDescription:p="There are no new updates or features at the moment. Check back soon!",noResultsText:d="Sorry, no results found.",width:u="480px",onContentClick:C,renderCustomContent:w,buttonTestId:f="whats-new-button",iconWidth:W=32,iconHeight:g=32,customIcon:S}=a;const[T,k]=n(!1),{whatsNewContent:x,isLoading:y,newContentCount:N}=r();return t(e,{children:[o(i,{onClick:()=>k(!0),newContentCount:N,isOpen:T,isLoading:y,tooltip:h,testId:f,iconWidth:W,iconHeight:g,customIcon:S}),o(s,{isOpen:T,onClose:()=>k(!1),content:x,isLoading:y,title:c,searchPlaceholder:m,emptyStateTitle:l,emptyStateDescription:p,noResultsText:d,width:u,onContentClick:t=>{C&&C(t)},renderCustomContent:w})]})};export{a as WhatsNew};
+import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const c=c=>{let{title:a="What's new",tooltip:h="What's new",searchPlaceholder:l="Search posts",emptyStateTitle:d="Nothing new!",emptyStateDescription:m="There are no new updates or features at the moment. Check back soon!",noResultsText:p="Sorry, no results found.",width:C="480px",onContentClick:u,renderCustomContent:w,buttonTestId:g="whats-new-button",iconWidth:f=24,iconHeight:W=24,iconColor:P,iconPadding:S,customIcon:T}=c;const[k,x]=n(!1),{whatsNewContent:y,isLoading:N,newContentCount:j}=r();return t(e,{children:[o(i,{onClick:()=>x(!0),newContentCount:j,isOpen:k,isLoading:N,tooltip:h,testId:g,iconWidth:f,iconHeight:W,iconColor:P,iconPadding:S,customIcon:T}),o(s,{isOpen:k,onClose:()=>x(!1),content:y,isLoading:N,title:a,searchPlaceholder:l,emptyStateTitle:d,emptyStateDescription:m,noResultsText:p,width:C,onContentClick:t=>{u&&u(t)},renderCustomContent:w})]})};export{c as WhatsNew};
 //# sourceMappingURL=WhatsNew.js.map