@pega/cosmos-react-core 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/lib/components/EmojiPicker/EmojiDisplay.js

@@ -20,13 +20,13 @@ const EmojiDisplay = props => {
     if (typeof content === 'string' && emojiSet) {
         const renderEmoji = (eMatch) => {
             const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data);
-            return emojiData && _jsx(Emoji, { set: emojiSet, emoji: emojiData, size: size }, void 0);
+            return emojiData && _jsx(Emoji, { set: emojiSet, emoji: emojiData, size: size });
         };
         if (content.split(regex).length > 1) {
             msgArr = replaceMatchWithElement(content, regex, renderEmoji);
         }
     }
-    return emojiSet && msgArr.length >= 1 ? (_jsx(StyledEmojiDisplay, { ...restProps, children: msgArr }, void 0)) : (_jsx(_Fragment, { children: content }, void 0));
+    return emojiSet && msgArr.length >= 1 ? (_jsx(StyledEmojiDisplay, { ...restProps, children: msgArr })) : (_jsx(_Fragment, { children: content }));
 };
 export default EmojiDisplay;
 //# sourceMappingURL=EmojiDisplay.js.map

package/lib/components/EmojiPicker/EmojiDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiDisplay.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgC,MAAM,OAAO,CAAC;AACjE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAsB,MAAM,YAAY,CAAC;AAC/E,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAG5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKrC,CAAC;AACF,MAAM,YAAY,GAAyC,KAAK,CAAC,EAAE;IACjE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,IAAI,MAAM,GAAkB,EAAE,CAAC;IAC/B,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,QAAQ,EAAE;QAC3C,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,sBAAsB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAA6B,CAAC,CAAC;YAC1F,OAAO,SAAS,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,WAAI,CAAC;QAC7E,CAAC,CAAC;QACF,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,MAAM,GAAG,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;SAC/D;KACF;IACD,OAAO,QAAQ,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CACtC,KAAC,kBAAkB,OAAK,SAAS,YAAG,MAAM,WAAsB,CACjE,CAAC,CAAC,CAAC,CACF,4BAAG,OAAO,WAAI,CACf,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC","sourcesContent":["import { useContext, FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport emojiRegex from 'emoji-regex';\nimport { getEmojiDataFromNative, Emoji, Data as NativeData } from 'emoji-mart';\nimport data from 'emoji-mart/data/all.json';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { replaceMatchWithElement } from '../../utils';\n\nimport { EmojiContext } from './EmojiPicker';\n\nexport interface EmojiDisplayProps extends BaseProps, NoChildrenProp {\n  /** Content to be displayed */\n  content: ReactNode;\n  /** Size of emoji */\n  size?: number;\n}\nconst StyledEmojiDisplay = styled.span`\n  .emoji-mart-emoji {\n    line-height: 1;\n    vertical-align: middle;\n  }\n`;\nconst EmojiDisplay: FunctionComponent<EmojiDisplayProps> = props => {\n  const { content, size = 20, ...restProps } = props;\n  const regex = emojiRegex();\n  let msgArr: JSX.Element[] = [];\n  const { set: emojiSet } = useContext(EmojiContext);\n  if (typeof content === 'string' && emojiSet) {\n    const renderEmoji = (eMatch: string) => {\n      const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data as unknown as NativeData);\n      return emojiData && <Emoji set={emojiSet} emoji={emojiData} size={size} />;\n    };\n    if (content.split(regex).length > 1) {\n      msgArr = replaceMatchWithElement(content, regex, renderEmoji);\n    }\n  }\n  return emojiSet && msgArr.length >= 1 ? (\n    <StyledEmojiDisplay {...restProps}>{msgArr}</StyledEmojiDisplay>\n  ) : (\n    <>{content}</>\n  );\n};\nexport default EmojiDisplay;\n"]}
+{"version":3,"file":"EmojiDisplay.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgC,MAAM,OAAO,CAAC;AACjE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAsB,MAAM,YAAY,CAAC;AAC/E,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAG5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKrC,CAAC;AACF,MAAM,YAAY,GAAyC,KAAK,CAAC,EAAE;IACjE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,IAAI,MAAM,GAAkB,EAAE,CAAC;IAC/B,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,QAAQ,EAAE;QAC3C,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,sBAAsB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAA6B,CAAC,CAAC;YAC1F,OAAO,SAAS,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;QAC7E,CAAC,CAAC;QACF,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,MAAM,GAAG,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;SAC/D;KACF;IACD,OAAO,QAAQ,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CACtC,KAAC,kBAAkB,OAAK,SAAS,YAAG,MAAM,GAAsB,CACjE,CAAC,CAAC,CAAC,CACF,4BAAG,OAAO,GAAI,CACf,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC","sourcesContent":["import { useContext, FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport emojiRegex from 'emoji-regex';\nimport { getEmojiDataFromNative, Emoji, Data as NativeData } from 'emoji-mart';\nimport data from 'emoji-mart/data/all.json';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { replaceMatchWithElement } from '../../utils';\n\nimport { EmojiContext } from './EmojiPicker';\n\nexport interface EmojiDisplayProps extends BaseProps, NoChildrenProp {\n  /** Content to be displayed */\n  content: ReactNode;\n  /** Size of emoji */\n  size?: number;\n}\nconst StyledEmojiDisplay = styled.span`\n  .emoji-mart-emoji {\n    line-height: 1;\n    vertical-align: middle;\n  }\n`;\nconst EmojiDisplay: FunctionComponent<EmojiDisplayProps> = props => {\n  const { content, size = 20, ...restProps } = props;\n  const regex = emojiRegex();\n  let msgArr: JSX.Element[] = [];\n  const { set: emojiSet } = useContext(EmojiContext);\n  if (typeof content === 'string' && emojiSet) {\n    const renderEmoji = (eMatch: string) => {\n      const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data as unknown as NativeData);\n      return emojiData && <Emoji set={emojiSet} emoji={emojiData} size={size} />;\n    };\n    if (content.split(regex).length > 1) {\n      msgArr = replaceMatchWithElement(content, regex, renderEmoji);\n    }\n  }\n  return emojiSet && msgArr.length >= 1 ? (\n    <StyledEmojiDisplay {...restProps}>{msgArr}</StyledEmojiDisplay>\n  ) : (\n    <>{content}</>\n  );\n};\nexport default EmojiDisplay;\n"]}

package/lib/components/EmojiPicker/EmojiPicker.js

@@ -34,7 +34,7 @@ const EmojiPicker = forwardRef(({ emojiSize = 24, perLine = 9, showFooter = true
             });
         }
     }, [set, overrideData]);
-    return (data && (_jsx(StyledEmojiPicker, { ref: ref, showFooter: showFooter, style: { '--emoji-size': `${emojiSize}px` }, children: _jsx(NimblePicker, { ...restProps, set: set, native: !spriteSrcResolver, backgroundImageFn: spriteSrcResolver, data: data, emojiSize: emojiSize, perLine: perLine, exclude: exclude, onSelect: onSelect, color: theme.base.palette.interactive, emoji: '', title: '', emojiTooltip: true, showSkinTones: showFooter, showPreview: false }, void 0) }, void 0)));
+    return (data && (_jsx(StyledEmojiPicker, { ref: ref, showFooter: showFooter, style: { '--emoji-size': `${emojiSize}px` }, children: _jsx(NimblePicker, { ...restProps, set: set, native: !spriteSrcResolver, backgroundImageFn: spriteSrcResolver, data: data, emojiSize: emojiSize, perLine: perLine, exclude: exclude, onSelect: onSelect, color: theme.base.palette.interactive, emoji: '', title: '', emojiTooltip: true, showSkinTones: showFooter, showPreview: false }) })));
 });
 export default EmojiPicker;
 //# sourceMappingURL=EmojiPicker.js.map

