npm - @lax-wp/design-system - Versions diffs - 0.14.50 → 0.14.52 - Mend

@lax-wp/design-system 0.14.50 → 0.14.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/components/data-display/datatype-icon/LabelValueDataTypeIcon.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),i=require("../../../_virtual/index.cjs.js"),S=require("react"),Y=require("../../tooltip/Tooltip.cjs.js"),s=require("@mui/icons-material"),e=require("./DataTypeIcon.cjs.js"),c={[e.APP_DATA_TYPES.BOOLEAN]:"#12B76A",[e.APP_DATA_TYPES.CHOICE]:"#DF5384",[e.APP_DATA_TYPES.DATE]:"#292E92",[e.APP_DATA_TYPES.EMAIL]:"#139AFA",[e.APP_DATA_TYPES.CURRENCY]:"#F99417",[e.APP_DATA_TYPES.DATETIME]:"#6E9D6D",[e.APP_DATA_TYPES.TEXT]:"#58B507",[e.APP_DATA_TYPES.STRING]:"#58B507",[e.APP_DATA_TYPES.TAG]:"#B31121",[e.APP_DATA_TYPES.MASTER_DATA]:"#CCAE00",[e.APP_DATA_TYPES.DYNAMIC]:"#DB00CD",[e.APP_DATA_TYPES.NUMBER]:"#00E4D1"},o="#98A2B3",x=({fill:t=o,size:P=16})=>A.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:P,height:P,viewBox:"0 0 21 20",fill:"none",children:A.jsx("path",{d:"M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z",fill:t})}),O=({fill:t=o,size:P=16})=>A.jsx("svg",{width:P,height:P,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:A.jsx("path",{d:"M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z",fill:t})}),d=({dataType:t="text",tooltip:P,size:T=16,className:l})=>{const E=e.APP_DATA_TYPES_OPTIONS.find(D=>D.value===t),[C,_]=S.useState(!1),a=document.documentElement.classList.contains("dark"),r=C?c[t]:o,u=C?a?e.BG_COLORS_DARK[t]:e.BG_COLORS[t]:"transparent",n={fontSize:T,color:r,transition:"color 150ms ease"};return A.jsx(Y,{title:P||E?.label,placement:"top",children:A.jsx("span",{className:i("flex items-center justify-center p-0.5 rounded-full transition-colors duration-150",l),style:{backgroundColor:u},onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1),children:(()=>{switch(t){case e.APP_DATA_TYPES.BOOLEAN:return A.jsx(s.Rule,{sx:n});case e.APP_DATA_TYPES.CHOICE:return A.jsx(s.FormatListBulleted,{sx:n});case e.APP_DATA_TYPES.DATE:return A.jsx(s.CalendarMonth,{sx:n});case e.APP_DATA_TYPES.EMAIL:return A.jsx(s.MailOutline,{sx:n});case e.APP_DATA_TYPES.CURRENCY:return A.jsx(s.AttachMoney,{sx:n});case e.APP_DATA_TYPES.DATETIME:return A.jsx(s.Schedule,{sx:n});case e.APP_DATA_TYPES.TEXT:case e.APP_DATA_TYPES.STRING:return A.jsx(s.SubjectOutlined,{sx:n});case e.APP_DATA_TYPES.TAG:return A.jsx(s.LocalOfferOutlined,{sx:n});case e.APP_DATA_TYPES.MASTER_DATA:return A.jsx(x,{size:T,fill:r});case e.APP_DATA_TYPES.DYNAMIC:return A.jsx(O,{size:T,fill:r});case e.APP_DATA_TYPES.NUMBER:return A.jsx(s.Numbers,{sx:n});default:return null}})()})})};exports.DATA_TYPE_ICON_COLORS=c;exports.LabelValueDataTypeIcon=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),i=require("../../../_virtual/index.cjs.js"),S=require("react"),Y=require("../../tooltip/Tooltip.cjs.js"),s=require("@mui/icons-material"),e=require("./DataTypeIcon.cjs.js"),c={[e.APP_DATA_TYPES.BOOLEAN]:"#12B76A",[e.APP_DATA_TYPES.CHOICE]:"#DF5384",[e.APP_DATA_TYPES.DATE]:"#292E92",[e.APP_DATA_TYPES.EMAIL]:"#139AFA",[e.APP_DATA_TYPES.CURRENCY]:"#F99417",[e.APP_DATA_TYPES.DATETIME]:"#6E9D6D",[e.APP_DATA_TYPES.TEXT]:"#58B507",[e.APP_DATA_TYPES.STRING]:"#58B507",[e.APP_DATA_TYPES.TAG]:"#B31121",[e.APP_DATA_TYPES.MASTER_DATA]:"#CCAE00",[e.APP_DATA_TYPES.DYNAMIC]:"#DB00CD",[e.APP_DATA_TYPES.NUMBER]:"#00E4D1"},o="#98A2B3",x=({fill:t=o,size:P=16})=>A.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:P,height:P,viewBox:"0 0 21 20",fill:"none",children:A.jsx("path",{d:"M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z",fill:t})}),O=({fill:t=o,size:P=16})=>A.jsx("svg",{width:P,height:P,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:A.jsx("path",{d:"M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z",fill:t})}),d=({dataType:t="text",tooltip:P,size:T=16,className:l})=>{const E=e.APP_DATA_TYPES_OPTIONS.find(D=>D.value===t),[C,_]=S.useState(!1),a=document.documentElement.classList.contains("dark"),r=C?c[t]:o,u=C?a?e.BG_COLORS_DARK[t]:e.BG_COLORS[t]:"transparent",n={fontSize:T,color:r,transition:"color 150ms ease"};return A.jsx(Y,{title:P||E?.label,placement:"top",children:A.jsx("span",{className:i("flex items-center justify-center -ml-1 p-0.5 rounded-full transition-colors duration-150",l),style:{backgroundColor:u},onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1),children:(()=>{switch(t){case e.APP_DATA_TYPES.BOOLEAN:return A.jsx(s.Rule,{sx:n});case e.APP_DATA_TYPES.CHOICE:return A.jsx(s.FormatListBulleted,{sx:n});case e.APP_DATA_TYPES.DATE:return A.jsx(s.CalendarMonth,{sx:n});case e.APP_DATA_TYPES.EMAIL:return A.jsx(s.MailOutline,{sx:n});case e.APP_DATA_TYPES.CURRENCY:return A.jsx(s.AttachMoney,{sx:n});case e.APP_DATA_TYPES.DATETIME:return A.jsx(s.Schedule,{sx:n});case e.APP_DATA_TYPES.TEXT:case e.APP_DATA_TYPES.STRING:return A.jsx(s.SubjectOutlined,{sx:n});case e.APP_DATA_TYPES.TAG:return A.jsx(s.LocalOfferOutlined,{sx:n});case e.APP_DATA_TYPES.MASTER_DATA:return A.jsx(x,{size:T,fill:r});case e.APP_DATA_TYPES.DYNAMIC:return A.jsx(O,{size:T,fill:r});case e.APP_DATA_TYPES.NUMBER:return A.jsx(s.Numbers,{sx:n});default:return null}})()})})};exports.DATA_TYPE_ICON_COLORS=c;exports.LabelValueDataTypeIcon=d;
 //# sourceMappingURL=LabelValueDataTypeIcon.cjs.js.map

package/dist/components/data-display/datatype-icon/LabelValueDataTypeIcon.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LabelValueDataTypeIcon.cjs.js","sources":["../../../../src/components/data-display/datatype-icon/LabelValueDataTypeIcon.tsx"],"sourcesContent":["import cn from 'classnames';\nimport { useState } from 'react';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n AttachMoney,\n CalendarMonth,\n FormatListBulleted,\n LocalOfferOutlined,\n MailOutline,\n Numbers,\n Rule,\n Schedule,\n SubjectOutlined,\n} from '@mui/icons-material';\nimport { APP_DATA_TYPES, APP_DATA_TYPES_OPTIONS, BG_COLORS, BG_COLORS_DARK } from './DataTypeIcon';\n\n/*\n Accent color of each data type — the hover color of the icon\n /\nexport const DATA_TYPE_ICON_COLORS: Record<string, string> = {\n [APP_DATA_TYPES.BOOLEAN]: '#12B76A',\n [APP_DATA_TYPES.CHOICE]: '#DF5384',\n [APP_DATA_TYPES.DATE]: '#292E92',\n [APP_DATA_TYPES.EMAIL]: '#139AFA',\n [APP_DATA_TYPES.CURRENCY]: '#F99417',\n [APP_DATA_TYPES.DATETIME]: '#6E9D6D',\n [APP_DATA_TYPES.TEXT]: '#58B507',\n [APP_DATA_TYPES.STRING]: '#58B507',\n [APP_DATA_TYPES.TAG]: '#B31121',\n [APP_DATA_TYPES.MASTER_DATA]: '#CCAE00',\n [APP_DATA_TYPES.DYNAMIC]: '#DB00CD',\n [APP_DATA_TYPES.NUMBER]: '#00E4D1',\n};\n\n/* Neutral/400 — resting color of the icon /\nconst NEUTRAL_400 = '#98A2B3';\n\nconst DataBaseIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg xmlns='http://www.w3.org/2000/svg' width={size} height={size} viewBox='0 0 21 20' fill='none'>\n <path\n d='M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z'\n fill={fill}\n />\n </svg>\n);\n\nconst AutomationIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg width={size} height={size} viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'>\n <path\n d='M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z'\n fill={fill}\n />\n </svg>\n);\n\nexport interface LabelValueDataTypeIconProps {\n /* One of `APP_DATA_TYPES` /\n dataType: string;\n /* Overrides the default tooltip (the data type label) /\n tooltip?: React.ReactNode;\n /* Icon size in px (default: 16) /\n size?: number;\n /* Additional CSS classes on the icon wrapper /\n className?: string;\n}\n\n/\n Data type icon used to emphasize the data type of a `LabelValue` field.\n \n Unlike `DataTypeIcon` — which always renders a colored icon on a colored\n * square, as used in table headers — this one is quiet at rest: the icon sits\n * at Neutral/400 on a transparent background, and only on hover does it take\n * the data type accent color over a round, light tint of that same color.\n * A tooltip names the data type.\n \n @example\n * ```tsx\n * <LabelValueDataTypeIcon dataType={APP_DATA_TYPES.CURRENCY} />\n * ```\n */\nexport const LabelValueDataTypeIcon = ({\n dataType = 'text',\n tooltip,\n size = 16,\n className,\n}: LabelValueDataTypeIconProps) => {\n const dataTypeOption = APP_DATA_TYPES_OPTIONS.find((option) => option.value === dataType);\n const [isHover, setIsHover] = useState(false);\n const isDark = document.documentElement.classList.contains('dark');\n\n const color = isHover ? DATA_TYPE_ICON_COLORS[dataType] : NEUTRAL_400;\n const backgroundColor = isHover ? (isDark ? BG_COLORS_DARK[dataType] : BG_COLORS[dataType]) : 'transparent';\n const sx = { fontSize: size, color, transition: 'color 150ms ease' };\n\n return (\n <Tooltip title={tooltip \|\| dataTypeOption?.label} placement='top'>\n <span\n className={cn('flex items-center justify-center p-0.5 rounded-full transition-colors duration-150', className)}\n style={{ backgroundColor }}\n onMouseEnter={() => setIsHover(true)}\n onMouseLeave={() => setIsHover(false)}\n >\n {(() => {\n switch (dataType) {\n case APP_DATA_TYPES.BOOLEAN:\n return <Rule sx={sx} />;\n case APP_DATA_TYPES.CHOICE:\n return <FormatListBulleted sx={sx} />;\n case APP_DATA_TYPES.DATE:\n return <CalendarMonth sx={sx} />;\n case APP_DATA_TYPES.EMAIL:\n return <MailOutline sx={sx} />;\n case APP_DATA_TYPES.CURRENCY:\n return <AttachMoney sx={sx} />;\n case APP_DATA_TYPES.DATETIME:\n return <Schedule sx={sx} />;\n case APP_DATA_TYPES.TEXT:\n case APP_DATA_TYPES.STRING:\n return <SubjectOutlined sx={sx} />;\n case APP_DATA_TYPES.TAG:\n return <LocalOfferOutlined sx={sx} />;\n case APP_DATA_TYPES.MASTER_DATA:\n return <DataBaseIcon size={size} fill={color} />;\n case APP_DATA_TYPES.DYNAMIC:\n return <AutomationIcon size={size} fill={color} />;\n case APP_DATA_TYPES.NUMBER:\n return <Numbers sx={sx} />;\n default:\n return null;\n }\n })()}\n </span>\n </Tooltip>\n );\n};\n"],"names":["DATA_TYPE_ICON_COLORS","APP_DATA_TYPES","NEUTRAL_400","DataBaseIcon","fill","size","jsx","AutomationIcon","LabelValueDataTypeIcon","dataType","tooltip","className","dataTypeOption","APP_DATA_TYPES_OPTIONS","option","isHover","setIsHover","useState","isDark","color","backgroundColor","BG_COLORS_DARK","BG_COLORS","sx","Tooltip","cn","Rule","FormatListBulleted","CalendarMonth","MailOutline","AttachMoney","Schedule","SubjectOutlined","LocalOfferOutlined","Numbers"],"mappings":"kSAmBaA,EAAgD,CAC3D,CAACC,EAAAA,eAAe,OAAO,EAAG,UAC1B,CAACA,EAAAA,eAAe,MAAM,EAAG,UACzB,CAACA,EAAAA,eAAe,IAAI,EAAG,UACvB,CAACA,EAAAA,eAAe,KAAK,EAAG,UACxB,CAACA,EAAAA,eAAe,QAAQ,EAAG,UAC3B,CAACA,EAAAA,eAAe,QAAQ,EAAG,UAC3B,CAACA,EAAAA,eAAe,IAAI,EAAG,UACvB,CAACA,EAAAA,eAAe,MAAM,EAAG,UACzB,CAACA,EAAAA,eAAe,GAAG,EAAG,UACtB,CAACA,EAAAA,eAAe,WAAW,EAAG,UAC9B,CAACA,EAAAA,eAAe,OAAO,EAAG,UAC1B,CAACA,EAAAA,eAAe,MAAM,EAAG,SAC3B,EAGMC,EAAc,UAEdC,EAAe,CAAC,CAAE,KAAAC,EAAOF,EAAa,KAAAG,EAAO,MACjDC,EAAAA,IAAC,OAAI,MAAM,6BAA6B,MAAOD,EAAM,OAAQA,EAAM,QAAQ,YAAY,KAAK,OAC1F,SAAAC,EAAAA,IAAC,OAAA,CACC,EAAE,qYACF,KAAAF,CAAA,CACF,EACF,EAGIG,EAAiB,CAAC,CAAE,KAAAH,EAAOF,EAAa,KAAAG,EAAO,MACnDC,EAAAA,IAAC,OAAI,MAAOD,EAAM,OAAQA,EAAM,QAAQ,YAAY,KAAK,OAAO,MAAM,6BACpE,SAAAC,EAAAA,IAAC,OAAA,CACC,EAAE,kpDACF,KAAAF,CAAA,CACF,EACF,EA4BWI,EAAyB,CAAC,CACrC,SAAAC,EAAW,OACX,QAAAC,EACA,KAAAL,EAAO,GACP,UAAAM,CACF,IAAmC,CACjC,MAAMC,EAAiBC,EAAAA,uBAAuB,KAAMC,GAAWA,EAAO,QAAUL,CAAQ,EAClF,CAACM,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAS,SAAS,gBAAgB,UAAU,SAAS,MAAM,EAE3DC,EAAQJ,EAAUf,EAAsBS,CAAQ,EAAIP,EACpDkB,EAAkBL,EAAWG,EAASG,EAAAA,eAAeZ,CAAQ,EAAIa,EAAAA,UAAUb,CAAQ,EAAK,cACxFc,EAAK,CAAE,SAAUlB,EAAM,MAAAc,EAAO,WAAY,kBAAA,EAEhD,aACGK,EAAA,CAAQ,MAAOd,GAAWE,GAAgB,MAAO,UAAU,MAC1D,SAAAN,EAAAA,IAAC,OAAA,CACC,UAAWmB,EAAG,~~qFAAsFd~~,CAAS,~~EAC7G~~,MAAO,CAAE,gBAAAS,CAAA,EACT,aAAc,IAAMJ,EAAW,EAAI,EACnC,aAAc,IAAMA,EAAW,EAAK,EAElC,UAAA,IAAM,CACN,OAAQP,EAAA,CACN,KAAKR,EAAAA,eAAe,QAClB,OAAOK,MAACoB,EAAAA,MAAK,GAAAH,EAAQ,EACvB,KAAKtB,EAAAA,eAAe,OAClB,OAAOK,MAACqB,EAAAA,oBAAmB,GAAAJ,EAAQ,EACrC,KAAKtB,EAAAA,eAAe,KAClB,OAAOK,MAACsB,EAAAA,eAAc,GAAAL,EAAQ,EAChC,KAAKtB,EAAAA,eAAe,MAClB,OAAOK,MAACuB,EAAAA,aAAY,GAAAN,EAAQ,EAC9B,KAAKtB,EAAAA,eAAe,SAClB,OAAOK,MAACwB,EAAAA,aAAY,GAAAP,EAAQ,EAC9B,KAAKtB,EAAAA,eAAe,SAClB,OAAOK,MAACyB,EAAAA,UAAS,GAAAR,EAAQ,EAC3B,KAAKtB,EAAAA,eAAe,KACpB,KAAKA,EAAAA,eAAe,OAClB,OAAOK,MAAC0B,EAAAA,iBAAgB,GAAAT,EAAQ,EAClC,KAAKtB,EAAAA,eAAe,IAClB,OAAOK,MAAC2B,EAAAA,oBAAmB,GAAAV,EAAQ,EACrC,KAAKtB,EAAAA,eAAe,YAClB,OAAOK,EAAAA,IAACH,EAAA,CAAa,KAAAE,EAAY,KAAMc,CAAA,CAAO,EAChD,KAAKlB,EAAAA,eAAe,QAClB,OAAOK,EAAAA,IAACC,EAAA,CAAe,KAAAF,EAAY,KAAMc,CAAA,CAAO,EAClD,KAAKlB,EAAAA,eAAe,OAClB,OAAOK,MAAC4B,EAAAA,SAAQ,GAAAX,EAAQ,EAC1B,QACE,OAAO,IAAA,CAEb,GAAA,CAAG,CAAA,EAEP,CAEJ"}
1	+ {"version":3,"file":"LabelValueDataTypeIcon.cjs.js","sources":["../../../../src/components/data-display/datatype-icon/LabelValueDataTypeIcon.tsx"],"sourcesContent":["import cn from 'classnames';\nimport { useState } from 'react';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n AttachMoney,\n CalendarMonth,\n FormatListBulleted,\n LocalOfferOutlined,\n MailOutline,\n Numbers,\n Rule,\n Schedule,\n SubjectOutlined,\n} from '@mui/icons-material';\nimport { APP_DATA_TYPES, APP_DATA_TYPES_OPTIONS, BG_COLORS, BG_COLORS_DARK } from './DataTypeIcon';\n\n/*\n Accent color of each data type — the hover color of the icon\n /\nexport const DATA_TYPE_ICON_COLORS: Record<string, string> = {\n [APP_DATA_TYPES.BOOLEAN]: '#12B76A',\n [APP_DATA_TYPES.CHOICE]: '#DF5384',\n [APP_DATA_TYPES.DATE]: '#292E92',\n [APP_DATA_TYPES.EMAIL]: '#139AFA',\n [APP_DATA_TYPES.CURRENCY]: '#F99417',\n [APP_DATA_TYPES.DATETIME]: '#6E9D6D',\n [APP_DATA_TYPES.TEXT]: '#58B507',\n [APP_DATA_TYPES.STRING]: '#58B507',\n [APP_DATA_TYPES.TAG]: '#B31121',\n [APP_DATA_TYPES.MASTER_DATA]: '#CCAE00',\n [APP_DATA_TYPES.DYNAMIC]: '#DB00CD',\n [APP_DATA_TYPES.NUMBER]: '#00E4D1',\n};\n\n/* Neutral/400 — resting color of the icon /\nconst NEUTRAL_400 = '#98A2B3';\n\nconst DataBaseIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg xmlns='http://www.w3.org/2000/svg' width={size} height={size} viewBox='0 0 21 20' fill='none'>\n <path\n d='M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z'\n fill={fill}\n />\n </svg>\n);\n\nconst AutomationIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg width={size} height={size} viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'>\n <path\n d='M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z'\n fill={fill}\n />\n </svg>\n);\n\nexport interface LabelValueDataTypeIconProps {\n /* One of `APP_DATA_TYPES` /\n dataType: string;\n /* Overrides the default tooltip (the data type label) /\n tooltip?: React.ReactNode;\n /* Icon size in px (default: 16) /\n size?: number;\n /* Additional CSS classes on the icon wrapper /\n className?: string;\n}\n\n/\n Data type icon used to emphasize the data type of a `LabelValue` field.\n \n Unlike `DataTypeIcon` — which always renders a colored icon on a colored\n * square, as used in table headers — this one is quiet at rest: the icon sits\n * at Neutral/400 on a transparent background, and only on hover does it take\n * the data type accent color over a round, light tint of that same color.\n * A tooltip names the data type.\n \n @example\n * ```tsx\n * <LabelValueDataTypeIcon dataType={APP_DATA_TYPES.CURRENCY} />\n * ```\n */\nexport const LabelValueDataTypeIcon = ({\n dataType = 'text',\n tooltip,\n size = 16,\n className,\n}: LabelValueDataTypeIconProps) => {\n const dataTypeOption = APP_DATA_TYPES_OPTIONS.find((option) => option.value === dataType);\n const [isHover, setIsHover] = useState(false);\n const isDark = document.documentElement.classList.contains('dark');\n\n const color = isHover ? DATA_TYPE_ICON_COLORS[dataType] : NEUTRAL_400;\n const backgroundColor = isHover ? (isDark ? BG_COLORS_DARK[dataType] : BG_COLORS[dataType]) : 'transparent';\n const sx = { fontSize: size, color, transition: 'color 150ms ease' };\n\n return (\n <Tooltip title={tooltip \|\| dataTypeOption?.label} placement='top'>\n <span\n className={cn('flex items-center justify-center -ml-1 p-0.5 rounded-full transition-colors duration-150', className)}\n style={{ backgroundColor }}\n onMouseEnter={() => setIsHover(true)}\n onMouseLeave={() => setIsHover(false)}\n >\n {(() => {\n switch (dataType) {\n case APP_DATA_TYPES.BOOLEAN:\n return <Rule sx={sx} />;\n case APP_DATA_TYPES.CHOICE:\n return <FormatListBulleted sx={sx} />;\n case APP_DATA_TYPES.DATE:\n return <CalendarMonth sx={sx} />;\n case APP_DATA_TYPES.EMAIL:\n return <MailOutline sx={sx} />;\n case APP_DATA_TYPES.CURRENCY:\n return <AttachMoney sx={sx} />;\n case APP_DATA_TYPES.DATETIME:\n return <Schedule sx={sx} />;\n case APP_DATA_TYPES.TEXT:\n case APP_DATA_TYPES.STRING:\n return <SubjectOutlined sx={sx} />;\n case APP_DATA_TYPES.TAG:\n return <LocalOfferOutlined sx={sx} />;\n case APP_DATA_TYPES.MASTER_DATA:\n return <DataBaseIcon size={size} fill={color} />;\n case APP_DATA_TYPES.DYNAMIC:\n return <AutomationIcon size={size} fill={color} />;\n case APP_DATA_TYPES.NUMBER:\n return <Numbers sx={sx} />;\n default:\n return null;\n }\n })()}\n </span>\n </Tooltip>\n );\n};\n"],"names":["DATA_TYPE_ICON_COLORS","APP_DATA_TYPES","NEUTRAL_400","DataBaseIcon","fill","size","jsx","AutomationIcon","LabelValueDataTypeIcon","dataType","tooltip","className","dataTypeOption","APP_DATA_TYPES_OPTIONS","option","isHover","setIsHover","useState","isDark","color","backgroundColor","BG_COLORS_DARK","BG_COLORS","sx","Tooltip","cn","Rule","FormatListBulleted","CalendarMonth","MailOutline","AttachMoney","Schedule","SubjectOutlined","LocalOfferOutlined","Numbers"],"mappings":"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"}

