@flipdish/portal-library 7.7.0 → 7.9.0

package/dist/components/atoms/BreadCrumbs/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Breadcrumbs"),a=require("@mui/material/styles"),i=require("@mui/material/useMediaQuery"),l=require("../Link/index.cjs.js"),n=require("../../../icons/ArrowLeft02/index.cjs.js"),s=require("../../../themes/typography.cjs.js");const o=a.styled(r)((({theme:e})=>({"& .MuiBreadcrumbs-separator":{color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(1),marginRight:e.spacing(1)}}))),u=a.styled("button")((({theme:e})=>({display:"inline-flex",alignItems:"center",background:"none",border:"none",color:e.palette.semantic.text["text-weak"],cursor:"pointer",padding:e.spacing(.5),borderRadius:e.radius?.["radius-4"]||"4px",transition:"background-color 0.2s ease-in-out",fontFamily:s.typography.b1Weak.fontFamily,fontSize:s.typography.b1Weak.fontSize,lineHeight:s.typography.b1Weak.lineHeight,fontWeight:s.typography.b1Weak.fontWeight,letterSpacing:s.typography.b1Weak.letterSpacing,"&:hover":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:focus-visible":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}}))),p=a.styled("span")((({theme:e})=>({fontSize:s.typography.b1Weak.fontSize,lineHeight:s.typography.b1Weak.lineHeight,color:e.palette.semantic.text["text-weak"],fontWeight:s.typography.b1Weak.fontWeight,fontFamily:s.typography.b1Weak.fontFamily,letterSpacing:s.typography.b1Weak.letterSpacing}))),c=t.memo((({items:r,type:s="default",className:c,"data-testid":h,ariaLabel:d,ariaLabelEllipsis:b})=>{const[g,f]=t.useState(!1),y=a.useTheme(),m=i(y.breakpoints.down("tablet"));if(!r?.length)return null;const k=[];if(("collapsed"===s||"default"===s&&m)&&r.length>2&&!g){const t=r[0],a=r[r.length-1];if(!t||!a)return null;k.push(e.jsx(l.Link,{fdKey:`breadcrumb-${t.label}`,href:t.href,iconLeft:e.jsx(n,{size:"sm"}),size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:t.label},`first-${t.label}-${t.href||""}`)),k.push(e.jsx(u,{"aria-label":b??void 0,onClick:()=>f(!0),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),f(!0))},type:"button",children:"..."},"ellipsis")),k.push(e.jsx(p,{"aria-current":"page",children:a.label},`current-${a.label}-${a.href||""}`))}else{const t=r.map(((t,a)=>{const i=0===a;return a===r.length-1?e.jsx(p,{"aria-current":"page",children:t.label},`current-${t.label}-${t.href||""}`):i?e.jsx(l.Link,{fdKey:`breadcrumb-${t.label}`,href:t.href,iconLeft:e.jsx(n,{size:"sm"}),size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:t.label},`first-${t.label}-${t.href||""}`):e.jsx(l.Link,{fdKey:`breadcrumb-${t.label}`,href:t.href,size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:t.label},`middle-${t.label}-${t.href||""}`)}));k.push(...t)}return e.jsx(o,{"aria-label":d??void 0,className:c,"data-testid":h,separator:"/",children:k})}));c.displayName="BreadCrumbs",module.exports=c;
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/BreadCrumbs/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/BreadCrumbs/index.tsx"],"sourcesContent":["import { memo, useState } from 'react';\n\nimport BreadcrumbsMUI from '@mui/material/Breadcrumbs';\nimport { styled, useTheme } from '@mui/material/styles';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Link from '@fd/components/atoms/Link';\nimport ArrowLeft02Icon from '@fd/icons/ArrowLeft02';\nimport { typography } from '@fd/themes/typography';\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\nexport type BreadCrumbsType = 'collapsed' | 'default';\n\nexport interface BreadCrumbsProps {\n  items: BreadcrumbItem[];\n  type?: BreadCrumbsType;\n  className?: string;\n  'data-testid'?: string;\n  ariaLabel?: string;\n  ariaLabelEllipsis?: string;\n}\n\nconst StyledBreadcrumbs = styled(BreadcrumbsMUI)(({ theme }) => ({\n  '& .MuiBreadcrumbs-separator': {\n    color: theme.palette.semantic.text['text-weak'],\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1),\n  },\n}));\n\nconst StyledEllipsisButton = styled('button')(({ theme }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  background: 'none',\n  border: 'none',\n  color: theme.palette.semantic.text['text-weak'],\n  cursor: 'pointer',\n  padding: theme.spacing(0.5),\n  borderRadius: theme.radius?.['radius-4'] || '4px',\n  transition: 'background-color 0.2s ease-in-out',\n  fontFamily: typography.b1Weak.fontFamily,\n  fontSize: typography.b1Weak.fontSize,\n  lineHeight: typography.b1Weak.lineHeight,\n  fontWeight: typography.b1Weak.fontWeight,\n  letterSpacing: typography.b1Weak.letterSpacing,\n\n  '&:hover': {\n    backgroundColor: theme.palette.semantic.fill['fill-hover'],\n  },\n\n  '&:focus-visible': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n  },\n}));\n\nconst StyledCurrentPage = styled('span')(({ theme }) => ({\n  fontSize: typography.b1Weak.fontSize,\n  lineHeight: typography.b1Weak.lineHeight,\n  color: theme.palette.semantic.text['text-weak'],\n  fontWeight: typography.b1Weak.fontWeight,\n  fontFamily: typography.b1Weak.fontFamily,\n  letterSpacing: typography.b1Weak.letterSpacing,\n}));\n\nconst BreadCrumbs = memo(\n  ({\n    items,\n    type = 'default',\n    className,\n    'data-testid': dataTestId,\n    ariaLabel,\n    ariaLabelEllipsis,\n  }: BreadCrumbsProps) => {\n    const [isExpanded, setIsExpanded] = useState(false);\n    const theme = useTheme();\n    const isSmallScreen = useMediaQuery(theme.breakpoints.down('tablet'));\n\n    if (!items?.length) {\n      return null;\n    }\n\n    const shouldCollapse = (type === 'collapsed' || (type === 'default' && isSmallScreen)) && items.length > 2 && !isExpanded;\n\n    // Build breadcrumb items array\n    const breadcrumbItems: React.ReactNode[] = [];\n\n    if (shouldCollapse) {\n      const firstItem = items[0];\n      const lastItem = items[items.length - 1];\n      if (!firstItem || !lastItem) {\n        return null;\n      }\n      // First item\n      breadcrumbItems.push(\n        <Link\n          key={`first-${firstItem.label}-${firstItem.href || ''}`}\n          fdKey={`breadcrumb-${firstItem.label}`}\n          href={firstItem.href}\n          iconLeft={<ArrowLeft02Icon size=\"sm\" />}\n          size=\"body\"\n          tone=\"Neutral Weak\"\n          underline={false}\n          weight=\"regular\"\n        >\n          {firstItem.label}\n        </Link>\n      );\n\n      // Ellipsis\n      breadcrumbItems.push(\n        <StyledEllipsisButton\n          key=\"ellipsis\"\n          aria-label={ariaLabelEllipsis ?? undefined}\n          onClick={() => setIsExpanded(true)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              setIsExpanded(true);\n            }\n          }}\n          type=\"button\"\n        >\n          ...\n        </StyledEllipsisButton>\n      );\n\n      // Last item\n      breadcrumbItems.push(\n        <StyledCurrentPage\n          key={`current-${lastItem.label}-${lastItem.href || ''}`}\n          aria-current=\"page\"\n        >\n          {lastItem.label}\n        </StyledCurrentPage>\n      );\n    } else {\n      // Default/expanded mode: show all items\n      const allItems = items.map((item, index) => {\n        const isFirst = index === 0;\n        const isLast = index === items.length - 1;\n\n        if (isLast) {\n          return (\n            <StyledCurrentPage\n              key={`current-${item.label}-${item.href || ''}`}\n              aria-current=\"page\"\n            >\n              {item.label}\n            </StyledCurrentPage>\n          );\n        }\n        if (isFirst) {\n          return (\n            <Link\n              key={`first-${item.label}-${item.href || ''}`}\n              fdKey={`breadcrumb-${item.label}`}\n              href={item.href}\n              iconLeft={<ArrowLeft02Icon size=\"sm\" />}\n              size=\"body\"\n              tone=\"Neutral Weak\"\n              underline={false}\n              weight=\"regular\"\n            >\n              {item.label}\n            </Link>\n          );\n        }\n        return (\n          <Link\n            key={`middle-${item.label}-${item.href || ''}`}\n            fdKey={`breadcrumb-${item.label}`}\n            href={item.href}\n            size=\"body\"\n            tone=\"Neutral Weak\"\n            underline={false}\n            weight=\"regular\"\n          >\n            {item.label}\n          </Link>\n        );\n      });\n      breadcrumbItems.push(...allItems);\n    }\n\n    return (\n      <StyledBreadcrumbs\n        aria-label={ariaLabel ?? undefined}\n        className={className}\n        data-testid={dataTestId}\n        separator=\"/\"\n      >\n        {breadcrumbItems}\n      </StyledBreadcrumbs>\n    );\n  },\n);\n\nBreadCrumbs.displayName = 'BreadCrumbs';\n\nexport default BreadCrumbs;"],"names":["StyledBreadcrumbs","styled","BreadcrumbsMUI","theme","color","palette","semantic","text","marginLeft","spacing","marginRight","StyledEllipsisButton","display","alignItems","background","border","cursor","padding","borderRadius","radius","transition","fontFamily","typography","b1Weak","fontSize","lineHeight","fontWeight","letterSpacing","backgroundColor","fill","outline","stroke","outlineOffset","StyledCurrentPage","BreadCrumbs","memo","items","type","className","dataTestId","ariaLabel","ariaLabelEllipsis","isExpanded","setIsExpanded","useState","useTheme","isSmallScreen","useMediaQuery","breakpoints","down","length","breadcrumbItems","firstItem","lastItem","push","_jsx","Link","fdKey","label","href","iconLeft","ArrowLeft02Icon","size","tone","underline","weight","undefined","onClick","onKeyDown","e","key","preventDefault","children","allItems","map","item","index","isFirst","separator","displayName"],"mappings":"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"}

package/dist/components/atoms/BreadCrumbs/index.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+type BreadCrumbsType = 'collapsed' | 'default';
+interface BreadCrumbsProps {
+    items: BreadcrumbItem[];
+    type?: BreadCrumbsType;
+    className?: string;
+    'data-testid'?: string;
+    ariaLabel?: string;
+    ariaLabelEllipsis?: string;
+}
+declare const BreadCrumbs: react.MemoExoticComponent<({ items, type, className, "data-testid": dataTestId, ariaLabel, ariaLabelEllipsis, }: BreadCrumbsProps) => react_jsx_runtime.JSX.Element | null>;
+
+export { BreadCrumbs as default };
+export type { BreadCrumbsProps, BreadCrumbsType, BreadcrumbItem };

package/dist/components/atoms/BreadCrumbs/index.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{memo as t,useState as r}from"react";import a from"@mui/material/Breadcrumbs";import{styled as i,useTheme as l}from"@mui/material/styles";import n from"@mui/material/useMediaQuery";import{Link as o}from"../Link/index.js";import s from"../../../icons/ArrowLeft02/index.js";import{typography as c}from"../../../themes/typography.js";const f=i(a)((({theme:e})=>({"& .MuiBreadcrumbs-separator":{color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(1),marginRight:e.spacing(1)}}))),u=i("button")((({theme:e})=>({display:"inline-flex",alignItems:"center",background:"none",border:"none",color:e.palette.semantic.text["text-weak"],cursor:"pointer",padding:e.spacing(.5),borderRadius:e.radius?.["radius-4"]||"4px",transition:"background-color 0.2s ease-in-out",fontFamily:c.b1Weak.fontFamily,fontSize:c.b1Weak.fontSize,lineHeight:c.b1Weak.lineHeight,fontWeight:c.b1Weak.fontWeight,letterSpacing:c.b1Weak.letterSpacing,"&:hover":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:focus-visible":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}}))),m=i("span")((({theme:e})=>({fontSize:c.b1Weak.fontSize,lineHeight:c.b1Weak.lineHeight,color:e.palette.semantic.text["text-weak"],fontWeight:c.b1Weak.fontWeight,fontFamily:c.b1Weak.fontFamily,letterSpacing:c.b1Weak.letterSpacing}))),d=t((({items:t,type:a="default",className:i,"data-testid":c,ariaLabel:d,ariaLabelEllipsis:b})=>{const[p,h]=r(!1),g=l(),k=n(g.breakpoints.down("tablet"));if(!t?.length)return null;const y=[];if(("collapsed"===a||"default"===a&&k)&&t.length>2&&!p){const r=t[0],a=t[t.length-1];if(!r||!a)return null;y.push(e(o,{fdKey:`breadcrumb-${r.label}`,href:r.href,iconLeft:e(s,{size:"sm"}),size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:r.label},`first-${r.label}-${r.href||""}`)),y.push(e(u,{"aria-label":b??void 0,onClick:()=>h(!0),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),h(!0))},type:"button",children:"..."},"ellipsis")),y.push(e(m,{"aria-current":"page",children:a.label},`current-${a.label}-${a.href||""}`))}else{const r=t.map(((r,a)=>{const i=0===a;return a===t.length-1?e(m,{"aria-current":"page",children:r.label},`current-${r.label}-${r.href||""}`):i?e(o,{fdKey:`breadcrumb-${r.label}`,href:r.href,iconLeft:e(s,{size:"sm"}),size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:r.label},`first-${r.label}-${r.href||""}`):e(o,{fdKey:`breadcrumb-${r.label}`,href:r.href,size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:r.label},`middle-${r.label}-${r.href||""}`)}));y.push(...r)}return e(f,{"aria-label":d??void 0,className:i,"data-testid":c,separator:"/",children:y})}));d.displayName="BreadCrumbs";export{d as default};
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/BreadCrumbs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/BreadCrumbs/index.tsx"],"sourcesContent":["import { memo, useState } from 'react';\n\nimport BreadcrumbsMUI from '@mui/material/Breadcrumbs';\nimport { styled, useTheme } from '@mui/material/styles';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Link from '@fd/components/atoms/Link';\nimport ArrowLeft02Icon from '@fd/icons/ArrowLeft02';\nimport { typography } from '@fd/themes/typography';\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\nexport type BreadCrumbsType = 'collapsed' | 'default';\n\nexport interface BreadCrumbsProps {\n  items: BreadcrumbItem[];\n  type?: BreadCrumbsType;\n  className?: string;\n  'data-testid'?: string;\n  ariaLabel?: string;\n  ariaLabelEllipsis?: string;\n}\n\nconst StyledBreadcrumbs = styled(BreadcrumbsMUI)(({ theme }) => ({\n  '& .MuiBreadcrumbs-separator': {\n    color: theme.palette.semantic.text['text-weak'],\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1),\n  },\n}));\n\nconst StyledEllipsisButton = styled('button')(({ theme }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  background: 'none',\n  border: 'none',\n  color: theme.palette.semantic.text['text-weak'],\n  cursor: 'pointer',\n  padding: theme.spacing(0.5),\n  borderRadius: theme.radius?.['radius-4'] || '4px',\n  transition: 'background-color 0.2s ease-in-out',\n  fontFamily: typography.b1Weak.fontFamily,\n  fontSize: typography.b1Weak.fontSize,\n  lineHeight: typography.b1Weak.lineHeight,\n  fontWeight: typography.b1Weak.fontWeight,\n  letterSpacing: typography.b1Weak.letterSpacing,\n\n  '&:hover': {\n    backgroundColor: theme.palette.semantic.fill['fill-hover'],\n  },\n\n  '&:focus-visible': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n  },\n}));\n\nconst StyledCurrentPage = styled('span')(({ theme }) => ({\n  fontSize: typography.b1Weak.fontSize,\n  lineHeight: typography.b1Weak.lineHeight,\n  color: theme.palette.semantic.text['text-weak'],\n  fontWeight: typography.b1Weak.fontWeight,\n  fontFamily: typography.b1Weak.fontFamily,\n  letterSpacing: typography.b1Weak.letterSpacing,\n}));\n\nconst BreadCrumbs = memo(\n  ({\n    items,\n    type = 'default',\n    className,\n    'data-testid': dataTestId,\n    ariaLabel,\n    ariaLabelEllipsis,\n  }: BreadCrumbsProps) => {\n    const [isExpanded, setIsExpanded] = useState(false);\n    const theme = useTheme();\n    const isSmallScreen = useMediaQuery(theme.breakpoints.down('tablet'));\n\n    if (!items?.length) {\n      return null;\n    }\n\n    const shouldCollapse = (type === 'collapsed' || (type === 'default' && isSmallScreen)) && items.length > 2 && !isExpanded;\n\n    // Build breadcrumb items array\n    const breadcrumbItems: React.ReactNode[] = [];\n\n    if (shouldCollapse) {\n      const firstItem = items[0];\n      const lastItem = items[items.length - 1];\n      if (!firstItem || !lastItem) {\n        return null;\n      }\n      // First item\n      breadcrumbItems.push(\n        <Link\n          key={`first-${firstItem.label}-${firstItem.href || ''}`}\n          fdKey={`breadcrumb-${firstItem.label}`}\n          href={firstItem.href}\n          iconLeft={<ArrowLeft02Icon size=\"sm\" />}\n          size=\"body\"\n          tone=\"Neutral Weak\"\n          underline={false}\n          weight=\"regular\"\n        >\n          {firstItem.label}\n        </Link>\n      );\n\n      // Ellipsis\n      breadcrumbItems.push(\n        <StyledEllipsisButton\n          key=\"ellipsis\"\n          aria-label={ariaLabelEllipsis ?? undefined}\n          onClick={() => setIsExpanded(true)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              setIsExpanded(true);\n            }\n          }}\n          type=\"button\"\n        >\n          ...\n        </StyledEllipsisButton>\n      );\n\n      // Last item\n      breadcrumbItems.push(\n        <StyledCurrentPage\n          key={`current-${lastItem.label}-${lastItem.href || ''}`}\n          aria-current=\"page\"\n        >\n          {lastItem.label}\n        </StyledCurrentPage>\n      );\n    } else {\n      // Default/expanded mode: show all items\n      const allItems = items.map((item, index) => {\n        const isFirst = index === 0;\n        const isLast = index === items.length - 1;\n\n        if (isLast) {\n          return (\n            <StyledCurrentPage\n              key={`current-${item.label}-${item.href || ''}`}\n              aria-current=\"page\"\n            >\n              {item.label}\n            </StyledCurrentPage>\n          );\n        }\n        if (isFirst) {\n          return (\n            <Link\n              key={`first-${item.label}-${item.href || ''}`}\n              fdKey={`breadcrumb-${item.label}`}\n              href={item.href}\n              iconLeft={<ArrowLeft02Icon size=\"sm\" />}\n              size=\"body\"\n              tone=\"Neutral Weak\"\n              underline={false}\n              weight=\"regular\"\n            >\n              {item.label}\n            </Link>\n          );\n        }\n        return (\n          <Link\n            key={`middle-${item.label}-${item.href || ''}`}\n            fdKey={`breadcrumb-${item.label}`}\n            href={item.href}\n            size=\"body\"\n            tone=\"Neutral Weak\"\n            underline={false}\n            weight=\"regular\"\n          >\n            {item.label}\n          </Link>\n        );\n      });\n      breadcrumbItems.push(...allItems);\n    }\n\n    return (\n      <StyledBreadcrumbs\n        aria-label={ariaLabel ?? undefined}\n        className={className}\n        data-testid={dataTestId}\n        separator=\"/\"\n      >\n        {breadcrumbItems}\n      </StyledBreadcrumbs>\n    );\n  },\n);\n\nBreadCrumbs.displayName = 'BreadCrumbs';\n\nexport default BreadCrumbs;"],"names":["StyledBreadcrumbs","styled","BreadcrumbsMUI","theme","color","palette","semantic","text","marginLeft","spacing","marginRight","StyledEllipsisButton","display","alignItems","background","border","cursor","padding","borderRadius","radius","transition","fontFamily","typography","b1Weak","fontSize","lineHeight","fontWeight","letterSpacing","backgroundColor","fill","outline","stroke","outlineOffset","StyledCurrentPage","BreadCrumbs","memo","items","type","className","dataTestId","ariaLabel","ariaLabelEllipsis","isExpanded","setIsExpanded","useState","useTheme","isSmallScreen","useMediaQuery","breakpoints","down","length","breadcrumbItems","firstItem","lastItem","push","_jsx","Link","fdKey","label","href","iconLeft","ArrowLeft02Icon","size","tone","underline","weight","undefined","onClick","onKeyDown","e","key","preventDefault","children","allItems","map","item","index","isFirst","separator","displayName"],"mappings":"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"}

package/dist/components/molecules/CheckboxGroup/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/Box"),a=require("@mui/material/FormControl"),t=require("@mui/material/FormGroup"),l=require("@mui/material/FormHelperText"),s=require("@mui/material/FormLabel"),n=require("@mui/material/styles"),d=require("../../atoms/Checkbox/index.cjs.js"),c=require("../../../icons/CancelCircle/index.cjs.js");const o=n.styled(a)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),u=n.styled(t)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2)}))),m=({fdKey:a,options:t,value:n,size:m="medium",label:x,hintText:p,errorText:h,valid:j=!0,required:f=!1,onChange:q})=>{const[b,g]=r.useState([]),y=n??b,C=e=>{const{name:r,checked:i}=e.target,a=i?[...y,r]:y.filter((e=>e!==r));void 0===n&&g(a),q&&q(e,a)},v=!j&&!!h;return e.jsxs(o,{"data-fd":a,children:[e.jsxs(i,{children:[e.jsx(s,{"data-fd":`${a}-label`,required:f,children:x}),p&&e.jsx(l,{"data-fd":`${a}-hint`,children:p})]}),v&&e.jsxs(l,{error:!0,children:[e.jsx(c,{}),h]}),e.jsx(u,{"data-fd":`${a}-checkboxes`,children:t.map((r=>{const i=y.includes(r.name);return e.jsx(d,{checked:i,disabled:r.disabled,fdKey:`${a}-${r.name}`,label:r.label,name:r.name,onChange:C,size:m,valid:j},r.name)}))})]})};exports.CheckboxGroup=m,exports.default=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),n=require("@mui/material/FormControl"),r=require("@mui/material/FormGroup"),o=require("@mui/material/FormHelperText"),s=require("@mui/material/FormLabel"),a=require("@mui/material/styles"),l=require("../../atoms/Checkbox/index.cjs.js"),c=require("../../../icons/CancelCircle/index.cjs.js");const d=a.styled(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),p=a.styled(r)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),overflow:"visible"}))),u=a.styled(i)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingLeft:e.spacing(5.75),paddingTop:e.spacing(2),position:"relative",overflow:"visible","&::before":{content:'""',position:"absolute",left:e.spacing(1.75),top:e.spacing(2),bottom:0,width:"4px",backgroundColor:e.palette.semantic.stroke["stroke-weak"],zIndex:0}}))),m=({fdKey:n,options:r,value:a,size:m="medium",label:f,hintText:h,errorText:x,valid:g=!0,required:b=!1,onChange:j})=>{const[v,k]=t.useState([]),q=a??v,y=e=>{const t=[];return e.forEach((e=>{t.push(e.name),e.options&&t.push(...y(e.options))})),t},C=(e,t)=>{for(const i of e){if(i.name===t)return i;if(i.options){const e=C(i.options,t);if(e)return e}}},w=e=>e.options?y(e.options).filter((t=>{const i=C(e.options||[],t);return!i?.disabled})):[],T=e=>{const t=w(e);return 0!==t.length&&t.every((e=>q.includes(e)))},$=e=>{const t=e.options&&e.options.length>0,i=q.includes(e.name);if(!t)return{checked:i,indeterminate:!1};const n=T(e),r=(e=>{const t=w(e);if(0===t.length)return!1;const i=t.filter((e=>q.includes(e))).length;return i>0&&i<t.length})(e);return{checked:n,indeterminate:r&&!n}},F=e=>{const{name:t}=e.target,i=C(r,t);if(!i)return;let n;if(i.options&&i.options.length>0){if(T(i)){const e=(o=i).options?y(o.options):[];n=q.filter((t=>!e.includes(t)))}else{const e=w(i);n=[...new Set([...q,...e])]}n=n.filter((e=>e!==i.name))}else{const{checked:i}=e.target;n=i?[...q,t]:q.filter((e=>e!==t))}var o;void 0===a&&k(n),j&&j(e,n)},z=t=>t.map((t=>{const{checked:r,indeterminate:o}=$(t),s=t.options&&t.options.length>0;return e.jsxs(i,{children:[e.jsx(l,{checked:r,disabled:t.disabled,fdKey:`${n}-${t.name}`,indeterminate:o,label:t.label,name:t.name,onChange:F,size:m,valid:g}),s&&e.jsx(u,{children:z(t.options??[])})]},t.name)})),D=!g&&!!x;return e.jsxs(d,{"data-fd":n,children:[e.jsxs(i,{children:[e.jsx(s,{"data-fd":`${n}-label`,required:b,children:f}),h&&e.jsx(o,{"data-fd":`${n}-hint`,children:h})]}),D&&e.jsxs(o,{error:!0,children:[e.jsx(c,{}),x]}),e.jsx(p,{"data-fd":`${n}-checkboxes`,children:z(r)})]})};exports.CheckboxGroup=m,exports.default=m;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/CheckboxGroup/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nexport interface CheckboxOption {\n  name: string;\n  label: string;\n  disabled?: boolean;\n}\n\ninterface CheckboxGroupProps {\n  fdKey: string;\n  options: CheckboxOption[];\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  size?: 'medium' | 'small';\n  hintText?: string;\n  errorText?: string;\n  valid?: boolean;\n  required?: boolean;\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst StyledFormControl = styled(MuiFormControl)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\nconst StyledFormGroup = styled(MuiFormGroup)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n}));\n\nexport const CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName, checked } = event.target;\n\n    const newValue = checked\n      ? [...resolvedValue, optionName]\n      : resolvedValue.filter((name) => name !== optionName);\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <StyledFormControl data-fd={fdKey}>\n      <Box>\n        <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n          {label}\n        </MuiFormLabel>\n\n        {hintText && <MuiFormHelperText data-fd={`${fdKey}-hint`}>{hintText}</MuiFormHelperText>}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledFormGroup data-fd={`${fdKey}-checkboxes`}>\n        {options.map((option) => {\n          const isChecked = resolvedValue.includes(option.name);\n\n          return (\n            <Checkbox\n              key={option.name}\n              checked={isChecked}\n              disabled={option.disabled}\n              fdKey={`${fdKey}-${option.name}`}\n              label={option.label}\n              name={option.name}\n              onChange={handleChange}\n              size={size}\n              valid={valid}\n            />\n          );\n        })}\n      </StyledFormGroup>\n    </StyledFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["StyledFormControl","styled","MuiFormControl","theme","display","flexDirection","gap","spacing","StyledFormGroup","MuiFormGroup","paddingTop","CheckboxGroup","fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","handleChange","event","name","optionName","checked","target","newValue","filter","undefined","isError","_jsxs","children","Box","_jsx","MuiFormLabel","MuiFormHelperText","error","CancelCircleIcon","map","option","isChecked","includes","Checkbox","disabled"],"mappings":"2bAmCA,MAAMA,EAAoBC,EAAAA,OAAOC,EAAPD,EAAuB,EAAGE,YAAO,CACzDC,QAAS,OACTC,cAAe,SACfC,IAAKH,EAAMI,QAAQ,QAGfC,EAAkBP,EAAAA,OAAOQ,EAAPR,EAAqB,EAAGE,YAAO,CACrDC,QAAS,OACTC,cAAe,SACfC,IAAKH,EAAMI,QAAQ,GACnBG,WAAYP,EAAMI,QAAQ,OAGfI,EAAgB,EAC3BC,QACAC,UACAC,QACAC,OAAO,SACPC,QACAC,WACAC,YACAC,SAAQ,EACRC,YAAW,EACXC,eAEA,MAAOC,EAAeC,GAAoBC,EAAAA,SAAmB,IAEvDC,EAAgBX,GAASQ,EAEzBI,EAAgBC,IACpB,MAAQC,KAAMC,EAAUC,QAAEA,GAAYH,EAAMI,OAEtCC,EAAWF,EACb,IAAIL,EAAeI,GACnBJ,EAAcQ,QAAQL,GAASA,IAASC,SAG9BK,IAAVpB,GACFS,EAAiBS,GAGfX,GACFA,EAASM,EAAOK,IAIdG,GAAWhB,KAAWD,EAE5B,OACEkB,EAAAA,KAACpC,EAAiB,CAAA,UAAUY,EAAKyB,SAAA,CAC/BD,OAACE,EAAG,CAAAD,SAAA,CACFE,EAAAA,IAACC,EAAY,CAAA,UAAU,GAAG5B,UAAeQ,SAAUA,EAAQiB,SACxDrB,IAGFC,GAAYsB,EAAAA,IAACE,EAAiB,CAAA,UAAU,GAAG7B,SAAYyB,SAAGpB,OAG5DkB,GACCC,EAAAA,KAACK,EAAiB,CAACC,OAAK,EAAAL,SAAA,CACtBE,EAAAA,IAACI,EAAgB,CAAA,GAEhBzB,KAILqB,EAAAA,IAAC/B,EAAe,CAAA,UAAU,GAAGI,eAAkByB,SAC5CxB,EAAQ+B,KAAKC,IACZ,MAAMC,EAAYrB,EAAcsB,SAASF,EAAOjB,MAEhD,OACEW,EAAAA,IAACS,EAAQ,CAEPlB,QAASgB,EACTG,SAAUJ,EAAOI,SACjBrC,MAAO,GAAGA,KAASiC,EAAOjB,OAC1BZ,MAAO6B,EAAO7B,MACdY,KAAMiB,EAAOjB,KACbP,SAAUK,EACVX,KAAMA,EACNI,MAAOA,GARF0B,EAAOjB"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\n/**\n * Represents a checkbox option in the CheckboxGroup.\n * Supports hierarchical nesting through the `options` property.\n */\nexport interface CheckboxOption {\n  /** Unique identifier for the option. */\n  name: string;\n  /** Display label for the checkbox. */\n  label: string;\n  /** Whether the checkbox is disabled. */\n  disabled?: boolean;\n  /** Nested child options, creating a hierarchical structure. */\n  options?: CheckboxOption[];\n}\n\n/**\n * Props for the CheckboxGroup component.\n * Supports hierarchical checkbox groups with parent-child relationships.\n * Parent checkboxes automatically reflect the selection state of their children,\n * showing indeterminate state when some (but not all) children are selected.\n */\ninterface CheckboxGroupProps {\n  /** Unique identifier forwarded to the root element as `data-fd` for testing and identification. */\n  fdKey: string;\n  /** Array of checkbox options. Supports nested options for hierarchical structures. */\n  options: CheckboxOption[];\n  /** Label displayed above the checkbox group. */\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  /** Size of the checkboxes. */\n  size?: 'medium' | 'small';\n  /** Helper text displayed below the label. */\n  hintText?: string;\n  /** Error message displayed when validation fails. */\n  errorText?: string;\n  /** Whether the input is valid. When false and errorText is provided, error styling is applied. */\n  valid?: boolean;\n  /** Whether the field is required. Adds a required indicator to the label. */\n  required?: boolean;\n  /** Called when the selection changes. Receives the change event and the updated array of selected option names. */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst StyledFormControl = styled(MuiFormControl)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\nconst StyledFormGroup = styled(MuiFormGroup)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  overflow: 'visible',\n}));\n\nconst StyledChildrenContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingLeft: theme.spacing(5.75),\n  paddingTop: theme.spacing(2),\n  position: 'relative',\n  overflow: 'visible',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    left: theme.spacing(1.75),\n    top: theme.spacing(2),\n    bottom: 0,\n    width: '4px',\n    backgroundColor: theme.palette.semantic.stroke['stroke-weak'],\n    zIndex: 0,\n  },\n}));\n\n/**\n * A hierarchical checkbox group component that supports nested options and parent-child relationships.\n * When a parent option is selected, all enabled child options are automatically selected.\n * Parent checkboxes show an indeterminate state when some (but not all) children are selected.\n * Supports both controlled and uncontrolled modes.\n *\n * @param props - The component props\n * @returns The rendered CheckboxGroup component\n */\nexport const CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  // Flatten all option names (including children) for easy lookup\n  const getAllOptionNames = (opts: CheckboxOption[]): string[] => {\n    const names: string[] = [];\n    opts.forEach((opt) => {\n      names.push(opt.name);\n      if (opt.options) {\n        names.push(...getAllOptionNames(opt.options));\n      }\n    });\n    return names;\n  };\n\n  // Get all child option names for a given option (including disabled)\n  const getChildOptionNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options);\n  };\n\n  // Helper to find an option by name in the hierarchy\n  const findOption = (opts: CheckboxOption[], targetName: string): CheckboxOption | undefined => {\n    for (const opt of opts) {\n      if (opt.name === targetName) return opt;\n      if (opt.options) {\n        const found = findOption(opt.options, targetName);\n        if (found) return found;\n      }\n    }\n    return undefined;\n  };\n\n  // Get all enabled child names for a given option\n  const getEnabledChildNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options).filter((childName) => {\n      const childOption = findOption(option.options || [], childName);\n      return !childOption?.disabled;\n    });\n  };\n\n  // Check if all enabled children of an option are selected\n  const areAllChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    return enabledChildNames.every((name) => resolvedValue.includes(name));\n  };\n\n  // Check if some (but not all) enabled children of an option are selected\n  const areSomeChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    const selectedCount = enabledChildNames.filter((name) => resolvedValue.includes(name)).length;\n    return selectedCount > 0 && selectedCount < enabledChildNames.length;\n  };\n\n  // Calculate checkbox state for an option\n  const getCheckboxState = (option: CheckboxOption): { checked: boolean; indeterminate: boolean } => {\n    const hasChildren = option.options && option.options.length > 0;\n    const isDirectlySelected = resolvedValue.includes(option.name);\n\n    if (!hasChildren) {\n      return { checked: isDirectlySelected, indeterminate: false };\n    }\n\n    const allSelected = areAllChildrenSelected(option);\n    const someSelected = areSomeChildrenSelected(option);\n\n    return {\n      checked: allSelected,\n      indeterminate: someSelected && !allSelected,\n    };\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName } = event.target;\n    const clickedOption = findOption(options, optionName);\n    if (!clickedOption) return;\n\n    let newValue: string[];\n\n    // If option has children, toggle all children based on current state\n    if (clickedOption.options && clickedOption.options.length > 0) {\n      const allChildrenSelected = areAllChildrenSelected(clickedOption);\n\n      if (allChildrenSelected) {\n        // All children are selected - deselect all children\n        const childNames = getChildOptionNames(clickedOption);\n        newValue = resolvedValue.filter((name) => !childNames.includes(name));\n      } else {\n        // Not all children are selected - select all enabled children\n        const enabledChildNames = getEnabledChildNames(clickedOption);\n        // Add all enabled children that aren't already selected\n        newValue = [...new Set([...resolvedValue, ...enabledChildNames])];\n      }\n      // Ensure parent names are not persisted in the value for hierarchical options\n      newValue = newValue.filter((name) => name !== clickedOption.name);\n    } else {\n      // Regular checkbox toggle - use event.checked for leaf nodes\n      const { checked } = event.target;\n      newValue = checked\n        ? [...resolvedValue, optionName]\n        : resolvedValue.filter((name) => name !== optionName);\n    }\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  // Render checkbox options recursively\n  const renderOptions = (opts: CheckboxOption[]): JSX.Element[] => {\n    return opts.map((option) => {\n      const { checked, indeterminate } = getCheckboxState(option);\n      const hasOptions = option.options && option.options.length > 0;\n\n      return (\n        <Box key={option.name}>\n          <Checkbox\n            checked={checked}\n            disabled={option.disabled}\n            fdKey={`${fdKey}-${option.name}`}\n            indeterminate={indeterminate}\n            label={option.label}\n            name={option.name}\n            onChange={handleChange}\n            size={size}\n            valid={valid}\n          />\n          {hasOptions && (\n            <StyledChildrenContainer>{renderOptions(option.options ?? [])}</StyledChildrenContainer>\n          )}\n        </Box>\n      );\n    });\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <StyledFormControl data-fd={fdKey}>\n      <Box>\n        <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n          {label}\n        </MuiFormLabel>\n\n        {hintText && <MuiFormHelperText data-fd={`${fdKey}-hint`}>{hintText}</MuiFormHelperText>}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledFormGroup data-fd={`${fdKey}-checkboxes`}>{renderOptions(options)}</StyledFormGroup>\n    </StyledFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["StyledFormControl","styled","MuiFormControl","theme","display","flexDirection","gap","spacing","StyledFormGroup","MuiFormGroup","paddingTop","overflow","StyledChildrenContainer","Box","paddingLeft","position","content","left","top","bottom","width","backgroundColor","palette","semantic","stroke","zIndex","CheckboxGroup","fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","getAllOptionNames","opts","names","forEach","opt","push","name","findOption","targetName","found","getEnabledChildNames","option","filter","childName","childOption","disabled","areAllChildrenSelected","enabledChildNames","length","every","includes","getCheckboxState","hasChildren","isDirectlySelected","checked","indeterminate","allSelected","someSelected","selectedCount","areSomeChildrenSelected","handleChange","event","optionName","target","clickedOption","newValue","childNames","Set","undefined","renderOptions","map","hasOptions","_jsxs","children","_jsx","Checkbox","isError","MuiFormLabel","MuiFormHelperText","error","CancelCircleIcon"],"mappings":"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"}

package/dist/components/molecules/CheckboxGroup/index.d.ts

@@ -1,26 +1,59 @@
 import { ChangeEvent } from 'react';
 
+/**
+ * Represents a checkbox option in the CheckboxGroup.
+ * Supports hierarchical nesting through the `options` property.
+ */
 interface CheckboxOption {
+    /** Unique identifier for the option. */
     name: string;
+    /** Display label for the checkbox. */
     label: string;
+    /** Whether the checkbox is disabled. */
     disabled?: boolean;
+    /** Nested child options, creating a hierarchical structure. */
+    options?: CheckboxOption[];
 }
+/**
+ * Props for the CheckboxGroup component.
+ * Supports hierarchical checkbox groups with parent-child relationships.
+ * Parent checkboxes automatically reflect the selection state of their children,
+ * showing indeterminate state when some (but not all) children are selected.
+ */
 interface CheckboxGroupProps {
+    /** Unique identifier forwarded to the root element as `data-fd` for testing and identification. */
     fdKey: string;
+    /** Array of checkbox options. Supports nested options for hierarchical structures. */
     options: CheckboxOption[];
+    /** Label displayed above the checkbox group. */
     label: string;
     /**
      * The selected values. When provided, the component is controlled.
      * When omitted, the component is uncontrolled and manages its own state.
      */
     value?: string[];
+    /** Size of the checkboxes. */
     size?: 'medium' | 'small';
+    /** Helper text displayed below the label. */
     hintText?: string;
+    /** Error message displayed when validation fails. */
     errorText?: string;
+    /** Whether the input is valid. When false and errorText is provided, error styling is applied. */
     valid?: boolean;
+    /** Whether the field is required. Adds a required indicator to the label. */
     required?: boolean;
+    /** Called when the selection changes. Receives the change event and the updated array of selected option names. */
     onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;
 }
+/**
+ * A hierarchical checkbox group component that supports nested options and parent-child relationships.
+ * When a parent option is selected, all enabled child options are automatically selected.
+ * Parent checkboxes show an indeterminate state when some (but not all) children are selected.
+ * Supports both controlled and uncontrolled modes.
+ *
+ * @param props - The component props
+ * @returns The rendered CheckboxGroup component
+ */
 declare const CheckboxGroup: ({ fdKey, options, value, size, label, hintText, errorText, valid, required, onChange, }: CheckboxGroupProps) => JSX.Element;
 
 export { CheckboxGroup, CheckboxGroup as default };

package/dist/components/molecules/CheckboxGroup/index.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as i}from"react";import a from"@mui/material/Box";import m from"@mui/material/FormControl";import o from"@mui/material/FormGroup";import t from"@mui/material/FormHelperText";import l from"@mui/material/FormLabel";import{styled as n}from"@mui/material/styles";import d from"../../atoms/Checkbox/index.js";import c from"../../../icons/CancelCircle/index.js";const p=n(m)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),s=n(o)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2)}))),f=({fdKey:m,options:o,value:n,size:f="medium",label:u,hintText:h,errorText:x,valid:b=!0,required:g=!1,onChange:C})=>{const[y,$]=i([]),k=n??y,v=e=>{const{name:r,checked:i}=e.target,a=i?[...k,r]:k.filter((e=>e!==r));void 0===n&&$(a),C&&C(e,a)},F=!b&&!!x;return e(p,{"data-fd":m,children:[e(a,{children:[r(l,{"data-fd":`${m}-label`,required:g,children:u}),h&&r(t,{"data-fd":`${m}-hint`,children:h})]}),F&&e(t,{error:!0,children:[r(c,{}),x]}),r(s,{"data-fd":`${m}-checkboxes`,children:o.map((e=>{const i=k.includes(e.name);return r(d,{checked:i,disabled:e.disabled,fdKey:`${m}-${e.name}`,label:e.label,name:e.name,onChange:v,size:f,valid:b},e.name)}))})]})};export{f as CheckboxGroup,f as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i}from"react";import n from"@mui/material/Box";import o from"@mui/material/FormControl";import r from"@mui/material/FormGroup";import a from"@mui/material/FormHelperText";import l from"@mui/material/FormLabel";import{styled as s}from"@mui/material/styles";import c from"../../atoms/Checkbox/index.js";import m from"../../../icons/CancelCircle/index.js";const d=s(o)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),p=s(r)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),overflow:"visible"}))),f=s(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingLeft:e.spacing(5.75),paddingTop:e.spacing(2),position:"relative",overflow:"visible","&::before":{content:'""',position:"absolute",left:e.spacing(1.75),top:e.spacing(2),bottom:0,width:"4px",backgroundColor:e.palette.semantic.stroke["stroke-weak"],zIndex:0}}))),u=({fdKey:o,options:r,value:s,size:u="medium",label:h,hintText:g,errorText:x,valid:b=!0,required:k=!1,onChange:v})=>{const[y,C]=i([]),w=s??y,T=e=>{const t=[];return e.forEach((e=>{t.push(e.name),e.options&&t.push(...T(e.options))})),t},$=(e,t)=>{for(const i of e){if(i.name===t)return i;if(i.options){const e=$(i.options,t);if(e)return e}}},F=e=>e.options?T(e.options).filter((t=>{const i=$(e.options||[],t);return!i?.disabled})):[],j=e=>{const t=F(e);return 0!==t.length&&t.every((e=>w.includes(e)))},z=e=>{const t=e.options&&e.options.length>0,i=w.includes(e.name);if(!t)return{checked:i,indeterminate:!1};const n=j(e),o=(e=>{const t=F(e);if(0===t.length)return!1;const i=t.filter((e=>w.includes(e))).length;return i>0&&i<t.length})(e);return{checked:n,indeterminate:o&&!n}},D=e=>{const{name:t}=e.target,i=$(r,t);if(!i)return;let n;if(i.options&&i.options.length>0){if(j(i)){const e=(o=i).options?T(o.options):[];n=w.filter((t=>!e.includes(t)))}else{const e=F(i);n=[...new Set([...w,...e])]}n=n.filter((e=>e!==i.name))}else{const{checked:i}=e.target;n=i?[...w,t]:w.filter((e=>e!==t))}var o;void 0===s&&C(n),v&&v(e,n)},q=i=>i.map((i=>{const{checked:r,indeterminate:a}=z(i),l=i.options&&i.options.length>0;return e(n,{children:[t(c,{checked:r,disabled:i.disabled,fdKey:`${o}-${i.name}`,indeterminate:a,label:i.label,name:i.name,onChange:D,size:u,valid:b}),l&&t(f,{children:q(i.options??[])})]},i.name)})),K=!b&&!!x;return e(d,{"data-fd":o,children:[e(n,{children:[t(l,{"data-fd":`${o}-label`,required:k,children:h}),g&&t(a,{"data-fd":`${o}-hint`,children:g})]}),K&&e(a,{error:!0,children:[t(m,{}),x]}),t(p,{"data-fd":`${o}-checkboxes`,children:q(r)})]})};export{u as CheckboxGroup,u as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/CheckboxGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nexport interface CheckboxOption {\n  name: string;\n  label: string;\n  disabled?: boolean;\n}\n\ninterface CheckboxGroupProps {\n  fdKey: string;\n  options: CheckboxOption[];\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  size?: 'medium' | 'small';\n  hintText?: string;\n  errorText?: string;\n  valid?: boolean;\n  required?: boolean;\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst StyledFormControl = styled(MuiFormControl)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\nconst StyledFormGroup = styled(MuiFormGroup)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n}));\n\nexport const CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName, checked } = event.target;\n\n    const newValue = checked\n      ? [...resolvedValue, optionName]\n      : resolvedValue.filter((name) => name !== optionName);\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <StyledFormControl data-fd={fdKey}>\n      <Box>\n        <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n          {label}\n        </MuiFormLabel>\n\n        {hintText && <MuiFormHelperText data-fd={`${fdKey}-hint`}>{hintText}</MuiFormHelperText>}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledFormGroup data-fd={`${fdKey}-checkboxes`}>\n        {options.map((option) => {\n          const isChecked = resolvedValue.includes(option.name);\n\n          return (\n            <Checkbox\n              key={option.name}\n              checked={isChecked}\n              disabled={option.disabled}\n              fdKey={`${fdKey}-${option.name}`}\n              label={option.label}\n              name={option.name}\n              onChange={handleChange}\n              size={size}\n              valid={valid}\n            />\n          );\n        })}\n      </StyledFormGroup>\n    </StyledFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["StyledFormControl","styled","MuiFormControl","theme","display","flexDirection","gap","spacing","StyledFormGroup","MuiFormGroup","paddingTop","CheckboxGroup","fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","handleChange","event","name","optionName","checked","target","newValue","filter","undefined","isError","_jsxs","children","Box","_jsx","MuiFormLabel","MuiFormHelperText","error","CancelCircleIcon","map","option","isChecked","includes","Checkbox","disabled"],"mappings":"saAmCA,MAAMA,EAAoBC,EAAOC,EAAPD,EAAuB,EAAGE,YAAO,CACzDC,QAAS,OACTC,cAAe,SACfC,IAAKH,EAAMI,QAAQ,QAGfC,EAAkBP,EAAOQ,EAAPR,EAAqB,EAAGE,YAAO,CACrDC,QAAS,OACTC,cAAe,SACfC,IAAKH,EAAMI,QAAQ,GACnBG,WAAYP,EAAMI,QAAQ,OAGfI,EAAgB,EAC3BC,QACAC,UACAC,QACAC,OAAO,SACPC,QACAC,WACAC,YACAC,SAAQ,EACRC,YAAW,EACXC,eAEA,MAAOC,EAAeC,GAAoBC,EAAmB,IAEvDC,EAAgBX,GAASQ,EAEzBI,EAAgBC,IACpB,MAAQC,KAAMC,EAAUC,QAAEA,GAAYH,EAAMI,OAEtCC,EAAWF,EACb,IAAIL,EAAeI,GACnBJ,EAAcQ,QAAQL,GAASA,IAASC,SAG9BK,IAAVpB,GACFS,EAAiBS,GAGfX,GACFA,EAASM,EAAOK,IAIdG,GAAWhB,KAAWD,EAE5B,OACEkB,EAACpC,EAAiB,CAAA,UAAUY,EAAKyB,SAAA,CAC/BD,EAACE,EAAG,CAAAD,SAAA,CACFE,EAACC,EAAY,CAAA,UAAU,GAAG5B,UAAeQ,SAAUA,EAAQiB,SACxDrB,IAGFC,GAAYsB,EAACE,EAAiB,CAAA,UAAU,GAAG7B,SAAYyB,SAAGpB,OAG5DkB,GACCC,EAACK,EAAiB,CAACC,OAAK,EAAAL,SAAA,CACtBE,EAACI,EAAgB,CAAA,GAEhBzB,KAILqB,EAAC/B,EAAe,CAAA,UAAU,GAAGI,eAAkByB,SAC5CxB,EAAQ+B,KAAKC,IACZ,MAAMC,EAAYrB,EAAcsB,SAASF,EAAOjB,MAEhD,OACEW,EAACS,EAAQ,CAEPlB,QAASgB,EACTG,SAAUJ,EAAOI,SACjBrC,MAAO,GAAGA,KAASiC,EAAOjB,OAC1BZ,MAAO6B,EAAO7B,MACdY,KAAMiB,EAAOjB,KACbP,SAAUK,EACVX,KAAMA,EACNI,MAAOA,GARF0B,EAAOjB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\n/**\n * Represents a checkbox option in the CheckboxGroup.\n * Supports hierarchical nesting through the `options` property.\n */\nexport interface CheckboxOption {\n  /** Unique identifier for the option. */\n  name: string;\n  /** Display label for the checkbox. */\n  label: string;\n  /** Whether the checkbox is disabled. */\n  disabled?: boolean;\n  /** Nested child options, creating a hierarchical structure. */\n  options?: CheckboxOption[];\n}\n\n/**\n * Props for the CheckboxGroup component.\n * Supports hierarchical checkbox groups with parent-child relationships.\n * Parent checkboxes automatically reflect the selection state of their children,\n * showing indeterminate state when some (but not all) children are selected.\n */\ninterface CheckboxGroupProps {\n  /** Unique identifier forwarded to the root element as `data-fd` for testing and identification. */\n  fdKey: string;\n  /** Array of checkbox options. Supports nested options for hierarchical structures. */\n  options: CheckboxOption[];\n  /** Label displayed above the checkbox group. */\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  /** Size of the checkboxes. */\n  size?: 'medium' | 'small';\n  /** Helper text displayed below the label. */\n  hintText?: string;\n  /** Error message displayed when validation fails. */\n  errorText?: string;\n  /** Whether the input is valid. When false and errorText is provided, error styling is applied. */\n  valid?: boolean;\n  /** Whether the field is required. Adds a required indicator to the label. */\n  required?: boolean;\n  /** Called when the selection changes. Receives the change event and the updated array of selected option names. */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst StyledFormControl = styled(MuiFormControl)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\nconst StyledFormGroup = styled(MuiFormGroup)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  overflow: 'visible',\n}));\n\nconst StyledChildrenContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingLeft: theme.spacing(5.75),\n  paddingTop: theme.spacing(2),\n  position: 'relative',\n  overflow: 'visible',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    left: theme.spacing(1.75),\n    top: theme.spacing(2),\n    bottom: 0,\n    width: '4px',\n    backgroundColor: theme.palette.semantic.stroke['stroke-weak'],\n    zIndex: 0,\n  },\n}));\n\n/**\n * A hierarchical checkbox group component that supports nested options and parent-child relationships.\n * When a parent option is selected, all enabled child options are automatically selected.\n * Parent checkboxes show an indeterminate state when some (but not all) children are selected.\n * Supports both controlled and uncontrolled modes.\n *\n * @param props - The component props\n * @returns The rendered CheckboxGroup component\n */\nexport const CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  // Flatten all option names (including children) for easy lookup\n  const getAllOptionNames = (opts: CheckboxOption[]): string[] => {\n    const names: string[] = [];\n    opts.forEach((opt) => {\n      names.push(opt.name);\n      if (opt.options) {\n        names.push(...getAllOptionNames(opt.options));\n      }\n    });\n    return names;\n  };\n\n  // Get all child option names for a given option (including disabled)\n  const getChildOptionNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options);\n  };\n\n  // Helper to find an option by name in the hierarchy\n  const findOption = (opts: CheckboxOption[], targetName: string): CheckboxOption | undefined => {\n    for (const opt of opts) {\n      if (opt.name === targetName) return opt;\n      if (opt.options) {\n        const found = findOption(opt.options, targetName);\n        if (found) return found;\n      }\n    }\n    return undefined;\n  };\n\n  // Get all enabled child names for a given option\n  const getEnabledChildNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options).filter((childName) => {\n      const childOption = findOption(option.options || [], childName);\n      return !childOption?.disabled;\n    });\n  };\n\n  // Check if all enabled children of an option are selected\n  const areAllChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    return enabledChildNames.every((name) => resolvedValue.includes(name));\n  };\n\n  // Check if some (but not all) enabled children of an option are selected\n  const areSomeChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    const selectedCount = enabledChildNames.filter((name) => resolvedValue.includes(name)).length;\n    return selectedCount > 0 && selectedCount < enabledChildNames.length;\n  };\n\n  // Calculate checkbox state for an option\n  const getCheckboxState = (option: CheckboxOption): { checked: boolean; indeterminate: boolean } => {\n    const hasChildren = option.options && option.options.length > 0;\n    const isDirectlySelected = resolvedValue.includes(option.name);\n\n    if (!hasChildren) {\n      return { checked: isDirectlySelected, indeterminate: false };\n    }\n\n    const allSelected = areAllChildrenSelected(option);\n    const someSelected = areSomeChildrenSelected(option);\n\n    return {\n      checked: allSelected,\n      indeterminate: someSelected && !allSelected,\n    };\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName } = event.target;\n    const clickedOption = findOption(options, optionName);\n    if (!clickedOption) return;\n\n    let newValue: string[];\n\n    // If option has children, toggle all children based on current state\n    if (clickedOption.options && clickedOption.options.length > 0) {\n      const allChildrenSelected = areAllChildrenSelected(clickedOption);\n\n      if (allChildrenSelected) {\n        // All children are selected - deselect all children\n        const childNames = getChildOptionNames(clickedOption);\n        newValue = resolvedValue.filter((name) => !childNames.includes(name));\n      } else {\n        // Not all children are selected - select all enabled children\n        const enabledChildNames = getEnabledChildNames(clickedOption);\n        // Add all enabled children that aren't already selected\n        newValue = [...new Set([...resolvedValue, ...enabledChildNames])];\n      }\n      // Ensure parent names are not persisted in the value for hierarchical options\n      newValue = newValue.filter((name) => name !== clickedOption.name);\n    } else {\n      // Regular checkbox toggle - use event.checked for leaf nodes\n      const { checked } = event.target;\n      newValue = checked\n        ? [...resolvedValue, optionName]\n        : resolvedValue.filter((name) => name !== optionName);\n    }\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  // Render checkbox options recursively\n  const renderOptions = (opts: CheckboxOption[]): JSX.Element[] => {\n    return opts.map((option) => {\n      const { checked, indeterminate } = getCheckboxState(option);\n      const hasOptions = option.options && option.options.length > 0;\n\n      return (\n        <Box key={option.name}>\n          <Checkbox\n            checked={checked}\n            disabled={option.disabled}\n            fdKey={`${fdKey}-${option.name}`}\n            indeterminate={indeterminate}\n            label={option.label}\n            name={option.name}\n            onChange={handleChange}\n            size={size}\n            valid={valid}\n          />\n          {hasOptions && (\n            <StyledChildrenContainer>{renderOptions(option.options ?? [])}</StyledChildrenContainer>\n          )}\n        </Box>\n      );\n    });\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <StyledFormControl data-fd={fdKey}>\n      <Box>\n        <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n          {label}\n        </MuiFormLabel>\n\n        {hintText && <MuiFormHelperText data-fd={`${fdKey}-hint`}>{hintText}</MuiFormHelperText>}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledFormGroup data-fd={`${fdKey}-checkboxes`}>{renderOptions(options)}</StyledFormGroup>\n    </StyledFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["StyledFormControl","styled","MuiFormControl","theme","display","flexDirection","gap","spacing","StyledFormGroup","MuiFormGroup","paddingTop","overflow","StyledChildrenContainer","Box","paddingLeft","position","content","left","top","bottom","width","backgroundColor","palette","semantic","stroke","zIndex","CheckboxGroup","fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","getAllOptionNames","opts","names","forEach","opt","push","name","findOption","targetName","found","getEnabledChildNames","option","filter","childName","childOption","disabled","areAllChildrenSelected","enabledChildNames","length","every","includes","getCheckboxState","hasChildren","isDirectlySelected","checked","indeterminate","allSelected","someSelected","selectedCount","areSomeChildrenSelected","handleChange","event","optionName","target","clickedOption","newValue","childNames","Set","undefined","renderOptions","map","hasOptions","_jsxs","children","_jsx","Checkbox","isError","MuiFormLabel","MuiFormHelperText","error","CancelCircleIcon"],"mappings":"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"}