package/lib/components/EmojiPicker/EmojiPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,aAAa,EAKb,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EACL,YAAY,EAKb,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAIrD,MAAM,cAAc,GAAG,IAAI,GAAG,EAA+B,CAAC;AA+B9D,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAE,CAAC,CAAC;AACjE,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EACE,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,CAAC,EACX,UAAU,GAAG,IAAI,EACjB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACsB,EACpC,GAAwB,EACxB,EAAE;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,IAAI,KAAK,CAAC;QAE7B,kDAAkD;QAClD,OAAO,CAAC,IAAI,CAAC,CAAC;QAEd,IAAI,YAAY,EAAE;YAChB,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,YAAY,CAAC,CAAC;YACxB,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtC,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;YAC/C,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM;YACL,MAAM,CAAC,mBAAmB,OAAO,OAAO,CAAC;iBACtC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;gBAC1B,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAClC,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAE,CAAC,CAAC;YACxC,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE;gBACV,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;SACN;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,IAAI,IAAI,CACN,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,SAAS,IAAI,EAAmB,YAE5D,KAAC,YAAY,OACP,SAAS,EACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,CAAC,iBAAiB,EAC1B,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EACrC,KAAK,EAAC,EAAE,EACR,KAAK,EAAC,EAAE,EACR,YAAY,QACZ,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,KAAK,WAClB,WACgB,CACrB,CACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  useState,\n  useEffect,\n  useContext,\n  createContext,\n  FunctionComponent,\n  PropsWithoutRef,\n  CSSProperties,\n  Ref,\n  forwardRef\n} from 'react';\nimport {\n  NimblePicker,\n  CategoryName,\n  Data as EmojiData,\n  BackgroundImageFn,\n  PickerProps\n} from 'emoji-mart';\n\nimport { useTheme } from '../../hooks';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nimport StyledEmojiPicker from './EmojiPicker.styles';\n\ntype EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';\n\nconst emojiDataCache = new Map<EmojiSet | 'all', EmojiData>();\n\nexport interface EmojiPickerProps extends BaseProps, NoChildrenProp {\n  /** Individual emojis size in pixels. */\n  emojiSize?: number;\n  /** Number of emoji per line in a picker. */\n  perLine?: number;\n  /** Don't load excluded categories. Accepts [I18n categories keys](https://www.npmjs.com/package/emoji-mart#i18n). */\n  exclude?: CategoryName[];\n  /** Show footer for picker. */\n  showFooter?: boolean;\n  /** A Fn that gets called on selecting an emoji from picker. */\n  onSelect?: PickerProps['onSelect'];\n  /** Ref for the emoji Picker */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EmojiContextValue {\n  /**\n   * A Fn that returns that image sheet to use for emojis.\n   * If no sprite is provided, native emoji are used.\n   * For the source of image please visit this [link](https://www.jsdelivr.com/package/npm/emoji-datasource?version=5.0.1&path=img)\n   */\n  spriteSrcResolver?: BackgroundImageFn;\n  /** Emoji set to be used. */\n  set?: EmojiSet;\n  /** Data to be used. [link](https://github.com/iamcal/emoji-data).\n   * Use this in case you would like to filter out some emoji,  one must change the sprite image accordingly. */\n  overrideData?: EmojiData;\n}\n\nexport const EmojiContext = createContext<EmojiContextValue>({});\nconst EmojiPicker: FunctionComponent<EmojiPickerProps> = forwardRef(\n  (\n    {\n      emojiSize = 24,\n      perLine = 9,\n      showFooter = true,\n      exclude,\n      onSelect,\n      ...restProps\n    }: PropsWithoutRef<EmojiPickerProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const theme = useTheme();\n    const { set, spriteSrcResolver, overrideData } = useContext(EmojiContext);\n    const [data, setData] = useState<EmojiData | null>(null);\n\n    useEffect(() => {\n      const dataSet = set ?? 'all';\n\n      // Unmount NimblePicker for changes to take effect\n      setData(null);\n\n      if (overrideData) {\n        setTimeout(() => {\n          setData(overrideData);\n        }, 0);\n      } else if (emojiDataCache.has(dataSet)) {\n        setTimeout(() => {\n          setData(emojiDataCache.get(dataSet) ?? null);\n        }, 0);\n      } else {\n        import(`emoji-mart/data/${dataSet}.json`)\n          .then(({ default: json }) => {\n            emojiDataCache.set(dataSet, json);\n            setData(emojiDataCache.get(dataSet)!);\n          })\n          .catch(() => {\n            setData(null);\n          });\n      }\n    }, [set, overrideData]);\n\n    return (\n      data && (\n        <StyledEmojiPicker\n          ref={ref}\n          showFooter={showFooter}\n          style={{ '--emoji-size': `${emojiSize}px` } as CSSProperties}\n        >\n          <NimblePicker\n            {...restProps}\n            set={set}\n            native={!spriteSrcResolver}\n            backgroundImageFn={spriteSrcResolver}\n            data={data}\n            emojiSize={emojiSize}\n            perLine={perLine}\n            exclude={exclude}\n            onSelect={onSelect}\n            color={theme.base.palette.interactive}\n            emoji=''\n            title=''\n            emojiTooltip\n            showSkinTones={showFooter}\n            showPreview={false}\n          />\n        </StyledEmojiPicker>\n      )\n    );\n  }\n);\n\nexport default EmojiPicker;\n"]}
+{"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,aAAa,EAKb,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EACL,YAAY,EAKb,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAIrD,MAAM,cAAc,GAAG,IAAI,GAAG,EAA+B,CAAC;AA+B9D,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAE,CAAC,CAAC;AACjE,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EACE,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,CAAC,EACX,UAAU,GAAG,IAAI,EACjB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACsB,EACpC,GAAwB,EACxB,EAAE;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,IAAI,KAAK,CAAC;QAE7B,kDAAkD;QAClD,OAAO,CAAC,IAAI,CAAC,CAAC;QAEd,IAAI,YAAY,EAAE;YAChB,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,YAAY,CAAC,CAAC;YACxB,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtC,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;YAC/C,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM;YACL,MAAM,CAAC,mBAAmB,OAAO,OAAO,CAAC;iBACtC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;gBAC1B,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAClC,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAE,CAAC,CAAC;YACxC,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE;gBACV,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;SACN;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,IAAI,IAAI,CACN,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,SAAS,IAAI,EAAmB,YAE5D,KAAC,YAAY,OACP,SAAS,EACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,CAAC,iBAAiB,EAC1B,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EACrC,KAAK,EAAC,EAAE,EACR,KAAK,EAAC,EAAE,EACR,YAAY,QACZ,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,KAAK,GAClB,GACgB,CACrB,CACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  useState,\n  useEffect,\n  useContext,\n  createContext,\n  FunctionComponent,\n  PropsWithoutRef,\n  CSSProperties,\n  Ref,\n  forwardRef\n} from 'react';\nimport {\n  NimblePicker,\n  CategoryName,\n  Data as EmojiData,\n  BackgroundImageFn,\n  PickerProps\n} from 'emoji-mart';\n\nimport { useTheme } from '../../hooks';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nimport StyledEmojiPicker from './EmojiPicker.styles';\n\ntype EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';\n\nconst emojiDataCache = new Map<EmojiSet | 'all', EmojiData>();\n\nexport interface EmojiPickerProps extends BaseProps, NoChildrenProp {\n  /** Individual emojis size in pixels. */\n  emojiSize?: number;\n  /** Number of emoji per line in a picker. */\n  perLine?: number;\n  /** Don't load excluded categories. Accepts [I18n categories keys](https://www.npmjs.com/package/emoji-mart#i18n). */\n  exclude?: CategoryName[];\n  /** Show footer for picker. */\n  showFooter?: boolean;\n  /** A Fn that gets called on selecting an emoji from picker. */\n  onSelect?: PickerProps['onSelect'];\n  /** Ref for the emoji Picker */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EmojiContextValue {\n  /**\n   * A Fn that returns that image sheet to use for emojis.\n   * If no sprite is provided, native emoji are used.\n   * For the source of image please visit this [link](https://www.jsdelivr.com/package/npm/emoji-datasource?version=5.0.1&path=img)\n   */\n  spriteSrcResolver?: BackgroundImageFn;\n  /** Emoji set to be used. */\n  set?: EmojiSet;\n  /** Data to be used. [link](https://github.com/iamcal/emoji-data).\n   * Use this in case you would like to filter out some emoji,  one must change the sprite image accordingly. */\n  overrideData?: EmojiData;\n}\n\nexport const EmojiContext = createContext<EmojiContextValue>({});\nconst EmojiPicker: FunctionComponent<EmojiPickerProps> = forwardRef(\n  (\n    {\n      emojiSize = 24,\n      perLine = 9,\n      showFooter = true,\n      exclude,\n      onSelect,\n      ...restProps\n    }: PropsWithoutRef<EmojiPickerProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const theme = useTheme();\n    const { set, spriteSrcResolver, overrideData } = useContext(EmojiContext);\n    const [data, setData] = useState<EmojiData | null>(null);\n\n    useEffect(() => {\n      const dataSet = set ?? 'all';\n\n      // Unmount NimblePicker for changes to take effect\n      setData(null);\n\n      if (overrideData) {\n        setTimeout(() => {\n          setData(overrideData);\n        }, 0);\n      } else if (emojiDataCache.has(dataSet)) {\n        setTimeout(() => {\n          setData(emojiDataCache.get(dataSet) ?? null);\n        }, 0);\n      } else {\n        import(`emoji-mart/data/${dataSet}.json`)\n          .then(({ default: json }) => {\n            emojiDataCache.set(dataSet, json);\n            setData(emojiDataCache.get(dataSet)!);\n          })\n          .catch(() => {\n            setData(null);\n          });\n      }\n    }, [set, overrideData]);\n\n    return (\n      data && (\n        <StyledEmojiPicker\n          ref={ref}\n          showFooter={showFooter}\n          style={{ '--emoji-size': `${emojiSize}px` } as CSSProperties}\n        >\n          <NimblePicker\n            {...restProps}\n            set={set}\n            native={!spriteSrcResolver}\n            backgroundImageFn={spriteSrcResolver}\n            data={data}\n            emojiSize={emojiSize}\n            perLine={perLine}\n            exclude={exclude}\n            onSelect={onSelect}\n            color={theme.base.palette.interactive}\n            emoji=''\n            title=''\n            emojiTooltip\n            showSkinTones={showFooter}\n            showPreview={false}\n          />\n        </StyledEmojiPicker>\n      )\n    );\n  }\n);\n\nexport default EmojiPicker;\n"]}

