@flipdish/portal-library 7.8.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/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/Heading/Heading.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("@mui/material/Toolbar"),i=require("@mui/material/styles"),a=require("@mui/material/Box"),n=require("../../atoms/BreadCrumbs/index.cjs.js"),l=require("../../atoms/Button/index.cjs.js"),s=require("@mui/material/Typography"),r=require("../../molecules/ButtonGroup/index.cjs.js"),o=require("../../molecules/Combobox/index.cjs.js");const d=i.styled(t)((({theme:e})=>({flexDirection:"column",alignItems:"stretch",[e.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",paddingTop:e.spacing(2),paddingBottom:e.spacing(2)},[e.breakpoints.down("tablet")]:{paddingTop:e.spacing(2),paddingBottom:e.spacing(2)}}))),p=i.styled(a)((({theme:e})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",flex:"1 1 auto",gap:e.spacing(.5),minWidth:0,maxWidth:"100%",[e.breakpoints.up("tablet")]:{marginRight:e.spacing(2)}}))),c=i.styled(a)((({theme:e})=>({display:"flex",justifyContent:"flex-end",alignItems:"center",gap:e.spacing(1),flexShrink:0,alignSelf:"flex-start",paddingTop:e.spacing(.5),[e.breakpoints.down("tablet")]:{justifyContent:"flex-end",marginTop:e.spacing(1),paddingTop:0,alignSelf:"stretch",width:"100%"}}))),u=i.styled(a)((({theme:e})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",gap:e.spacing(2),width:"100%",maxWidth:"100%",[e.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"center",paddingTop:e.spacing(2),flexWrap:"wrap"},[e.breakpoints.down("tablet")]:{flexDirection:"column",alignItems:"flex-start",paddingTop:e.spacing(2),paddingBottom:e.spacing(2),width:"100%"}}))),g=({title:t,buttons:i,description:a,breadcrumbItems:g,selectBoxes:m})=>e.jsxs(d,{children:[e.jsxs(p,{children:[g&&e.jsx(n,{items:g}),t&&e.jsx(s,{variant:"h1Strong",children:t}),a&&e.jsx(s,{color:"semantic.text.text-weak",variant:"captionWeak",children:a}),m?.length?e.jsx(u,{children:m.map((t=>e.jsx(o.Combobox,{fdKey:t.fdKey,label:t.label,onChange:t.onChange,options:t.options,placeholder:t.placeholder,translations:t.translations,value:t.value??null},t.fdKey)))}):null]}),i?.length?e.jsx(c,{children:e.jsx(r,{align:"right",fdKey:"heading-button-group",layout:"horizontal",size:"medium",children:i.map((t=>{const i=t.variant;return e.jsx(l.Button,{disabled:t.disabled??!1,fdKey:t.fdKey,onClick:t.onClick,variant:i,children:t.label},t.fdKey)}))})}):null]});exports.Heading=g,exports.default=g;
+//# sourceMappingURL=Heading.cjs.js.map

package/dist/components/organisms/Heading/Heading.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.cjs.js","sources":["../../../../src/components/organisms/Heading/Heading.tsx"],"sourcesContent":["import React from 'react';\n\nimport Toolbar from '@mui/material/Toolbar';\n\nimport styled from '@fd/utilities/styledUtilities';\n\nimport Box from '../../atoms/Box';\nimport BreadCrumbs, { type BreadcrumbItem } from '../../atoms/BreadCrumbs';\nimport Button from '../../atoms/Button';\nimport { type ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Typography from '../../atoms/Typography';\nimport  ButtonGroup from \"../../molecules/ButtonGroup\";\nimport {Combobox, type ComboboxOption, type ComboboxProps} from '../../molecules/Combobox';\n\nexport interface ButtonConfig {\n  variant: ButtonType;\n  onClick: () => void;\n  label: string;\n  fdKey: string;\n  disabled?: boolean;\n}\n\nexport interface SelectConfig {\n  options: ComboboxOption[];\n  label: string;\n  placeholder?: string;\n  fdKey: string;\n  onChange?: ComboboxProps['onChange'];\n  value?: ComboboxProps['value'];\n  translations: ComboboxProps['translations'];\n}\n\nexport interface HeadingProps {\n  title?: string;\n  buttons?: ButtonConfig[];\n  description?: string;\n  breadcrumbItems?: BreadcrumbItem[];\n  selectBoxes?: SelectConfig[];\n}\n\nconst StyledToolbar = styled(Toolbar)(({ theme }) => ({\n  flexDirection: 'column',\n  alignItems: 'stretch',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    justifyContent: 'space-between',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  [theme.breakpoints.down('tablet')]: {\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n}));\n\nconst StyledLeftSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  flex: '1 1 auto',\n  gap: theme.spacing(0.5),\n  minWidth: 0,\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    marginRight: theme.spacing(2),\n  },\n}));\n\nconst StyledRightSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flexShrink: 0,\n  alignSelf: 'flex-start',\n  paddingTop: theme.spacing(0.5),\n  [theme.breakpoints.down('tablet')]: {\n    justifyContent: 'flex-end',\n    marginTop: theme.spacing(1),\n    paddingTop: 0,\n    alignSelf: 'stretch',\n    width: '100%',\n  },\n}));\n\nconst StyledSelectedSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  width: '100%',\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingTop: theme.spacing(2),\n    flexWrap: 'wrap',\n  },\n  [theme.breakpoints.down('tablet')]: {\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n    width: '100%',\n  },\n}));\n\nexport const Heading: React.FC<HeadingProps> = ({\n  title,\n  buttons,\n  description,\n  breadcrumbItems,\n  selectBoxes,\n}: HeadingProps) => {\n    const renderSelectedSection = () => {\n      if (!selectBoxes?.length) {\n        return null;\n      }\n\n      return (\n        <StyledSelectedSection>\n          {selectBoxes.map((selectConfig) => (\n            <Combobox\n              key={selectConfig.fdKey}\n              fdKey={selectConfig.fdKey}\n              label={selectConfig.label}\n              onChange={selectConfig.onChange}\n              options={selectConfig.options}\n              placeholder={selectConfig.placeholder}\n              translations={selectConfig.translations}\n              value={selectConfig.value ?? null}\n            />\n          ))}\n        </StyledSelectedSection>\n      );\n    };\n\n  const renderLeftSection = () => (\n    <StyledLeftSection>\n        {breadcrumbItems && <BreadCrumbs items={breadcrumbItems} />}\n        {title && <Typography variant=\"h1Strong\">{title}</Typography>}\n        {description && <Typography color = 'semantic.text.text-weak' variant=\"captionWeak\">{description}</Typography>}\n        {renderSelectedSection()}\n    </StyledLeftSection>\n  );\n\n  const renderRightSection = () => {\n    if (!buttons?.length) {\n      return null;\n    }\n\n    return (\n      <StyledRightSection>\n        <ButtonGroup align=\"right\" fdKey=\"heading-button-group\" layout=\"horizontal\" size=\"medium\">\n          {buttons.map((buttonConfig: ButtonConfig) => {\n            const variant: ButtonType = buttonConfig.variant;\n            return (\n              <Button\n                key={buttonConfig.fdKey}\n                disabled={buttonConfig.disabled ?? false}\n                fdKey={buttonConfig.fdKey}\n                onClick={buttonConfig.onClick}\n                variant={variant}\n              >\n                {buttonConfig.label}\n              </Button>\n            );\n          })}\n        </ButtonGroup>\n      </StyledRightSection>\n    );\n  };\n\n  return (\n    <StyledToolbar>\n        {renderLeftSection()}\n        {renderRightSection()}\n      </StyledToolbar>\n  );\n};\n\nexport default Heading;"],"names":["StyledToolbar","styled","Toolbar","theme","flexDirection","alignItems","breakpoints","up","justifyContent","paddingTop","spacing","paddingBottom","down","StyledLeftSection","Box","display","flex","gap","minWidth","maxWidth","marginRight","StyledRightSection","flexShrink","alignSelf","marginTop","width","StyledSelectedSection","flexWrap","Heading","title","buttons","description","breadcrumbItems","selectBoxes","_jsxs","children","_jsx","BreadCrumbs","items","Typography","variant","color","length","map","selectConfig","Combobox","fdKey","label","onChange","options","placeholder","translations","value","ButtonGroup","align","layout","size","buttonConfig","Button","disabled","onClick"],"mappings":"8cAwCA,MAAMA,EAAgBC,EAAAA,OAAOC,EAAPD,EAAgB,EAAGE,YAAO,CAC9CC,cAAe,SACfC,WAAY,UACZ,CAACF,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,aACZG,eAAgB,gBAChBC,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,IAE/B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCH,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,QAI3BG,EAAoBZ,EAAAA,OAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC9CY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZW,KAAM,WACNC,IAAKd,EAAMO,QAAQ,IACnBQ,SAAU,EACVC,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCa,YAAajB,EAAMO,QAAQ,QAIzBW,EAAqBpB,EAAAA,OAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC/CY,QAAS,OACTP,eAAgB,WAChBH,WAAY,SACZY,IAAKd,EAAMO,QAAQ,GACnBY,WAAY,EACZC,UAAW,aACXd,WAAYN,EAAMO,QAAQ,IAC1B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCJ,eAAgB,WAChBgB,UAAWrB,EAAMO,QAAQ,GACzBD,WAAY,EACZc,UAAW,UACXE,MAAO,YAILC,EAAwBzB,EAAAA,OAAOa,EAAPb,EAAY,EAAGE,YAAO,CAClDY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZY,IAAKd,EAAMO,QAAQ,GACnBe,MAAO,OACPN,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,SACZI,WAAYN,EAAMO,QAAQ,GAC1BiB,SAAU,QAEZ,CAACxB,EAAMG,YAAYM,KAAK,WAAY,CAClCR,cAAe,SACfC,WAAY,aACZI,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,GAC7Be,MAAO,YAIEG,EAAkC,EAC7CC,QACAC,UACAC,cACAC,kBACAC,iBA8DEC,EAAAA,KAAClC,EAAa,CAAAmC,SAAA,CApCdD,OAACrB,EAAiB,CAAAsB,SAAA,CACbH,GAAmBI,EAAAA,IAACC,EAAW,CAACC,MAAON,IACvCH,GAASO,EAAAA,IAACG,EAAU,CAACC,QAAQ,WAAUL,SAAEN,IACzCE,GAAeK,EAAAA,IAACG,EAAU,CAACE,MAAQ,0BAA0BD,QAAQ,cAAaL,SAAEJ,IA1BlFE,GAAaS,OAKhBN,EAAAA,IAACV,EAAqB,CAAAS,SACnBF,EAAYU,KAAKC,GAChBR,EAAAA,IAACS,EAAAA,SAAQ,CAEPC,MAAOF,EAAaE,MACpBC,MAAOH,EAAaG,MACpBC,SAAUJ,EAAaI,SACvBC,QAASL,EAAaK,QACtBC,YAAaN,EAAaM,YAC1BC,aAAcP,EAAaO,aAC3BC,MAAOR,EAAaQ,OAAS,MAPxBR,EAAaE,WAPjB,QA+BNhB,GAASY,OAKZN,EAAAA,IAACf,EAAkB,CAAAc,SACjBC,EAAAA,IAACiB,EAAW,CAACC,MAAM,QAAQR,MAAM,uBAAuBS,OAAO,aAAaC,KAAK,SAAQrB,SACtFL,EAAQa,KAAKc,IACZ,MAAMjB,EAAsBiB,EAAajB,QACzC,OACEJ,EAAAA,IAACsB,SAAM,CAELC,SAAUF,EAAaE,WAAY,EACnCb,MAAOW,EAAaX,MACpBc,QAASH,EAAaG,QACtBpB,QAASA,EAAOL,SAEfsB,EAAaV,OANTU,EAAaX,cAVrB"}

package/dist/components/organisms/Heading/Heading.d.ts

@@ -0,0 +1,32 @@
+import react__default from 'react';
+import { BreadcrumbItem } from '../../atoms/BreadCrumbs/index.js';
+import { ButtonType } from '../../atoms/Button/getButtonStyles.js';
+import { ComboboxOption, ComboboxProps } from '../../molecules/Combobox/index.js';
+
+interface ButtonConfig {
+    variant: ButtonType;
+    onClick: () => void;
+    label: string;
+    fdKey: string;
+    disabled?: boolean;
+}
+interface SelectConfig {
+    options: ComboboxOption[];
+    label: string;
+    placeholder?: string;
+    fdKey: string;
+    onChange?: ComboboxProps['onChange'];
+    value?: ComboboxProps['value'];
+    translations: ComboboxProps['translations'];
+}
+interface HeadingProps {
+    title?: string;
+    buttons?: ButtonConfig[];
+    description?: string;
+    breadcrumbItems?: BreadcrumbItem[];
+    selectBoxes?: SelectConfig[];
+}
+declare const Heading: react__default.FC<HeadingProps>;
+
+export { Heading, Heading as default };
+export type { ButtonConfig, HeadingProps, SelectConfig };

package/dist/components/organisms/Heading/Heading.js

@@ -0,0 +1,2 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import"react";import i from"@mui/material/Toolbar";import{styled as a}from"@mui/material/styles";import n from"@mui/material/Box";import o from"../../atoms/BreadCrumbs/index.js";import{Button as l}from"../../atoms/Button/index.js";import r from"@mui/material/Typography";import s from"../../molecules/ButtonGroup/index.js";import{Combobox as p}from"../../molecules/Combobox/index.js";const m=a(i)((({theme:t})=>({flexDirection:"column",alignItems:"stretch",[t.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",paddingTop:t.spacing(2),paddingBottom:t.spacing(2)},[t.breakpoints.down("tablet")]:{paddingTop:t.spacing(2),paddingBottom:t.spacing(2)}}))),d=a(n)((({theme:t})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",flex:"1 1 auto",gap:t.spacing(.5),minWidth:0,maxWidth:"100%",[t.breakpoints.up("tablet")]:{marginRight:t.spacing(2)}}))),c=a(n)((({theme:t})=>({display:"flex",justifyContent:"flex-end",alignItems:"center",gap:t.spacing(1),flexShrink:0,alignSelf:"flex-start",paddingTop:t.spacing(.5),[t.breakpoints.down("tablet")]:{justifyContent:"flex-end",marginTop:t.spacing(1),paddingTop:0,alignSelf:"stretch",width:"100%"}}))),g=a(n)((({theme:t})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",gap:t.spacing(2),width:"100%",maxWidth:"100%",[t.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"center",paddingTop:t.spacing(2),flexWrap:"wrap"},[t.breakpoints.down("tablet")]:{flexDirection:"column",alignItems:"flex-start",paddingTop:t.spacing(2),paddingBottom:t.spacing(2),width:"100%"}}))),f=({title:i,buttons:a,description:n,breadcrumbItems:f,selectBoxes:u})=>t(m,{children:[t(d,{children:[f&&e(o,{items:f}),i&&e(r,{variant:"h1Strong",children:i}),n&&e(r,{color:"semantic.text.text-weak",variant:"captionWeak",children:n}),u?.length?e(g,{children:u.map((t=>e(p,{fdKey:t.fdKey,label:t.label,onChange:t.onChange,options:t.options,placeholder:t.placeholder,translations:t.translations,value:t.value??null},t.fdKey)))}):null]}),a?.length?e(c,{children:e(s,{align:"right",fdKey:"heading-button-group",layout:"horizontal",size:"medium",children:a.map((t=>{const i=t.variant;return e(l,{disabled:t.disabled??!1,fdKey:t.fdKey,onClick:t.onClick,variant:i,children:t.label},t.fdKey)}))})}):null]});export{f as Heading,f as default};
+//# sourceMappingURL=Heading.js.map

package/dist/components/organisms/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sources":["../../../../src/components/organisms/Heading/Heading.tsx"],"sourcesContent":["import React from 'react';\n\nimport Toolbar from '@mui/material/Toolbar';\n\nimport styled from '@fd/utilities/styledUtilities';\n\nimport Box from '../../atoms/Box';\nimport BreadCrumbs, { type BreadcrumbItem } from '../../atoms/BreadCrumbs';\nimport Button from '../../atoms/Button';\nimport { type ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Typography from '../../atoms/Typography';\nimport  ButtonGroup from \"../../molecules/ButtonGroup\";\nimport {Combobox, type ComboboxOption, type ComboboxProps} from '../../molecules/Combobox';\n\nexport interface ButtonConfig {\n  variant: ButtonType;\n  onClick: () => void;\n  label: string;\n  fdKey: string;\n  disabled?: boolean;\n}\n\nexport interface SelectConfig {\n  options: ComboboxOption[];\n  label: string;\n  placeholder?: string;\n  fdKey: string;\n  onChange?: ComboboxProps['onChange'];\n  value?: ComboboxProps['value'];\n  translations: ComboboxProps['translations'];\n}\n\nexport interface HeadingProps {\n  title?: string;\n  buttons?: ButtonConfig[];\n  description?: string;\n  breadcrumbItems?: BreadcrumbItem[];\n  selectBoxes?: SelectConfig[];\n}\n\nconst StyledToolbar = styled(Toolbar)(({ theme }) => ({\n  flexDirection: 'column',\n  alignItems: 'stretch',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    justifyContent: 'space-between',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  [theme.breakpoints.down('tablet')]: {\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n}));\n\nconst StyledLeftSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  flex: '1 1 auto',\n  gap: theme.spacing(0.5),\n  minWidth: 0,\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    marginRight: theme.spacing(2),\n  },\n}));\n\nconst StyledRightSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flexShrink: 0,\n  alignSelf: 'flex-start',\n  paddingTop: theme.spacing(0.5),\n  [theme.breakpoints.down('tablet')]: {\n    justifyContent: 'flex-end',\n    marginTop: theme.spacing(1),\n    paddingTop: 0,\n    alignSelf: 'stretch',\n    width: '100%',\n  },\n}));\n\nconst StyledSelectedSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  width: '100%',\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingTop: theme.spacing(2),\n    flexWrap: 'wrap',\n  },\n  [theme.breakpoints.down('tablet')]: {\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n    width: '100%',\n  },\n}));\n\nexport const Heading: React.FC<HeadingProps> = ({\n  title,\n  buttons,\n  description,\n  breadcrumbItems,\n  selectBoxes,\n}: HeadingProps) => {\n    const renderSelectedSection = () => {\n      if (!selectBoxes?.length) {\n        return null;\n      }\n\n      return (\n        <StyledSelectedSection>\n          {selectBoxes.map((selectConfig) => (\n            <Combobox\n              key={selectConfig.fdKey}\n              fdKey={selectConfig.fdKey}\n              label={selectConfig.label}\n              onChange={selectConfig.onChange}\n              options={selectConfig.options}\n              placeholder={selectConfig.placeholder}\n              translations={selectConfig.translations}\n              value={selectConfig.value ?? null}\n            />\n          ))}\n        </StyledSelectedSection>\n      );\n    };\n\n  const renderLeftSection = () => (\n    <StyledLeftSection>\n        {breadcrumbItems && <BreadCrumbs items={breadcrumbItems} />}\n        {title && <Typography variant=\"h1Strong\">{title}</Typography>}\n        {description && <Typography color = 'semantic.text.text-weak' variant=\"captionWeak\">{description}</Typography>}\n        {renderSelectedSection()}\n    </StyledLeftSection>\n  );\n\n  const renderRightSection = () => {\n    if (!buttons?.length) {\n      return null;\n    }\n\n    return (\n      <StyledRightSection>\n        <ButtonGroup align=\"right\" fdKey=\"heading-button-group\" layout=\"horizontal\" size=\"medium\">\n          {buttons.map((buttonConfig: ButtonConfig) => {\n            const variant: ButtonType = buttonConfig.variant;\n            return (\n              <Button\n                key={buttonConfig.fdKey}\n                disabled={buttonConfig.disabled ?? false}\n                fdKey={buttonConfig.fdKey}\n                onClick={buttonConfig.onClick}\n                variant={variant}\n              >\n                {buttonConfig.label}\n              </Button>\n            );\n          })}\n        </ButtonGroup>\n      </StyledRightSection>\n    );\n  };\n\n  return (\n    <StyledToolbar>\n        {renderLeftSection()}\n        {renderRightSection()}\n      </StyledToolbar>\n  );\n};\n\nexport default Heading;"],"names":["StyledToolbar","styled","Toolbar","theme","flexDirection","alignItems","breakpoints","up","justifyContent","paddingTop","spacing","paddingBottom","down","StyledLeftSection","Box","display","flex","gap","minWidth","maxWidth","marginRight","StyledRightSection","flexShrink","alignSelf","marginTop","width","StyledSelectedSection","flexWrap","Heading","title","buttons","description","breadcrumbItems","selectBoxes","_jsxs","children","_jsx","BreadCrumbs","items","Typography","variant","color","length","map","selectConfig","Combobox","fdKey","label","onChange","options","placeholder","translations","value","ButtonGroup","align","layout","size","buttonConfig","Button","disabled","onClick"],"mappings":"kbAwCA,MAAMA,EAAgBC,EAAOC,EAAPD,EAAgB,EAAGE,YAAO,CAC9CC,cAAe,SACfC,WAAY,UACZ,CAACF,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,aACZG,eAAgB,gBAChBC,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,IAE/B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCH,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,QAI3BG,EAAoBZ,EAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC9CY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZW,KAAM,WACNC,IAAKd,EAAMO,QAAQ,IACnBQ,SAAU,EACVC,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCa,YAAajB,EAAMO,QAAQ,QAIzBW,EAAqBpB,EAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC/CY,QAAS,OACTP,eAAgB,WAChBH,WAAY,SACZY,IAAKd,EAAMO,QAAQ,GACnBY,WAAY,EACZC,UAAW,aACXd,WAAYN,EAAMO,QAAQ,IAC1B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCJ,eAAgB,WAChBgB,UAAWrB,EAAMO,QAAQ,GACzBD,WAAY,EACZc,UAAW,UACXE,MAAO,YAILC,EAAwBzB,EAAOa,EAAPb,EAAY,EAAGE,YAAO,CAClDY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZY,IAAKd,EAAMO,QAAQ,GACnBe,MAAO,OACPN,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,SACZI,WAAYN,EAAMO,QAAQ,GAC1BiB,SAAU,QAEZ,CAACxB,EAAMG,YAAYM,KAAK,WAAY,CAClCR,cAAe,SACfC,WAAY,aACZI,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,GAC7Be,MAAO,YAIEG,EAAkC,EAC7CC,QACAC,UACAC,cACAC,kBACAC,iBA8DEC,EAAClC,EAAa,CAAAmC,SAAA,CApCdD,EAACrB,EAAiB,CAAAsB,SAAA,CACbH,GAAmBI,EAACC,EAAW,CAACC,MAAON,IACvCH,GAASO,EAACG,EAAU,CAACC,QAAQ,WAAUL,SAAEN,IACzCE,GAAeK,EAACG,EAAU,CAACE,MAAQ,0BAA0BD,QAAQ,cAAaL,SAAEJ,IA1BlFE,GAAaS,OAKhBN,EAACV,EAAqB,CAAAS,SACnBF,EAAYU,KAAKC,GAChBR,EAACS,EAAQ,CAEPC,MAAOF,EAAaE,MACpBC,MAAOH,EAAaG,MACpBC,SAAUJ,EAAaI,SACvBC,QAASL,EAAaK,QACtBC,YAAaN,EAAaM,YAC1BC,aAAcP,EAAaO,aAC3BC,MAAOR,EAAaQ,OAAS,MAPxBR,EAAaE,WAPjB,QA+BNhB,GAASY,OAKZN,EAACf,EAAkB,CAAAc,SACjBC,EAACiB,EAAW,CAACC,MAAM,QAAQR,MAAM,uBAAuBS,OAAO,aAAaC,KAAK,SAAQrB,SACtFL,EAAQa,KAAKc,IACZ,MAAMjB,EAAsBiB,EAAajB,QACzC,OACEJ,EAACsB,EAAM,CAELC,SAAUF,EAAaE,WAAY,EACnCb,MAAOW,EAAaX,MACpBc,QAASH,EAAaG,QACtBpB,QAASA,EAAOL,SAEfsB,EAAaV,OANTU,EAAaX,cAVrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/portal-library",
-  "version": "7.8.0",
+  "version": "7.9.0",
   "files": [
     "dist"
   ],
@@ -127,7 +127,7 @@
   },
   "msw": {
     "workerDirectory": [
-      "./"
+      "./public"
     ]
   },
   "scripts": {