package/dist/components/molecules/Combobox/index.d.ts

@@ -1,4 +1,4 @@
-import { AutocompleteProps, AutocompleteOption } from '../Autocomplete/index.js';
+import { AutocompleteOption, AutocompleteProps } from '../Autocomplete/index.js';
 
 type ComboboxOption = AutocompleteOption;
 type ComboboxProps = Omit<AutocompleteProps, 'type'>;

package/dist/components/organisms/AssetManager/__mocks__/mockAssets.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../types/index.cjs.js");const a=(a={})=>({...{id:"1",fileName:"Mock Asset.jpg",contentType:"image/jpeg",url:"./images/pizza-horizontal.jpg",createdBy:"Mock User",updatedBy:"Mock User",updatedAt:(new Date).toISOString(),uploadedAt:(new Date).toISOString(),orgId:"10121",brandId:"1",type:e.AssetType.IMAGE,metadata:{tags:["mock"]}},...a}),t=[a({id:"1",fileName:"Pizza Special.jpg",createdBy:"John Doe",updatedBy:"John Doe",metadata:{tags:["pizza","food"],altText:"Delicious pizza with toppings"}}),a({id:"2",fileName:"Burger Combo.jpg",createdBy:"Jane Smith",updatedBy:"Jane Smith",metadata:{tags:["burger","food"],altText:"Juicy burger with fries"}}),a({id:"3",fileName:"Salad Fresh.jpg",createdBy:"Bob Johnson",updatedBy:"Bob Johnson",metadata:{tags:["salad","healthy"],altText:"Fresh green salad"}}),a({id:"4",fileName:"Pasta Delight.jpg",createdBy:"Alice Brown",updatedBy:"Alice Brown",metadata:{tags:["pasta","italian"]}}),a({id:"5",fileName:"Dessert Special.jpg",createdBy:"Charlie Davis",updatedBy:"Charlie Davis",metadata:{tags:["dessert","sweet"]}})];exports.createMockAsset=a,exports.createMockAssets=(e,t)=>Array.from({length:e},((e,s)=>{const i=t?.[s]||{};return a({id:(s+1).toString(),fileName:`Mock Asset ${s+1}.jpg`,...i})})),exports.mockAssets=t;
+//# sourceMappingURL=mockAssets.cjs.js.map