package/lib/components/EmptyState/EmptyState.js

@@ -27,7 +27,7 @@ StyledEmptyState.defaultProps = defaultThemeProp;
 const EmptyState = forwardRef((props, ref) => {
     const t = useI18n();
     const { message = t('no_items'), ...restProps } = props;
-    return (_jsxs(Flex, { ...restProps, as: StyledEmptyState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'galaxy' }, void 0), _jsx(Text, { variant: 'secondary', children: message }, void 0)] }, void 0));
+    return (_jsxs(Flex, { ...restProps, as: StyledEmptyState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'galaxy' }), _jsx(Text, { variant: 'secondary', children: message })] }));
 });
 export default EmptyState;
 //# sourceMappingURL=EmptyState.js.map

package/lib/components/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,UAAU,CAAC,CAAC;AAWzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,WAAG,EACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,WAAQ,YACrC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as galaxyIcon from '../Icon/icons/galaxy.icon';\nimport Text from '../Text';\nimport { tryCatch } from '../../utils';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(galaxyIcon);\n\nexport interface EmptyStateProps extends BaseProps, NoChildrenProp {\n  /**\n   * Message to display below the icon.\n   * @default 'No items'\n   */\n  message?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledEmptyState = styled.div(({ theme }) => {\n  const color = tryCatch(() =>\n    rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n  );\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${color};\n    }\n  `;\n});\n\nStyledEmptyState.defaultProps = defaultThemeProp;\n\nconst EmptyState: FunctionComponent<EmptyStateProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmptyStateProps>, ref: EmptyStateProps['ref']) => {\n    const t = useI18n();\n    const { message = t('no_items'), ...restProps } = props;\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledEmptyState}\n        ref={ref}\n        container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n      >\n        <Icon name='galaxy' />\n        <Text variant='secondary'>{message}</Text>\n      </Flex>\n    );\n  }\n);\n\nexport default EmptyState;\n"]}
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,UAAU,CAAC,CAAC;AAWzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,EACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,GAAQ,IACrC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as galaxyIcon from '../Icon/icons/galaxy.icon';\nimport Text from '../Text';\nimport { tryCatch } from '../../utils';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(galaxyIcon);\n\nexport interface EmptyStateProps extends BaseProps, NoChildrenProp {\n  /**\n   * Message to display below the icon.\n   * @default 'No items'\n   */\n  message?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledEmptyState = styled.div(({ theme }) => {\n  const color = tryCatch(() =>\n    rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n  );\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${color};\n    }\n  `;\n});\n\nStyledEmptyState.defaultProps = defaultThemeProp;\n\nconst EmptyState: FunctionComponent<EmptyStateProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmptyStateProps>, ref: EmptyStateProps['ref']) => {\n    const t = useI18n();\n    const { message = t('no_items'), ...restProps } = props;\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledEmptyState}\n        ref={ref}\n        container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n      >\n        <Icon name='galaxy' />\n        <Text variant='secondary'>{message}</Text>\n      </Flex>\n    );\n  }\n);\n\nexport default EmptyState;\n"]}

package/lib/components/ErrorState/ErrorState.js

@@ -25,7 +25,7 @@ StyledErrorState.defaultProps = defaultThemeProp;
 const ErrorState = forwardRef((props, ref) => {
     const t = useI18n();
     const { message = t('unknown_error'), onRetry, ...restProps } = props;
-    return (_jsxs(Flex, { ...restProps, as: StyledErrorState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'warn' }, void 0), _jsx(Text, { variant: 'secondary', children: message }, void 0), onRetry && (_jsx(Button, { variant: 'secondary', onClick: onRetry, children: t('try_again') }, void 0))] }, void 0));
+    return (_jsxs(Flex, { ...restProps, as: StyledErrorState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'warn' }), _jsx(Text, { variant: 'secondary', children: message }), onRetry && (_jsx(Button, { variant: 'secondary', onClick: onRetry, children: t('try_again') }))] }));
 });
 export default ErrorState;
 //# sourceMappingURL=ErrorState.js.map