package/dist/components/data-display/datatype-icon/LabelValueDataTypeIcon.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import m from "../../../_virtual/index.es.js";
+import T from "../../../_virtual/index.es.js";
 import { useState as D } from "react";
 import f from "../../tooltip/Tooltip.es.js";
 import { Numbers as O, LocalOfferOutlined as d, SubjectOutlined as L, Schedule as h, AttachMoney as M, MailOutline as p, CalendarMonth as B, FormatListBulleted as I, Rule as R } from "@mui/icons-material";
@@ -17,13 +17,13 @@ const w = {
   [t.MASTER_DATA]: "#CCAE00",
   [t.DYNAMIC]: "#DB00CD",
   [t.NUMBER]: "#00E4D1"
-}, c = "#98A2B3", v = ({ fill: n = c, size: o = 16 }) => /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: o, height: o, viewBox: "0 0 21 20", fill: "none", children: /* @__PURE__ */ e(
+}, l = "#98A2B3", v = ({ fill: n = l, size: o = 16 }) => /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: o, height: o, viewBox: "0 0 21 20", fill: "none", children: /* @__PURE__ */ e(
   "path",
   {
     d: "M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z",
     fill: n
   }
-) }), g = ({ fill: n = c, size: o = 16 }) => /* @__PURE__ */ e("svg", { width: o, height: o, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
+) }), g = ({ fill: n = l, size: o = 16 }) => /* @__PURE__ */ e("svg", { width: o, height: o, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
   "path",
   {
     d: "M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z",
@@ -35,11 +35,11 @@ const w = {
   size: C = 16,
   className: i
 }) => {
-  const u = N.find((T) => T.value === n), [l, a] = D(!1), A = document.documentElement.classList.contains("dark"), s = l ? w[n] : c, E = l ? A ? S[n] : _[n] : "transparent", r = { fontSize: C, color: s, transition: "color 150ms ease" };
+  const u = N.find((m) => m.value === n), [c, a] = D(!1), A = document.documentElement.classList.contains("dark"), s = c ? w[n] : l, E = c ? A ? S[n] : _[n] : "transparent", r = { fontSize: C, color: s, transition: "color 150ms ease" };
   return /* @__PURE__ */ e(f, { title: o || u?.label, placement: "top", children: /* @__PURE__ */ e(
     "span",
     {
-      className: m("flex items-center justify-center p-0.5 rounded-full transition-colors duration-150", i),
+      className: T("flex items-center justify-center -ml-1 p-0.5 rounded-full transition-colors duration-150", i),
       style: { backgroundColor: E },
       onMouseEnter: () => a(!0),
       onMouseLeave: () => a(!1),

package/dist/components/data-display/datatype-icon/LabelValueDataTypeIcon.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LabelValueDataTypeIcon.es.js","sources":["../../../../src/components/data-display/datatype-icon/LabelValueDataTypeIcon.tsx"],"sourcesContent":["import cn from 'classnames';\nimport { useState } from 'react';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n AttachMoney,\n CalendarMonth,\n FormatListBulleted,\n LocalOfferOutlined,\n MailOutline,\n Numbers,\n Rule,\n Schedule,\n SubjectOutlined,\n} from '@mui/icons-material';\nimport { APP_DATA_TYPES, APP_DATA_TYPES_OPTIONS, BG_COLORS, BG_COLORS_DARK } from './DataTypeIcon';\n\n/*\n Accent color of each data type — the hover color of the icon\n /\nexport const DATA_TYPE_ICON_COLORS: Record<string, string> = {\n [APP_DATA_TYPES.BOOLEAN]: '#12B76A',\n [APP_DATA_TYPES.CHOICE]: '#DF5384',\n [APP_DATA_TYPES.DATE]: '#292E92',\n [APP_DATA_TYPES.EMAIL]: '#139AFA',\n [APP_DATA_TYPES.CURRENCY]: '#F99417',\n [APP_DATA_TYPES.DATETIME]: '#6E9D6D',\n [APP_DATA_TYPES.TEXT]: '#58B507',\n [APP_DATA_TYPES.STRING]: '#58B507',\n [APP_DATA_TYPES.TAG]: '#B31121',\n [APP_DATA_TYPES.MASTER_DATA]: '#CCAE00',\n [APP_DATA_TYPES.DYNAMIC]: '#DB00CD',\n [APP_DATA_TYPES.NUMBER]: '#00E4D1',\n};\n\n/* Neutral/400 — resting color of the icon /\nconst NEUTRAL_400 = '#98A2B3';\n\nconst DataBaseIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg xmlns='http://www.w3.org/2000/svg' width={size} height={size} viewBox='0 0 21 20' fill='none'>\n <path\n d='M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z'\n fill={fill}\n />\n </svg>\n);\n\nconst AutomationIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg width={size} height={size} viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'>\n <path\n d='M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z'\n fill={fill}\n />\n </svg>\n);\n\nexport interface LabelValueDataTypeIconProps {\n /* One of `APP_DATA_TYPES` /\n dataType: string;\n /* Overrides the default tooltip (the data type label) /\n tooltip?: React.ReactNode;\n /* Icon size in px (default: 16) /\n size?: number;\n /* Additional CSS classes on the icon wrapper /\n className?: string;\n}\n\n/\n Data type icon used to emphasize the data type of a `LabelValue` field.\n \n Unlike `DataTypeIcon` — which always renders a colored icon on a colored\n * square, as used in table headers — this one is quiet at rest: the icon sits\n * at Neutral/400 on a transparent background, and only on hover does it take\n * the data type accent color over a round, light tint of that same color.\n * A tooltip names the data type.\n \n @example\n * ```tsx\n * <LabelValueDataTypeIcon dataType={APP_DATA_TYPES.CURRENCY} />\n * ```\n */\nexport const LabelValueDataTypeIcon = ({\n dataType = 'text',\n tooltip,\n size = 16,\n className,\n}: LabelValueDataTypeIconProps) => {\n const dataTypeOption = APP_DATA_TYPES_OPTIONS.find((option) => option.value === dataType);\n const [isHover, setIsHover] = useState(false);\n const isDark = document.documentElement.classList.contains('dark');\n\n const color = isHover ? DATA_TYPE_ICON_COLORS[dataType] : NEUTRAL_400;\n const backgroundColor = isHover ? (isDark ? BG_COLORS_DARK[dataType] : BG_COLORS[dataType]) : 'transparent';\n const sx = { fontSize: size, color, transition: 'color 150ms ease' };\n\n return (\n <Tooltip title={tooltip \|\| dataTypeOption?.label} placement='top'>\n <span\n className={cn('flex items-center justify-center p-0.5 rounded-full transition-colors duration-150', className)}\n style={{ backgroundColor }}\n onMouseEnter={() => setIsHover(true)}\n onMouseLeave={() => setIsHover(false)}\n >\n {(() => {\n switch (dataType) {\n case APP_DATA_TYPES.BOOLEAN:\n return <Rule sx={sx} />;\n case APP_DATA_TYPES.CHOICE:\n return <FormatListBulleted sx={sx} />;\n case APP_DATA_TYPES.DATE:\n return <CalendarMonth sx={sx} />;\n case APP_DATA_TYPES.EMAIL:\n return <MailOutline sx={sx} />;\n case APP_DATA_TYPES.CURRENCY:\n return <AttachMoney sx={sx} />;\n case APP_DATA_TYPES.DATETIME:\n return <Schedule sx={sx} />;\n case APP_DATA_TYPES.TEXT:\n case APP_DATA_TYPES.STRING:\n return <SubjectOutlined sx={sx} />;\n case APP_DATA_TYPES.TAG:\n return <LocalOfferOutlined sx={sx} />;\n case APP_DATA_TYPES.MASTER_DATA:\n return <DataBaseIcon size={size} fill={color} />;\n case APP_DATA_TYPES.DYNAMIC:\n return <AutomationIcon size={size} fill={color} />;\n case APP_DATA_TYPES.NUMBER:\n return <Numbers sx={sx} />;\n default:\n return null;\n }\n })()}\n </span>\n </Tooltip>\n );\n};\n"],"names":["DATA_TYPE_ICON_COLORS","APP_DATA_TYPES","NEUTRAL_400","DataBaseIcon","fill","size","jsx","AutomationIcon","LabelValueDataTypeIcon","dataType","tooltip","className","dataTypeOption","APP_DATA_TYPES_OPTIONS","option","isHover","setIsHover","useState","isDark","color","backgroundColor","BG_COLORS_DARK","BG_COLORS","sx","Tooltip","cn","Rule","FormatListBulleted","CalendarMonth","MailOutline","AttachMoney","Schedule","SubjectOutlined","LocalOfferOutlined","Numbers"],"mappings":";;;;;;AAmBO,MAAMA,IAAgD;AAAA,EAC3D,CAACC,EAAe,OAAO,GAAG;AAAA,EAC1B,CAACA,EAAe,MAAM,GAAG;AAAA,EACzB,CAACA,EAAe,IAAI,GAAG;AAAA,EACvB,CAACA,EAAe,KAAK,GAAG;AAAA,EACxB,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,IAAI,GAAG;AAAA,EACvB,CAACA,EAAe,MAAM,GAAG;AAAA,EACzB,CAACA,EAAe,GAAG,GAAG;AAAA,EACtB,CAACA,EAAe,WAAW,GAAG;AAAA,EAC9B,CAACA,EAAe,OAAO,GAAG;AAAA,EAC1B,CAACA,EAAe,MAAM,GAAG;AAC3B,GAGMC,IAAc,WAEdC,IAAe,CAAC,EAAE,MAAAC,IAAOF,GAAa,MAAAG,IAAO,SACjD,gBAAAC,EAAC,SAAI,OAAM,8BAA6B,OAAOD,GAAM,QAAQA,GAAM,SAAQ,aAAY,MAAK,QAC1F,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAAF;AAAA,EAAA;AACF,GACF,GAGIG,IAAiB,CAAC,EAAE,MAAAH,IAAOF,GAAa,MAAAG,IAAO,SACnD,gBAAAC,EAAC,SAAI,OAAOD,GAAM,QAAQA,GAAM,SAAQ,aAAY,MAAK,QAAO,OAAM,8BACpE,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAAF;AAAA,EAAA;AACF,GACF,GA4BWI,IAAyB,CAAC;AAAA,EACrC,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,MAAAL,IAAO;AAAA,EACP,WAAAM;AACF,MAAmC;AACjC,QAAMC,IAAiBC,EAAuB,KAAK,CAACC,MAAWA,EAAO,UAAUL,CAAQ,GAClF,CAACM,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAS,SAAS,gBAAgB,UAAU,SAAS,MAAM,GAE3DC,IAAQJ,IAAUf,EAAsBS,CAAQ,IAAIP,GACpDkB,IAAkBL,IAAWG,IAASG,EAAeZ,CAAQ,IAAIa,EAAUb,CAAQ,IAAK,eACxFc,IAAK,EAAE,UAAUlB,GAAM,OAAAc,GAAO,YAAY,mBAAA;AAEhD,2BACGK,GAAA,EAAQ,OAAOd,KAAWE,GAAgB,OAAO,WAAU,OAC1D,UAAA,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWmB,EAAG,~~sFAAsFd~~,CAAS;AAAA,~~MAC7G~~,OAAO,EAAE,iBAAAS,EAAA;AAAA,MACT,cAAc,MAAMJ,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MAElC,WAAA,MAAM;AACN,gBAAQP,GAAA;AAAA,UACN,KAAKR,EAAe;AAClB,mBAAO,gBAAAK,EAACoB,KAAK,IAAAH,GAAQ;AAAA,UACvB,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACqB,KAAmB,IAAAJ,GAAQ;AAAA,UACrC,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACsB,KAAc,IAAAL,GAAQ;AAAA,UAChC,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACuB,KAAY,IAAAN,GAAQ;AAAA,UAC9B,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACwB,KAAY,IAAAP,GAAQ;AAAA,UAC9B,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACyB,KAAS,IAAAR,GAAQ;AAAA,UAC3B,KAAKtB,EAAe;AAAA,UACpB,KAAKA,EAAe;AAClB,mBAAO,gBAAAK,EAAC0B,KAAgB,IAAAT,GAAQ;AAAA,UAClC,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAAC2B,KAAmB,IAAAV,GAAQ;AAAA,UACrC,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACH,GAAA,EAAa,MAAAE,GAAY,MAAMc,EAAA,CAAO;AAAA,UAChD,KAAKlB,EAAe;AAClB,mBAAO,gBAAAK,EAACC,GAAA,EAAe,MAAAF,GAAY,MAAMc,EAAA,CAAO;AAAA,UAClD,KAAKlB,EAAe;AAClB,mBAAO,gBAAAK,EAAC4B,KAAQ,IAAAX,GAAQ;AAAA,UAC1B;AACE,mBAAO;AAAA,QAAA;AAAA,MAEb,GAAA;AAAA,IAAG;AAAA,EAAA,GAEP;AAEJ;"}
1	+ {"version":3,"file":"LabelValueDataTypeIcon.es.js","sources":["../../../../src/components/data-display/datatype-icon/LabelValueDataTypeIcon.tsx"],"sourcesContent":["import cn from 'classnames';\nimport { useState } from 'react';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n AttachMoney,\n CalendarMonth,\n FormatListBulleted,\n LocalOfferOutlined,\n MailOutline,\n Numbers,\n Rule,\n Schedule,\n SubjectOutlined,\n} from '@mui/icons-material';\nimport { APP_DATA_TYPES, APP_DATA_TYPES_OPTIONS, BG_COLORS, BG_COLORS_DARK } from './DataTypeIcon';\n\n/*\n Accent color of each data type — the hover color of the icon\n /\nexport const DATA_TYPE_ICON_COLORS: Record<string, string> = {\n [APP_DATA_TYPES.BOOLEAN]: '#12B76A',\n [APP_DATA_TYPES.CHOICE]: '#DF5384',\n [APP_DATA_TYPES.DATE]: '#292E92',\n [APP_DATA_TYPES.EMAIL]: '#139AFA',\n [APP_DATA_TYPES.CURRENCY]: '#F99417',\n [APP_DATA_TYPES.DATETIME]: '#6E9D6D',\n [APP_DATA_TYPES.TEXT]: '#58B507',\n [APP_DATA_TYPES.STRING]: '#58B507',\n [APP_DATA_TYPES.TAG]: '#B31121',\n [APP_DATA_TYPES.MASTER_DATA]: '#CCAE00',\n [APP_DATA_TYPES.DYNAMIC]: '#DB00CD',\n [APP_DATA_TYPES.NUMBER]: '#00E4D1',\n};\n\n/* Neutral/400 — resting color of the icon /\nconst NEUTRAL_400 = '#98A2B3';\n\nconst DataBaseIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg xmlns='http://www.w3.org/2000/svg' width={size} height={size} viewBox='0 0 21 20' fill='none'>\n <path\n d='M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z'\n fill={fill}\n />\n </svg>\n);\n\nconst AutomationIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg width={size} height={size} viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'>\n <path\n d='M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z'\n fill={fill}\n />\n </svg>\n);\n\nexport interface LabelValueDataTypeIconProps {\n /* One of `APP_DATA_TYPES` /\n dataType: string;\n /* Overrides the default tooltip (the data type label) /\n tooltip?: React.ReactNode;\n /* Icon size in px (default: 16) /\n size?: number;\n /* Additional CSS classes on the icon wrapper /\n className?: string;\n}\n\n/\n Data type icon used to emphasize the data type of a `LabelValue` field.\n \n Unlike `DataTypeIcon` — which always renders a colored icon on a colored\n * square, as used in table headers — this one is quiet at rest: the icon sits\n * at Neutral/400 on a transparent background, and only on hover does it take\n * the data type accent color over a round, light tint of that same color.\n * A tooltip names the data type.\n \n @example\n * ```tsx\n * <LabelValueDataTypeIcon dataType={APP_DATA_TYPES.CURRENCY} />\n * ```\n */\nexport const LabelValueDataTypeIcon = ({\n dataType = 'text',\n tooltip,\n size = 16,\n className,\n}: LabelValueDataTypeIconProps) => {\n const dataTypeOption = APP_DATA_TYPES_OPTIONS.find((option) => option.value === dataType);\n const [isHover, setIsHover] = useState(false);\n const isDark = document.documentElement.classList.contains('dark');\n\n const color = isHover ? DATA_TYPE_ICON_COLORS[dataType] : NEUTRAL_400;\n const backgroundColor = isHover ? (isDark ? BG_COLORS_DARK[dataType] : BG_COLORS[dataType]) : 'transparent';\n const sx = { fontSize: size, color, transition: 'color 150ms ease' };\n\n return (\n <Tooltip title={tooltip \|\| dataTypeOption?.label} placement='top'>\n <span\n className={cn('flex items-center justify-center -ml-1 p-0.5 rounded-full transition-colors duration-150', className)}\n style={{ backgroundColor }}\n onMouseEnter={() => setIsHover(true)}\n onMouseLeave={() => setIsHover(false)}\n >\n {(() => {\n switch (dataType) {\n case APP_DATA_TYPES.BOOLEAN:\n return <Rule sx={sx} />;\n case APP_DATA_TYPES.CHOICE:\n return <FormatListBulleted sx={sx} />;\n case APP_DATA_TYPES.DATE:\n return <CalendarMonth sx={sx} />;\n case APP_DATA_TYPES.EMAIL:\n return <MailOutline sx={sx} />;\n case APP_DATA_TYPES.CURRENCY:\n return <AttachMoney sx={sx} />;\n case APP_DATA_TYPES.DATETIME:\n return <Schedule sx={sx} />;\n case APP_DATA_TYPES.TEXT:\n case APP_DATA_TYPES.STRING:\n return <SubjectOutlined sx={sx} />;\n case APP_DATA_TYPES.TAG:\n return <LocalOfferOutlined sx={sx} />;\n case APP_DATA_TYPES.MASTER_DATA:\n return <DataBaseIcon size={size} fill={color} />;\n case APP_DATA_TYPES.DYNAMIC:\n return <AutomationIcon size={size} fill={color} />;\n case APP_DATA_TYPES.NUMBER:\n return <Numbers sx={sx} />;\n default:\n return null;\n }\n })()}\n </span>\n </Tooltip>\n );\n};\n"],"names":["DATA_TYPE_ICON_COLORS","APP_DATA_TYPES","NEUTRAL_400","DataBaseIcon","fill","size","jsx","AutomationIcon","LabelValueDataTypeIcon","dataType","tooltip","className","dataTypeOption","APP_DATA_TYPES_OPTIONS","option","isHover","setIsHover","useState","isDark","color","backgroundColor","BG_COLORS_DARK","BG_COLORS","sx","Tooltip","cn","Rule","FormatListBulleted","CalendarMonth","MailOutline","AttachMoney","Schedule","SubjectOutlined","LocalOfferOutlined","Numbers"],"mappings":";;;;;;AAmBO,MAAMA,IAAgD;AAAA,EAC3D,CAACC,EAAe,OAAO,GAAG;AAAA,EAC1B,CAACA,EAAe,MAAM,GAAG;AAAA,EACzB,CAACA,EAAe,IAAI,GAAG;AAAA,EACvB,CAACA,EAAe,KAAK,GAAG;AAAA,EACxB,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,IAAI,GAAG;AAAA,EACvB,CAACA,EAAe,MAAM,GAAG;AAAA,EACzB,CAACA,EAAe,GAAG,GAAG;AAAA,EACtB,CAACA,EAAe,WAAW,GAAG;AAAA,EAC9B,CAACA,EAAe,OAAO,GAAG;AAAA,EAC1B,CAACA,EAAe,MAAM,GAAG;AAC3B,GAGMC,IAAc,WAEdC,IAAe,CAAC,EAAE,MAAAC,IAAOF,GAAa,MAAAG,IAAO,SACjD,gBAAAC,EAAC,SAAI,OAAM,8BAA6B,OAAOD,GAAM,QAAQA,GAAM,SAAQ,aAAY,MAAK,QAC1F,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAAF;AAAA,EAAA;AACF,GACF,GAGIG,IAAiB,CAAC,EAAE,MAAAH,IAAOF,GAAa,MAAAG,IAAO,SACnD,gBAAAC,EAAC,SAAI,OAAOD,GAAM,QAAQA,GAAM,SAAQ,aAAY,MAAK,QAAO,OAAM,8BACpE,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAAF;AAAA,EAAA;AACF,GACF,GA4BWI,IAAyB,CAAC;AAAA,EACrC,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,MAAAL,IAAO;AAAA,EACP,WAAAM;AACF,MAAmC;AACjC,QAAMC,IAAiBC,EAAuB,KAAK,CAACC,MAAWA,EAAO,UAAUL,CAAQ,GAClF,CAACM,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAS,SAAS,gBAAgB,UAAU,SAAS,MAAM,GAE3DC,IAAQJ,IAAUf,EAAsBS,CAAQ,IAAIP,GACpDkB,IAAkBL,IAAWG,IAASG,EAAeZ,CAAQ,IAAIa,EAAUb,CAAQ,IAAK,eACxFc,IAAK,EAAE,UAAUlB,GAAM,OAAAc,GAAO,YAAY,mBAAA;AAEhD,2BACGK,GAAA,EAAQ,OAAOd,KAAWE,GAAgB,OAAO,WAAU,OAC1D,UAAA,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWmB,EAAG,4FAA4Fd,CAAS;AAAA,MACnH,OAAO,EAAE,iBAAAS,EAAA;AAAA,MACT,cAAc,MAAMJ,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MAElC,WAAA,MAAM;AACN,gBAAQP,GAAA;AAAA,UACN,KAAKR,EAAe;AAClB,mBAAO,gBAAAK,EAACoB,KAAK,IAAAH,GAAQ;AAAA,UACvB,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACqB,KAAmB,IAAAJ,GAAQ;AAAA,UACrC,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACsB,KAAc,IAAAL,GAAQ;AAAA,UAChC,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACuB,KAAY,IAAAN,GAAQ;AAAA,UAC9B,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACwB,KAAY,IAAAP,GAAQ;AAAA,UAC9B,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACyB,KAAS,IAAAR,GAAQ;AAAA,UAC3B,KAAKtB,EAAe;AAAA,UACpB,KAAKA,EAAe;AAClB,mBAAO,gBAAAK,EAAC0B,KAAgB,IAAAT,GAAQ;AAAA,UAClC,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAAC2B,KAAmB,IAAAV,GAAQ;AAAA,UACrC,KAAKtB,EAAe;AAClB,mBAAO,gBAAAK,EAACH,GAAA,EAAa,MAAAE,GAAY,MAAMc,EAAA,CAAO;AAAA,UAChD,KAAKlB,EAAe;AAClB,mBAAO,gBAAAK,EAACC,GAAA,EAAe,MAAAF,GAAY,MAAMc,EAAA,CAAO;AAAA,UAClD,KAAKlB,EAAe;AAClB,mBAAO,gBAAAK,EAAC4B,KAAQ,IAAAX,GAAQ;AAAA,UAC1B;AACE,mBAAO;AAAA,QAAA;AAAA,MAEb,GAAA;AAAA,IAAG;AAAA,EAAA,GAEP;AAEJ;"}

package/dist/components/navigation/stepper/Stepper.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),I=require("@mui/icons-material"),W=require("antd"),m=require("react"),h=require("../../data-display/typography/Typography.cjs.js"),g=require("../../tooltip/Tooltip.cjs.js"),S=require("../../../hooks/useEventListener.cjs.js"),V=require("../../icon/icons.generated.cjs.js"),M=({steps:t,currentStep:a,appearance:s="linear",labelPosition:r="inline",onClick:j,className:C,showIndex:E=!0,disableOneMore:p=!1,isMainSideBarOpen:$=!1,isAuthoringOpen:T=!1})=>{const d=m.useRef(null),[c,v]=m.useState(0),[f,k]=m.useState(0),[o,z]=m.useState(0),[b,D]=m.useState(""),[R,q]=m.useState(""),F=()=>r==="top"||r==="top-right"?"flex-col":r==="bottom"||r==="bottom-right"?"flex-col-reverse":s==="linear"?"flex-row":"flex-col",w=()=>{setTimeout(()=>{v(0);const i=210,l=225;let n=0,x=0;for(let u=0;u<t.length&&(d?.current?.clientWidth&&d?.current?.clientWidth>n+l+i);u++)n+=l,x=u+1;v(x),d?.current?.clientWidth&&d?.current?.clientWidth<480&&v(t?.length)},300)};m.useEffect(()=>{w()},[$,t,a]),m.useEffect(()=>{setTimeout(()=>{w()},300)},[T]),m.useEffect(()=>{if(c>0)if(c>a){let i=t?.slice(c,t?.length)?.map(n=>n?.label)?.join(", "),l=c;p&&l===t.length-1&&(l=t.length,i=""),k(0),z(l),q(i)}else{const i=Math.floor((c+1)/2),l=a+i-t?.length;let n=a+i,x=a-Math.max(c-i,0)-(l>0?l:0),u=t?.slice(0,x)?.map(N=>N?.label)?.join(", "),L=t?.slice(n,t?.length)?.map(N=>N?.label)?.join(", ");p&&x===1&&(x=0,u=""),p&&n===t.length-1&&(n=t.length,L=""),k(x),z(n),D(u),q(L)}},[c,T,$,t,a]),S.useEventListener("resize",w);const y=(i,l,n=!1)=>e.jsx("div",{onClick:()=>j?.(l),className:`flex ${l<t.length-1||s=="parallel"?"flex flex-grow":""}  min-w-[200px] ${j?"cursor-pointer":""}`,children:e.jsxs("div",{className:"w-full flex flex-col",children:[e.jsxs("div",{className:`flex ${F()} ${r==="inline"&&s==="linear"?"items-center":""}`,children:[e.jsxs("div",{className:`${r==="inline"?"max-w-[70%]":"w-full"} flex flex-col`,children:[e.jsx("div",{className:`flex ${r==="top-right"||r==="bottom-right"?"justify-end":""}`,children:e.jsx(g,{title:i?.tooltipText,children:e.jsxs(h.Typography,{size:"small",variant:"medium",className:`truncate flex items-center ${l<=a?"text-primary-600 dark:text-primary-300":"text-neutral-400 dark:text-neutral-100"}`,appearance:"custom",children:[E?e.jsx("div",{className:`${s==="parallel"?"flex items-center":`w-6 h-6 ${l<=a?"bg-primary-600":"bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,children:i?.isLocked?e.jsx("div",{className:"flex items-center justify-center",children:e.jsx(I.Lock,{sx:{fontSize:16}})}):e.jsx(e.Fragment,{children:a>l&&s==="linear"?e.jsx(V.CheckIcon,{size:18,className:"text-white dark:text-white"}):e.jsx(h.Typography,{size:`${s==="parallel"?"small":"extra-small"}`,variant:"medium",className:"text-neutral-100",appearance:"custom",children:l+1})})}):null,e.jsx("div",{className:`truncate ${r==="inline"?"mx-2":"ml-2"} ${l<=a?"":"dark:text-black-200"}`,children:i?.label})]})})}),r!=="inline"||s==="parallel"?e.jsx("div",{className:`flex ${r==="top-right"||r==="bottom-right"?"justify-end":s==="linear"?"ml-8":""}`,children:e.jsx(h.Typography,{size:"extra-small",variant:"medium",className:`truncate ${l===a?"text-neutral-900 dark:text-white":"text-neutral-400 dark:text-neutral-600"}`,appearance:"custom",children:i?.description||""})}):null]}),l<t.length-(s==="linear"&&r==="inline"?1:0)&&!n?e.jsx("div",{className:`w-full flex-grow h-0.5 min-w-[70px]  ${r!=="inline"||s==="parallel"?"my-2":""} ${l<=a-(s==="linear"&&r==="inline"?1:0)?"bg-primary-600":"bg-neutral-300"}`}):null]}),r==="inline"&&s==="linear"?e.jsx(h.Typography,{size:"extra-small",variant:"medium",className:`ml-8 truncate ${l===a?"text-neutral-900 dark:text-white":"text-neutral-400 dark:text-neutral-600"}`,appearance:"custom",children:i?.description||""}):null]})},l);return e.jsxs("div",{className:`w-full flex ${C}`,ref:d,children:[f>0?e.jsxs("div",{className:`flex ${s==="parallel"?"flex-col":""}`,children:[j?e.jsx(W.Dropdown,{menu:{items:t.slice(0,f).map((i,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:y(i,l,!0)}),key:l}))},trigger:["click"],children:e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-c>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:b,children:e.jsxs("div",{className:"min-w-max",children:[f," More..."]})})})}):e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-c>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:b,children:e.jsxs("div",{className:"min-w-max",children:[f," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${s==="parallel"?"mt-2":"mt-[11px]"}`})]}):null,e.jsx("div",{className:"w-full flex flex-wrap gap-3 ",children:t?.map((i,l)=>f<=l&&l<o?y(i,l):null)}),t.length-o>0?e.jsxs("div",{className:"flex flex-col",children:[j?e.jsx(W.Dropdown,{menu:{items:t.slice(o,t?.length).map((i,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:y(i,l+o,!0)}),key:l}))},trigger:["click"],children:e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-o>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:R,children:e.jsxs("div",{className:"min-w-max",children:[t.length-o," More..."]})})})}):e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-o>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:R,children:e.jsxs("div",{className:"min-w-max",children:[t.length-o," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${s==="parallel"?"mt-2":"hidden"}`})]}):null]})};M.displayName="Stepper";module.exports=M;
+"use strict";const e=require("react/jsx-runtime"),A=require("@mui/icons-material"),E=require("antd"),u=require("react"),x=require("../../data-display/typography/Typography.cjs.js"),v=require("../../tooltip/Tooltip.cjs.js"),K=require("../../../hooks/useEventListener.cjs.js"),V=require("../../icon/icons.generated.cjs.js"),I=({steps:t,currentStep:s,appearance:a="linear",labelPosition:r="inline",onClick:d,isStepClickable:k,className:C,showIndex:B=!0,disableOneMore:y=!1,isMainSideBarOpen:b=!1,isAuthoringOpen:z=!1})=>{const g=u.useRef(null),[m,w]=u.useState(0),[j,L]=u.useState(0),[h,R]=u.useState(0),[q,F]=u.useState(""),[W,D]=u.useState(""),S=()=>r==="top"||r==="top-right"?"flex-col":r==="bottom"||r==="bottom-right"?"flex-col-reverse":a==="linear"?"flex-row":"flex-col",N=()=>{setTimeout(()=>{w(0);const i=210,l=225;let n=0,o=0;for(let c=0;c<t.length&&(g?.current?.clientWidth&&g?.current?.clientWidth>n+l+i);c++)n+=l,o=c+1;w(o),g?.current?.clientWidth&&g?.current?.clientWidth<480&&w(t?.length)},300)};u.useEffect(()=>{N()},[b,t,s]),u.useEffect(()=>{setTimeout(()=>{N()},300)},[z]),u.useEffect(()=>{if(m>0)if(m>s){let i=t?.slice(m,t?.length)?.map(n=>n?.label)?.join(", "),l=m;y&&l===t.length-1&&(l=t.length,i=""),L(0),R(l),D(i)}else{const i=Math.floor((m+1)/2),l=s+i-t?.length;let n=s+i,o=s-Math.max(m-i,0)-(l>0?l:0),c=t?.slice(0,o)?.map(p=>p?.label)?.join(", "),f=t?.slice(n,t?.length)?.map(p=>p?.label)?.join(", ");y&&o===1&&(o=0,c=""),y&&n===t.length-1&&(n=t.length,f=""),L(o),R(n),F(c),D(f)}},[m,z,b,t,s]),K.useEventListener("resize",N);const $=(i,l,n=!1)=>{const o=!!i?.isLocked||!!i?.isDisabled||(k?!k(l,i):!1),c=!!d&&!o,f=()=>{c&&d?.(l)},p=d?{role:"button",tabIndex:c?0:-1,"aria-disabled":!c,onClick:f,onKeyDown:T=>{(T.key==="Enter"||T.key===" ")&&(T.preventDefault(),f())}}:{},M=d?c?"cursor-pointer rounded-sm transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600":"cursor-not-allowed":"";return e.jsx("div",{"aria-current":l===s?"step":void 0,className:`flex ${l<t.length-1||a=="parallel"?"flex flex-grow":""}  min-w-[200px]`,children:e.jsxs("div",{className:"w-full flex flex-col",children:[e.jsxs("div",{className:`flex ${S()} ${r==="inline"&&a==="linear"?"items-center":""}`,children:[e.jsxs("div",{...p,className:`${r==="inline"?"max-w-[70%]":"w-full"} flex flex-col ${M}`,children:[e.jsx("div",{className:`flex ${r==="top-right"||r==="bottom-right"?"justify-end":""}`,children:e.jsx(v,{title:o&&i?.disabledTooltipText||i?.tooltipText,children:e.jsxs(x.Typography,{size:"small",variant:"medium",className:`truncate flex items-center ${l<=s?"text-primary-600 dark:text-primary-300":"text-neutral-400 dark:text-neutral-100"}`,appearance:"custom",children:[B?e.jsx("div",{className:`${a==="parallel"?"flex items-center":`w-6 h-6 ${l<=s?"bg-primary-600":"bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,children:i?.isLocked?e.jsx("div",{className:"flex items-center justify-center",children:e.jsx(A.Lock,{sx:{fontSize:16}})}):e.jsx(e.Fragment,{children:s>l&&a==="linear"?e.jsx(V.CheckIcon,{size:18,className:"text-white dark:text-white"}):e.jsx(x.Typography,{size:`${a==="parallel"?"small":"extra-small"}`,variant:"medium",className:"text-neutral-100",appearance:"custom",children:l+1})})}):null,e.jsx("div",{className:`truncate ${r==="inline"?"mx-2":"ml-2"} ${l<=s?"":"dark:text-black-200"}`,children:i?.label})]})})}),r!=="inline"||a==="parallel"?e.jsx("div",{className:`flex ${r==="top-right"||r==="bottom-right"?"justify-end":a==="linear"?"ml-8":""}`,children:e.jsx(x.Typography,{size:"extra-small",variant:"medium",className:`truncate ${l===s?"text-neutral-900 dark:text-white":"text-neutral-400 dark:text-neutral-600"}`,appearance:"custom",children:i?.description||""})}):null]}),l<t.length-(a==="linear"&&r==="inline"?1:0)&&!n?e.jsx("div",{className:`w-full flex-grow h-0.5 min-w-[70px]  ${r!=="inline"||a==="parallel"?"my-2":""} ${l<=s-(a==="linear"&&r==="inline"?1:0)?"bg-primary-600":"bg-neutral-300"}`}):null]}),r==="inline"&&a==="linear"?e.jsx("div",{className:`w-fit max-w-full ${M}`,onClick:f,children:e.jsx(x.Typography,{size:"extra-small",variant:"medium",className:`ml-8 truncate ${l===s?"text-neutral-900 dark:text-white":"text-neutral-400 dark:text-neutral-600"}`,appearance:"custom",children:i?.description||""})}):null]})},l)};return e.jsxs("div",{className:`w-full flex ${C}`,ref:g,children:[j>0?e.jsxs("div",{className:`flex ${a==="parallel"?"flex-col":""}`,children:[d?e.jsx(E.Dropdown,{menu:{items:t.slice(0,j).map((i,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:$(i,l,!0)}),key:l}))},trigger:["click"],children:e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-m>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(v,{title:q,children:e.jsxs("div",{className:"min-w-max",children:[j," More..."]})})})}):e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-m>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(v,{title:q,children:e.jsxs("div",{className:"min-w-max",children:[j," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${a==="parallel"?"mt-2":"mt-[11px]"}`})]}):null,e.jsx("div",{className:"w-full flex flex-wrap gap-3 ",children:t?.map((i,l)=>j<=l&&l<h?$(i,l):null)}),t.length-h>0?e.jsxs("div",{className:"flex flex-col",children:[d?e.jsx(E.Dropdown,{menu:{items:t.slice(h,t?.length).map((i,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:$(i,l+h,!0)}),key:l}))},trigger:["click"],children:e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-h>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(v,{title:W,children:e.jsxs("div",{className:"min-w-max",children:[t.length-h," More..."]})})})}):e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-h>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(v,{title:W,children:e.jsxs("div",{className:"min-w-max",children:[t.length-h," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${a==="parallel"?"mt-2":"hidden"}`})]}):null]})};I.displayName="Stepper";module.exports=I;
 //# sourceMappingURL=Stepper.cjs.js.map

package/dist/components/navigation/stepper/Stepper.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stepper.cjs.js","sources":["../../../../src/components/navigation/stepper/Stepper.tsx"],"sourcesContent":["import { Lock } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useEventListener } from '../../../hooks/useEventListener';\nimport { CheckIcon } from '../../icon';\n\nexport type TStep = {\n label: string;\n description?: string;\n isLocked?: boolean;\n tooltipText?: string;\n};\n\nexport type TStepperProps = {\n steps: TStep[];\n currentStep: number;\n onClick?: (index: number) => void;\n appearance?: 'linear' \| 'parallel';\n labelPosition?: 'top' \| 'bottom' \| 'inline' \| 'top-right' \| 'bottom-right';\n className?: string;\n showIndex?: boolean;\n disableOneMore?: boolean;\n lockConfig?: {\n isLocked?: boolean;\n tooltipText?: string;\n };\n /** Whether the main sidebar is open (affects responsive calculations) /\n isMainSideBarOpen?: boolean;\n /* Whether the authoring panel is open (affects responsive calculations) /\n isAuthoringOpen?: boolean;\n};\n\n/\n Stepper component for multi-step workflows\n \n @example\n * ```tsx\n * <Stepper\n * steps={[\n * { label: 'Step 1', description: 'First step' },\n * { label: 'Step 2', description: 'Second step' },\n * { label: 'Step 3', description: 'Third step' },\n * ]}\n * currentStep={1}\n * onClick={(index) => setCurrentStep(index)}\n * />\n * ```\n */\nconst Stepper = ({\n steps,\n currentStep,\n appearance = 'linear',\n labelPosition = 'inline',\n onClick,\n className,\n showIndex = true,\n disableOneMore = false,\n isMainSideBarOpen = false,\n isAuthoringOpen = false,\n}: TStepperProps) => {\n const stepsRef = useRef<HTMLDivElement \| null>(null);\n const [visibleStepCounts, setVisibleStepCounts] = useState<number>(0);\n const [leftMostStep, setLeftMostStep] = useState<number>(0);\n const [rightMostStep, setRightMostStep] = useState<number>(0);\n const [leftTooltip, setLeftTooltip] = useState<string>('');\n const [rightTooltip, setRightTooltip] = useState<string>('');\n\n const getLabelDescriptionPosition = () => {\n if (labelPosition === 'top' \|\| labelPosition === 'top-right') {\n return 'flex-col';\n } else if (labelPosition === 'bottom' \|\| labelPosition === 'bottom-right') {\n return 'flex-col-reverse';\n } else if (appearance === 'linear') {\n return 'flex-row';\n } else {\n return 'flex-col';\n }\n };\n\n const handleClientWidth = () => {\n setTimeout(() => {\n setVisibleStepCounts(0);\n const moreWidth = 210;\n const stepTitleWidth = 225;\n let stepWidth = 0;\n let count = 0;\n for (let index = 0; index < steps.length; index++) {\n if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth > stepWidth + stepTitleWidth + moreWidth) {\n stepWidth += stepTitleWidth;\n count = index + 1;\n } else {\n break;\n }\n }\n setVisibleStepCounts(count);\n if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth < 480) {\n setVisibleStepCounts(steps?.length);\n }\n }, 300);\n };\n\n useEffect(() => {\n handleClientWidth();\n }, [isMainSideBarOpen, steps, currentStep]);\n\n useEffect(() => {\n setTimeout(() => {\n handleClientWidth();\n }, 300);\n }, [isAuthoringOpen]);\n\n useEffect(() => {\n if (visibleStepCounts > 0) {\n if (visibleStepCounts > currentStep) {\n let newRightTooltip = steps\n ?.slice(visibleStepCounts, steps?.length)\n ?.map((step) => step?.label)\n ?.join(', ');\n\n let rightCount = visibleStepCounts;\n if (disableOneMore && rightCount === steps.length - 1) {\n rightCount = steps.length;\n newRightTooltip = '';\n }\n setLeftMostStep(0);\n setRightMostStep(rightCount);\n setRightTooltip(newRightTooltip);\n } else {\n const mid = Math.floor((visibleStepCounts + 1) / 2);\n const remainingStepsFromRight = currentStep + mid - steps?.length;\n let rightCount = currentStep + mid;\n let leftCount = currentStep - Math.max(visibleStepCounts - mid, 0) - (remainingStepsFromRight > 0 ? remainingStepsFromRight : 0);\n let newLeftTooltip = steps\n ?.slice(0, leftCount)\n ?.map((step) => step?.label)\n ?.join(', ');\n let newRightTooltip = steps\n ?.slice(rightCount, steps?.length)\n ?.map((step) => step?.label)\n ?.join(', ');\n\n if (disableOneMore && leftCount === 1) {\n leftCount = 0;\n newLeftTooltip = '';\n }\n\n if (disableOneMore && rightCount === steps.length - 1) {\n rightCount = steps.length;\n newRightTooltip = '';\n }\n setLeftMostStep(leftCount);\n setRightMostStep(rightCount);\n setLeftTooltip(newLeftTooltip);\n setRightTooltip(newRightTooltip);\n }\n }\n }, [visibleStepCounts, isAuthoringOpen, isMainSideBarOpen, steps, currentStep]);\n\n useEventListener('resize', handleClientWidth);\n\n const stepDetails = (step: TStep, index: number, hideLine = false) => {\n return (\n <div\n key={index}\n onClick={() => onClick?.(index)}\n className={`flex ${index < steps.length - 1 \|\| appearance == 'parallel' ? 'flex flex-grow' : ''} min-w-[200px] ${\n onClick ? 'cursor-pointer' : ''\n }`}\n >\n <div className={`w-full flex flex-col`}>\n <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n <div className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col`}>\n <div className={`flex ${labelPosition === 'top-right' \|\| labelPosition === 'bottom-right' ? 'justify-end' : ''}`}>\n <Tooltip title={step?.tooltipText}>\n <Typography\n size='small'\n variant='medium'\n className={`truncate flex items-center ${\n index <= currentStep ? 'text-primary-600 dark:text-primary-300' : 'text-neutral-400 dark:text-neutral-100'\n }`}\n appearance='custom'\n >\n {showIndex ? (\n <div\n className={`${\n appearance === 'parallel'\n ? 'flex items-center'\n : `w-6 h-6 ${\n index <= currentStep ? 'bg-primary-600' : 'bg-neutral-400 dark:bg-black-400'\n } rounded-full flex items-center justify-center text-white`\n }`}\n >\n {step?.isLocked ? (\n <div className='flex items-center justify-center'>\n <Lock sx={{ fontSize: 16 }} />\n </div>\n ) : (\n <>\n {currentStep > index && appearance === 'linear' ? (\n <CheckIcon size={18} className='text-white dark:text-white' />\n ) : (\n <Typography\n size={`${appearance === 'parallel' ? 'small' : 'extra-small'}`}\n variant='medium'\n className='text-neutral-100'\n appearance='custom'\n >\n {index + 1}\n </Typography>\n )}\n </>\n )}\n </div>\n ) : null}\n\n <div className={`truncate ${labelPosition === 'inline' ? 'mx-2' : 'ml-2'} ${index <= currentStep ? '' : 'dark:text-black-200'}`}>\n {step?.label}\n </div>\n </Typography>\n </Tooltip>\n </div>\n\n {labelPosition !== 'inline' \|\| appearance === 'parallel' ? (\n <div\n className={`flex ${\n labelPosition === 'top-right' \|\| labelPosition === 'bottom-right' ? 'justify-end' : appearance === 'linear' ? 'ml-8' : ''\n }`}\n >\n <Typography\n size='extra-small'\n variant='medium'\n className={`truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n appearance='custom'\n >\n {step?.description \|\| ''}\n </Typography>\n </div>\n ) : null}\n </div>\n {index < steps.length - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) && !hideLine ? (\n <div\n className={`w-full flex-grow h-0.5 min-w-[70px] ${labelPosition !== 'inline' \|\| appearance === 'parallel' ? 'my-2' : ''} ${\n index <= currentStep - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) ? 'bg-primary-600' : 'bg-neutral-300'\n }`}\n />\n ) : null}\n </div>\n {labelPosition === 'inline' && appearance === 'linear' ? (\n <Typography\n size='extra-small'\n variant='medium'\n className={`ml-8 truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n appearance='custom'\n >\n {step?.description \|\| ''}\n </Typography>\n ) : null}\n </div>\n </div>\n );\n };\n\n return (\n <div className={`w-full flex ${className}`} ref={stepsRef}>\n {leftMostStep > 0 ? (\n <div className={`flex ${appearance === 'parallel' ? 'flex-col' : ''}`}>\n {onClick ? (\n <Dropdown\n menu={{\n items: steps.slice(0, leftMostStep).map((step: TStep, index: number) => ({\n label: <div className='px-2 py-1'>{stepDetails(step, index, true)}</div>,\n key: index,\n })),\n }}\n trigger={['click']}\n >\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={leftTooltip}>\n <div className='min-w-max'>\n {leftMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n </Dropdown>\n ) : (\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={leftTooltip}>\n <div className='min-w-max'>\n {leftMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n )}\n <div className={`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${appearance === 'parallel' ? 'mt-2' : 'mt-[11px]'}`} />\n </div>\n ) : null}\n\n <div className='w-full flex flex-wrap gap-3 '>\n {steps?.map((step: TStep, index: number) => {\n if (leftMostStep <= index && index < rightMostStep) {\n return stepDetails(step, index);\n }\n return null;\n })}\n </div>\n\n {steps.length - rightMostStep > 0 ? (\n <div className='flex flex-col'>\n {onClick ? (\n <Dropdown\n menu={{\n items: steps.slice(rightMostStep, steps?.length).map((step: TStep, index: number) => ({\n label: <div className='px-2 py-1'>{stepDetails(step, index + rightMostStep, true)}</div>,\n key: index,\n })),\n }}\n trigger={['click']}\n >\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={rightTooltip}>\n <div className='min-w-max'>\n {steps.length - rightMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n </Dropdown>\n ) : (\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={rightTooltip}>\n <div className='min-w-max'>\n {steps.length - rightMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n )}\n\n <div className={`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${appearance === 'parallel' ? 'mt-2' : 'hidden'}`} />\n </div>\n ) : null}\n </div>\n );\n};\n\nStepper.displayName = 'Stepper';\n\nexport default Stepper;\n\n\n\n"],"names":["Stepper","steps","currentStep","appearance","labelPosition","onClick","className","showIndex","disableOneMore","isMainSideBarOpen","isAuthoringOpen","stepsRef","useRef","visibleStepCounts","setVisibleStepCounts","useState","leftMostStep","setLeftMostStep","rightMostStep","setRightMostStep","leftTooltip","setLeftTooltip","rightTooltip","setRightTooltip","getLabelDescriptionPosition","handleClientWidth","moreWidth","stepTitleWidth","stepWidth","count","index","useEffect","newRightTooltip","step","rightCount","mid","remainingStepsFromRight","leftCount","newLeftTooltip","useEventListener","stepDetails","hideLine","jsx","jsxs","Tooltip","Typography","Lock","Fragment","CheckIcon","Dropdown"],"mappings":"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"}
1	+ {"version":3,"file":"Stepper.cjs.js","sources":["../../../../src/components/navigation/stepper/Stepper.tsx"],"sourcesContent":["import { Lock } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport type { KeyboardEvent } from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useEventListener } from '../../../hooks/useEventListener';\nimport { CheckIcon } from '../../icon';\n\nexport type TStep = {\n label: string;\n description?: string;\n isLocked?: boolean;\n tooltipText?: string;\n /** Prevents navigating to this step (e.g. validation not satisfied yet). Locked steps are always non-navigable. /\n isDisabled?: boolean;\n /* Tooltip shown when the step cannot be navigated to. Falls back to `tooltipText`. /\n disabledTooltipText?: string;\n};\n\nexport type TStepperProps = {\n steps: TStep[];\n currentStep: number;\n /\n Called when a navigable step title is clicked (or activated with Enter/Space).\n * Steps that are locked, disabled or rejected by `isStepClickable` never invoke it.\n /\n onClick?: (index: number) => void;\n /\n Optional gate for step navigation, so consumers can enforce their own validation\n * and step-access rules (e.g. only allow jumping to already visited steps).\n * Returning `false` renders the step title as non-navigable.\n /\n isStepClickable?: (index: number, step: TStep) => boolean;\n appearance?: 'linear' \| 'parallel';\n labelPosition?: 'top' \| 'bottom' \| 'inline' \| 'top-right' \| 'bottom-right';\n className?: string;\n showIndex?: boolean;\n disableOneMore?: boolean;\n lockConfig?: {\n isLocked?: boolean;\n tooltipText?: string;\n };\n /* Whether the main sidebar is open (affects responsive calculations) /\n isMainSideBarOpen?: boolean;\n /* Whether the authoring panel is open (affects responsive calculations) /\n isAuthoringOpen?: boolean;\n};\n\n/\n Stepper component for multi-step workflows\n \n @example\n * ```tsx\n * <Stepper\n * steps={[\n * { label: 'Step 1', description: 'First step' },\n * { label: 'Step 2', description: 'Second step' },\n * { label: 'Step 3', description: 'Third step' },\n * ]}\n * currentStep={1}\n * onClick={(index) => setCurrentStep(index)}\n * // only allow jumping to steps the user has already reached\n * isStepClickable={(index) => index <= furthestVisitedStep}\n * />\n * ```\n \n Step titles are clickable whenever `onClick` is provided. A step is not navigable\n * when it is `isLocked`, `isDisabled`, or rejected by `isStepClickable`.\n /\nconst Stepper = ({\n steps,\n currentStep,\n appearance = 'linear',\n labelPosition = 'inline',\n onClick,\n isStepClickable,\n className,\n showIndex = true,\n disableOneMore = false,\n isMainSideBarOpen = false,\n isAuthoringOpen = false,\n}: TStepperProps) => {\n const stepsRef = useRef<HTMLDivElement \| null>(null);\n const [visibleStepCounts, setVisibleStepCounts] = useState<number>(0);\n const [leftMostStep, setLeftMostStep] = useState<number>(0);\n const [rightMostStep, setRightMostStep] = useState<number>(0);\n const [leftTooltip, setLeftTooltip] = useState<string>('');\n const [rightTooltip, setRightTooltip] = useState<string>('');\n\n const getLabelDescriptionPosition = () => {\n if (labelPosition === 'top' \|\| labelPosition === 'top-right') {\n return 'flex-col';\n } else if (labelPosition === 'bottom' \|\| labelPosition === 'bottom-right') {\n return 'flex-col-reverse';\n } else if (appearance === 'linear') {\n return 'flex-row';\n } else {\n return 'flex-col';\n }\n };\n\n const handleClientWidth = () => {\n setTimeout(() => {\n setVisibleStepCounts(0);\n const moreWidth = 210;\n const stepTitleWidth = 225;\n let stepWidth = 0;\n let count = 0;\n for (let index = 0; index < steps.length; index++) {\n if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth > stepWidth + stepTitleWidth + moreWidth) {\n stepWidth += stepTitleWidth;\n count = index + 1;\n } else {\n break;\n }\n }\n setVisibleStepCounts(count);\n if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth < 480) {\n setVisibleStepCounts(steps?.length);\n }\n }, 300);\n };\n\n useEffect(() => {\n handleClientWidth();\n }, [isMainSideBarOpen, steps, currentStep]);\n\n useEffect(() => {\n setTimeout(() => {\n handleClientWidth();\n }, 300);\n }, [isAuthoringOpen]);\n\n useEffect(() => {\n if (visibleStepCounts > 0) {\n if (visibleStepCounts > currentStep) {\n let newRightTooltip = steps\n ?.slice(visibleStepCounts, steps?.length)\n ?.map((step) => step?.label)\n ?.join(', ');\n\n let rightCount = visibleStepCounts;\n if (disableOneMore && rightCount === steps.length - 1) {\n rightCount = steps.length;\n newRightTooltip = '';\n }\n setLeftMostStep(0);\n setRightMostStep(rightCount);\n setRightTooltip(newRightTooltip);\n } else {\n const mid = Math.floor((visibleStepCounts + 1) / 2);\n const remainingStepsFromRight = currentStep + mid - steps?.length;\n let rightCount = currentStep + mid;\n let leftCount = currentStep - Math.max(visibleStepCounts - mid, 0) - (remainingStepsFromRight > 0 ? remainingStepsFromRight : 0);\n let newLeftTooltip = steps\n ?.slice(0, leftCount)\n ?.map((step) => step?.label)\n ?.join(', ');\n let newRightTooltip = steps\n ?.slice(rightCount, steps?.length)\n ?.map((step) => step?.label)\n ?.join(', ');\n\n if (disableOneMore && leftCount === 1) {\n leftCount = 0;\n newLeftTooltip = '';\n }\n\n if (disableOneMore && rightCount === steps.length - 1) {\n rightCount = steps.length;\n newRightTooltip = '';\n }\n setLeftMostStep(leftCount);\n setRightMostStep(rightCount);\n setLeftTooltip(newLeftTooltip);\n setRightTooltip(newRightTooltip);\n }\n }\n }, [visibleStepCounts, isAuthoringOpen, isMainSideBarOpen, steps, currentStep]);\n\n useEventListener('resize', handleClientWidth);\n\n const stepDetails = (step: TStep, index: number, hideLine = false) => {\n const isStepBlocked = Boolean(step?.isLocked) \|\| Boolean(step?.isDisabled) \|\| (isStepClickable ? !isStepClickable(index, step) : false);\n const isNavigable = Boolean(onClick) && !isStepBlocked;\n\n const handleStepActivate = () => {\n if (!isNavigable) return;\n onClick?.(index);\n };\n\n /* Applied to the step title/description so only they react to clicks, not the connector line. */\n const titleInteractionProps = onClick\n ? {\n role: 'button' as const,\n tabIndex: isNavigable ? 0 : -1,\n 'aria-disabled': !isNavigable,\n onClick: handleStepActivate,\n onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n handleStepActivate();\n }\n },\n }\n : {};\n\n const titleInteractionClassName = onClick\n ? isNavigable\n ? 'cursor-pointer rounded-sm transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600'\n : 'cursor-not-allowed'\n : '';\n\n return (\n <div\n key={index}\n aria-current={index === currentStep ? 'step' : undefined}\n className={`flex ${index < steps.length - 1 \|\| appearance == 'parallel' ? 'flex flex-grow' : ''} min-w-[200px]`}\n >\n <div className={`w-full flex flex-col`}>\n <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n <div\n {...titleInteractionProps}\n className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col ${titleInteractionClassName}`}\n >\n <div className={`flex ${labelPosition === 'top-right' \|\| labelPosition === 'bottom-right' ? 'justify-end' : ''}`}>\n <Tooltip title={isStepBlocked ? step?.disabledTooltipText \|\| step?.tooltipText : step?.tooltipText}>\n <Typography\n size='small'\n variant='medium'\n className={`truncate flex items-center ${\n index <= currentStep ? 'text-primary-600 dark:text-primary-300' : 'text-neutral-400 dark:text-neutral-100'\n }`}\n appearance='custom'\n >\n {showIndex ? (\n <div\n className={`${\n appearance === 'parallel'\n ? 'flex items-center'\n : `w-6 h-6 ${\n index <= currentStep ? 'bg-primary-600' : 'bg-neutral-400 dark:bg-black-400'\n } rounded-full flex items-center justify-center text-white`\n }`}\n >\n {step?.isLocked ? (\n <div className='flex items-center justify-center'>\n <Lock sx={{ fontSize: 16 }} />\n </div>\n ) : (\n <>\n {currentStep > index && appearance === 'linear' ? (\n <CheckIcon size={18} className='text-white dark:text-white' />\n ) : (\n <Typography\n size={`${appearance === 'parallel' ? 'small' : 'extra-small'}`}\n variant='medium'\n className='text-neutral-100'\n appearance='custom'\n >\n {index + 1}\n </Typography>\n )}\n </>\n )}\n </div>\n ) : null}\n\n <div className={`truncate ${labelPosition === 'inline' ? 'mx-2' : 'ml-2'} ${index <= currentStep ? '' : 'dark:text-black-200'}`}>\n {step?.label}\n </div>\n </Typography>\n </Tooltip>\n </div>\n\n {labelPosition !== 'inline' \|\| appearance === 'parallel' ? (\n <div\n className={`flex ${\n labelPosition === 'top-right' \|\| labelPosition === 'bottom-right' ? 'justify-end' : appearance === 'linear' ? 'ml-8' : ''\n }`}\n >\n <Typography\n size='extra-small'\n variant='medium'\n className={`truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n appearance='custom'\n >\n {step?.description \|\| ''}\n </Typography>\n </div>\n ) : null}\n </div>\n {index < steps.length - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) && !hideLine ? (\n <div\n className={`w-full flex-grow h-0.5 min-w-[70px] ${labelPosition !== 'inline' \|\| appearance === 'parallel' ? 'my-2' : ''} ${\n index <= currentStep - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) ? 'bg-primary-600' : 'bg-neutral-300'\n }`}\n />\n ) : null}\n </div>\n {labelPosition === 'inline' && appearance === 'linear' ? (\n <div className={`w-fit max-w-full ${titleInteractionClassName}`} onClick={handleStepActivate}>\n <Typography\n size='extra-small'\n variant='medium'\n className={`ml-8 truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n appearance='custom'\n >\n {step?.description \|\| ''}\n </Typography>\n </div>\n ) : null}\n </div>\n </div>\n );\n };\n\n return (\n <div className={`w-full flex ${className}`} ref={stepsRef}>\n {leftMostStep > 0 ? (\n <div className={`flex ${appearance === 'parallel' ? 'flex-col' : ''}`}>\n {onClick ? (\n <Dropdown\n menu={{\n items: steps.slice(0, leftMostStep).map((step: TStep, index: number) => ({\n label: <div className='px-2 py-1'>{stepDetails(step, index, true)}</div>,\n key: index,\n })),\n }}\n trigger={['click']}\n >\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={leftTooltip}>\n <div className='min-w-max'>\n {leftMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n </Dropdown>\n ) : (\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={leftTooltip}>\n <div className='min-w-max'>\n {leftMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n )}\n <div className={`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${appearance === 'parallel' ? 'mt-2' : 'mt-[11px]'}`} />\n </div>\n ) : null}\n\n <div className='w-full flex flex-wrap gap-3 '>\n {steps?.map((step: TStep, index: number) => {\n if (leftMostStep <= index && index < rightMostStep) {\n return stepDetails(step, index);\n }\n return null;\n })}\n </div>\n\n {steps.length - rightMostStep > 0 ? (\n <div className='flex flex-col'>\n {onClick ? (\n <Dropdown\n menu={{\n items: steps.slice(rightMostStep, steps?.length).map((step: TStep, index: number) => ({\n label: <div className='px-2 py-1'>{stepDetails(step, index + rightMostStep, true)}</div>,\n key: index,\n })),\n }}\n trigger={['click']}\n >\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={rightTooltip}>\n <div className='min-w-max'>\n {steps.length - rightMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n </Dropdown>\n ) : (\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={rightTooltip}>\n <div className='min-w-max'>\n {steps.length - rightMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n )}\n\n <div className={`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${appearance === 'parallel' ? 'mt-2' : 'hidden'}`} />\n </div>\n ) : null}\n </div>\n );\n};\n\nStepper.displayName = 'Stepper';\n\nexport default Stepper;\n\n\n\n"],"names":["Stepper","steps","currentStep","appearance","labelPosition","onClick","isStepClickable","className","showIndex","disableOneMore","isMainSideBarOpen","isAuthoringOpen","stepsRef","useRef","visibleStepCounts","setVisibleStepCounts","useState","leftMostStep","setLeftMostStep","rightMostStep","setRightMostStep","leftTooltip","setLeftTooltip","rightTooltip","setRightTooltip","getLabelDescriptionPosition","handleClientWidth","moreWidth","stepTitleWidth","stepWidth","count","index","useEffect","newRightTooltip","step","rightCount","mid","remainingStepsFromRight","leftCount","newLeftTooltip","useEventListener","stepDetails","hideLine","isStepBlocked","isNavigable","handleStepActivate","titleInteractionProps","event","titleInteractionClassName","jsx","jsxs","Tooltip","Typography","Lock","Fragment","CheckIcon","Dropdown"],"mappings":"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"}

package/dist/components/navigation/stepper/Stepper.d.ts CHANGED Viewed

@@ -3,11 +3,25 @@ export type TStep = {
     description?: string;
     isLocked?: boolean;
     tooltipText?: string;
+    /** Prevents navigating to this step (e.g. validation not satisfied yet). Locked steps are always non-navigable. */
+    isDisabled?: boolean;
+    /** Tooltip shown when the step cannot be navigated to. Falls back to `tooltipText`. */
+    disabledTooltipText?: string;
 };
 export type TStepperProps = {
     steps: TStep[];
     currentStep: number;
+    /**
+     * Called when a navigable step title is clicked (or activated with Enter/Space).
+     * Steps that are locked, disabled or rejected by `isStepClickable` never invoke it.
+     */
     onClick?: (index: number) => void;
+    /**
+     * Optional gate for step navigation, so consumers can enforce their own validation
+     * and step-access rules (e.g. only allow jumping to already visited steps).
+     * Returning `false` renders the step title as non-navigable.
+     */
+    isStepClickable?: (index: number, step: TStep) => boolean;
     appearance?: 'linear' | 'parallel';
     labelPosition?: 'top' | 'bottom' | 'inline' | 'top-right' | 'bottom-right';
     className?: string;
@@ -35,11 +49,16 @@ export type TStepperProps = {
  *   ]}
  *   currentStep={1}
  *   onClick={(index) => setCurrentStep(index)}
+ *   // only allow jumping to steps the user has already reached
+ *   isStepClickable={(index) => index <= furthestVisitedStep}
  * />
  * ```
+ *
+ * Step titles are clickable whenever `onClick` is provided. A step is not navigable
+ * when it is `isLocked`, `isDisabled`, or rejected by `isStepClickable`.
  */
 declare const Stepper: {
-    ({ steps, currentStep, appearance, labelPosition, onClick, className, showIndex, disableOneMore, isMainSideBarOpen, isAuthoringOpen, }: TStepperProps): import("react/jsx-runtime").JSX.Element;
+    ({ steps, currentStep, appearance, labelPosition, onClick, isStepClickable, className, showIndex, disableOneMore, isMainSideBarOpen, isAuthoringOpen, }: TStepperProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Stepper;

package/dist/components/navigation/stepper/Stepper.es.js CHANGED Viewed

@@ -1,210 +1,231 @@
-import { jsxs as c, jsx as e, Fragment as q } from "react/jsx-runtime";
+import { jsxs as c, jsx as l, Fragment as A } from "react/jsx-runtime";
 import { Lock as G } from "@mui/icons-material";
-import { Dropdown as D } from "antd";
-import { useRef as H, useState as g, useEffect as T } from "react";
-import { Typography as h } from "../../data-display/typography/Typography.es.js";
-import v from "../../tooltip/Tooltip.es.js";
+import { Dropdown as E } from "antd";
+import { useRef as H, useState as N, useEffect as z } from "react";
+import { Typography as u } from "../../data-display/typography/Typography.es.js";
+import p from "../../tooltip/Tooltip.es.js";
 import { useEventListener as J } from "../../../hooks/useEventListener.es.js";
-import { CheckIcon as K } from "../../icon/icons.generated.es.js";
-const Q = ({
+import { CheckIcon as Q } from "../../icon/icons.generated.es.js";
+const U = ({
   steps: t,
   currentStep: n,
   appearance: a = "linear",
   labelPosition: r = "inline",
-  onClick: w,
-  className: E,
-  showIndex: F = !0,
-  disableOneMore: N = !1,
-  isMainSideBarOpen: z = !1,
-  isAuthoringOpen: b = !1
+  onClick: f,
+  isStepClickable: j,
+  className: F,
+  showIndex: K = !0,
+  disableOneMore: $ = !1,
+  isMainSideBarOpen: L = !1,
+  isAuthoringOpen: W = !1
 }) => {
-  const f = H(null), [s, p] = g(0), [x, j] = g(0), [o, W] = g(0), [L, I] = g(""), [M, R] = g(""), V = () => r === "top" || r === "top-right" ? "flex-col" : r === "bottom" || r === "bottom-right" ? "flex-col-reverse" : a === "linear" ? "flex-row" : "flex-col", $ = () => {
+  const g = H(null), [d, y] = N(0), [v, M] = N(0), [h, R] = N(0), [D, V] = N(""), [C, I] = N(""), q = () => r === "top" || r === "top-right" ? "flex-col" : r === "bottom" || r === "bottom-right" ? "flex-col-reverse" : a === "linear" ? "flex-row" : "flex-col", k = () => {
     setTimeout(() => {
-      p(0);
-      const i = 210, l = 225;
-      let m = 0, d = 0;
-      for (let u = 0; u < t.length && (f?.current?.clientWidth && f?.current?.clientWidth > m + l + i); u++)
-        m += l, d = u + 1;
-      p(d), f?.current?.clientWidth && f?.current?.clientWidth < 480 && p(t?.length);
+      y(0);
+      const i = 210, e = 225;
+      let m = 0, s = 0;
+      for (let o = 0; o < t.length && (g?.current?.clientWidth && g?.current?.clientWidth > m + e + i); o++)
+        m += e, s = o + 1;
+      y(s), g?.current?.clientWidth && g?.current?.clientWidth < 480 && y(t?.length);
     }, 300);
   };
-  T(() => {
-    $();
-  }, [z, t, n]), T(() => {
+  z(() => {
+    k();
+  }, [L, t, n]), z(() => {
     setTimeout(() => {
-      $();
+      k();
     }, 300);
-  }, [b]), T(() => {
-    if (s > 0)
-      if (s > n) {
-        let i = t?.slice(s, t?.length)?.map((m) => m?.label)?.join(", "), l = s;
-        N && l === t.length - 1 && (l = t.length, i = ""), j(0), W(l), R(i);
+  }, [W]), z(() => {
+    if (d > 0)
+      if (d > n) {
+        let i = t?.slice(d, t?.length)?.map((m) => m?.label)?.join(", "), e = d;
+        $ && e === t.length - 1 && (e = t.length, i = ""), M(0), R(e), I(i);
       } else {
-        const i = Math.floor((s + 1) / 2), l = n + i - t?.length;
-        let m = n + i, d = n - Math.max(s - i, 0) - (l > 0 ? l : 0), u = t?.slice(0, d)?.map((y) => y?.label)?.join(", "), C = t?.slice(m, t?.length)?.map((y) => y?.label)?.join(", ");
-        N && d === 1 && (d = 0, u = ""), N && m === t.length - 1 && (m = t.length, C = ""), j(d), W(m), I(u), R(C);
+        const i = Math.floor((d + 1) / 2), e = n + i - t?.length;
+        let m = n + i, s = n - Math.max(d - i, 0) - (e > 0 ? e : 0), o = t?.slice(0, s)?.map((w) => w?.label)?.join(", "), x = t?.slice(m, t?.length)?.map((w) => w?.label)?.join(", ");
+        $ && s === 1 && (s = 0, o = ""), $ && m === t.length - 1 && (m = t.length, x = ""), M(s), R(m), V(o), I(x);
       }
-  }, [s, b, z, t, n]), J("resize", $);
-  const k = (i, l, m = !1) => /* @__PURE__ */ e(
-    "div",
-    {
-      onClick: () => w?.(l),
-      className: `flex ${l < t.length - 1 || a == "parallel" ? "flex flex-grow" : ""}  min-w-[200px] ${w ? "cursor-pointer" : ""}`,
-      children: /* @__PURE__ */ c("div", { className: "w-full flex flex-col", children: [
-        /* @__PURE__ */ c("div", { className: `flex ${V()} ${r === "inline" && a === "linear" ? "items-center" : ""}`, children: [
-          /* @__PURE__ */ c("div", { className: `${r === "inline" ? "max-w-[70%]" : "w-full"} flex flex-col`, children: [
-            /* @__PURE__ */ e("div", { className: `flex ${r === "top-right" || r === "bottom-right" ? "justify-end" : ""}`, children: /* @__PURE__ */ e(v, { title: i?.tooltipText, children: /* @__PURE__ */ c(
-              h,
+  }, [d, W, L, t, n]), J("resize", k);
+  const b = (i, e, m = !1) => {
+    const s = !!i?.isLocked || !!i?.isDisabled || (j ? !j(e, i) : !1), o = !!f && !s, x = () => {
+      o && f?.(e);
+    }, w = f ? {
+      role: "button",
+      tabIndex: o ? 0 : -1,
+      "aria-disabled": !o,
+      onClick: x,
+      onKeyDown: (T) => {
+        (T.key === "Enter" || T.key === " ") && (T.preventDefault(), x());
+      }
+    } : {}, B = f ? o ? "cursor-pointer rounded-sm transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600" : "cursor-not-allowed" : "";
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        "aria-current": e === n ? "step" : void 0,
+        className: `flex ${e < t.length - 1 || a == "parallel" ? "flex flex-grow" : ""}  min-w-[200px]`,
+        children: /* @__PURE__ */ c("div", { className: "w-full flex flex-col", children: [
+          /* @__PURE__ */ c("div", { className: `flex ${q()} ${r === "inline" && a === "linear" ? "items-center" : ""}`, children: [
+            /* @__PURE__ */ c(
+              "div",
               {
-                size: "small",
-                variant: "medium",
-                className: `truncate flex items-center ${l <= n ? "text-primary-600 dark:text-primary-300" : "text-neutral-400 dark:text-neutral-100"}`,
-                appearance: "custom",
+                ...w,
+                className: `${r === "inline" ? "max-w-[70%]" : "w-full"} flex flex-col ${B}`,
                 children: [
-                  F ? /* @__PURE__ */ e(
+                  /* @__PURE__ */ l("div", { className: `flex ${r === "top-right" || r === "bottom-right" ? "justify-end" : ""}`, children: /* @__PURE__ */ l(p, { title: s && i?.disabledTooltipText || i?.tooltipText, children: /* @__PURE__ */ c(
+                    u,
+                    {
+                      size: "small",
+                      variant: "medium",
+                      className: `truncate flex items-center ${e <= n ? "text-primary-600 dark:text-primary-300" : "text-neutral-400 dark:text-neutral-100"}`,
+                      appearance: "custom",
+                      children: [
+                        K ? /* @__PURE__ */ l(
+                          "div",
+                          {
+                            className: `${a === "parallel" ? "flex items-center" : `w-6 h-6 ${e <= n ? "bg-primary-600" : "bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,
+                            children: i?.isLocked ? /* @__PURE__ */ l("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ l(G, { sx: { fontSize: 16 } }) }) : /* @__PURE__ */ l(A, { children: n > e && a === "linear" ? /* @__PURE__ */ l(Q, { size: 18, className: "text-white dark:text-white" }) : /* @__PURE__ */ l(
+                              u,
+                              {
+                                size: `${a === "parallel" ? "small" : "extra-small"}`,
+                                variant: "medium",
+                                className: "text-neutral-100",
+                                appearance: "custom",
+                                children: e + 1
+                              }
+                            ) })
+                          }
+                        ) : null,
+                        /* @__PURE__ */ l("div", { className: `truncate ${r === "inline" ? "mx-2" : "ml-2"} ${e <= n ? "" : "dark:text-black-200"}`, children: i?.label })
+                      ]
+                    }
+                  ) }) }),
+                  r !== "inline" || a === "parallel" ? /* @__PURE__ */ l(
                     "div",
                     {
-                      className: `${a === "parallel" ? "flex items-center" : `w-6 h-6 ${l <= n ? "bg-primary-600" : "bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,
-                      children: i?.isLocked ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(G, { sx: { fontSize: 16 } }) }) : /* @__PURE__ */ e(q, { children: n > l && a === "linear" ? /* @__PURE__ */ e(K, { size: 18, className: "text-white dark:text-white" }) : /* @__PURE__ */ e(
-                        h,
+                      className: `flex ${r === "top-right" || r === "bottom-right" ? "justify-end" : a === "linear" ? "ml-8" : ""}`,
+                      children: /* @__PURE__ */ l(
+                        u,
                         {
-                          size: `${a === "parallel" ? "small" : "extra-small"}`,
+                          size: "extra-small",
                           variant: "medium",
-                          className: "text-neutral-100",
+                          className: `truncate ${e === n ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
                           appearance: "custom",
-                          children: l + 1
+                          children: i?.description || ""
                         }
-                      ) })
+                      )
                     }
-                  ) : null,
-                  /* @__PURE__ */ e("div", { className: `truncate ${r === "inline" ? "mx-2" : "ml-2"} ${l <= n ? "" : "dark:text-black-200"}`, children: i?.label })
+                  ) : null
                 ]
               }
-            ) }) }),
-            r !== "inline" || a === "parallel" ? /* @__PURE__ */ e(
+            ),
+            e < t.length - (a === "linear" && r === "inline" ? 1 : 0) && !m ? /* @__PURE__ */ l(
               "div",
               {
-                className: `flex ${r === "top-right" || r === "bottom-right" ? "justify-end" : a === "linear" ? "ml-8" : ""}`,
-                children: /* @__PURE__ */ e(
-                  h,
-                  {
-                    size: "extra-small",
-                    variant: "medium",
-                    className: `truncate ${l === n ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
-                    appearance: "custom",
-                    children: i?.description || ""
-                  }
-                )
+                className: `w-full flex-grow h-0.5 min-w-[70px]  ${r !== "inline" || a === "parallel" ? "my-2" : ""} ${e <= n - (a === "linear" && r === "inline" ? 1 : 0) ? "bg-primary-600" : "bg-neutral-300"}`
               }
             ) : null
           ] }),
-          l < t.length - (a === "linear" && r === "inline" ? 1 : 0) && !m ? /* @__PURE__ */ e(
-            "div",
+          r === "inline" && a === "linear" ? /* @__PURE__ */ l("div", { className: `w-fit max-w-full ${B}`, onClick: x, children: /* @__PURE__ */ l(
+            u,
             {
-              className: `w-full flex-grow h-0.5 min-w-[70px]  ${r !== "inline" || a === "parallel" ? "my-2" : ""} ${l <= n - (a === "linear" && r === "inline" ? 1 : 0) ? "bg-primary-600" : "bg-neutral-300"}`
+              size: "extra-small",
+              variant: "medium",
+              className: `ml-8 truncate ${e === n ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
+              appearance: "custom",
+              children: i?.description || ""
             }
-          ) : null
-        ] }),
-        r === "inline" && a === "linear" ? /* @__PURE__ */ e(
-          h,
-          {
-            size: "extra-small",
-            variant: "medium",
-            className: `ml-8 truncate ${l === n ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
-            appearance: "custom",
-            children: i?.description || ""
-          }
-        ) : null
-      ] })
-    },
-    l
-  );
-  return /* @__PURE__ */ c("div", { className: `w-full flex ${E}`, ref: f, children: [
-    x > 0 ? /* @__PURE__ */ c("div", { className: `flex ${a === "parallel" ? "flex-col" : ""}`, children: [
-      w ? /* @__PURE__ */ e(
-        D,
+          ) }) : null
+        ] })
+      },
+      e
+    );
+  };
+  return /* @__PURE__ */ c("div", { className: `w-full flex ${F}`, ref: g, children: [
+    v > 0 ? /* @__PURE__ */ c("div", { className: `flex ${a === "parallel" ? "flex-col" : ""}`, children: [
+      f ? /* @__PURE__ */ l(
+        E,
         {
           menu: {
-            items: t.slice(0, x).map((i, l) => ({
-              label: /* @__PURE__ */ e("div", { className: "px-2 py-1", children: k(i, l, !0) }),
-              key: l
+            items: t.slice(0, v).map((i, e) => ({
+              label: /* @__PURE__ */ l("div", { className: "px-2 py-1", children: b(i, e, !0) }),
+              key: e
             }))
           },
           trigger: ["click"],
-          children: /* @__PURE__ */ e(
-            h,
+          children: /* @__PURE__ */ l(
+            u,
             {
               size: "small",
               variant: "medium",
-              className: `px-2 ${t.length - s > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+              className: `px-2 ${t.length - d > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
               appearance: "subtitle",
-              children: /* @__PURE__ */ e(v, { title: L, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
-                x,
+              children: /* @__PURE__ */ l(p, { title: D, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+                v,
                 " More..."
               ] }) })
             }
           )
         }
-      ) : /* @__PURE__ */ e(
-        h,
+      ) : /* @__PURE__ */ l(
+        u,
         {
           size: "small",
           variant: "medium",
-          className: `px-2 ${t.length - s > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+          className: `px-2 ${t.length - d > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
           appearance: "subtitle",
-          children: /* @__PURE__ */ e(v, { title: L, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
-            x,
+          children: /* @__PURE__ */ l(p, { title: D, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+            v,
             " More..."
           ] }) })
         }
       ),
-      /* @__PURE__ */ e("div", { className: `h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${a === "parallel" ? "mt-2" : "mt-[11px]"}` })
+      /* @__PURE__ */ l("div", { className: `h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${a === "parallel" ? "mt-2" : "mt-[11px]"}` })
     ] }) : null,
-    /* @__PURE__ */ e("div", { className: "w-full flex flex-wrap gap-3 ", children: t?.map((i, l) => x <= l && l < o ? k(i, l) : null) }),
-    t.length - o > 0 ? /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
-      w ? /* @__PURE__ */ e(
-        D,
+    /* @__PURE__ */ l("div", { className: "w-full flex flex-wrap gap-3 ", children: t?.map((i, e) => v <= e && e < h ? b(i, e) : null) }),
+    t.length - h > 0 ? /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
+      f ? /* @__PURE__ */ l(
+        E,
         {
           menu: {
-            items: t.slice(o, t?.length).map((i, l) => ({
-              label: /* @__PURE__ */ e("div", { className: "px-2 py-1", children: k(i, l + o, !0) }),
-              key: l
+            items: t.slice(h, t?.length).map((i, e) => ({
+              label: /* @__PURE__ */ l("div", { className: "px-2 py-1", children: b(i, e + h, !0) }),
+              key: e
             }))
           },
           trigger: ["click"],
-          children: /* @__PURE__ */ e(
-            h,
+          children: /* @__PURE__ */ l(
+            u,
             {
               size: "small",
               variant: "medium",
-              className: `px-2 ${t.length - o > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+              className: `px-2 ${t.length - h > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
               appearance: "subtitle",
-              children: /* @__PURE__ */ e(v, { title: M, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
-                t.length - o,
+              children: /* @__PURE__ */ l(p, { title: C, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+                t.length - h,
                 " More..."
               ] }) })
             }
           )
         }
-      ) : /* @__PURE__ */ e(
-        h,
+      ) : /* @__PURE__ */ l(
+        u,
         {
           size: "small",
           variant: "medium",
-          className: `px-2 ${t.length - o > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+          className: `px-2 ${t.length - h > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
           appearance: "subtitle",
-          children: /* @__PURE__ */ e(v, { title: M, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
-            t.length - o,
+          children: /* @__PURE__ */ l(p, { title: C, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+            t.length - h,
             " More..."
           ] }) })
         }
       ),
-      /* @__PURE__ */ e("div", { className: `h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${a === "parallel" ? "mt-2" : "hidden"}` })
+      /* @__PURE__ */ l("div", { className: `h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${a === "parallel" ? "mt-2" : "hidden"}` })
     ] }) : null
   ] });
 };
-Q.displayName = "Stepper";
+U.displayName = "Stepper";
 export {
-  Q as default
+  U as default
 };
 //# sourceMappingURL=Stepper.es.js.map

package/dist/components/navigation/stepper/Stepper.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stepper.es.js","sources":["../../../../src/components/navigation/stepper/Stepper.tsx"],"sourcesContent":["import { Lock } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useEventListener } from '../../../hooks/useEventListener';\nimport { CheckIcon } from '../../icon';\n\nexport type TStep = {\n label: string;\n description?: string;\n isLocked?: boolean;\n tooltipText?: string;\n};\n\nexport type TStepperProps = {\n steps: TStep[];\n currentStep: number;\n onClick?: (index: number) => void;\n appearance?: 'linear' \| 'parallel';\n labelPosition?: 'top' \| 'bottom' \| 'inline' \| 'top-right' \| 'bottom-right';\n className?: string;\n showIndex?: boolean;\n disableOneMore?: boolean;\n lockConfig?: {\n isLocked?: boolean;\n tooltipText?: string;\n };\n /** Whether the main sidebar is open (affects responsive calculations) /\n isMainSideBarOpen?: boolean;\n /* Whether the authoring panel is open (affects responsive calculations) /\n isAuthoringOpen?: boolean;\n};\n\n/\n Stepper component for multi-step workflows\n \n @example\n * ```tsx\n * <Stepper\n * steps={[\n * { label: 'Step 1', description: 'First step' },\n * { label: 'Step 2', description: 'Second step' },\n * { label: 'Step 3', description: 'Third step' },\n * ]}\n * currentStep={1}\n * onClick={(index) => setCurrentStep(index)}\n * />\n * ```\n */\nconst Stepper = ({\n steps,\n currentStep,\n appearance = 'linear',\n labelPosition = 'inline',\n onClick,\n className,\n showIndex = true,\n disableOneMore = false,\n isMainSideBarOpen = false,\n isAuthoringOpen = false,\n}: TStepperProps) => {\n const stepsRef = useRef<HTMLDivElement \| null>(null);\n const [visibleStepCounts, setVisibleStepCounts] = useState<number>(0);\n const [leftMostStep, setLeftMostStep] = useState<number>(0);\n const [rightMostStep, setRightMostStep] = useState<number>(0);\n const [leftTooltip, setLeftTooltip] = useState<string>('');\n const [rightTooltip, setRightTooltip] = useState<string>('');\n\n const getLabelDescriptionPosition = () => {\n if (labelPosition === 'top' \|\| labelPosition === 'top-right') {\n return 'flex-col';\n } else if (labelPosition === 'bottom' \|\| labelPosition === 'bottom-right') {\n return 'flex-col-reverse';\n } else if (appearance === 'linear') {\n return 'flex-row';\n } else {\n return 'flex-col';\n }\n };\n\n const handleClientWidth = () => {\n setTimeout(() => {\n setVisibleStepCounts(0);\n const moreWidth = 210;\n const stepTitleWidth = 225;\n let stepWidth = 0;\n let count = 0;\n for (let index = 0; index < steps.length; index++) {\n if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth > stepWidth + stepTitleWidth + moreWidth) {\n stepWidth += stepTitleWidth;\n count = index + 1;\n } else {\n break;\n }\n }\n setVisibleStepCounts(count);\n if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth < 480) {\n setVisibleStepCounts(steps?.length);\n }\n }, 300);\n };\n\n useEffect(() => {\n handleClientWidth();\n }, [isMainSideBarOpen, steps, currentStep]);\n\n useEffect(() => {\n setTimeout(() => {\n handleClientWidth();\n }, 300);\n }, [isAuthoringOpen]);\n\n useEffect(() => {\n if (visibleStepCounts > 0) {\n if (visibleStepCounts > currentStep) {\n let newRightTooltip = steps\n ?.slice(visibleStepCounts, steps?.length)\n ?.map((step) => step?.label)\n ?.join(', ');\n\n let rightCount = visibleStepCounts;\n if (disableOneMore && rightCount === steps.length - 1) {\n rightCount = steps.length;\n newRightTooltip = '';\n }\n setLeftMostStep(0);\n setRightMostStep(rightCount);\n setRightTooltip(newRightTooltip);\n } else {\n const mid = Math.floor((visibleStepCounts + 1) / 2);\n const remainingStepsFromRight = currentStep + mid - steps?.length;\n let rightCount = currentStep + mid;\n let leftCount = currentStep - Math.max(visibleStepCounts - mid, 0) - (remainingStepsFromRight > 0 ? remainingStepsFromRight : 0);\n let newLeftTooltip = steps\n ?.slice(0, leftCount)\n ?.map((step) => step?.label)\n ?.join(', ');\n let newRightTooltip = steps\n ?.slice(rightCount, steps?.length)\n ?.map((step) => step?.label)\n ?.join(', ');\n\n if (disableOneMore && leftCount === 1) {\n leftCount = 0;\n newLeftTooltip = '';\n }\n\n if (disableOneMore && rightCount === steps.length - 1) {\n rightCount = steps.length;\n newRightTooltip = '';\n }\n setLeftMostStep(leftCount);\n setRightMostStep(rightCount);\n setLeftTooltip(newLeftTooltip);\n setRightTooltip(newRightTooltip);\n }\n }\n }, [visibleStepCounts, isAuthoringOpen, isMainSideBarOpen, steps, currentStep]);\n\n useEventListener('resize', handleClientWidth);\n\n const stepDetails = (step: TStep, index: number, hideLine = false) => {\n return (\n <div\n key={index}\n onClick={() => onClick?.(index)}\n className={`flex ${index < steps.length - 1 \|\| appearance == 'parallel' ? 'flex flex-grow' : ''} min-w-[200px] ${\n onClick ? 'cursor-pointer' : ''\n }`}\n >\n <div className={`w-full flex flex-col`}>\n <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n <div className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col`}>\n <div className={`flex ${labelPosition === 'top-right' \|\| labelPosition === 'bottom-right' ? 'justify-end' : ''}`}>\n <Tooltip title={step?.tooltipText}>\n <Typography\n size='small'\n variant='medium'\n className={`truncate flex items-center ${\n index <= currentStep ? 'text-primary-600 dark:text-primary-300' : 'text-neutral-400 dark:text-neutral-100'\n }`}\n appearance='custom'\n >\n {showIndex ? (\n <div\n className={`${\n appearance === 'parallel'\n ? 'flex items-center'\n : `w-6 h-6 ${\n index <= currentStep ? 'bg-primary-600' : 'bg-neutral-400 dark:bg-black-400'\n } rounded-full flex items-center justify-center text-white`\n }`}\n >\n {step?.isLocked ? (\n <div className='flex items-center justify-center'>\n <Lock sx={{ fontSize: 16 }} />\n </div>\n ) : (\n <>\n {currentStep > index && appearance === 'linear' ? (\n <CheckIcon size={18} className='text-white dark:text-white' />\n ) : (\n <Typography\n size={`${appearance === 'parallel' ? 'small' : 'extra-small'}`}\n variant='medium'\n className='text-neutral-100'\n appearance='custom'\n >\n {index + 1}\n </Typography>\n )}\n </>\n )}\n </div>\n ) : null}\n\n <div className={`truncate ${labelPosition === 'inline' ? 'mx-2' : 'ml-2'} ${index <= currentStep ? '' : 'dark:text-black-200'}`}>\n {step?.label}\n </div>\n </Typography>\n </Tooltip>\n </div>\n\n {labelPosition !== 'inline' \|\| appearance === 'parallel' ? (\n <div\n className={`flex ${\n labelPosition === 'top-right' \|\| labelPosition === 'bottom-right' ? 'justify-end' : appearance === 'linear' ? 'ml-8' : ''\n }`}\n >\n <Typography\n size='extra-small'\n variant='medium'\n className={`truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n appearance='custom'\n >\n {step?.description \|\| ''}\n </Typography>\n </div>\n ) : null}\n </div>\n {index < steps.length - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) && !hideLine ? (\n <div\n className={`w-full flex-grow h-0.5 min-w-[70px] ${labelPosition !== 'inline' \|\| appearance === 'parallel' ? 'my-2' : ''} ${\n index <= currentStep - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) ? 'bg-primary-600' : 'bg-neutral-300'\n }`}\n />\n ) : null}\n </div>\n {labelPosition === 'inline' && appearance === 'linear' ? (\n <Typography\n size='extra-small'\n variant='medium'\n className={`ml-8 truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n appearance='custom'\n >\n {step?.description \|\| ''}\n </Typography>\n ) : null}\n </div>\n </div>\n );\n };\n\n return (\n <div className={`w-full flex ${className}`} ref={stepsRef}>\n {leftMostStep > 0 ? (\n <div className={`flex ${appearance === 'parallel' ? 'flex-col' : ''}`}>\n {onClick ? (\n <Dropdown\n menu={{\n items: steps.slice(0, leftMostStep).map((step: TStep, index: number) => ({\n label: <div className='px-2 py-1'>{stepDetails(step, index, true)}</div>,\n key: index,\n })),\n }}\n trigger={['click']}\n >\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={leftTooltip}>\n <div className='min-w-max'>\n {leftMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n </Dropdown>\n ) : (\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={leftTooltip}>\n <div className='min-w-max'>\n {leftMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n )}\n <div className={`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${appearance === 'parallel' ? 'mt-2' : 'mt-[11px]'}`} />\n </div>\n ) : null}\n\n <div className='w-full flex flex-wrap gap-3 '>\n {steps?.map((step: TStep, index: number) => {\n if (leftMostStep <= index && index < rightMostStep) {\n return stepDetails(step, index);\n }\n return null;\n })}\n </div>\n\n {steps.length - rightMostStep > 0 ? (\n <div className='flex flex-col'>\n {onClick ? (\n <Dropdown\n menu={{\n items: steps.slice(rightMostStep, steps?.length).map((step: TStep, index: number) => ({\n label: <div className='px-2 py-1'>{stepDetails(step, index + rightMostStep, true)}</div>,\n key: index,\n })),\n }}\n trigger={['click']}\n >\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={rightTooltip}>\n <div className='min-w-max'>\n {steps.length - rightMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n </Dropdown>\n ) : (\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={rightTooltip}>\n <div className='min-w-max'>\n {steps.length - rightMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n )}\n\n <div className={`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${appearance === 'parallel' ? 'mt-2' : 'hidden'}`} />\n </div>\n ) : null}\n </div>\n );\n};\n\nStepper.displayName = 'Stepper';\n\nexport default Stepper;\n\n\n\n"],"names":["Stepper","steps","currentStep","appearance","labelPosition","onClick","className","showIndex","disableOneMore","isMainSideBarOpen","isAuthoringOpen","stepsRef","useRef","visibleStepCounts","setVisibleStepCounts","useState","leftMostStep","setLeftMostStep","rightMostStep","setRightMostStep","leftTooltip","setLeftTooltip","rightTooltip","setRightTooltip","getLabelDescriptionPosition","handleClientWidth","moreWidth","stepTitleWidth","stepWidth","count","index","useEffect","newRightTooltip","step","rightCount","mid","remainingStepsFromRight","leftCount","newLeftTooltip","useEventListener","stepDetails","hideLine","jsx","jsxs","Tooltip","Typography","Lock","Fragment","CheckIcon","Dropdown"],"mappings":"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"}
1	+ {"version":3,"file":"Stepper.es.js","sources":["../../../../src/components/navigation/stepper/Stepper.tsx"],"sourcesContent":["import { Lock } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport type { KeyboardEvent } from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useEventListener } from '../../../hooks/useEventListener';\nimport { CheckIcon } from '../../icon';\n\nexport type TStep = {\n label: string;\n description?: string;\n isLocked?: boolean;\n tooltipText?: string;\n /** Prevents navigating to this step (e.g. validation not satisfied yet). Locked steps are always non-navigable. /\n isDisabled?: boolean;\n /* Tooltip shown when the step cannot be navigated to. Falls back to `tooltipText`. /\n disabledTooltipText?: string;\n};\n\nexport type TStepperProps = {\n steps: TStep[];\n currentStep: number;\n /\n Called when a navigable step title is clicked (or activated with Enter/Space).\n * Steps that are locked, disabled or rejected by `isStepClickable` never invoke it.\n /\n onClick?: (index: number) => void;\n /\n Optional gate for step navigation, so consumers can enforce their own validation\n * and step-access rules (e.g. only allow jumping to already visited steps).\n * Returning `false` renders the step title as non-navigable.\n /\n isStepClickable?: (index: number, step: TStep) => boolean;\n appearance?: 'linear' \| 'parallel';\n labelPosition?: 'top' \| 'bottom' \| 'inline' \| 'top-right' \| 'bottom-right';\n className?: string;\n showIndex?: boolean;\n disableOneMore?: boolean;\n lockConfig?: {\n isLocked?: boolean;\n tooltipText?: string;\n };\n /* Whether the main sidebar is open (affects responsive calculations) /\n isMainSideBarOpen?: boolean;\n /* Whether the authoring panel is open (affects responsive calculations) /\n isAuthoringOpen?: boolean;\n};\n\n/\n Stepper component for multi-step workflows\n \n @example\n * ```tsx\n * <Stepper\n * steps={[\n * { label: 'Step 1', description: 'First step' },\n * { label: 'Step 2', description: 'Second step' },\n * { label: 'Step 3', description: 'Third step' },\n * ]}\n * currentStep={1}\n * onClick={(index) => setCurrentStep(index)}\n * // only allow jumping to steps the user has already reached\n * isStepClickable={(index) => index <= furthestVisitedStep}\n * />\n * ```\n \n Step titles are clickable whenever `onClick` is provided. A step is not navigable\n * when it is `isLocked`, `isDisabled`, or rejected by `isStepClickable`.\n /\nconst Stepper = ({\n steps,\n currentStep,\n appearance = 'linear',\n labelPosition = 'inline',\n onClick,\n isStepClickable,\n className,\n showIndex = true,\n disableOneMore = false,\n isMainSideBarOpen = false,\n isAuthoringOpen = false,\n}: TStepperProps) => {\n const stepsRef = useRef<HTMLDivElement \| null>(null);\n const [visibleStepCounts, setVisibleStepCounts] = useState<number>(0);\n const [leftMostStep, setLeftMostStep] = useState<number>(0);\n const [rightMostStep, setRightMostStep] = useState<number>(0);\n const [leftTooltip, setLeftTooltip] = useState<string>('');\n const [rightTooltip, setRightTooltip] = useState<string>('');\n\n const getLabelDescriptionPosition = () => {\n if (labelPosition === 'top' \|\| labelPosition === 'top-right') {\n return 'flex-col';\n } else if (labelPosition === 'bottom' \|\| labelPosition === 'bottom-right') {\n return 'flex-col-reverse';\n } else if (appearance === 'linear') {\n return 'flex-row';\n } else {\n return 'flex-col';\n }\n };\n\n const handleClientWidth = () => {\n setTimeout(() => {\n setVisibleStepCounts(0);\n const moreWidth = 210;\n const stepTitleWidth = 225;\n let stepWidth = 0;\n let count = 0;\n for (let index = 0; index < steps.length; index++) {\n if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth > stepWidth + stepTitleWidth + moreWidth) {\n stepWidth += stepTitleWidth;\n count = index + 1;\n } else {\n break;\n }\n }\n setVisibleStepCounts(count);\n if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth < 480) {\n setVisibleStepCounts(steps?.length);\n }\n }, 300);\n };\n\n useEffect(() => {\n handleClientWidth();\n }, [isMainSideBarOpen, steps, currentStep]);\n\n useEffect(() => {\n setTimeout(() => {\n handleClientWidth();\n }, 300);\n }, [isAuthoringOpen]);\n\n useEffect(() => {\n if (visibleStepCounts > 0) {\n if (visibleStepCounts > currentStep) {\n let newRightTooltip = steps\n ?.slice(visibleStepCounts, steps?.length)\n ?.map((step) => step?.label)\n ?.join(', ');\n\n let rightCount = visibleStepCounts;\n if (disableOneMore && rightCount === steps.length - 1) {\n rightCount = steps.length;\n newRightTooltip = '';\n }\n setLeftMostStep(0);\n setRightMostStep(rightCount);\n setRightTooltip(newRightTooltip);\n } else {\n const mid = Math.floor((visibleStepCounts + 1) / 2);\n const remainingStepsFromRight = currentStep + mid - steps?.length;\n let rightCount = currentStep + mid;\n let leftCount = currentStep - Math.max(visibleStepCounts - mid, 0) - (remainingStepsFromRight > 0 ? remainingStepsFromRight : 0);\n let newLeftTooltip = steps\n ?.slice(0, leftCount)\n ?.map((step) => step?.label)\n ?.join(', ');\n let newRightTooltip = steps\n ?.slice(rightCount, steps?.length)\n ?.map((step) => step?.label)\n ?.join(', ');\n\n if (disableOneMore && leftCount === 1) {\n leftCount = 0;\n newLeftTooltip = '';\n }\n\n if (disableOneMore && rightCount === steps.length - 1) {\n rightCount = steps.length;\n newRightTooltip = '';\n }\n setLeftMostStep(leftCount);\n setRightMostStep(rightCount);\n setLeftTooltip(newLeftTooltip);\n setRightTooltip(newRightTooltip);\n }\n }\n }, [visibleStepCounts, isAuthoringOpen, isMainSideBarOpen, steps, currentStep]);\n\n useEventListener('resize', handleClientWidth);\n\n const stepDetails = (step: TStep, index: number, hideLine = false) => {\n const isStepBlocked = Boolean(step?.isLocked) \|\| Boolean(step?.isDisabled) \|\| (isStepClickable ? !isStepClickable(index, step) : false);\n const isNavigable = Boolean(onClick) && !isStepBlocked;\n\n const handleStepActivate = () => {\n if (!isNavigable) return;\n onClick?.(index);\n };\n\n /* Applied to the step title/description so only they react to clicks, not the connector line. */\n const titleInteractionProps = onClick\n ? {\n role: 'button' as const,\n tabIndex: isNavigable ? 0 : -1,\n 'aria-disabled': !isNavigable,\n onClick: handleStepActivate,\n onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n handleStepActivate();\n }\n },\n }\n : {};\n\n const titleInteractionClassName = onClick\n ? isNavigable\n ? 'cursor-pointer rounded-sm transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600'\n : 'cursor-not-allowed'\n : '';\n\n return (\n <div\n key={index}\n aria-current={index === currentStep ? 'step' : undefined}\n className={`flex ${index < steps.length - 1 \|\| appearance == 'parallel' ? 'flex flex-grow' : ''} min-w-[200px]`}\n >\n <div className={`w-full flex flex-col`}>\n <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n <div\n {...titleInteractionProps}\n className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col ${titleInteractionClassName}`}\n >\n <div className={`flex ${labelPosition === 'top-right' \|\| labelPosition === 'bottom-right' ? 'justify-end' : ''}`}>\n <Tooltip title={isStepBlocked ? step?.disabledTooltipText \|\| step?.tooltipText : step?.tooltipText}>\n <Typography\n size='small'\n variant='medium'\n className={`truncate flex items-center ${\n index <= currentStep ? 'text-primary-600 dark:text-primary-300' : 'text-neutral-400 dark:text-neutral-100'\n }`}\n appearance='custom'\n >\n {showIndex ? (\n <div\n className={`${\n appearance === 'parallel'\n ? 'flex items-center'\n : `w-6 h-6 ${\n index <= currentStep ? 'bg-primary-600' : 'bg-neutral-400 dark:bg-black-400'\n } rounded-full flex items-center justify-center text-white`\n }`}\n >\n {step?.isLocked ? (\n <div className='flex items-center justify-center'>\n <Lock sx={{ fontSize: 16 }} />\n </div>\n ) : (\n <>\n {currentStep > index && appearance === 'linear' ? (\n <CheckIcon size={18} className='text-white dark:text-white' />\n ) : (\n <Typography\n size={`${appearance === 'parallel' ? 'small' : 'extra-small'}`}\n variant='medium'\n className='text-neutral-100'\n appearance='custom'\n >\n {index + 1}\n </Typography>\n )}\n </>\n )}\n </div>\n ) : null}\n\n <div className={`truncate ${labelPosition === 'inline' ? 'mx-2' : 'ml-2'} ${index <= currentStep ? '' : 'dark:text-black-200'}`}>\n {step?.label}\n </div>\n </Typography>\n </Tooltip>\n </div>\n\n {labelPosition !== 'inline' \|\| appearance === 'parallel' ? (\n <div\n className={`flex ${\n labelPosition === 'top-right' \|\| labelPosition === 'bottom-right' ? 'justify-end' : appearance === 'linear' ? 'ml-8' : ''\n }`}\n >\n <Typography\n size='extra-small'\n variant='medium'\n className={`truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n appearance='custom'\n >\n {step?.description \|\| ''}\n </Typography>\n </div>\n ) : null}\n </div>\n {index < steps.length - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) && !hideLine ? (\n <div\n className={`w-full flex-grow h-0.5 min-w-[70px] ${labelPosition !== 'inline' \|\| appearance === 'parallel' ? 'my-2' : ''} ${\n index <= currentStep - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) ? 'bg-primary-600' : 'bg-neutral-300'\n }`}\n />\n ) : null}\n </div>\n {labelPosition === 'inline' && appearance === 'linear' ? (\n <div className={`w-fit max-w-full ${titleInteractionClassName}`} onClick={handleStepActivate}>\n <Typography\n size='extra-small'\n variant='medium'\n className={`ml-8 truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n appearance='custom'\n >\n {step?.description \|\| ''}\n </Typography>\n </div>\n ) : null}\n </div>\n </div>\n );\n };\n\n return (\n <div className={`w-full flex ${className}`} ref={stepsRef}>\n {leftMostStep > 0 ? (\n <div className={`flex ${appearance === 'parallel' ? 'flex-col' : ''}`}>\n {onClick ? (\n <Dropdown\n menu={{\n items: steps.slice(0, leftMostStep).map((step: TStep, index: number) => ({\n label: <div className='px-2 py-1'>{stepDetails(step, index, true)}</div>,\n key: index,\n })),\n }}\n trigger={['click']}\n >\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={leftTooltip}>\n <div className='min-w-max'>\n {leftMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n </Dropdown>\n ) : (\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={leftTooltip}>\n <div className='min-w-max'>\n {leftMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n )}\n <div className={`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${appearance === 'parallel' ? 'mt-2' : 'mt-[11px]'}`} />\n </div>\n ) : null}\n\n <div className='w-full flex flex-wrap gap-3 '>\n {steps?.map((step: TStep, index: number) => {\n if (leftMostStep <= index && index < rightMostStep) {\n return stepDetails(step, index);\n }\n return null;\n })}\n </div>\n\n {steps.length - rightMostStep > 0 ? (\n <div className='flex flex-col'>\n {onClick ? (\n <Dropdown\n menu={{\n items: steps.slice(rightMostStep, steps?.length).map((step: TStep, index: number) => ({\n label: <div className='px-2 py-1'>{stepDetails(step, index + rightMostStep, true)}</div>,\n key: index,\n })),\n }}\n trigger={['click']}\n >\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={rightTooltip}>\n <div className='min-w-max'>\n {steps.length - rightMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n </Dropdown>\n ) : (\n <Typography\n size='small'\n variant='medium'\n className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n appearance='subtitle'\n >\n <Tooltip title={rightTooltip}>\n <div className='min-w-max'>\n {steps.length - rightMostStep} More...\n </div>\n </Tooltip>\n </Typography>\n )}\n\n <div className={`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${appearance === 'parallel' ? 'mt-2' : 'hidden'}`} />\n </div>\n ) : null}\n </div>\n );\n};\n\nStepper.displayName = 'Stepper';\n\nexport default Stepper;\n\n\n\n"],"names":["Stepper","steps","currentStep","appearance","labelPosition","onClick","isStepClickable","className","showIndex","disableOneMore","isMainSideBarOpen","isAuthoringOpen","stepsRef","useRef","visibleStepCounts","setVisibleStepCounts","useState","leftMostStep","setLeftMostStep","rightMostStep","setRightMostStep","leftTooltip","setLeftTooltip","rightTooltip","setRightTooltip","getLabelDescriptionPosition","handleClientWidth","moreWidth","stepTitleWidth","stepWidth","count","index","useEffect","newRightTooltip","step","rightCount","mid","remainingStepsFromRight","leftCount","newLeftTooltip","useEventListener","stepDetails","hideLine","isStepBlocked","isNavigable","handleStepActivate","titleInteractionProps","event","titleInteractionClassName","jsx","jsxs","Tooltip","Typography","Lock","Fragment","CheckIcon","Dropdown"],"mappings":";;;;;;;;AAuEA,MAAMA,IAAU,CAAC;AAAA,EACf,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,gBAAAC,IAAiB;AAAA,EACjB,mBAAAC,IAAoB;AAAA,EACpB,iBAAAC,IAAkB;AACpB,MAAqB;AACnB,QAAMC,IAAWC,EAA8B,IAAI,GAC7C,CAACC,GAAmBC,CAAoB,IAAIC,EAAiB,CAAC,GAC9D,CAACC,GAAcC,CAAe,IAAIF,EAAiB,CAAC,GACpD,CAACG,GAAeC,CAAgB,IAAIJ,EAAiB,CAAC,GACtD,CAACK,GAAaC,CAAc,IAAIN,EAAiB,EAAE,GACnD,CAACO,GAAcC,CAAe,IAAIR,EAAiB,EAAE,GAErDS,IAA8B,MAC9BrB,MAAkB,SAASA,MAAkB,cACxC,aACEA,MAAkB,YAAYA,MAAkB,iBAClD,qBACED,MAAe,WACjB,aAEA,YAILuB,IAAoB,MAAM;AAC9B,eAAW,MAAM;AACf,MAAAX,EAAqB,CAAC;AACtB,YAAMY,IAAY,KACZC,IAAiB;AACvB,UAAIC,IAAY,GACZC,IAAQ;AACZ,eAASC,IAAQ,GAAGA,IAAQ9B,EAAM,WAC5BW,GAAU,SAAS,eAAeA,GAAU,SAAS,cAAciB,IAAYD,IAAiBD,IAD5DI;AAEtC,QAAAF,KAAaD,GACbE,IAAQC,IAAQ;AAKpB,MAAAhB,EAAqBe,CAAK,GACtBlB,GAAU,SAAS,eAAeA,GAAU,SAAS,cAAc,OACrEG,EAAqBd,GAAO,MAAM;AAAA,IAEtC,GAAG,GAAG;AAAA,EACR;AAEA,EAAA+B,EAAU,MAAM;AACd,IAAAN,EAAA;AAAA,EACF,GAAG,CAAChB,GAAmBT,GAAOC,CAAW,CAAC,GAE1C8B,EAAU,MAAM;AACd,eAAW,MAAM;AACf,MAAAN,EAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR,GAAG,CAACf,CAAe,CAAC,GAEpBqB,EAAU,MAAM;AACd,QAAIlB,IAAoB;AACtB,UAAIA,IAAoBZ,GAAa;AACnC,YAAI+B,IAAkBhC,GAClB,MAAMa,GAAmBb,GAAO,MAAM,GACtC,IAAI,CAACiC,MAASA,GAAM,KAAK,GACzB,KAAK,IAAI,GAETC,IAAarB;AACjB,QAAIL,KAAkB0B,MAAelC,EAAM,SAAS,MAClDkC,IAAalC,EAAM,QACnBgC,IAAkB,KAEpBf,EAAgB,CAAC,GACjBE,EAAiBe,CAAU,GAC3BX,EAAgBS,CAAe;AAAA,MACjC,OAAO;AACL,cAAMG,IAAM,KAAK,OAAOtB,IAAoB,KAAK,CAAC,GAC5CuB,IAA0BnC,IAAckC,IAAMnC,GAAO;AAC3D,YAAIkC,IAAajC,IAAckC,GAC3BE,IAAYpC,IAAc,KAAK,IAAIY,IAAoBsB,GAAK,CAAC,KAAKC,IAA0B,IAAIA,IAA0B,IAC1HE,IAAiBtC,GACjB,MAAM,GAAGqC,CAAS,GAClB,IAAI,CAACJ,MAASA,GAAM,KAAK,GACzB,KAAK,IAAI,GACTD,IAAkBhC,GAClB,MAAMkC,GAAYlC,GAAO,MAAM,GAC/B,IAAI,CAACiC,MAASA,GAAM,KAAK,GACzB,KAAK,IAAI;AAEb,QAAIzB,KAAkB6B,MAAc,MAClCA,IAAY,GACZC,IAAiB,KAGf9B,KAAkB0B,MAAelC,EAAM,SAAS,MAClDkC,IAAalC,EAAM,QACnBgC,IAAkB,KAEpBf,EAAgBoB,CAAS,GACzBlB,EAAiBe,CAAU,GAC3Bb,EAAeiB,CAAc,GAC7Bf,EAAgBS,CAAe;AAAA,MACjC;AAAA,EAEJ,GAAG,CAACnB,GAAmBH,GAAiBD,GAAmBT,GAAOC,CAAW,CAAC,GAE9EsC,EAAiB,UAAUd,CAAiB;AAE5C,QAAMe,IAAc,CAACP,GAAaH,GAAeW,IAAW,OAAU;AACpE,UAAMC,IAAgB,EAAQT,GAAM,YAAa,EAAQA,GAAM,eAAgB5B,IAAkB,CAACA,EAAgByB,GAAOG,CAAI,IAAI,KAC3HU,IAAc,EAAQvC,KAAY,CAACsC,GAEnCE,IAAqB,MAAM;AAC/B,MAAKD,KACLvC,IAAU0B,CAAK;AAAA,IACjB,GAGMe,IAAwBzC,IAC1B;AAAA,MACE,MAAM;AAAA,MACN,UAAUuC,IAAc,IAAI;AAAA,MAC5B,iBAAiB,CAACA;AAAA,MAClB,SAASC;AAAA,MACT,WAAW,CAACE,MAAyC;AACnD,SAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAA,GACNF,EAAA;AAAA,MAEJ;AAAA,IAAA,IAEF,CAAA,GAEEG,IAA4B3C,IAC9BuC,IACE,yIACA,uBACF;AAEJ,WACE,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,gBAAclB,MAAU7B,IAAc,SAAS;AAAA,QAC/C,WAAW,QAAQ6B,IAAQ9B,EAAM,SAAS,KAAKE,KAAc,aAAa,mBAAmB,EAAE;AAAA,QAE/F,UAAA,gBAAA+C,EAAC,OAAA,EAAI,WAAW,wBACd,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAW,QAAQzB,EAAA,CAA6B,IAAIrB,MAAkB,YAAYD,MAAe,WAAW,iBAAiB,EAAE,IAClI,UAAA;AAAA,YAAA,gBAAA+C;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGJ;AAAA,gBACJ,WAAW,GAAG1C,MAAkB,WAAW,gBAAgB,QAAQ,kBAAkB4C,CAAyB;AAAA,gBAE9G,UAAA;AAAA,kBAAA,gBAAAC,EAAC,SAAI,WAAW,QAAQ7C,MAAkB,eAAeA,MAAkB,iBAAiB,gBAAgB,EAAE,IAC5G,UAAA,gBAAA6C,EAACE,GAAA,EAAQ,OAAOR,KAAgBT,GAAM,uBAAuBA,GAAM,aACjE,UAAA,gBAAAgB;AAAA,oBAACE;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,SAAQ;AAAA,sBACR,WAAW,8BACTrB,KAAS7B,IAAc,2CAA2C,wCACpE;AAAA,sBACA,YAAW;AAAA,sBAEV,UAAA;AAAA,wBAAAM,IACC,gBAAAyC;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,WAAW,GACT9C,MAAe,aACX,sBACA,WACE4B,KAAS7B,IAAc,mBAAmB,kCAC5C,2DACN;AAAA,4BAEC,UAAAgC,GAAM,WACL,gBAAAe,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA,gBAAAA,EAACI,GAAA,EAAK,IAAI,EAAE,UAAU,GAAA,GAAM,GAC9B,IAEA,gBAAAJ,EAAAK,GAAA,EACG,UAAApD,IAAc6B,KAAS5B,MAAe,WACrC,gBAAA8C,EAACM,GAAA,EAAU,MAAM,IAAI,WAAU,6BAAA,CAA6B,IAE5D,gBAAAN;AAAA,8BAACG;AAAA,8BAAA;AAAA,gCACC,MAAM,GAAGjD,MAAe,aAAa,UAAU,aAAa;AAAA,gCAC5D,SAAQ;AAAA,gCACR,WAAU;AAAA,gCACV,YAAW;AAAA,gCAEV,UAAA4B,IAAQ;AAAA,8BAAA;AAAA,4BAAA,EACX,CAEJ;AAAA,0BAAA;AAAA,wBAAA,IAGF;AAAA,wBAEJ,gBAAAkB,EAAC,OAAA,EAAI,WAAW,YAAY7C,MAAkB,WAAW,SAAS,MAAM,IAAI2B,KAAS7B,IAAc,KAAK,qBAAqB,IAC1H,aAAM,MAAA,CACT;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAAA,GAEJ,EAAA,CACF;AAAA,kBAECE,MAAkB,YAAYD,MAAe,aAC5C,gBAAA8C;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAW,QACT7C,MAAkB,eAAeA,MAAkB,iBAAiB,gBAAgBD,MAAe,WAAW,SAAS,EACzH;AAAA,sBAEA,UAAA,gBAAA8C;AAAA,wBAACG;AAAA,wBAAA;AAAA,0BACC,MAAK;AAAA,0BACL,SAAQ;AAAA,0BACR,WAAW,YAAYrB,MAAU7B,IAAc,qCAAqC,wCAAwC;AAAA,0BAC5H,YAAW;AAAA,0BAEV,aAAM,eAAe;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACxB;AAAA,kBAAA,IAEA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEL6B,IAAQ9B,EAAM,UAAUE,MAAe,YAAYC,MAAkB,WAAW,IAAI,MAAM,CAACsC,IAC1F,gBAAAO;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,wCAAwC7C,MAAkB,YAAYD,MAAe,aAAa,SAAS,EAAE,IACtH4B,KAAS7B,KAAeC,MAAe,YAAYC,MAAkB,WAAW,IAAI,KAAK,mBAAmB,gBAC9G;AAAA,cAAA;AAAA,YAAA,IAEA;AAAA,UAAA,GACN;AAAA,UACCA,MAAkB,YAAYD,MAAe,WAC5C,gBAAA8C,EAAC,OAAA,EAAI,WAAW,oBAAoBD,CAAyB,IAAI,SAASH,GACxE,UAAA,gBAAAI;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAW,iBAAiBrB,MAAU7B,IAAc,qCAAqC,wCAAwC;AAAA,cACjI,YAAW;AAAA,cAEV,aAAM,eAAe;AAAA,YAAA;AAAA,UAAA,GAE1B,IACE;AAAA,QAAA,EAAA,CACN;AAAA,MAAA;AAAA,MAjGK6B;AAAA,IAAA;AAAA,EAoGX;AAEA,2BACG,OAAA,EAAI,WAAW,eAAexB,CAAS,IAAI,KAAKK,GAC9C,UAAA;AAAA,IAAAK,IAAe,sBACb,OAAA,EAAI,WAAW,QAAQd,MAAe,aAAa,aAAa,EAAE,IAChE,UAAA;AAAA,MAAAE,IACC,gBAAA4C;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,YACJ,OAAOvD,EAAM,MAAM,GAAGgB,CAAY,EAAE,IAAI,CAACiB,GAAaH,OAAmB;AAAA,cACvE,yBAAQ,OAAA,EAAI,WAAU,aAAa,UAAAU,EAAYP,GAAMH,GAAO,EAAI,EAAA,CAAE;AAAA,cAClE,KAAKA;AAAA,YAAA,EACL;AAAA,UAAA;AAAA,UAEJ,SAAS,CAAC,OAAO;AAAA,UAEjB,UAAA,gBAAAkB;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAW,QAAQnD,EAAM,SAASa,IAAoB,IAAI,mBAAmB,oBAAoB;AAAA,cACjG,YAAW;AAAA,cAEX,4BAACqC,GAAA,EAAQ,OAAO9B,GACd,UAAA,gBAAA6B,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,gBAAAjC;AAAA,gBAAa;AAAA,cAAA,EAAA,CAChB,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,IAGF,gBAAAgC;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAW,QAAQnD,EAAM,SAASa,IAAoB,IAAI,mBAAmB,oBAAoB;AAAA,UACjG,YAAW;AAAA,UAEX,4BAACqC,GAAA,EAAQ,OAAO9B,GACd,UAAA,gBAAA6B,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,YAAAjC;AAAA,YAAa;AAAA,UAAA,EAAA,CAChB,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,gBAAAgC,EAAC,SAAI,WAAW,+CAA+C9C,MAAe,aAAa,SAAS,WAAW,GAAA,CAAI;AAAA,IAAA,EAAA,CACrH,IACE;AAAA,IAEJ,gBAAA8C,EAAC,SAAI,WAAU,gCACZ,aAAO,IAAI,CAACf,GAAaH,MACpBd,KAAgBc,KAASA,IAAQZ,IAC5BsB,EAAYP,GAAMH,CAAK,IAEzB,IACR,EAAA,CACH;AAAA,IAEC9B,EAAM,SAASkB,IAAgB,IAC9B,gBAAA+B,EAAC,OAAA,EAAI,WAAU,iBACZ,UAAA;AAAA,MAAA7C,IACC,gBAAA4C;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,YACJ,OAAOvD,EAAM,MAAMkB,GAAelB,GAAO,MAAM,EAAE,IAAI,CAACiC,GAAaH,OAAmB;AAAA,cACpF,OAAO,gBAAAkB,EAAC,OAAA,EAAI,WAAU,aAAa,YAAYf,GAAMH,IAAQZ,GAAe,EAAI,EAAA,CAAE;AAAA,cAClF,KAAKY;AAAA,YAAA,EACL;AAAA,UAAA;AAAA,UAEJ,SAAS,CAAC,OAAO;AAAA,UAEjB,UAAA,gBAAAkB;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAW,QAAQnD,EAAM,SAASkB,IAAgB,IAAI,mBAAmB,oBAAoB;AAAA,cAC7F,YAAW;AAAA,cAEX,4BAACgC,GAAA,EAAQ,OAAO5B,GACd,UAAA,gBAAA2B,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,gBAAAjD,EAAM,SAASkB;AAAA,gBAAc;AAAA,cAAA,EAAA,CAChC,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,IAGF,gBAAA8B;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAW,QAAQnD,EAAM,SAASkB,IAAgB,IAAI,mBAAmB,oBAAoB;AAAA,UAC7F,YAAW;AAAA,UAEX,4BAACgC,GAAA,EAAQ,OAAO5B,GACd,UAAA,gBAAA2B,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,YAAAjD,EAAM,SAASkB;AAAA,YAAc;AAAA,UAAA,EAAA,CAChC,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAIJ,gBAAA8B,EAAC,SAAI,WAAW,+CAA+C9C,MAAe,aAAa,SAAS,QAAQ,GAAA,CAAI;AAAA,IAAA,EAAA,CAClH,IACE;AAAA,EAAA,GACN;AAEJ;AAEAH,EAAQ,cAAc;"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.14.50",
+  "version": "0.14.52",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",