package/dist/components/organisms/AssetManager/__mocks__/mockAssets.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockAssets.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/__mocks__/mockAssets.ts"],"sourcesContent":["import { type Asset, AssetType } from '../types';\n\n/**\n * Factory function to create a mock asset with customizable properties\n * @param overrides - Partial asset properties to override defaults\n * @returns A complete mock asset\n */\nexport const createMockAsset = (overrides: Partial<Asset> = {}): Asset => {\n  const defaultAsset: Asset = {\n    id: '1',\n    fileName: 'Mock Asset.jpg',\n    contentType: 'image/jpeg',\n    url: './images/pizza-horizontal.jpg',\n    createdBy: 'Mock User',\n    updatedBy: 'Mock User',\n    updatedAt: new Date().toISOString(),\n    uploadedAt: new Date().toISOString(),\n    orgId: '10121',\n    brandId: '1',\n    type: AssetType.IMAGE,\n    metadata: { tags: ['mock'] },\n  };\n\n  return { ...defaultAsset, ...overrides };\n};\n\n/**\n * Generate multiple mock assets\n * @param count - Number of assets to generate\n * @param overridesArray - Optional array of overrides for each asset\n * @returns Array of mock assets\n */\nexport const createMockAssets = (count: number, overridesArray?: Array<Partial<Asset>>): Asset[] => {\n  return Array.from({ length: count }, (_, index) => {\n    const baseOverrides = overridesArray?.[index] || {};\n    return createMockAsset({\n      id: (index + 1).toString(),\n      fileName: `Mock Asset ${index + 1}.jpg`,\n      ...baseOverrides,\n    });\n  });\n};\n\n/**\n * Pre-defined mock assets for common testing scenarios\n */\nexport const mockAssets: Asset[] = [\n  createMockAsset({\n    id: '1',\n    fileName: 'Pizza Special.jpg',\n    createdBy: 'John Doe',\n    updatedBy: 'John Doe',\n    metadata: { tags: ['pizza', 'food'], altText: 'Delicious pizza with toppings' },\n  }),\n  createMockAsset({\n    id: '2',\n    fileName: 'Burger Combo.jpg',\n    createdBy: 'Jane Smith',\n    updatedBy: 'Jane Smith',\n    metadata: { tags: ['burger', 'food'], altText: 'Juicy burger with fries' },\n  }),\n  createMockAsset({\n    id: '3',\n    fileName: 'Salad Fresh.jpg',\n    createdBy: 'Bob Johnson',\n    updatedBy: 'Bob Johnson',\n    metadata: { tags: ['salad', 'healthy'], altText: 'Fresh green salad' },\n  }),\n  createMockAsset({\n    id: '4',\n    fileName: 'Pasta Delight.jpg',\n    createdBy: 'Alice Brown',\n    updatedBy: 'Alice Brown',\n    metadata: { tags: ['pasta', 'italian'] },\n  }),\n  createMockAsset({\n    id: '5',\n    fileName: 'Dessert Special.jpg',\n    createdBy: 'Charlie Davis',\n    updatedBy: 'Charlie Davis',\n    metadata: { tags: ['dessert', 'sweet'] },\n  }),\n];\n"],"names":["createMockAsset","overrides","id","fileName","contentType","url","createdBy","updatedBy","updatedAt","Date","toISOString","uploadedAt","orgId","brandId","type","AssetType","IMAGE","metadata","tags","mockAssets","altText","count","overridesArray","Array","from","length","_","index","baseOverrides","toString"],"mappings":"0DAOaA,EAAkB,CAACC,EAA4B,MAgBnD,IAfqB,CAC1BC,GAAI,IACJC,SAAU,iBACVC,YAAa,aACbC,IAAK,gCACLC,UAAW,YACXC,UAAW,YACXC,WAAW,IAAIC,MAAOC,cACtBC,YAAY,IAAIF,MAAOC,cACvBE,MAAO,QACPC,QAAS,IACTC,KAAMC,EAAAA,UAAUC,MAChBC,SAAU,CAAEC,KAAM,CAAC,aAGQjB,IAuBlBkB,EAAsB,CACjCnB,EAAgB,CACdE,GAAI,IACJC,SAAU,oBACVG,UAAW,WACXC,UAAW,WACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,QAASE,QAAS,mCAEhDpB,EAAgB,CACdE,GAAI,IACJC,SAAU,mBACVG,UAAW,aACXC,UAAW,aACXU,SAAU,CAAEC,KAAM,CAAC,SAAU,QAASE,QAAS,6BAEjDpB,EAAgB,CACdE,GAAI,IACJC,SAAU,kBACVG,UAAW,cACXC,UAAW,cACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,WAAYE,QAAS,uBAEnDpB,EAAgB,CACdE,GAAI,IACJC,SAAU,oBACVG,UAAW,cACXC,UAAW,cACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,cAE9BlB,EAAgB,CACdE,GAAI,IACJC,SAAU,sBACVG,UAAW,gBACXC,UAAW,gBACXU,SAAU,CAAEC,KAAM,CAAC,UAAW,gEAhDF,CAACG,EAAeC,IACvCC,MAAMC,KAAK,CAAEC,OAAQJ,IAAS,CAACK,EAAGC,KACvC,MAAMC,EAAgBN,IAAiBK,IAAU,CAAA,EACjD,OAAO3B,EAAgB,CACrBE,IAAKyB,EAAQ,GAAGE,WAChB1B,SAAU,cAAcwB,EAAQ,WAC7BC"}