package/lib/components/ErrorState/ErrorState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,QAAQ,CAAC,CAAC;AAavB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;;GAErC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,WAAQ,EACzC,OAAO,IAAI,CACV,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,YACzC,CAAC,CAAC,WAAW,CAAC,WACR,CACV,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as warnIcon from '../Icon/icons/warn.icon';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(warnIcon);\n\nexport interface ErrorStateProps extends BaseProps, NoChildrenProp {\n  /**\n   * Message to display below the icon.\n   * @default 'Unknown error'\n   */\n  message?: string;\n  /** Callback function that if provided renders a localized Retry button. */\n  onRetry?: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledErrorState = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${theme.base.palette.urgent};\n    }\n  `;\n});\n\nStyledErrorState.defaultProps = defaultThemeProp;\n\nconst ErrorState: FunctionComponent<ErrorStateProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ErrorStateProps>, ref: ErrorStateProps['ref']) => {\n    const t = useI18n();\n    const { message = t('unknown_error'), onRetry, ...restProps } = props;\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledErrorState}\n        ref={ref}\n        container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n      >\n        <Icon name='warn' />\n        <Text variant='secondary'>{message}</Text>\n        {onRetry && (\n          <Button variant='secondary' onClick={onRetry}>\n            {t('try_again')}\n          </Button>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ErrorState;\n"]}
+{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,QAAQ,CAAC,CAAC;AAavB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;;GAErC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,GAAQ,EACzC,OAAO,IAAI,CACV,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,YACzC,CAAC,CAAC,WAAW,CAAC,GACR,CACV,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as warnIcon from '../Icon/icons/warn.icon';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(warnIcon);\n\nexport interface ErrorStateProps extends BaseProps, NoChildrenProp {\n  /**\n   * Message to display below the icon.\n   * @default 'Unknown error'\n   */\n  message?: string;\n  /** Callback function that if provided renders a localized Retry button. */\n  onRetry?: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledErrorState = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${theme.base.palette.urgent};\n    }\n  `;\n});\n\nStyledErrorState.defaultProps = defaultThemeProp;\n\nconst ErrorState: FunctionComponent<ErrorStateProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ErrorStateProps>, ref: ErrorStateProps['ref']) => {\n    const t = useI18n();\n    const { message = t('unknown_error'), onRetry, ...restProps } = props;\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledErrorState}\n        ref={ref}\n        container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n      >\n        <Icon name='warn' />\n        <Text variant='secondary'>{message}</Text>\n        {onRetry && (\n          <Button variant='secondary' onClick={onRetry}>\n            {t('try_again')}\n          </Button>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ErrorState;\n"]}

package/lib/components/ExpandCollapse/ExpandCollapse.js

@@ -87,7 +87,7 @@ const ExpandCollapse = forwardRef((props, refArg) => {
             transitionTimingFunction: themeAnimation.timing.ease
         });
     }
-    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, children: children }, void 0));
+    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, children: children }));
 });
 export default ExpandCollapse;
 //# sourceMappingURL=ExpandCollapse.js.map