package/dist/components/organisms/AssetManager/__mocks__/mockAssets.d.ts

@@ -0,0 +1,21 @@
+import { Asset } from '../types/index.js';
+
+/**
+ * Factory function to create a mock asset with customizable properties
+ * @param overrides - Partial asset properties to override defaults
+ * @returns A complete mock asset
+ */
+declare const createMockAsset: (overrides?: Partial<Asset>) => Asset;
+/**
+ * Generate multiple mock assets
+ * @param count - Number of assets to generate
+ * @param overridesArray - Optional array of overrides for each asset
+ * @returns Array of mock assets
+ */
+declare const createMockAssets: (count: number, overridesArray?: Array<Partial<Asset>>) => Asset[];
+/**
+ * Pre-defined mock assets for common testing scenarios
+ */
+declare const mockAssets: Asset[];
+
+export { createMockAsset, createMockAssets, mockAssets };

package/dist/components/organisms/AssetManager/__mocks__/mockAssets.js

@@ -0,0 +1,2 @@
+import{AssetType as e}from"../types/index.js";const a=(a={})=>({...{id:"1",fileName:"Mock Asset.jpg",contentType:"image/jpeg",url:"./images/pizza-horizontal.jpg",createdBy:"Mock User",updatedBy:"Mock User",updatedAt:(new Date).toISOString(),uploadedAt:(new Date).toISOString(),orgId:"10121",brandId:"1",type:e.IMAGE,metadata:{tags:["mock"]}},...a}),t=(e,t)=>Array.from({length:e},((e,i)=>{const d=t?.[i]||{};return a({id:(i+1).toString(),fileName:`Mock Asset ${i+1}.jpg`,...d})})),i=[a({id:"1",fileName:"Pizza Special.jpg",createdBy:"John Doe",updatedBy:"John Doe",metadata:{tags:["pizza","food"],altText:"Delicious pizza with toppings"}}),a({id:"2",fileName:"Burger Combo.jpg",createdBy:"Jane Smith",updatedBy:"Jane Smith",metadata:{tags:["burger","food"],altText:"Juicy burger with fries"}}),a({id:"3",fileName:"Salad Fresh.jpg",createdBy:"Bob Johnson",updatedBy:"Bob Johnson",metadata:{tags:["salad","healthy"],altText:"Fresh green salad"}}),a({id:"4",fileName:"Pasta Delight.jpg",createdBy:"Alice Brown",updatedBy:"Alice Brown",metadata:{tags:["pasta","italian"]}}),a({id:"5",fileName:"Dessert Special.jpg",createdBy:"Charlie Davis",updatedBy:"Charlie Davis",metadata:{tags:["dessert","sweet"]}})];export{a as createMockAsset,t as createMockAssets,i as mockAssets};
+//# sourceMappingURL=mockAssets.js.map