package/lib/components/ExpandCollapse/ExpandCollapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  Ref,\n  forwardRef,\n  ReactNode,\n  PropsWithoutRef,\n  useState,\n  useLayoutEffect,\n  useCallback,\n  CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n  /** Content to expand/collapse. */\n  children?: ReactNode;\n  /**\n   * If true,the content will be hidden.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Used to determine the transition property.\n   * @default \"height\"\n   */\n  dimension?: 'height' | 'width';\n  /** Minimum height/width to collapse to. This will set the starting collapsed size as well. */\n  min?: string;\n  /** Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. */\n  max?: string;\n  /**  Callback fired after content collapsed.  */\n  onAfterCollapse?: () => void;\n  /**  Callback fired after content expanded.  */\n  onAfterExpand?: () => void;\n  /**  Callback fired before content collapsed.  */\n  onBeforeCollapse?: () => void;\n  /** Callback fired before content expanded.  */\n  onBeforeExpand?: () => void;\n  /**\n   * Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n   * @default \"0.25s\"\n   */\n  transitionSpeed?: string;\n  /**\n   * If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n  ExpandCollapseProps,\n  'collapsed' | 'dimension' | 'transitionSpeed' | 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';\n\ninterface GetStyleProps\n  extends Pick<\n    ExpandCollapsePropsWithDefaults,\n    'dimension' | 'transitionSpeed' | 'min' | 'max' | 'nullWhenCollapsed'\n  > {\n  status: Statuses;\n  el?: HTMLElement | null;\n  transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n  el: HTMLElement,\n  dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n  if (!el) return '';\n  return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n  const {\n    status,\n    dimension,\n    transitionSpeed,\n    transitionTimingFunction,\n    min,\n    max,\n    nullWhenCollapsed,\n    el\n  } = props;\n  const style: CSSProperties = {};\n  let maxSize = max;\n\n  if (el && !max) {\n    maxSize = getScrollSize(el, dimension!);\n  }\n\n  if (status === 'expanded' || status === 'collapsed') {\n    if (max || min) {\n      style[dimension as 'height' | 'width'] = status === 'expanded' ? maxSize : min || 0;\n      style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n    }\n\n    if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n      style.display = 'none';\n    }\n  }\n\n  if (status === 'expanding' || status === 'collapsing') {\n    style[dimension as 'height' | 'width'] = status === 'expanding' ? maxSize : min || 0;\n    style.overflow = 'hidden';\n    style.transitionProperty = dimension;\n    style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n    style.transitionTimingFunction = transitionTimingFunction;\n  }\n\n  return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n    const {\n      base: { animation: themeAnimation }\n    } = useTheme();\n\n    const {\n      children,\n      dimension = 'height',\n      collapsed = false,\n      onBeforeExpand,\n      onAfterExpand,\n      onBeforeCollapse,\n      onAfterCollapse,\n      transitionSpeed = themeAnimation.speed,\n      min,\n      max,\n      nullWhenCollapsed = false,\n      as: Tag = 'div',\n      ...restProps\n    } = props;\n\n    const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n    const styleStateHook = useState<CSSProperties>();\n    const setStyle = styleStateHook[1];\n    let style = styleStateHook[0];\n    const previousStatus = usePrevious(status);\n    const ref = useConsolidatedRef(refArg);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.target !== ref.current || e.propertyName !== dimension) return;\n        setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n      },\n      [ref.current, status]\n    );\n\n    useLayoutEffect(() => {\n      const wantsToCollapse = collapsed;\n      const wantsToExpand = !collapsed;\n      const canCollapse = ['expanded', 'expanding'].includes(status);\n      const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n      if (wantsToExpand && canExpand) {\n        onBeforeExpand?.();\n        setStatus('expanding');\n      } else if (wantsToCollapse && canCollapse) {\n        onBeforeCollapse?.();\n        setStatus('collapsing');\n      }\n\n      if (status === 'expanded' && previousStatus !== 'expanded') {\n        onAfterExpand?.();\n      } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n        onAfterCollapse?.();\n      }\n\n      setStyle(\n        getStyle({\n          dimension,\n          min,\n          max,\n          transitionSpeed,\n          nullWhenCollapsed,\n          status,\n          el: ref.current,\n          transitionTimingFunction: themeAnimation.timing.ease\n        })\n      );\n    }, [collapsed, status, min, max]);\n\n    if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n      style = getStyle({\n        dimension,\n        min,\n        max,\n        transitionSpeed,\n        nullWhenCollapsed,\n        status: status === 'expanding' ? 'collapsing' : 'expanding',\n        el: ref.current,\n        transitionTimingFunction: themeAnimation.timing.ease\n      });\n    }\n\n    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n      <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n        {children}\n      </Tag>\n    );\n  }\n);\n\nexport default ExpandCollapse;\n"]}
+{"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  Ref,\n  forwardRef,\n  ReactNode,\n  PropsWithoutRef,\n  useState,\n  useLayoutEffect,\n  useCallback,\n  CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n  /** Content to expand/collapse. */\n  children?: ReactNode;\n  /**\n   * If true,the content will be hidden.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Used to determine the transition property.\n   * @default \"height\"\n   */\n  dimension?: 'height' | 'width';\n  /** Minimum height/width to collapse to. This will set the starting collapsed size as well. */\n  min?: string;\n  /** Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. */\n  max?: string;\n  /**  Callback fired after content collapsed.  */\n  onAfterCollapse?: () => void;\n  /**  Callback fired after content expanded.  */\n  onAfterExpand?: () => void;\n  /**  Callback fired before content collapsed.  */\n  onBeforeCollapse?: () => void;\n  /** Callback fired before content expanded.  */\n  onBeforeExpand?: () => void;\n  /**\n   * Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n   * @default \"0.25s\"\n   */\n  transitionSpeed?: string;\n  /**\n   * If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n  ExpandCollapseProps,\n  'collapsed' | 'dimension' | 'transitionSpeed' | 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';\n\ninterface GetStyleProps\n  extends Pick<\n    ExpandCollapsePropsWithDefaults,\n    'dimension' | 'transitionSpeed' | 'min' | 'max' | 'nullWhenCollapsed'\n  > {\n  status: Statuses;\n  el?: HTMLElement | null;\n  transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n  el: HTMLElement,\n  dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n  if (!el) return '';\n  return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n  const {\n    status,\n    dimension,\n    transitionSpeed,\n    transitionTimingFunction,\n    min,\n    max,\n    nullWhenCollapsed,\n    el\n  } = props;\n  const style: CSSProperties = {};\n  let maxSize = max;\n\n  if (el && !max) {\n    maxSize = getScrollSize(el, dimension!);\n  }\n\n  if (status === 'expanded' || status === 'collapsed') {\n    if (max || min) {\n      style[dimension as 'height' | 'width'] = status === 'expanded' ? maxSize : min || 0;\n      style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n    }\n\n    if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n      style.display = 'none';\n    }\n  }\n\n  if (status === 'expanding' || status === 'collapsing') {\n    style[dimension as 'height' | 'width'] = status === 'expanding' ? maxSize : min || 0;\n    style.overflow = 'hidden';\n    style.transitionProperty = dimension;\n    style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n    style.transitionTimingFunction = transitionTimingFunction;\n  }\n\n  return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n    const {\n      base: { animation: themeAnimation }\n    } = useTheme();\n\n    const {\n      children,\n      dimension = 'height',\n      collapsed = false,\n      onBeforeExpand,\n      onAfterExpand,\n      onBeforeCollapse,\n      onAfterCollapse,\n      transitionSpeed = themeAnimation.speed,\n      min,\n      max,\n      nullWhenCollapsed = false,\n      as: Tag = 'div',\n      ...restProps\n    } = props;\n\n    const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n    const styleStateHook = useState<CSSProperties>();\n    const setStyle = styleStateHook[1];\n    let style = styleStateHook[0];\n    const previousStatus = usePrevious(status);\n    const ref = useConsolidatedRef(refArg);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.target !== ref.current || e.propertyName !== dimension) return;\n        setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n      },\n      [ref.current, status]\n    );\n\n    useLayoutEffect(() => {\n      const wantsToCollapse = collapsed;\n      const wantsToExpand = !collapsed;\n      const canCollapse = ['expanded', 'expanding'].includes(status);\n      const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n      if (wantsToExpand && canExpand) {\n        onBeforeExpand?.();\n        setStatus('expanding');\n      } else if (wantsToCollapse && canCollapse) {\n        onBeforeCollapse?.();\n        setStatus('collapsing');\n      }\n\n      if (status === 'expanded' && previousStatus !== 'expanded') {\n        onAfterExpand?.();\n      } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n        onAfterCollapse?.();\n      }\n\n      setStyle(\n        getStyle({\n          dimension,\n          min,\n          max,\n          transitionSpeed,\n          nullWhenCollapsed,\n          status,\n          el: ref.current,\n          transitionTimingFunction: themeAnimation.timing.ease\n        })\n      );\n    }, [collapsed, status, min, max]);\n\n    if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n      style = getStyle({\n        dimension,\n        min,\n        max,\n        transitionSpeed,\n        nullWhenCollapsed,\n        status: status === 'expanding' ? 'collapsing' : 'expanding',\n        el: ref.current,\n        transitionTimingFunction: themeAnimation.timing.ease\n      });\n    }\n\n    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n      <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n        {children}\n      </Tag>\n    );\n  }\n);\n\nexport default ExpandCollapse;\n"]}

package/lib/components/FieldGroup/FieldGroup.d.ts

@@ -4,6 +4,8 @@ import { BaseProps, ForwardProps } from '../../types';
 export interface FieldGroupProps extends BaseProps {
     /** The content of the Field Group. */
     children: ReactNode;
+    /** A description of the field group to be displayed above the controls. */
+    description?: string;
     /**
      * If true, the Field Group will be able to collapse the content of its children by clicking on the name.
      * @default false

package/lib/components/FieldGroup/FieldGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,sBAAsB;UAAyB,OAAO;SA0BlE,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAqC5B,CAAC;AAoBF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA8CjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,sBAAsB;UAAyB,OAAO;SAyClE,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAqC5B,CAAC;AAoBF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/FieldGroup/FieldGroup.js

@@ -3,34 +3,46 @@ import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import Button, { StyledButton } from '../Button';
 import ExpandCollapse from '../ExpandCollapse';
-import Flex from '../Flex';
+import Flex, { StyledFlex } from '../Flex';
+import HTML from '../HTML';
 import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import Actions from '../Actions';
 import { defaultThemeProp } from '../../theme';
-import { useI18n } from '../../hooks';
+import { useDirection, useI18n, useUID } from '../../hooks';
 import { calculateFontSize } from '../../styles';
 registerIcon(caretRightIcon);
-export const StyledFieldGroupLegend = styled.legend(({ open, theme: { base: { spacing, animation } } }) => css `
-    width: 100%;
-    margin-bottom: 0;
-    ${open &&
-    css `
-      margin-block-end: ${spacing};
-    `}
-    transition: margin-block-end ${animation.speed} ${animation.timing.ease};
+export const StyledFieldGroupLegend = styled.legend(({ open, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
+    const { rtl } = useDirection();
+    return css `
+      width: 100%;
+      margin-bottom: 0;
+      ${open &&
+        css `
+        margin-block-end: calc(1.5 * ${spacing});
+      `}
+      transition: margin-block-end ${animation.speed} ${animation.timing.ease};
+
+      button ${StyledIcon} {
+        transition: transform ${animation.speed} ${animation.timing.ease};
+      }
 
-    button ${StyledIcon} {
-      transition: transform ${animation.speed} ${animation.timing.ease};
-    }
+      button[aria-expanded='true'] ${StyledIcon} {
+        transform: rotate(90deg);
+      }
+      button[aria-expanded='false'] ${StyledIcon} {
+        transform: rotate(${rtl ? 180 : 0}deg);
+      }
 
-    button[aria-expanded='true'] ${StyledIcon} {
-      transform: rotate(90deg);
-    }
-    button[aria-expanded='false'] ${StyledIcon} {
-      transform: rotate(0);
-    }
-  `);
+      > ${StyledFlex} ${StyledButton} {
+        min-height: ${hitAreaMouse};
+
+        @media (pointer: 'coarse') {
+          min-height: ${hitAreaFinger};
+        }
+      }
+    `;
+});
 StyledFieldGroupLegend.defaultProps = defaultThemeProp;
 export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { text } } }) => {
     const fontSizes = calculateFontSize(fontSize, fontScale);
@@ -64,14 +76,16 @@ export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size':
 });
 StyledFieldGroup.defaultProps = defaultThemeProp;
 const FieldGroupLegend = ({ children, open, actions, ...restProps }) => {
-    return (_jsx(StyledFieldGroupLegend, { open: open, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [children, actions && _jsx(Actions, { items: actions }, void 0)] }, void 0) }, void 0));
+    return (_jsx(StyledFieldGroupLegend, { open: open, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [children, actions && _jsx(Actions, { items: actions })] }) }));
 };
-const FieldGroup = forwardRef(({ children, name, actions, collapsible = false, defaultCollapsed = false, ...restProps }, ref) => {
+const FieldGroup = forwardRef(({ children, description, name, actions, collapsible = false, defaultCollapsed = false, ...restProps }, ref) => {
     const [open, setOpen] = useState(!defaultCollapsed);
     const t = useI18n();
-    return (_jsxs(StyledFieldGroup, { "aria-label": name, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { open: open, actions: actions, children: collapsible ? (_jsx(Button, { type: 'button', variant: 'text', onClick: () => {
+    const uid = useUID();
+    const descAndChildren = (_jsxs(Flex, { container: { direction: 'column', gap: 3 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
+    return (_jsxs(StyledFieldGroup, { "aria-label": name, "aria-describedby": description ? `${uid}-description` : undefined, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { open: open, actions: actions, children: collapsible ? (_jsx(Button, { type: 'button', variant: 'text', onClick: () => {
                         setOpen(cur => !cur);
-                    }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }, void 0), _jsx("span", { children: name }, void 0)] }, void 0) }, void 0)) : (_jsx("span", { children: name }, void 0)) }, void 0)), collapsible ? _jsx(ExpandCollapse, { collapsed: !open, children: children }, void 0) : children] }, void 0));
+                    }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), _jsx("span", { children: name })] }) })) : (_jsx("span", { children: name })) })), collapsible ? (_jsx(ExpandCollapse, { collapsed: !open, children: descAndChildren })) : (descAndChildren)] }));
 });
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.js.map

package/lib/components/FieldGroup/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useI18n } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /**\n   * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * If true, the Field Group will be collapsed on the first render.\n   * @default false\n   */\n  defaultCollapsed?: boolean;\n  /** The name associated with the Field Group. */\n  name?: string;\n  /** An array of actions to add to the header. */\n  actions?: ActionsProps['items'];\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n  open: boolean;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n  ({\n    open,\n    theme: {\n      base: { spacing, animation }\n    }\n  }) => css`\n    width: 100%;\n    margin-bottom: 0;\n    ${open &&\n    css`\n      margin-block-end: ${spacing};\n    `}\n    transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n    button ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    button[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n    button[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(0);\n    }\n  `\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      ${StyledFieldGroupLegend} ${StyledButton} {\n        font-weight: inherit;\n      }\n\n      & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  open,\n  actions,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend open={open} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between' }}>\n        {children}\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      name,\n      actions,\n      collapsible = false,\n      defaultCollapsed = false,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const [open, setOpen] = useState(!defaultCollapsed);\n    const t = useI18n();\n\n    return (\n      <StyledFieldGroup aria-label={name} {...restProps} ref={ref}>\n        {name && (\n          <FieldGroupLegend open={open} actions={actions}>\n            {collapsible ? (\n              <Button\n                type='button'\n                variant='text'\n                onClick={() => {\n                  setOpen(cur => !cur);\n                }}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  <span>{name}</span>\n                </Flex>\n              </Button>\n            ) : (\n              <span>{name}</span>\n            )}\n          </FieldGroupLegend>\n        )}\n        {collapsible ? <ExpandCollapse collapsed={!open}>{children}</ExpandCollapse> : children}\n      </StyledFieldGroup>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAsD,MAAM,OAAO,CAAC;AACjG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,OAAyB,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAE3D,YAAY,CAAC,cAAc,CAAC,CAAC;AA+B7B,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CACjD,CAAC,EACC,IAAI,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,SAAS,EACT,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,EACvE,EACF,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;;QAGN,IAAI;QACN,GAAG,CAAA;uCAC8B,OAAO;OACvC;qCAC8B,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;eAE9D,UAAU;gCACO,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;;qCAGnC,UAAU;;;sCAGT,UAAU;4BACpB,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;;UAG/B,UAAU,IAAI,YAAY;sBACd,YAAY;;;wBAGV,aAAa;;;KAGhC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EACxD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;;;QAGN,sBAAsB,IAAI,YAAY;;;;UAIpC,sBAAsB;qBACX,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;YAGjC,sBAAsB;qBACb,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;cAG/B,sBAAsB;qBACf,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;gBAG7B,sBAAsB;qBACjB,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,gBAAgB,GAA6C,CAAC,EAClE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,GAAG,SAAS,EACb,EAAE,EAAE;IACH,OAAO,CACL,KAAC,sBAAsB,IAAC,IAAI,EAAE,IAAI,KAAM,SAAS,YAC/C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,aAC1D,QAAQ,EACR,OAAO,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,GAAI,IAClC,GACgB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,gBAAgB,GAAG,KAAK,EACxB,GAAG,SAAS,EACqB,EACnC,GAA2B,EAC3B,EAAE;IACF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,eAAe,GAAG,CACtB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,WAAW,IAAI,KAAC,IAAI,IAAC,EAAE,EAAE,GAAG,GAAG,cAAc,EAAE,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,GAAI,EAC/E,wBAAM,QAAQ,GAAO,IAChB,CACR,CAAC;IAEF,OAAO,CACL,MAAC,gBAAgB,kBACH,IAAI,sBACE,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,SAAS,KAC5D,SAAS,EACb,GAAG,EAAE,GAAG,aAEP,IAAI,IAAI,CACP,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,YAC3C,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;oBACvB,CAAC,mBACc,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC1B,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,YAE7D,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAC/D,WAAW,EAAC,MAAM,aAElB,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC3B,yBAAO,IAAI,GAAQ,IACd,GACA,CACV,CAAC,CAAC,CAAC,CACF,yBAAO,IAAI,GAAQ,CACpB,GACgB,CACpB,EACA,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,cAAc,IAAC,SAAS,EAAE,CAAC,IAAI,YAAG,eAAe,GAAkB,CACrE,CAAC,CAAC,CAAC,CACF,eAAe,CAChB,IACgB,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex, { StyledFlex } from '../Flex';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /**\n   * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * If true, the Field Group will be collapsed on the first render.\n   * @default false\n   */\n  defaultCollapsed?: boolean;\n  /** The name associated with the Field Group. */\n  name?: string;\n  /** An array of actions to add to the header. */\n  actions?: ActionsProps['items'];\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n  open: boolean;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n  ({\n    open,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    const { rtl } = useDirection();\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${open &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      button ${StyledIcon} {\n        transition: transform ${animation.speed} ${animation.timing.ease};\n      }\n\n      button[aria-expanded='true'] ${StyledIcon} {\n        transform: rotate(90deg);\n      }\n      button[aria-expanded='false'] ${StyledIcon} {\n        transform: rotate(${rtl ? 180 : 0}deg);\n      }\n\n      > ${StyledFlex} ${StyledButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      ${StyledFieldGroupLegend} ${StyledButton} {\n        font-weight: inherit;\n      }\n\n      & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  open,\n  actions,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend open={open} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between' }}>\n        {children}\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      description,\n      name,\n      actions,\n      collapsible = false,\n      defaultCollapsed = false,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const [open, setOpen] = useState(!defaultCollapsed);\n    const t = useI18n();\n    const uid = useUID();\n\n    const descAndChildren = (\n      <Flex container={{ direction: 'column', gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Flex>\n    );\n\n    return (\n      <StyledFieldGroup\n        aria-label={name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend open={open} actions={actions}>\n            {collapsible ? (\n              <Button\n                type='button'\n                variant='text'\n                onClick={() => {\n                  setOpen(cur => !cur);\n                }}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  <span>{name}</span>\n                </Flex>\n              </Button>\n            ) : (\n              <span>{name}</span>\n            )}\n          </FieldGroupLegend>\n        )}\n        {collapsible ? (\n          <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}

package/lib/components/FieldGroup/FieldGroupList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI3D,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAWD,eAAO,MAAM,cAAc,qJAe1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAsCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAI7E,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,qJAe1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA6CzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/FieldGroup/FieldGroupList.js

@@ -6,10 +6,14 @@ import Icon, { registerIcon } from '../Icon';
 import * as plusIcon from '../Icon/icons/plus.icon';
 import { useI18n } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
-import FieldGroup from './FieldGroup';
+import FieldGroup, { StyledFieldGroup } from './FieldGroup';
 registerIcon(plusIcon);
 const StyledFieldGroupList = styled.div(({ theme }) => css `
-      margin-top: ${theme.base.spacing};
+      margin-block-start: ${theme.base.spacing};
+
+      ${StyledFieldGroup} {
+        margin-block-start: 0;
+      }
     `);
 StyledFieldGroupList.defaultProps = defaultThemeProp;
 export const StyledListItem = styled(FieldGroup)(({ theme }) => css `
@@ -33,19 +37,22 @@ StyledAddButton.defaultProps = defaultThemeProp;
 const FieldGroupList = forwardRef(({ items, onAdd, onDelete, ...restProps }, ref) => {
     const t = useI18n();
     return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, ...restItemProps }) => {
-                return (_jsx(StyledListItem, { name: name, ...restItemProps, actions: [
-                        {
-                            text: 'Delete',
-                            icon: 'trash',
-                            iconOnly: true,
-                            onClick: onDelete
-                                ? () => {
-                                    onDelete(id);
-                                }
-                                : undefined
-                        }
-                    ], children: children }, id));
-            }), _jsxs(StyledAddButton, { variant: 'link', onClick: onAdd, children: [_jsx(Icon, { name: 'plus' }, void 0), " ", t('add')] }, void 0)] }, void 0));
+                return (_jsx(StyledListItem, { name: name, ...restItemProps, actions: onDelete
+                        ? [
+                            {
+                                id: 'delete',
+                                text: t('delete'),
+                                icon: 'trash',
+                                iconOnly: true,
+                                onClick: onDelete
+                                    ? () => {
+                                        onDelete(id);
+                                    }
+                                    : undefined
+                            }
+                        ]
+                        : undefined, children: children }, id));
+            }), onAdd && (_jsxs(StyledAddButton, { variant: 'link', onClick: onAdd, children: [_jsx(Icon, { name: 'plus' }), " ", t('add')] }))] }));
 });
 export default FieldGroupList;
 //# sourceMappingURL=FieldGroupList.js.map

package/lib/components/FieldGroup/FieldGroupList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,UAA+B,MAAM,cAAc,CAAC;AAE3D,YAAY,CAAC,QAAQ,CAAC,CAAC;AAcvB,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;iBACU,KAAK,CAAC,IAAI,CAAC,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO;uCAC7B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;gCACxC,KAAK,CAAC,IAAI,CAAC,OAAO;;;0BAGxB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;kBAI1B,KAAK,CAAC,IAAI,CAAC,OAAO;;KAE/B,CACJ,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CACpC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAwC,EAC9E,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC1C,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,aAAa,EAA2B,EAAE,EAAE;gBAC/E,OAAO,CACL,KAAC,cAAc,IAEb,IAAI,EAAE,IAAI,KACN,aAAa,EACjB,OAAO,EAAE;wBACP;4BACE,IAAI,EAAE,QAAQ;4BACd,IAAI,EAAE,OAAO;4BACb,QAAQ,EAAE,IAAI;4BACd,OAAO,EAAE,QAAQ;gCACf,CAAC,CAAC,GAAG,EAAE;oCACH,QAAQ,CAAC,EAAE,CAAC,CAAC;gCACf,CAAC;gCACH,CAAC,CAAC,SAAS;yBACd;qBACF,YAEA,QAAQ,IAhBJ,EAAE,CAiBQ,CAClB,CAAC;YACJ,CAAC,CAAC,EACF,MAAC,eAAe,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,aAC5C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,OAAE,CAAC,CAAC,KAAK,CAAC,YACd,YACG,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nimport FieldGroup, { FieldGroupProps } from './FieldGroup';\n\nregisterIcon(plusIcon);\n\nexport interface FieldGroupListItemProps extends FieldGroupProps {\n  /** The ID of the field group list item */\n  id: string;\n}\n\nexport interface FieldGroupListProps {\n  items: FieldGroupListItemProps[];\n  onAdd?: () => void;\n  onDelete?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n  ({ theme }) =>\n    css`\n      margin-top: ${theme.base.spacing};\n    `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n  ({ theme }) =>\n    css`\n      padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      margin-bottom: calc(2 * ${theme.base.spacing});\n\n      legend {\n        margin-bottom: -${theme.base.spacing};\n      }\n\n      & > * {\n        margin: ${theme.base.spacing} 0;\n      }\n    `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n  ({ theme }) =>\n    css`\n      margin-top: ${theme.base.spacing};\n    `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps> = forwardRef(\n  (\n    { items, onAdd, onDelete, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n    ref: FieldGroupListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    return (\n      <StyledFieldGroupList ref={ref} {...restProps}>\n        {items.map(({ id, children, name, ...restItemProps }: FieldGroupListItemProps) => {\n          return (\n            <StyledListItem\n              key={id}\n              name={name}\n              {...restItemProps}\n              actions={[\n                {\n                  text: 'Delete',\n                  icon: 'trash',\n                  iconOnly: true,\n                  onClick: onDelete\n                    ? () => {\n                        onDelete(id);\n                      }\n                    : undefined\n                }\n              ]}\n            >\n              {children}\n            </StyledListItem>\n          );\n        })}\n        <StyledAddButton variant='link' onClick={onAdd}>\n          <Icon name='plus' /> {t('add')}\n        </StyledAddButton>\n      </StyledFieldGroupList>\n    );\n  }\n);\n\nexport default FieldGroupList;\n"]}
+{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nimport FieldGroup, { FieldGroupProps, StyledFieldGroup } from './FieldGroup';\n\nregisterIcon(plusIcon);\n\nexport interface FieldGroupListItemProps extends FieldGroupProps {\n  /** The ID of the field group list item */\n  id: string;\n}\n\nexport interface FieldGroupListProps {\n  items: FieldGroupListItemProps[];\n  onAdd?: () => void;\n  onDelete?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n  ({ theme }) =>\n    css`\n      margin-block-start: ${theme.base.spacing};\n\n      ${StyledFieldGroup} {\n        margin-block-start: 0;\n      }\n    `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n  ({ theme }) =>\n    css`\n      padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      margin-bottom: calc(2 * ${theme.base.spacing});\n\n      legend {\n        margin-bottom: -${theme.base.spacing};\n      }\n\n      & > * {\n        margin: ${theme.base.spacing} 0;\n      }\n    `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n  ({ theme }) =>\n    css`\n      margin-top: ${theme.base.spacing};\n    `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps> = forwardRef(\n  (\n    { items, onAdd, onDelete, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n    ref: FieldGroupListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    return (\n      <StyledFieldGroupList ref={ref} {...restProps}>\n        {items.map(({ id, children, name, ...restItemProps }: FieldGroupListItemProps) => {\n          return (\n            <StyledListItem\n              key={id}\n              name={name}\n              {...restItemProps}\n              actions={\n                onDelete\n                  ? [\n                      {\n                        id: 'delete',\n                        text: t('delete'),\n                        icon: 'trash',\n                        iconOnly: true,\n                        onClick: onDelete\n                          ? () => {\n                              onDelete(id);\n                            }\n                          : undefined\n                      }\n                    ]\n                  : undefined\n              }\n            >\n              {children}\n            </StyledListItem>\n          );\n        })}\n        {onAdd && (\n          <StyledAddButton variant='link' onClick={onAdd}>\n            <Icon name='plus' /> {t('add')}\n          </StyledAddButton>\n        )}\n      </StyledFieldGroupList>\n    );\n  }\n);\n\nexport default FieldGroupList;\n"]}

package/lib/components/FieldValueList/FieldValueList.d.ts

@@ -1,21 +1,26 @@
 import { ReactNode, FunctionComponent } from 'react';
 import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+export declare type FieldValueVariant = 'inline' | 'stacked';
+export interface FieldValueListItemProps {
+    id?: string;
+    name: string;
+    value?: ReactNode;
+    variant?: FieldValueVariant;
+}
 export interface FieldValueListProps extends BaseProps, NoChildrenProp {
     /** The set of field values to render in the list. */
-    fields: {
-        id?: string;
-        name: string;
-        value?: ReactNode;
-    }[];
+    fields: FieldValueListItemProps[];
     /**
      * Determines if the field and values should be displayed on the same line, or stacked with the field above the value.
      * @default "inline"
      */
-    variant?: 'inline' | 'stacked';
+    variant?: FieldValueVariant;
 }
 export declare const StyledFieldName: import("styled-components").StyledComponent<"dt", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFieldValue: import("styled-components").StyledComponent<"dd", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFieldValueList: import("styled-components").StyledComponent<"dl", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStackedFieldValue: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FieldValueItem: ({ name, value, variant }: FieldValueListItemProps) => JSX.Element;
 declare const FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps>;
 export default FieldValueList;
 //# sourceMappingURL=FieldValueList.d.ts.map

package/lib/components/FieldValueList/FieldValueList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAQtE,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE,qDAAqD;IACrD,MAAM,EAAE;QACN,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,EAAE,CAAC;IACJ;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,eAAe,wGAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wGAE5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AA6DF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA+BzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAQtE,oBAAY,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,MAAM,WAAW,uBAAuB;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE,qDAAqD;IACrD,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,wGAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wGAG5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AA2DpD,eAAO,MAAM,cAAc,6BAAyC,uBAAuB,gBAa1F,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA2BzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/FieldValueList/FieldValueList.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useState, useLayoutEffect, useRef, useMemo } from 'react';
 import styled from 'styled-components';
-import { defaultThemeProp } from '../../theme';
 import Button from '../Button';
 import ExpandCollapse from '../ExpandCollapse';
 import Grid from '../Grid';
@@ -13,11 +12,12 @@ export const StyledFieldName = styled.dt `
 `;
 export const StyledFieldValue = styled.dd `
   word-break: break-word;
+  overflow: auto;
 `;
 export const StyledFieldValueList = styled.dl `
   width: 100%;
 `;
-StyledFieldValueList.defaultProps = defaultThemeProp;
+export const StyledStackedFieldValue = styled.div ``;
 const DynamicHeightValue = ({ children }) => {
     const [collapsed, setCollapsed] = useState(true);
     const [exceedsMaxHeight, setExceedsMaxHeight] = useState(false);
@@ -45,18 +45,21 @@ const DynamicHeightValue = ({ children }) => {
             observer.disconnect();
         };
     }, [textRef.current, maxTextHeight]);
-    return (_jsxs(_Fragment, { children: [_jsx(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content', children: _jsx(Grid, { ref: textRef, children: _jsx("span", { children: children }, void 0) }, void 0) }, void 0), exceedsMaxHeight && (_jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? t('show_more') : t('show_less') }, void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content', children: _jsx(Grid, { ref: textRef, children: _jsx("span", { children: children }) }) }), exceedsMaxHeight && (_jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? t('show_more') : t('show_less') }))] }));
+};
+export const FieldValueItem = ({ name, value, variant = 'inline' }) => {
+    const Wrapper = variant === 'inline' ? Fragment : StyledStackedFieldValue;
+    const displayValue = typeof value === 'string' ? _jsx(DynamicHeightValue, { children: value }) : value;
+    return (_jsxs(Wrapper, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: name }), _jsx(StyledFieldValue, { children: value ? displayValue : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }) })] }));
 };
 const FieldValueList = ({ fields, variant = 'inline', ...restProps }) => {
-    const Wrapper = variant === 'inline' ? Fragment : 'div';
     return (_jsx(Grid, { ...restProps, container: {
-            cols: variant === 'inline' ? '16ch auto' : 'minmax(0, 1fr)',
+            cols: variant === 'inline' ? '16ch minmax(0, 1fr)' : 'minmax(0, 1fr)',
             colGap: 2,
             rowGap: 1
-        }, as: StyledFieldValueList, children: fields.map(({ id, name, value }) => {
-            const diplayValue = typeof value === 'string' ? _jsx(DynamicHeightValue, { children: value }, void 0) : value;
-            return (_jsxs(Wrapper, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: name }, void 0), _jsx(StyledFieldValue, { children: value ? diplayValue : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0) }, void 0)] }, id ?? name));
-        }) }, void 0));
+        }, as: StyledFieldValueList, children: fields.map(({ id, name, value, variant: fieldVariant }) => {
+            return (_jsx(FieldValueItem, { name: name, value: value, variant: fieldVariant ?? variant }, id ?? name));
+        }) }));
 };
 export default FieldValueList;
 //# sourceMappingURL=FieldValueList.js.map