package/dist/components/organisms/AssetManager/__mocks__/mockAssets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockAssets.js","sources":["../../../../../src/components/organisms/AssetManager/__mocks__/mockAssets.ts"],"sourcesContent":["import { type Asset, AssetType } from '../types';\n\n/**\n * Factory function to create a mock asset with customizable properties\n * @param overrides - Partial asset properties to override defaults\n * @returns A complete mock asset\n */\nexport const createMockAsset = (overrides: Partial<Asset> = {}): Asset => {\n  const defaultAsset: Asset = {\n    id: '1',\n    fileName: 'Mock Asset.jpg',\n    contentType: 'image/jpeg',\n    url: './images/pizza-horizontal.jpg',\n    createdBy: 'Mock User',\n    updatedBy: 'Mock User',\n    updatedAt: new Date().toISOString(),\n    uploadedAt: new Date().toISOString(),\n    orgId: '10121',\n    brandId: '1',\n    type: AssetType.IMAGE,\n    metadata: { tags: ['mock'] },\n  };\n\n  return { ...defaultAsset, ...overrides };\n};\n\n/**\n * Generate multiple mock assets\n * @param count - Number of assets to generate\n * @param overridesArray - Optional array of overrides for each asset\n * @returns Array of mock assets\n */\nexport const createMockAssets = (count: number, overridesArray?: Array<Partial<Asset>>): Asset[] => {\n  return Array.from({ length: count }, (_, index) => {\n    const baseOverrides = overridesArray?.[index] || {};\n    return createMockAsset({\n      id: (index + 1).toString(),\n      fileName: `Mock Asset ${index + 1}.jpg`,\n      ...baseOverrides,\n    });\n  });\n};\n\n/**\n * Pre-defined mock assets for common testing scenarios\n */\nexport const mockAssets: Asset[] = [\n  createMockAsset({\n    id: '1',\n    fileName: 'Pizza Special.jpg',\n    createdBy: 'John Doe',\n    updatedBy: 'John Doe',\n    metadata: { tags: ['pizza', 'food'], altText: 'Delicious pizza with toppings' },\n  }),\n  createMockAsset({\n    id: '2',\n    fileName: 'Burger Combo.jpg',\n    createdBy: 'Jane Smith',\n    updatedBy: 'Jane Smith',\n    metadata: { tags: ['burger', 'food'], altText: 'Juicy burger with fries' },\n  }),\n  createMockAsset({\n    id: '3',\n    fileName: 'Salad Fresh.jpg',\n    createdBy: 'Bob Johnson',\n    updatedBy: 'Bob Johnson',\n    metadata: { tags: ['salad', 'healthy'], altText: 'Fresh green salad' },\n  }),\n  createMockAsset({\n    id: '4',\n    fileName: 'Pasta Delight.jpg',\n    createdBy: 'Alice Brown',\n    updatedBy: 'Alice Brown',\n    metadata: { tags: ['pasta', 'italian'] },\n  }),\n  createMockAsset({\n    id: '5',\n    fileName: 'Dessert Special.jpg',\n    createdBy: 'Charlie Davis',\n    updatedBy: 'Charlie Davis',\n    metadata: { tags: ['dessert', 'sweet'] },\n  }),\n];\n"],"names":["createMockAsset","overrides","id","fileName","contentType","url","createdBy","updatedBy","updatedAt","Date","toISOString","uploadedAt","orgId","brandId","type","AssetType","IMAGE","metadata","tags","createMockAssets","count","overridesArray","Array","from","length","_","index","baseOverrides","toString","mockAssets","altText"],"mappings":"oDAOaA,EAAkB,CAACC,EAA4B,MAgBnD,IAfqB,CAC1BC,GAAI,IACJC,SAAU,iBACVC,YAAa,aACbC,IAAK,gCACLC,UAAW,YACXC,UAAW,YACXC,WAAW,IAAIC,MAAOC,cACtBC,YAAY,IAAIF,MAAOC,cACvBE,MAAO,QACPC,QAAS,IACTC,KAAMC,EAAUC,MAChBC,SAAU,CAAEC,KAAM,CAAC,aAGQjB,IASlBkB,EAAmB,CAACC,EAAeC,IACvCC,MAAMC,KAAK,CAAEC,OAAQJ,IAAS,CAACK,EAAGC,KACvC,MAAMC,EAAgBN,IAAiBK,IAAU,CAAA,EACjD,OAAO1B,EAAgB,CACrBE,IAAKwB,EAAQ,GAAGE,WAChBzB,SAAU,cAAcuB,EAAQ,WAC7BC,OAQIE,EAAsB,CACjC7B,EAAgB,CACdE,GAAI,IACJC,SAAU,oBACVG,UAAW,WACXC,UAAW,WACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,QAASY,QAAS,mCAEhD9B,EAAgB,CACdE,GAAI,IACJC,SAAU,mBACVG,UAAW,aACXC,UAAW,aACXU,SAAU,CAAEC,KAAM,CAAC,SAAU,QAASY,QAAS,6BAEjD9B,EAAgB,CACdE,GAAI,IACJC,SAAU,kBACVG,UAAW,cACXC,UAAW,cACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,WAAYY,QAAS,uBAEnD9B,EAAgB,CACdE,GAAI,IACJC,SAAU,oBACVG,UAAW,cACXC,UAAW,cACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,cAE9BlB,EAAgB,CACdE,GAAI,IACJC,SAAU,sBACVG,UAAW,gBACXC,UAAW,gBACXU,SAAU,CAAEC,KAAM,CAAC,UAAW"}

package/dist/components/organisms/AssetManager/hooks/useAssets.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("@tanstack/react-query"),s=require("../services/asset.service.cjs.js");exports.useGetAssets=(r,t=!0)=>e.useQuery({queryKey:[s.getAssetsKey,r],queryFn:()=>s.getAssets(r),enabled:t,staleTime:3e5,gcTime:6e5});
+//# sourceMappingURL=useAssets.cjs.js.map

package/dist/components/organisms/AssetManager/hooks/useAssets.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssets.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssets.ts"],"sourcesContent":["import { useQuery, type UseQueryResult } from '@tanstack/react-query';\n\nimport { getAssets, getAssetsKey } from '../services/asset.service';\nimport type { Asset } from '../types';\n\n/**\n * Hook to fetch assets from the API\n * Automatically determines the API URL based on environment and orgId\n * @param orgId - Organization ID\n * @param enabled - Whether the query should be enabled\n * @returns Query result with assets data, loading state, and error state\n */\nexport const useGetAssets = (orgId: string, enabled = true): UseQueryResult<Asset[], Error> => {\n  return useQuery<Asset[]>({\n    queryKey: [getAssetsKey, orgId],\n    queryFn: () => getAssets(orgId),\n    enabled,\n    staleTime: 5 * 60 * 1000, // 5 minutes\n    gcTime: 10 * 60 * 1000, // 10 minutes\n  });\n};\n"],"names":["orgId","enabled","useQuery","queryKey","getAssetsKey","queryFn","getAssets","staleTime","gcTime"],"mappings":"uHAY4B,CAACA,EAAeC,GAAU,IAC7CC,WAAkB,CACvBC,SAAU,CAACC,EAAAA,aAAcJ,GACzBK,QAAS,IAAMC,EAAAA,UAAUN,GACzBC,UACAM,UAAW,IACXC,OAAQ"}

package/dist/components/organisms/AssetManager/hooks/useAssets.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook to fetch assets from the API
+ * Automatically determines the API URL based on environment and orgId
+ * @param orgId - Organization ID
+ * @param enabled - Whether the query should be enabled
+ * @returns Query result with assets data, loading state, and error state
+ */
+declare const useGetAssets: (orgId: string, enabled?: boolean) => QueryObserverResult<TData, TError>;
+
+export { useGetAssets };

package/dist/components/organisms/AssetManager/hooks/useAssets.js

@@ -0,0 +1,2 @@
+import{useQuery as e}from"@tanstack/react-query";import{getAssets as r,getAssetsKey as s}from"../services/asset.service.js";const t=(t,a=!0)=>e({queryKey:[s,t],queryFn:()=>r(t),enabled:a,staleTime:3e5,gcTime:6e5});export{t as useGetAssets};
+//# sourceMappingURL=useAssets.js.map

package/dist/components/organisms/AssetManager/hooks/useAssets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssets.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssets.ts"],"sourcesContent":["import { useQuery, type UseQueryResult } from '@tanstack/react-query';\n\nimport { getAssets, getAssetsKey } from '../services/asset.service';\nimport type { Asset } from '../types';\n\n/**\n * Hook to fetch assets from the API\n * Automatically determines the API URL based on environment and orgId\n * @param orgId - Organization ID\n * @param enabled - Whether the query should be enabled\n * @returns Query result with assets data, loading state, and error state\n */\nexport const useGetAssets = (orgId: string, enabled = true): UseQueryResult<Asset[], Error> => {\n  return useQuery<Asset[]>({\n    queryKey: [getAssetsKey, orgId],\n    queryFn: () => getAssets(orgId),\n    enabled,\n    staleTime: 5 * 60 * 1000, // 5 minutes\n    gcTime: 10 * 60 * 1000, // 10 minutes\n  });\n};\n"],"names":["useGetAssets","orgId","enabled","useQuery","queryKey","getAssetsKey","queryFn","getAssets","staleTime","gcTime"],"mappings":"4HAYO,MAAMA,EAAe,CAACC,EAAeC,GAAU,IAC7CC,EAAkB,CACvBC,SAAU,CAACC,EAAcJ,GACzBK,QAAS,IAAMC,EAAUN,GACzBC,UACAM,UAAW,IACXC,OAAQ"}

package/dist/components/organisms/AssetManager/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/styles"),r=require("@mui/material/Box"),a=require("../../atoms/Card/index.cjs.js"),s=require("@mui/material/Grid2"),l=require("@mui/material/Typography"),o=require("../../molecules/Modal/index.cjs.js"),n=require("../../../icons/CheckmarkCircleSolid/index.cjs.js");const c=i.styled(r)((({theme:e})=>({marginBottom:e.spacing(3)}))),d=i.styled(r,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),m=i.styled(n)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}})));module.exports=({open:i,onClose:r,onSelect:n,assets:u,multiSelect:p=!1})=>{const[x,h]=t.useState([]);t.useEffect((()=>{i||h([])}),[i]);const g=()=>{h([]),r()},b=()=>{if(n&&u){const e=u.filter((e=>x.includes(e.id)));n(e)}h([]),r()},j=e=>{h((t=>p?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e.jsxs(o,{actions:[{label:"Cancel",onClick:g,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:b,variant:"primary",disabled:0===x.length,id:"asset-manager-select"}],onClose:g,open:i,size:"large",title:"Select Images",children:[e.jsx(c,{children:e.jsx(l,{variant:"h3Strong",children:"Tabs placeholder text"})}),e.jsx(s,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:u?.map((t=>{const i=x.includes(t.id);return e.jsx(s,{"aria-selected":i,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e.jsxs(d,{"aria-label":"Select "+t.fileName,onClick:()=>j(t.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),j(t.id))},role:"button",selected:i,tabIndex:0,children:[i&&e.jsx(m,{size:"lg"}),e.jsx(a,{content:t.fileName,heading:"",imageAlt:t.metadata.altText,imageSrc:t.url})]})},t.id)}))})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),s=require("@mui/material/styles"),i=require("@mui/material/Box"),r=require("../../atoms/Card/index.cjs.js"),a=require("../../atoms/CircularProgress/index.cjs.js"),l=require("@mui/material/Grid2"),n=require("@mui/material/Tab"),o=require("../../molecules/EmptyState/index.cjs.js"),c=require("../../molecules/Modal/index.cjs.js"),d=require("../../molecules/Tabs/index.cjs.js"),m=require("../../../icons/CheckmarkCircleSolid/index.cjs.js"),u=require("./hooks/useAssets.cjs.js");const p=s.styled(i)((({theme:e})=>({marginBottom:e.spacing(3)}))),x=s.styled(i,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),j=s.styled(m)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),g=s.styled(i)((({theme:e})=>({display:"flex",justifyContent:"center",alignItems:"center",minHeight:"200px",padding:e.spacing(4)}))),h=s.styled(i)((({theme:e})=>({padding:e.spacing(4)})));module.exports=({open:s,onClose:i,onSelect:m,orgId:y,multiSelect:b=!1})=>{const[C,k]=t.useState([]),{data:f,isLoading:S,error:q}=u.useGetAssets(y,s);t.useEffect((()=>{s||k([])}),[s]);const v=()=>{k([]),i()},w=()=>{if(m&&f){const e=f.filter((e=>C.includes(e.id)));m(e)}k([]),i()},E=e=>{k((t=>b?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e.jsxs(c,{actions:[{label:"Cancel",onClick:v,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:w,variant:"primary",disabled:0===C.length,id:"asset-manager-select"}],onClose:v,open:s,title:"Select Images",children:[e.jsx(p,{children:e.jsxs(d,{fdKey:"asset-manager-tabs",onChange:()=>{},value:1,children:[e.jsx(n,{label:"Upload"}),e.jsx(n,{label:"Library"})]})}),S?e.jsx(g,{children:e.jsx(a.CircularProgress,{size:"large"})}):q?e.jsx(h,{children:e.jsx(o.EmptyState,{description:"Failed to load assets. Please try again later.",title:"Error loading assets"})}):f&&0!==f.length?e.jsx(l,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:f.map((t=>{const s=C.includes(t.id);return e.jsx(l,{"aria-selected":s,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e.jsxs(x,{"aria-label":"Select "+t.fileName,onClick:()=>E(t.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),E(t.id))},role:"button",selected:s,tabIndex:0,children:[s&&e.jsx(j,{size:"lg"}),e.jsx(r,{content:t.fileName,heading:"",imageAlt:t.metadata.altText,imageSrc:t.url})]})},t.id)}))}):e.jsx(h,{children:e.jsx(o.EmptyState,{description:"No assets available to display.",title:"No assets found"})})]})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/AssetManager/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport Typography from '@fd/components/atoms/Typography';\nimport Modal from '@fd/components/molecules/Modal';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\n\nimport type { Asset } from './types';\n\nconst StyledTabsContainer = styled(Box)(({ theme }) => ({\n  marginBottom: theme.spacing(3),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  width: '100%',\n  cursor: 'pointer',\n  position: 'relative',\n  '& .MuiCard-root': {\n    // Always use 2px border to prevent layout shift\n    borderWidth: '2px',\n    borderColor: selected ? theme.palette.semantic.stroke['stroke-selected'] : 'transparent',\n    // Use box-shadow to create the visual 1px border when not selected\n    // This prevents layout shift while maintaining the visual appearance\n    boxShadow: selected ? 'none' : `inset 0 0 0 1px ${theme.palette.semantic.stroke['stroke-weak']}`,\n  },\n  '&:hover': {\n    opacity: 0.9,\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\n  },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  left: theme.spacing(2),\n  zIndex: 1,\n  color: theme.palette.semantic.icon['icon-primary'],\n  '& circle': {\n    fill: theme.palette.common.white,\n  },\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /** Assets to display if no api is provided */\n  assets?: Asset[];\n  /** Whether multiple assets can be selected. Defaults to false */\n  multiSelect?: boolean;\n}\n\nconst AssetManager: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  assets,\n  multiSelect = false,\n}) => {\n  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetIds([]);\n    }\n  }, [open]);\n\n  const handleCancel = (): void => {\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleSelect = (): void => {\n    if (onSelect && assets) {\n      const selectedAssets = assets.filter((asset) => selectedAssetIds.includes(asset.id));\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleAssetClick = (assetId: string): void => {\n    setSelectedAssetIds((prev) => {\n      if (multiSelect) {\n        if (prev.includes(assetId)) {\n          return prev.filter((id) => id !== assetId);\n        }\n        return [...prev, assetId];\n      } else {\n        if (prev.includes(assetId)) {\n          return [];\n        }\n        return [assetId];\n      }\n    });\n  };\n\n  const getActionButtons = (): Array<{\n    disabled?: boolean;\n    id: string;\n    label: string;\n    onClick: () => void;\n    tone?: 'brand' | 'neutral';\n    variant: 'primary' | 'secondary';\n  }> => {\n    return [\n      {\n        label: 'Cancel',\n        onClick: handleCancel,\n        variant: 'secondary',\n        tone: 'neutral',\n        id: 'asset-manager-cancel',\n      },\n      {\n        label: 'Select',\n        onClick: handleSelect,\n        variant: 'primary',\n        disabled: selectedAssetIds.length === 0,\n        id: 'asset-manager-select',\n      },\n    ];\n  };\n\n  const renderBrowseTab = (): React.ReactElement => (\n    <Grid container component=\"ul\" spacing={1} sx={{ listStyle: 'none', margin: 0, padding: 0 }}>\n      {assets?.map((asset: Asset) => {\n        const isSelected = selectedAssetIds.includes(asset.id);\n        return (\n          <Grid\n            key={asset.id}\n            aria-selected={isSelected}\n            component=\"li\"\n            size={{ widescreen: 3, desktop: 3, mobile: 6, tablet: 4 }}\n          >\n            <StyledCardWrapper\n              aria-label={'Select ' + asset.fileName} // TODO: translate this text when translate provider is added\n              onClick={() => handleAssetClick(asset.id)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  handleAssetClick(asset.id);\n                }\n              }}\n              role=\"button\"\n              selected={isSelected}\n              tabIndex={0}\n            >\n              {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n              <Card\n                content={asset.fileName}\n                heading=\"\"\n                imageAlt={asset.metadata.altText}\n                imageSrc={asset.url}\n              />\n            </StyledCardWrapper>\n          </Grid>\n        );\n      })}\n    </Grid>\n  );\n\n  return (\n    <Modal\n      actions={getActionButtons()}\n      onClose={handleCancel}\n      open={open}\n      size=\"large\"\n      title={'Select Images'} // TODO: translate this text when translate provider is added\n    >\n      <StyledTabsContainer>\n        {/* TODO: replace this with tabs component when available */}\n        <Typography variant=\"h3Strong\">Tabs placeholder text</Typography>\n      </StyledTabsContainer>\n      {renderBrowseTab()}\n    </Modal>\n  );\n};\n\nexport default AssetManager;\n"],"names":["StyledTabsContainer","styled","Box","theme","marginBottom","spacing","StyledCardWrapper","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","opacity","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","open","onClose","onSelect","assets","multiSelect","selectedAssetIds","setSelectedAssetIds","useState","useEffect","handleCancel","handleSelect","selectedAssets","filter","asset","includes","id","handleAssetClick","assetId","prev","_jsxs","Modal","actions","label","onClick","variant","tone","disabled","length","size","title","children","_jsx","Typography","Grid","container","component","sx","listStyle","margin","padding","map","isSelected","widescreen","desktop","mobile","tablet","fileName","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"oWAaA,MAAMA,EAAsBC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChDC,aAAcD,EAAME,QAAQ,OAGxBC,EAAoBL,EAAAA,OAAOC,EAAK,CACpCK,kBAAoBC,GAAkB,aAATA,GADLP,EAEC,EAAGE,QAAOM,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EAAWN,EAAMY,QAAQC,SAASC,OAAO,mBAAqB,cAG3EC,UAAWT,EAAW,OAAS,mBAAmBN,EAAMY,QAAQC,SAASC,OAAO,kBAElF,UAAW,CACTE,QAAS,IAEX,gCAAiC,CAC/BL,YAAaX,EAAMY,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,YAITE,EAAsBnB,EAAAA,OAAOoB,EAAPpB,EAAiC,EAAGE,YAAO,CACrES,SAAU,WACVU,IAAKnB,EAAME,QAAQ,GACnBkB,KAAMpB,EAAME,QAAQ,GACpBmB,OAAQ,EACRC,MAAOtB,EAAMY,QAAQC,SAASU,KAAK,gBACnC,WAAY,CACVC,KAAMxB,EAAMY,QAAQa,OAAOC,0BA2BmB,EAChDC,OACAC,UACAC,WACAC,SACAC,eAAc,MAEd,MAAOC,EAAkBC,GAAuBC,EAAAA,SAAmB,IAGnEC,EAAAA,WAAU,KACHR,GACHM,EAAoB,MAErB,CAACN,IAEJ,MAAMS,EAAe,KACnBH,EAAoB,IACpBL,KAGIS,EAAe,KACnB,GAAIR,GAAYC,EAAQ,CACtB,MAAMQ,EAAiBR,EAAOS,QAAQC,GAAUR,EAAiBS,SAASD,EAAME,MAChFb,EAASS,EACX,CACAL,EAAoB,IACpBL,KAGIe,EAAoBC,IACxBX,GAAqBY,GACfd,EACEc,EAAKJ,SAASG,GACTC,EAAKN,QAAQG,GAAOA,IAAOE,IAE7B,IAAIC,EAAMD,GAEbC,EAAKJ,SAASG,GACT,GAEF,CAACA,MAqEd,OACEE,EAAAA,KAACC,GACCC,QA1DK,CACL,CACEC,MAAO,SACPC,QAASd,EACTe,QAAS,YACTC,KAAM,UACNV,GAAI,wBAEN,CACEO,MAAO,SACPC,QAASb,EACTc,QAAS,UACTE,SAAsC,IAA5BrB,EAAiBsB,OAC3BZ,GAAI,yBA8CNd,QAASQ,EACTT,KAAMA,EACN4B,KAAK,QACLC,MAAO,gBAAeC,SAAA,CAEtBC,EAAAA,IAAC7D,EAAmB,CAAA4D,SAElBC,EAAAA,IAACC,EAAU,CAACR,QAAQ,gDA/CxBO,MAACE,EAAI,CAACC,WAAS,EAACC,UAAU,KAAK5D,QAAS,EAAG6D,GAAI,CAAEC,UAAW,OAAQC,OAAQ,EAAGC,QAAS,GAAGT,SACxF3B,GAAQqC,KAAK3B,IACZ,MAAM4B,EAAapC,EAAiBS,SAASD,EAAME,IACnD,OACEgB,EAAAA,IAACE,EAAI,CAAA,gBAEYQ,EACfN,UAAU,KACVP,KAAM,CAAEc,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGf,SAEzDX,EAAAA,KAAC3C,EAAiB,CAAA,aACJ,UAAYqC,EAAMiC,SAC9BvB,QAAS,IAAMP,EAAiBH,EAAME,IACtCgC,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACFlC,EAAiBH,EAAME,MAG3BoC,KAAK,SACLxE,SAAU8D,EACVW,SAAU,EAACtB,SAAA,CAEVW,GAAcV,EAAAA,IAACzC,EAAmB,CAACsC,KAAK,OACzCG,EAAAA,IAACsB,EAAI,CACHC,QAASzC,EAAMiC,SACfS,QAAQ,GACRC,SAAU3C,EAAM4C,SAASC,QACzBC,SAAU9C,EAAM+C,UAvBf/C,EAAME"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport CircularProgress from '@fd/components/atoms/CircularProgress';\nimport Grid from '@fd/components/atoms/Grid';\nimport Tab from '@fd/components/atoms/Tab';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport Modal from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\n\nimport { useGetAssets } from './hooks/useAssets';\nimport type { Asset } from './types';\n\nconst StyledTabsContainer = styled(Box)(({ theme }) => ({\n  marginBottom: theme.spacing(3),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  width: '100%',\n  cursor: 'pointer',\n  position: 'relative',\n  '& .MuiCard-root': {\n    // Always use 2px border to prevent layout shift\n    borderWidth: '2px',\n    borderColor: selected ? theme.palette.semantic.stroke['stroke-selected'] : 'transparent',\n    // Use box-shadow to create the visual 1px border when not selected\n    // This prevents layout shift while maintaining the visual appearance\n    boxShadow: selected ? 'none' : `inset 0 0 0 1px ${theme.palette.semantic.stroke['stroke-weak']}`,\n  },\n  '&:hover': {\n    opacity: 0.9,\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\n  },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  left: theme.spacing(2),\n  zIndex: 1,\n  color: theme.palette.semantic.icon['icon-primary'],\n  '& circle': {\n    fill: theme.palette.common.white,\n  },\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /**\n   * Organization ID for fetching assets\n   */\n  orgId: string;\n  /** Whether multiple assets can be selected. Defaults to false */\n  multiSelect?: boolean;\n}\n\nconst StyledLoadingContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  minHeight: '200px',\n  padding: theme.spacing(4),\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4),\n}));\n\nconst AssetManager: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  orgId,\n  multiSelect = false,\n}) => {\n  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n\n  // Fetch assets from API - service handles everything\n  const { data: assets, isLoading, error } = useGetAssets(orgId, open);\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetIds([]);\n    }\n  }, [open]);\n\n  const handleCancel = (): void => {\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleSelect = (): void => {\n    if (onSelect && assets) {\n      const selectedAssets = assets.filter((asset: Asset) => selectedAssetIds.includes(asset.id));\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleAssetClick = (assetId: string): void => {\n    setSelectedAssetIds((prev) => {\n      if (multiSelect) {\n        if (prev.includes(assetId)) {\n          return prev.filter((id) => id !== assetId);\n        }\n        return [...prev, assetId];\n      } else {\n        if (prev.includes(assetId)) {\n          return [];\n        }\n        return [assetId];\n      }\n    });\n  };\n\n  const getActions = () => {\n    return [\n      {\n        label: 'Cancel',\n        onClick: handleCancel,\n        variant: 'secondary' as const,\n        tone: 'neutral' as const,\n        id: 'asset-manager-cancel',\n      },\n      {\n        label: 'Select',\n        onClick: handleSelect,\n        variant: 'primary' as const,\n        disabled: selectedAssetIds.length === 0,\n        id: 'asset-manager-select',\n      },\n    ];\n  };\n\n  const renderBrowseTab = (): React.ReactElement => {\n    if (isLoading) {\n      return (\n        <StyledLoadingContainer>\n          <CircularProgress size=\"large\" />\n        </StyledLoadingContainer>\n      );\n    }\n\n    if (error) {\n      return (\n        <StyledErrorContainer>\n          <EmptyState\n            description=\"Failed to load assets. Please try again later.\"\n            title=\"Error loading assets\"\n          />\n        </StyledErrorContainer>\n      );\n    }\n\n    if (!assets || assets.length === 0) {\n      return (\n        <StyledErrorContainer>\n          <EmptyState description=\"No assets available to display.\" title=\"No assets found\" />\n        </StyledErrorContainer>\n      );\n    }\n\n    return (\n      <Grid container component=\"ul\" spacing={1} sx={{ listStyle: 'none', margin: 0, padding: 0 }}>\n        {assets.map((asset: Asset) => {\n          const isSelected = selectedAssetIds.includes(asset.id);\n          return (\n            <Grid\n              key={asset.id}\n              aria-selected={isSelected}\n              component=\"li\"\n              size={{ widescreen: 3, desktop: 3, mobile: 6, tablet: 4 }}\n            >\n              <StyledCardWrapper\n                aria-label={'Select ' + asset.fileName} // TODO: translate this text when translate provider is added\n                onClick={() => handleAssetClick(asset.id)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    handleAssetClick(asset.id);\n                  }\n                }}\n                role=\"button\"\n                selected={isSelected}\n                tabIndex={0}\n              >\n                {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n                <Card\n                  content={asset.fileName}\n                  heading=\"\"\n                  imageAlt={asset.metadata.altText}\n                  imageSrc={asset.url}\n                />\n              </StyledCardWrapper>\n            </Grid>\n          );\n        })}\n      </Grid>\n    );\n  };\n\n  return (\n    // TODO: replace this with a new modal component when available\n    <Modal actions={getActions()} onClose={handleCancel} open={open} title=\"Select Images\">\n      <StyledTabsContainer>\n        {/* TODO: replace this with a new tabs component when available */}\n        <Tabs fdKey=\"asset-manager-tabs\" onChange={() => {}} value={1}>\n          <Tab label=\"Upload\" />\n          <Tab label=\"Library\" />\n        </Tabs>\n      </StyledTabsContainer>\n      {renderBrowseTab()}\n    </Modal>\n  );\n};\n\nexport default AssetManager;\n"],"names":["StyledTabsContainer","styled","Box","theme","marginBottom","spacing","StyledCardWrapper","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","opacity","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","StyledLoadingContainer","display","justifyContent","alignItems","minHeight","padding","StyledErrorContainer","open","onClose","onSelect","orgId","multiSelect","selectedAssetIds","setSelectedAssetIds","useState","data","assets","isLoading","error","useGetAssets","useEffect","handleCancel","handleSelect","selectedAssets","filter","asset","includes","id","handleAssetClick","assetId","prev","_jsxs","Modal","actions","label","onClick","variant","tone","disabled","length","title","children","_jsx","Tabs","fdKey","onChange","value","Tab","CircularProgress","size","EmptyState","description","Grid","container","component","sx","listStyle","margin","map","isSelected","widescreen","desktop","mobile","tablet","fileName","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"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"}

package/dist/components/organisms/AssetManager/index.d.ts

@@ -18,8 +18,10 @@ interface AssetManagerProps {
     onClose: () => void;
     /** Callback function when assets are selected */
     onSelect?: (selectedAssets: Asset[]) => void;
-    /** Assets to display if no api is provided */
-    assets?: Asset[];
+    /**
+     * Organization ID for fetching assets
+     */
+    orgId: string;
     /** Whether multiple assets can be selected. Defaults to false */
     multiSelect?: boolean;
 }

package/dist/components/organisms/AssetManager/index.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as i}from"react";import{styled as r}from"@mui/material/styles";import a from"@mui/material/Box";import l from"../../atoms/Card/index.js";import n from"@mui/material/Grid2";import s from"@mui/material/Typography";import c from"../../molecules/Modal/index.js";import m from"../../../icons/CheckmarkCircleSolid/index.js";const d=r(a)((({theme:e})=>({marginBottom:e.spacing(3)}))),p=r(a,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),u=r(m)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),h=({open:r,onClose:a,onSelect:m,assets:h,multiSelect:f=!1})=>{const[g,b]=o([]);i((()=>{r||b([])}),[r]);const k=()=>{b([]),a()},x=e=>{b((t=>f?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e(c,{actions:[{label:"Cancel",onClick:k,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:()=>{if(m&&h){const e=h.filter((e=>g.includes(e.id)));m(e)}b([]),a()},variant:"primary",disabled:0===g.length,id:"asset-manager-select"}],onClose:k,open:r,size:"large",title:"Select Images",children:[t(d,{children:t(s,{variant:"h3Strong",children:"Tabs placeholder text"})}),t(n,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:h?.map((o=>{const i=g.includes(o.id);return t(n,{"aria-selected":i,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e(p,{"aria-label":"Select "+o.fileName,onClick:()=>x(o.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),x(o.id))},role:"button",selected:i,tabIndex:0,children:[i&&t(u,{size:"lg"}),t(l,{content:o.fileName,heading:"",imageAlt:o.metadata.altText,imageSrc:o.url})]})},o.id)}))})]})};export{h as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i,useEffect as o}from"react";import{styled as r}from"@mui/material/styles";import a from"@mui/material/Box";import l from"../../atoms/Card/index.js";import{CircularProgress as n}from"../../atoms/CircularProgress/index.js";import s from"@mui/material/Grid2";import c from"@mui/material/Tab";import{EmptyState as d}from"../../molecules/EmptyState/index.js";import m from"../../molecules/Modal/index.js";import p from"../../molecules/Tabs/index.js";import u from"../../../icons/CheckmarkCircleSolid/index.js";import{useGetAssets as g}from"./hooks/useAssets.js";const h=r(a)((({theme:e})=>({marginBottom:e.spacing(3)}))),f=r(a,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),b=r(u)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),x=r(a)((({theme:e})=>({display:"flex",justifyContent:"center",alignItems:"center",minHeight:"200px",padding:e.spacing(4)}))),k=r(a)((({theme:e})=>({padding:e.spacing(4)}))),y=({open:r,onClose:a,onSelect:u,orgId:y,multiSelect:C=!1})=>{const[S,j]=i([]),{data:v,isLoading:w,error:I}=g(y,r);o((()=>{r||j([])}),[r]);const z=()=>{j([]),a()},N=e=>{j((t=>C?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e(m,{actions:[{label:"Cancel",onClick:z,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:()=>{if(u&&v){const e=v.filter((e=>S.includes(e.id)));u(e)}j([]),a()},variant:"primary",disabled:0===S.length,id:"asset-manager-select"}],onClose:z,open:r,title:"Select Images",children:[t(h,{children:e(p,{fdKey:"asset-manager-tabs",onChange:()=>{},value:1,children:[t(c,{label:"Upload"}),t(c,{label:"Library"})]})}),w?t(x,{children:t(n,{size:"large"})}):I?t(k,{children:t(d,{description:"Failed to load assets. Please try again later.",title:"Error loading assets"})}):v&&0!==v.length?t(s,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:v.map((i=>{const o=S.includes(i.id);return t(s,{"aria-selected":o,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e(f,{"aria-label":"Select "+i.fileName,onClick:()=>N(i.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),N(i.id))},role:"button",selected:o,tabIndex:0,children:[o&&t(b,{size:"lg"}),t(l,{content:i.fileName,heading:"",imageAlt:i.metadata.altText,imageSrc:i.url})]})},i.id)}))}):t(k,{children:t(d,{description:"No assets available to display.",title:"No assets found"})})]})};export{y as default};
 //# sourceMappingURL=index.js.map