@pega/cosmos-react-core 10.0.0-build.2.9 → 10.0.0-build.3.0

package/lib/components/RadioCheckGroup/RadioCheckGroup.js

@@ -9,8 +9,9 @@ import { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '.
 import { StyledImageContainer, StyledSelectionCard, StyledSelectionCardInline } from '../SelectionCard/SelectionCard.styles';
 import { getActiveElement, withTestIds } from '../../utils';
 import { StyledRadioCheck } from '../RadioCheck/RadioCheck';
+import EmptyState, { StyledEmptyState } from '../EmptyState';
 import { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';
-export const StyledRadioCheckGroup = styled.fieldset(() => {
+export const StyledRadioCheckGroup = styled.fieldset(({ theme }) => {
     return css `
     container-type: inline-size;
     flex-wrap: nowrap;
@@ -33,8 +34,15 @@ export const StyledRadioCheckGroup = styled.fieldset(() => {
     ${StyledRadioCheck} > ${StyledFormFieldInfo} {
       display: none;
     }
+
+    ${StyledEmptyState} {
+      border: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-radius: ${theme.components.card['border-radius']};
+      padding: calc(2 * ${theme.base.spacing});
+    }
   `;
 });
+StyledRadioCheckGroup.defaultProps = defaultThemeProp;
 const getCardGridColumns = (cardWidth) => css `
   @container (min-width: calc(2 * ${cardWidth})) {
     grid-template-columns: repeat(2, 1fr);
@@ -123,22 +131,30 @@ const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
             };
         }
     }, [optionsEl, inline, autoStack]);
-    const mapChildren = useMemo(() => Children.map(children, child => cloneElement(child, {
-        name,
-        status: restProps.status,
-        disabled: disabled || child.props.disabled,
-        readOnly: readOnly || child.props.readOnly,
-        variant: variant === 'card-grid' ? 'card' : variant,
-        suppressAnnouncements: true,
-        onChange: onChange
-            ? (e) => {
-                if (!(readOnly || child.props.readOnly)) {
-                    child.props.onChange?.(e);
-                    onChange(e);
-                }
-            }
-            : child.props.onChange
-    })), [children, name, disabled, readOnly, variant, onChange]);
+    const mapChildren = useMemo(() => {
+        if (!children || Children.toArray(children).filter(Boolean).length === 0)
+            return;
+        return Children.map(children, child => {
+            if (!child)
+                return null;
+            return cloneElement(child, {
+                name,
+                status: restProps.status,
+                disabled: disabled || child.props.disabled,
+                readOnly: readOnly || child.props.readOnly,
+                variant: variant === 'card-grid' ? 'card' : variant,
+                suppressAnnouncements: true,
+                onChange: onChange
+                    ? (e) => {
+                        if (!(readOnly || child.props.readOnly)) {
+                            child.props.onChange?.(e);
+                            onChange(e);
+                        }
+                    }
+                    : child.props.onChange
+            });
+        });
+    }, [children, name, disabled, readOnly, variant, onChange]);
     return (_jsx(FormField, { testId: testIds, as: StyledRadioCheckGroup, ref: containerRef, name: name, disabled: disabled, required: required, ...restProps, inline: false, isRadioCheck: true, onClear: onClear, 
         // Prevents blur when any input within the group is actively focused.
         onMouseDown: (e) => {
@@ -150,12 +166,17 @@ const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
             if (!(e.target instanceof Element) || !e.target.closest('label'))
                 return;
             e.preventDefault();
-        }, children: variant === 'card-grid' ? (_jsx(StyledCardGrid, { ref: setOptionsEl, renderInline: renderInline, autoStack: autoStack, childCount: Children.count(children), children: mapChildren })) : (_jsx(Flex, { ref: setOptionsEl, container: {
-                direction: renderInline ? 'row' : 'column',
-                colGap: renderInline ? 1.5 : 2,
-                rowGap: variant === 'card' ? 1 : 0,
-                wrap: 'wrap'
-            }, children: mapChildren })) }));
+        }, children: (() => {
+            if (!mapChildren) {
+                return _jsx(EmptyState, { variant: 'bordered' });
+            }
+            return variant === 'card-grid' ? (_jsx(StyledCardGrid, { ref: setOptionsEl, renderInline: renderInline, autoStack: autoStack, childCount: Children.count(children), children: mapChildren })) : (_jsx(Flex, { ref: setOptionsEl, container: {
+                    direction: renderInline ? 'row' : 'column',
+                    colGap: renderInline ? 1.5 : 2,
+                    rowGap: variant === 'card' ? 1 : 0,
+                    wrap: 'wrap'
+                }, children: mapChildren }));
+        })() }));
 });
 export default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);
 //# sourceMappingURL=RadioCheckGroup.js.map

package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n  Ref,\n  PropsWithoutRef,\n  ReactElement,\n  ChangeEvent,\n  MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n  StyledImageContainer,\n  StyledSelectionCard,\n  StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n  'fieldset',\n  TestIdProp<typeof elements> & {\n    /** Accepts Checkboxes or RadioButtons as children. */\n    children: ReactElement | ReactElement[];\n    /**\n     * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n     * Additionally, onChange can be passed to individual children.\n     * Both handlers will be called, child followed by group.\n     */\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n    onClear?: FormFieldProps['onClear'];\n    /** Set visual state based on a validation state. */\n    status?: FormControlProps['status'];\n    /** Pass a string or a fragment with an Icon and string. */\n    label?: FormControlProps['label'];\n    /** Visually hides the label region. */\n    labelHidden?: FormControlProps['labelHidden'];\n    /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n    info?: FormControlProps['info'];\n    /** Indicate if the field is required. The browser defaults to false. */\n    required?: FormControlProps['required'];\n    /** Disable the control. The browser defaults to false. */\n    disabled?: FormControlProps['disabled'];\n    /** Makes the input non editable and non clickable. The browser defaults to false. */\n    readOnly?: FormControlProps['readOnly'];\n    /**\n     * Layout field elements inline in a row.\n     * @default false\n     */\n    inline?: FormFieldProps['inline'];\n    /** Used to toggle the auto stacking feature of an inlined group.\n     * @default true\n     */\n    autoStack?: boolean;\n    /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n    name?: FormControlProps['name'];\n    /**\n     * Controls the styling of the child RadioChecks.\n     * @default 'simple'\n     */\n    variant?: RadioCheckProps['variant'] | 'card-grid';\n    /** Pass a heading and content to show additional information on the field. */\n    additionalInfo?: FormControlProps['additionalInfo'];\n    /**\n     * Enables arrow key navigation between options in the group.\n     * Disable for checkbox groups where each option is independently selectable.\n     * @default true\n     */\n    arrowNavigation?: boolean;\n    /** Ref forwarded to the wrapping element. */\n    ref?: Ref<HTMLElement>;\n  }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(() => {\n  return css`\n    container-type: inline-size;\n    flex-wrap: nowrap;\n\n    &[disabled] {\n      > ${StyledFormField} {\n        opacity: unset;\n      }\n    }\n\n    ${StyledSelectionCard} {\n      max-width: 100%;\n    }\n\n    ${StyledSelectionCardInline} ${StyledImageContainer} {\n      /* To enlarge the image containers to the size of the biggest one */\n      min-height: 100%;\n    }\n\n    ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n      display: none;\n    }\n  `;\n});\n\nconst getCardGridColumns = (cardWidth: string) => css`\n  @container (min-width: calc(2 * ${cardWidth})) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  @container (min-width: calc(3 * ${cardWidth})) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n\n  @container (min-width: calc(4 * ${cardWidth})) {\n    grid-template-columns: repeat(4, 1fr);\n  }\n`;\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n  const defaultCardWidth = theme.base['content-width'].sm;\n  const inlineImageCardWidth = theme.base['content-width'].md;\n  return css`\n    display: grid;\n    gap: ${theme.base.spacing};\n    grid-template-columns: 1fr;\n    grid-auto-rows: 1fr;\n\n    ${getCardGridColumns(defaultCardWidth)}\n\n    &:has(${StyledSelectionCardInline}) {\n      ${getCardGridColumns(inlineImageCardWidth)}\n    }\n  `;\n};\n\nconst StyledCardGrid = styled.div<{\n  renderInline: boolean;\n  autoStack: boolean;\n  childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n  if (!renderInline) {\n    return css`\n      display: grid;\n      gap: ${theme.base.spacing};\n      grid-template-columns: minmax(min-content, max-content);\n      grid-auto-rows: 1fr;\n    `;\n  }\n\n  return autoStack\n    ? getCardGridContainerStyles(theme)\n    : css`\n        display: grid;\n        gap: ${theme.base.spacing};\n        grid-template-columns: repeat(${childCount}, 1fr);\n        grid-auto-rows: 1fr;\n      `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n  RefElement<RadioCheckGroupProps>,\n  PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n  const uid = useUID();\n  const {\n    testId,\n    children,\n    name = uid,\n    disabled = false,\n    required = false,\n    onChange,\n    readOnly,\n    inline = false,\n    autoStack = true,\n    variant = 'simple',\n    arrowNavigation = true,\n    onClear,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n  const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n\n  const [renderInline, setRenderInline] = useState(inline);\n  const renderInlineRef = useRef(inline);\n  const minInlineWidth = useRef(0);\n  const containerRef = useConsolidatedRef(ref);\n  const skipRef = useRef<HTMLElement>(null);\n\n  useArrows(\n    arrowNavigation ? containerRef : skipRef,\n    {\n      selector: '[data-main-focus]',\n      cycle: false,\n      dir: 'both'\n    },\n    [children]\n  );\n\n  useEffect(() => {\n    setRenderInline(inline);\n    if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n      const intersectionObserver = new IntersectionObserver(\n        entries => {\n          if (entries[0].intersectionRatio < 1) {\n            if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n            renderInlineRef.current = false;\n            setRenderInline(false);\n          }\n        },\n        { root: optionsEl, threshold: 1 }\n      );\n\n      const resizeObserver = new ResizeObserver(entries => {\n        if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n          renderInlineRef.current = true;\n          setRenderInline(true);\n        }\n      });\n\n      intersectionObserver.observe(optionsEl.lastChild as Element);\n      resizeObserver.observe(optionsEl);\n\n      return () => {\n        intersectionObserver.disconnect();\n        resizeObserver.disconnect();\n      };\n    }\n  }, [optionsEl, inline, autoStack]);\n\n  const mapChildren = useMemo(\n    () =>\n      Children.map(children, child =>\n        cloneElement(child, {\n          name,\n          status: restProps.status,\n          disabled: disabled || child.props.disabled,\n          readOnly: readOnly || child.props.readOnly,\n          variant: variant === 'card-grid' ? 'card' : variant,\n          suppressAnnouncements: true,\n          onChange: onChange\n            ? (e: ChangeEvent<HTMLInputElement>) => {\n                if (!(readOnly || child.props.readOnly)) {\n                  child.props.onChange?.(e);\n                  onChange(e);\n                }\n              }\n            : child.props.onChange\n        })\n      ),\n    [children, name, disabled, readOnly, variant, onChange]\n  );\n\n  return (\n    <FormField\n      testId={testIds}\n      as={StyledRadioCheckGroup}\n      ref={containerRef}\n      name={name}\n      disabled={disabled}\n      required={required}\n      {...restProps}\n      inline={false}\n      isRadioCheck\n      onClear={onClear}\n      // Prevents blur when any input within the group is actively focused.\n      onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n        restProps.onMouseDown?.(e);\n\n        if (!containerRef.current) return;\n\n        if (!containerRef.current.contains(getActiveElement())) return;\n\n        if (!(e.target instanceof Element) || !e.target.closest('label')) return;\n\n        e.preventDefault();\n      }}\n    >\n      {variant === 'card-grid' ? (\n        <StyledCardGrid\n          ref={setOptionsEl}\n          renderInline={renderInline}\n          autoStack={autoStack}\n          childCount={Children.count(children)}\n        >\n          {mapChildren}\n        </StyledCardGrid>\n      ) : (\n        <Flex\n          ref={setOptionsEl}\n          container={{\n            direction: renderInline ? 'row' : 'column',\n            colGap: renderInline ? 1.5 : 2,\n            rowGap: variant === 'card' ? 1 : 0,\n            wrap: 'wrap'\n          }}\n        >\n          {mapChildren}\n        </Flex>\n      )}\n    </FormField>\n  );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}
+{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n  Ref,\n  PropsWithoutRef,\n  ReactElement,\n  ChangeEvent,\n  MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n  StyledImageContainer,\n  StyledSelectionCard,\n  StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\nimport EmptyState, { StyledEmptyState } from '../EmptyState';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n  'fieldset',\n  TestIdProp<typeof elements> & {\n    /** Accepts Checkboxes or RadioButtons as children. */\n    children?: ReactElement | ReactElement[];\n    /**\n     * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n     * Additionally, onChange can be passed to individual children.\n     * Both handlers will be called, child followed by group.\n     */\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n    onClear?: FormFieldProps['onClear'];\n    /** Set visual state based on a validation state. */\n    status?: FormControlProps['status'];\n    /** Pass a string or a fragment with an Icon and string. */\n    label?: FormControlProps['label'];\n    /** Visually hides the label region. */\n    labelHidden?: FormControlProps['labelHidden'];\n    /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n    info?: FormControlProps['info'];\n    /** Indicate if the field is required. The browser defaults to false. */\n    required?: FormControlProps['required'];\n    /** Disable the control. The browser defaults to false. */\n    disabled?: FormControlProps['disabled'];\n    /** Makes the input non editable and non clickable. The browser defaults to false. */\n    readOnly?: FormControlProps['readOnly'];\n    /**\n     * Layout field elements inline in a row.\n     * @default false\n     */\n    inline?: FormFieldProps['inline'];\n    /** Used to toggle the auto stacking feature of an inlined group.\n     * @default true\n     */\n    autoStack?: boolean;\n    /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n    name?: FormControlProps['name'];\n    /**\n     * Controls the styling of the child RadioChecks.\n     * @default 'simple'\n     */\n    variant?: RadioCheckProps['variant'] | 'card-grid';\n    /** Pass a heading and content to show additional information on the field. */\n    additionalInfo?: FormControlProps['additionalInfo'];\n    /**\n     * Enables arrow key navigation between options in the group.\n     * Disable for checkbox groups where each option is independently selectable.\n     * @default true\n     */\n    arrowNavigation?: boolean;\n    /** Ref forwarded to the wrapping element. */\n    ref?: Ref<HTMLElement>;\n  }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(({ theme }) => {\n  return css`\n    container-type: inline-size;\n    flex-wrap: nowrap;\n\n    &[disabled] {\n      > ${StyledFormField} {\n        opacity: unset;\n      }\n    }\n\n    ${StyledSelectionCard} {\n      max-width: 100%;\n    }\n\n    ${StyledSelectionCardInline} ${StyledImageContainer} {\n      /* To enlarge the image containers to the size of the biggest one */\n      min-height: 100%;\n    }\n\n    ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n      display: none;\n    }\n\n    ${StyledEmptyState} {\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-radius: ${theme.components.card['border-radius']};\n      padding: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledRadioCheckGroup.defaultProps = defaultThemeProp;\n\nconst getCardGridColumns = (cardWidth: string) => css`\n  @container (min-width: calc(2 * ${cardWidth})) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  @container (min-width: calc(3 * ${cardWidth})) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n\n  @container (min-width: calc(4 * ${cardWidth})) {\n    grid-template-columns: repeat(4, 1fr);\n  }\n`;\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n  const defaultCardWidth = theme.base['content-width'].sm;\n  const inlineImageCardWidth = theme.base['content-width'].md;\n  return css`\n    display: grid;\n    gap: ${theme.base.spacing};\n    grid-template-columns: 1fr;\n    grid-auto-rows: 1fr;\n\n    ${getCardGridColumns(defaultCardWidth)}\n\n    &:has(${StyledSelectionCardInline}) {\n      ${getCardGridColumns(inlineImageCardWidth)}\n    }\n  `;\n};\n\nconst StyledCardGrid = styled.div<{\n  renderInline: boolean;\n  autoStack: boolean;\n  childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n  if (!renderInline) {\n    return css`\n      display: grid;\n      gap: ${theme.base.spacing};\n      grid-template-columns: minmax(min-content, max-content);\n      grid-auto-rows: 1fr;\n    `;\n  }\n\n  return autoStack\n    ? getCardGridContainerStyles(theme)\n    : css`\n        display: grid;\n        gap: ${theme.base.spacing};\n        grid-template-columns: repeat(${childCount}, 1fr);\n        grid-auto-rows: 1fr;\n      `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n  RefElement<RadioCheckGroupProps>,\n  PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n  const uid = useUID();\n  const {\n    testId,\n    children,\n    name = uid,\n    disabled = false,\n    required = false,\n    onChange,\n    readOnly,\n    inline = false,\n    autoStack = true,\n    variant = 'simple',\n    arrowNavigation = true,\n    onClear,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n  const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n\n  const [renderInline, setRenderInline] = useState(inline);\n  const renderInlineRef = useRef(inline);\n  const minInlineWidth = useRef(0);\n  const containerRef = useConsolidatedRef(ref);\n  const skipRef = useRef<HTMLElement>(null);\n\n  useArrows(\n    arrowNavigation ? containerRef : skipRef,\n    {\n      selector: '[data-main-focus]',\n      cycle: false,\n      dir: 'both'\n    },\n    [children]\n  );\n\n  useEffect(() => {\n    setRenderInline(inline);\n    if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n      const intersectionObserver = new IntersectionObserver(\n        entries => {\n          if (entries[0].intersectionRatio < 1) {\n            if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n            renderInlineRef.current = false;\n            setRenderInline(false);\n          }\n        },\n        { root: optionsEl, threshold: 1 }\n      );\n\n      const resizeObserver = new ResizeObserver(entries => {\n        if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n          renderInlineRef.current = true;\n          setRenderInline(true);\n        }\n      });\n\n      intersectionObserver.observe(optionsEl.lastChild as Element);\n      resizeObserver.observe(optionsEl);\n\n      return () => {\n        intersectionObserver.disconnect();\n        resizeObserver.disconnect();\n      };\n    }\n  }, [optionsEl, inline, autoStack]);\n\n  const mapChildren = useMemo(() => {\n    if (!children || Children.toArray(children).filter(Boolean).length === 0) return;\n\n    return Children.map(children, child => {\n      if (!child) return null;\n      return cloneElement(child, {\n        name,\n        status: restProps.status,\n        disabled: disabled || child.props.disabled,\n        readOnly: readOnly || child.props.readOnly,\n        variant: variant === 'card-grid' ? 'card' : variant,\n        suppressAnnouncements: true,\n        onChange: onChange\n          ? (e: ChangeEvent<HTMLInputElement>) => {\n              if (!(readOnly || child.props.readOnly)) {\n                child.props.onChange?.(e);\n                onChange(e);\n              }\n            }\n          : child.props.onChange\n      });\n    });\n  }, [children, name, disabled, readOnly, variant, onChange]);\n\n  return (\n    <FormField\n      testId={testIds}\n      as={StyledRadioCheckGroup}\n      ref={containerRef}\n      name={name}\n      disabled={disabled}\n      required={required}\n      {...restProps}\n      inline={false}\n      isRadioCheck\n      onClear={onClear}\n      // Prevents blur when any input within the group is actively focused.\n      onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n        restProps.onMouseDown?.(e);\n\n        if (!containerRef.current) return;\n\n        if (!containerRef.current.contains(getActiveElement())) return;\n\n        if (!(e.target instanceof Element) || !e.target.closest('label')) return;\n\n        e.preventDefault();\n      }}\n    >\n      {(() => {\n        if (!mapChildren) {\n          return <EmptyState variant='bordered' />;\n        }\n\n        return variant === 'card-grid' ? (\n          <StyledCardGrid\n            ref={setOptionsEl}\n            renderInline={renderInline}\n            autoStack={autoStack}\n            childCount={Children.count(children)}\n          >\n            {mapChildren}\n          </StyledCardGrid>\n        ) : (\n          <Flex\n            ref={setOptionsEl}\n            container={{\n              direction: renderInline ? 'row' : 'column',\n              colGap: renderInline ? 1.5 : 2,\n              rowGap: variant === 'card' ? 1 : 0,\n              wrap: 'wrap'\n            }}\n          >\n            {mapChildren}\n          </Flex>\n        );\n      })()}\n    </FormField>\n  );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveActions.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1D,KAAK,sBAAsB,GAAG,cAAc,CAC1C,KAAK,EACL,MAAM,GAAG;IAEP,UAAU,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAEnC,SAAS,EAAE,SAAS,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,gCAAgC;cAA0B,OAAO;YAuB7E,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,6CAA6C,sBAAsB,4CAoE7F,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ResponsiveActions.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1D,KAAK,sBAAsB,GAAG,cAAc,CAC1C,KAAK,EACL,MAAM,GAAG;IAEP,UAAU,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAEnC,SAAS,EAAE,SAAS,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,gCAAgC;cAA0B,OAAO;YAwB7E,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,6CAA6C,sBAAsB,4CAoE7F,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ResponsiveActions/ResponsiveActions.js

@@ -23,6 +23,7 @@ export const StyledResponsiveActionsContainer = styled.div(({ stacked }) => css
     &[aria-hidden='true'] {
       position: fixed;
       visibility: hidden;
+      inset-inline-end: 100lvi;
     }
   `);
 const ResponsiveActions = ({ actionsRef, actionsEl, as, ...restProps }) => {

package/lib/components/ResponsiveActions/ResponsiveActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveActions.js","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport type { ReactNode, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../Flex';\nimport { StyledButton } from '../Button';\nimport type { AsProp, WithAttributes } from '../../types';\n\ntype ResponsiveActionsProps = WithAttributes<\n  'div',\n  AsProp & {\n    /* Ref assigned to the actions region. */\n    actionsRef: RefObject<HTMLElement>;\n    /* Actions region content. */\n    actionsEl: ReactNode;\n  }\n>;\n\nexport const StyledResponsiveActionsContainer = styled.div<{ stacked?: boolean }>(\n  ({ stacked }) => css`\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: unset;\n    }\n\n    & > :not(a, button) {\n      display: contents;\n    }\n\n    ${!stacked &&\n    css`\n      & > :is(a, button):first-child:not(:last-child),\n      & > :first-child:not(:last-child) :is(a, button):first-child {\n        margin-inline-end: auto;\n      }\n    `}\n\n    &[aria-hidden='true'] {\n      position: fixed;\n      visibility: hidden;\n    }\n  `\n);\n\nconst ResponsiveActions = ({ actionsRef, actionsEl, as, ...restProps }: ResponsiveActionsProps) => {\n  const hiddenActionsRef = useRef<HTMLDivElement>(null);\n  const [stacked, setStacked] = useState(false);\n\n  useLayoutEffect(() => {\n    if (hiddenActionsRef.current && actionsRef.current) {\n      const minInlineWidth = hiddenActionsRef.current.getBoundingClientRect().width;\n\n      const resizeObserver = new ResizeObserver(entries => {\n        setTimeout(() => {\n          if (stacked && entries[0].borderBoxSize[0].inlineSize > minInlineWidth) {\n            setStacked(false);\n          } else if (!stacked && entries[0].borderBoxSize[0].inlineSize <= minInlineWidth) {\n            setStacked(true);\n          }\n        }, 0);\n      });\n\n      resizeObserver.observe(actionsRef.current);\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n  });\n\n  useLayoutEffect(() => {\n    hiddenActionsRef.current?.querySelectorAll('a, button').forEach(action => {\n      if (action.hasAttribute('id')) {\n        action.removeAttribute('id');\n      }\n      if (action.hasAttribute('data-testid')) {\n        action.removeAttribute('data-testid');\n      }\n      action.setAttribute('role', 'none');\n    });\n  });\n\n  return (\n    <>\n      <Flex\n        {...restProps}\n        as={StyledResponsiveActionsContainer}\n        forwardedAs={as}\n        ref={actionsRef}\n        stacked={stacked}\n        container={{\n          gap: 1,\n          ...(stacked ? { direction: 'column' } : { justify: 'end' })\n        }}\n      >\n        {actionsEl}\n      </Flex>\n      <Flex\n        as={StyledResponsiveActionsContainer}\n        ref={hiddenActionsRef}\n        aria-hidden\n        inert=''\n        container={{\n          gap: 1,\n          direction: 'row',\n          justify: 'end'\n        }}\n      >\n        {actionsEl}\n      </Flex>\n    </>\n  );\n};\n\nexport default ResponsiveActions;\n"]}
+{"version":3,"file":"ResponsiveActions.js","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport type { ReactNode, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../Flex';\nimport { StyledButton } from '../Button';\nimport type { AsProp, WithAttributes } from '../../types';\n\ntype ResponsiveActionsProps = WithAttributes<\n  'div',\n  AsProp & {\n    /* Ref assigned to the actions region. */\n    actionsRef: RefObject<HTMLElement>;\n    /* Actions region content. */\n    actionsEl: ReactNode;\n  }\n>;\n\nexport const StyledResponsiveActionsContainer = styled.div<{ stacked?: boolean }>(\n  ({ stacked }) => css`\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: unset;\n    }\n\n    & > :not(a, button) {\n      display: contents;\n    }\n\n    ${!stacked &&\n    css`\n      & > :is(a, button):first-child:not(:last-child),\n      & > :first-child:not(:last-child) :is(a, button):first-child {\n        margin-inline-end: auto;\n      }\n    `}\n\n    &[aria-hidden='true'] {\n      position: fixed;\n      visibility: hidden;\n      inset-inline-end: 100lvi;\n    }\n  `\n);\n\nconst ResponsiveActions = ({ actionsRef, actionsEl, as, ...restProps }: ResponsiveActionsProps) => {\n  const hiddenActionsRef = useRef<HTMLDivElement>(null);\n  const [stacked, setStacked] = useState(false);\n\n  useLayoutEffect(() => {\n    if (hiddenActionsRef.current && actionsRef.current) {\n      const minInlineWidth = hiddenActionsRef.current.getBoundingClientRect().width;\n\n      const resizeObserver = new ResizeObserver(entries => {\n        setTimeout(() => {\n          if (stacked && entries[0].borderBoxSize[0].inlineSize > minInlineWidth) {\n            setStacked(false);\n          } else if (!stacked && entries[0].borderBoxSize[0].inlineSize <= minInlineWidth) {\n            setStacked(true);\n          }\n        }, 0);\n      });\n\n      resizeObserver.observe(actionsRef.current);\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n  });\n\n  useLayoutEffect(() => {\n    hiddenActionsRef.current?.querySelectorAll('a, button').forEach(action => {\n      if (action.hasAttribute('id')) {\n        action.removeAttribute('id');\n      }\n      if (action.hasAttribute('data-testid')) {\n        action.removeAttribute('data-testid');\n      }\n      action.setAttribute('role', 'none');\n    });\n  });\n\n  return (\n    <>\n      <Flex\n        {...restProps}\n        as={StyledResponsiveActionsContainer}\n        forwardedAs={as}\n        ref={actionsRef}\n        stacked={stacked}\n        container={{\n          gap: 1,\n          ...(stacked ? { direction: 'column' } : { justify: 'end' })\n        }}\n      >\n        {actionsEl}\n      </Flex>\n      <Flex\n        as={StyledResponsiveActionsContainer}\n        ref={hiddenActionsRef}\n        aria-hidden\n        inert=''\n        container={{\n          gap: 1,\n          direction: 'row',\n          justify: 'end'\n        }}\n      >\n        {actionsEl}\n      </Flex>\n    </>\n  );\n};\n\nexport default ResponsiveActions;\n"]}

package/lib/components/SelectionCard/SelectionCard.styles.js

@@ -93,7 +93,7 @@ export const StyledImageCell = styled.div(({ theme: { base: { palette, transpare
             overflow: hidden;
           `
         : css `
-            background-color: ${palette['app-background']};
+            background: ${palette['app-background']};
             position: relative;
           `}
 

package/lib/components/SelectionCard/SelectionCard.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.styles.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, type DefaultTheme } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { lineClamp } from '../../styles/mixins';\nimport { calculateFontSize } from '../../styles/utils';\nimport { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';\nimport { StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';\nimport { StyledIcon } from '../Icon';\n\nimport type { ImagePlacement, ImageSize, SelectionCardProps } from './SelectionCard.types';\n\nconst imageContainerSizes = {\n  small: '2.75rem',\n  large: '8.875rem',\n  flexible: 'minmax(2.5rem, auto)'\n} as const;\n\nexport const StyledSelectionCard = styled.div<\n  Pick<SelectionCardProps, 'disabled' | 'onClick' | 'readOnly'>\n>(\n  ({\n    disabled,\n    readOnly,\n    onClick,\n    theme: {\n      base: { palette, 'disabled-opacity': disabledOpacity },\n      components: {\n        card,\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    return css`\n      min-width: min-content;\n      max-width: max-content;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${palette['border-line']};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n        opacity: ${disabledOpacity};\n      `}\n\n      ${!disabled &&\n      css`\n        &:focus-visible {\n          & ${StyledPseudoRadioCheck} {\n            box-shadow: ${shadow};\n            border-color: ${focusBorderColor};\n          }\n        }\n\n        &:focus-visible,\n        &:not([data-main-focus]):focus-within {\n          box-shadow: ${shadow};\n          border-color: transparent;\n          outline: none;\n        }\n      `}\n\n        ${!disabled &&\n      onClick &&\n      css`\n        cursor: pointer;\n      `}\n\n      ${!disabled &&\n      !readOnly &&\n      onClick &&\n      css`\n        &:hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardInline = styled(StyledSelectionCard)<{\n  placement?: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n  size?: ImageSize;\n}>(({ placement = 'inline-start', size = 'large' }) => {\n  const imageContainerSize = imageContainerSizes[size];\n  return css`\n    /* stylelint-disable-next-line unit-allowed-list */\n    grid-template-columns: ${placement === 'inline-end'\n      ? `1fr ${imageContainerSize}`\n      : `${imageContainerSize} 1fr`};\n    grid-template-rows: minmax(2.75rem, auto);\n  `;\n});\n\nStyledSelectionCardInline.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardStacked = styled(StyledSelectionCard)<{ size?: ImageSize }>(({\n  size = 'large'\n}) => {\n  let containerSize;\n  switch (size) {\n    case 'small':\n      containerSize = '2.5rem';\n      break;\n    case 'large':\n      containerSize = '15.125rem';\n      break;\n    default:\n      containerSize = 'minmax(2.5rem, 15.125rem)';\n  }\n  return css`\n    grid-template-columns: minmax(2.75rem, 1fr);\n    grid-template-rows: ${containerSize} auto;\n  `;\n});\n\nexport const StyledImageCell = styled.div<{\n  placement?: ImagePlacement;\n  size?: ImageSize;\n  isTile?: boolean;\n}>(\n  ({\n    theme: {\n      base: { palette, transparency },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    placement = 'inline-start',\n    size = 'flexible',\n    isTile\n  }) => {\n    return css`\n      ${isTile\n        ? css`\n            overflow: hidden;\n          `\n        : css`\n            background-color: ${palette['app-background']};\n            position: relative;\n          `}\n\n      ${size === 'flexible' &&\n      placement !== 'block-start' &&\n      css`\n        max-width: 8.875rem;\n        min-height: 100%;\n        height: var(--content-height, auto);\n      `};\n\n      /* Recalculation of the border radius by substracting border width */\n      ${placement === 'inline-start' &&\n      css`\n        border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n        border-end-start-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${placement === 'inline-end' &&\n      css`\n        border-end-end-radius: calc(${borderRadius} - 0.0625rem);\n        border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${placement === 'block-start' &&\n      css`\n        border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n        border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${!isTile &&\n      css`\n        &::before {\n          content: '';\n          position: absolute;\n          inset: 0;\n          background: var(--bg-image) center / cover no-repeat;\n          filter: blur(1rem);\n          opacity: ${transparency['transparent-4']};\n          pointer-events: none;\n          clip-path: inset(0);\n        }\n      `}\n    `;\n  }\n);\n\nStyledImageCell.defaultProps = defaultThemeProp;\n\nexport const StyledContentCell = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledImageContainer = styled.div<{\n  placement?: ImagePlacement;\n  size?: ImageSize;\n}>(\n  ({\n    theme: {\n      base: { transparency, spacing },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    placement = 'inline-start',\n    size = 'flexible'\n  }) => {\n    return css`\n      aspect-ratio: 4 / 5;\n      max-height: 100%;\n      min-height: 2rem;\n      min-width: 2rem;\n      position: relative;\n      padding: min(${spacing}, 10%);\n\n      img {\n        max-width: 100%;\n        max-height: 100%;\n        box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, ${transparency['transparent-5']});\n        border-radius: calc(${borderRadius} / 2);\n      }\n\n      ${placement === 'block-start' &&\n      css`\n        aspect-ratio: 16 / 9;\n        > img {\n          max-height: 100%;\n        }\n      `}\n\n      ${size === 'flexible' &&\n      css`\n        min-height: 100%;\n      `}\n\n      ${size === 'large' &&\n      css`\n        min-height: 11.0625rem;\n      `}\n\n      ${size === 'small' &&\n      css`\n        aspect-ratio: 1 / 1;\n\n        > img {\n          max-width: 2rem;\n          max-height: 2rem;\n        }\n      `}\n\n      ${StyledIcon} {\n        opacity: ${transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledValueList = styled.ul`\n  width: 100%;\n  list-style-type: none;\n`;\n\nexport const StyledHeader = styled.div`\n  width: 100%;\n`;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing} calc(1.5 * ${theme.base.spacing});\n    overflow-wrap: break-word;\n\n    > ${StyledHeader} {\n      min-height: 2rem;\n    }\n\n    ${StyledValueList}, ${StyledFieldValueList} {\n      margin-block-end: calc(0.75 * ${theme.base.spacing});\n    }\n\n    ${StyledStackedFieldValue} {\n      grid-column: 1 / -1;\n    }\n  `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledTileContent = styled.div<{\n  foregroundColor: string;\n  backgroundColor: string;\n  size?: ImageSize;\n}>(({ theme, foregroundColor, backgroundColor, size = 'large' }) => {\n  const fg = foregroundColor;\n  const bg = backgroundColor;\n  const { l: fontSizeL, xs: fontSizeXs } = calculateFontSize(\n    theme.base['font-size'],\n    theme.base['font-scale']\n  );\n  const {\n    components: {\n      icon: { size: iconSize }\n    }\n  } = theme;\n  return css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: calc(1.5 * ${theme.base.spacing});\n    width: 100%;\n    height: 100%;\n    background: ${bg};\n    color: ${fg};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    font-size: ${fontSizeL};\n\n    ${StyledIcon} {\n      width: ${iconSize.s};\n      height: ${iconSize.s};\n      color: inherit;\n    }\n\n    ${size === 'small' &&\n    css`\n      padding: ${theme.base.spacing};\n      font-size: ${fontSizeXs};\n    `}\n  `;\n});\n\nStyledTileContent.defaultProps = defaultThemeProp;\n\nexport const StyledCardFooter = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: auto;\n    padding-inline: calc(1.5 * ${theme.base.spacing});\n    padding-block-end: ${theme.base.spacing};\n  `;\n});\n\nStyledCardFooter.defaultProps = defaultThemeProp;\n\nexport const StyledSingleField = styled.div<{ truncate?: boolean }>`\n  ${({ truncate }) => truncate && lineClamp(2)}\n`;\n\nexport const getBaseCardContainerStyles = (theme: DefaultTheme) => {\n  return css`\n    display: grid;\n    gap: ${theme.base.spacing};\n    grid-template-columns: repeat(\n      auto-fit,\n      minmax(min(${theme.base['content-width'].sm}, 100%), 1fr)\n    );\n    grid-auto-rows: minmax(2.75rem, auto);\n\n    > ${StyledSelectionCard} {\n      max-width: 100%;\n    }\n  `;\n};\n\nconst getInlineCardColumnTrack = ({\n  placement,\n  size,\n  contentWidth\n}: {\n  placement: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n  size: ImageSize;\n  contentWidth: string;\n}): string => {\n  const imageContainerSize = imageContainerSizes[size];\n  return placement === 'inline-end'\n    ? `minmax(20ch, ${contentWidth}) 1fr ${imageContainerSize}`\n    : `${imageContainerSize} minmax(20ch, ${contentWidth}) 1fr`;\n};\n\nexport const getInlineImageCardContainerStyles = (\n  theme: DefaultTheme,\n  {\n    placement,\n    size\n  }: {\n    placement: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n    size: ImageSize;\n  }\n) => {\n  const columnTrack = getInlineCardColumnTrack({\n    placement,\n    size,\n    contentWidth: theme.base['content-width'].sm\n  });\n  const singleCardSize = `calc(${theme.base['content-width'].sm} + ${imageContainerSizes[size === 'small' ? 'small' : 'large']})`;\n  return css`\n    display: grid;\n    gap: ${theme.base.spacing};\n    grid-template-columns: ${columnTrack};\n\n    @container (min-width: calc(2 * ${singleCardSize})) {\n      grid-template-columns: repeat(2, ${columnTrack});\n    }\n\n    @container (min-width: calc(3 * ${singleCardSize})) {\n      grid-template-columns: repeat(3, ${columnTrack});\n    }\n\n    @container (min-width: calc(4 * ${singleCardSize})) {\n      grid-template-columns: repeat(4, ${columnTrack});\n    }\n\n    > ${StyledSelectionCard} {\n      grid-template-columns: subgrid;\n      grid-column: span 3;\n      column-gap: 0;\n\n      ${StyledImageCell} {\n        grid-column: ${placement === 'inline-start' ? '1 / 2' : '3 / 4'};\n      }\n\n      ${StyledContentCell} {\n        grid-column: span 2;\n      }\n    }\n  `;\n};\n"]}
+{"version":3,"file":"SelectionCard.styles.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, type DefaultTheme } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { lineClamp } from '../../styles/mixins';\nimport { calculateFontSize } from '../../styles/utils';\nimport { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';\nimport { StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';\nimport { StyledIcon } from '../Icon';\n\nimport type { ImagePlacement, ImageSize, SelectionCardProps } from './SelectionCard.types';\n\nconst imageContainerSizes = {\n  small: '2.75rem',\n  large: '8.875rem',\n  flexible: 'minmax(2.5rem, auto)'\n} as const;\n\nexport const StyledSelectionCard = styled.div<\n  Pick<SelectionCardProps, 'disabled' | 'onClick' | 'readOnly'>\n>(\n  ({\n    disabled,\n    readOnly,\n    onClick,\n    theme: {\n      base: { palette, 'disabled-opacity': disabledOpacity },\n      components: {\n        card,\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    return css`\n      min-width: min-content;\n      max-width: max-content;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${palette['border-line']};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n        opacity: ${disabledOpacity};\n      `}\n\n      ${!disabled &&\n      css`\n        &:focus-visible {\n          & ${StyledPseudoRadioCheck} {\n            box-shadow: ${shadow};\n            border-color: ${focusBorderColor};\n          }\n        }\n\n        &:focus-visible,\n        &:not([data-main-focus]):focus-within {\n          box-shadow: ${shadow};\n          border-color: transparent;\n          outline: none;\n        }\n      `}\n\n        ${!disabled &&\n      onClick &&\n      css`\n        cursor: pointer;\n      `}\n\n      ${!disabled &&\n      !readOnly &&\n      onClick &&\n      css`\n        &:hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardInline = styled(StyledSelectionCard)<{\n  placement?: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n  size?: ImageSize;\n}>(({ placement = 'inline-start', size = 'large' }) => {\n  const imageContainerSize = imageContainerSizes[size];\n  return css`\n    /* stylelint-disable-next-line unit-allowed-list */\n    grid-template-columns: ${placement === 'inline-end'\n      ? `1fr ${imageContainerSize}`\n      : `${imageContainerSize} 1fr`};\n    grid-template-rows: minmax(2.75rem, auto);\n  `;\n});\n\nStyledSelectionCardInline.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardStacked = styled(StyledSelectionCard)<{ size?: ImageSize }>(({\n  size = 'large'\n}) => {\n  let containerSize;\n  switch (size) {\n    case 'small':\n      containerSize = '2.5rem';\n      break;\n    case 'large':\n      containerSize = '15.125rem';\n      break;\n    default:\n      containerSize = 'minmax(2.5rem, 15.125rem)';\n  }\n  return css`\n    grid-template-columns: minmax(2.75rem, 1fr);\n    grid-template-rows: ${containerSize} auto;\n  `;\n});\n\nexport const StyledImageCell = styled.div<{\n  placement?: ImagePlacement;\n  size?: ImageSize;\n  isTile?: boolean;\n}>(\n  ({\n    theme: {\n      base: { palette, transparency },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    placement = 'inline-start',\n    size = 'flexible',\n    isTile\n  }) => {\n    return css`\n      ${isTile\n        ? css`\n            overflow: hidden;\n          `\n        : css`\n            background: ${palette['app-background']};\n            position: relative;\n          `}\n\n      ${size === 'flexible' &&\n      placement !== 'block-start' &&\n      css`\n        max-width: 8.875rem;\n        min-height: 100%;\n        height: var(--content-height, auto);\n      `};\n\n      /* Recalculation of the border radius by substracting border width */\n      ${placement === 'inline-start' &&\n      css`\n        border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n        border-end-start-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${placement === 'inline-end' &&\n      css`\n        border-end-end-radius: calc(${borderRadius} - 0.0625rem);\n        border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${placement === 'block-start' &&\n      css`\n        border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n        border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${!isTile &&\n      css`\n        &::before {\n          content: '';\n          position: absolute;\n          inset: 0;\n          background: var(--bg-image) center / cover no-repeat;\n          filter: blur(1rem);\n          opacity: ${transparency['transparent-4']};\n          pointer-events: none;\n          clip-path: inset(0);\n        }\n      `}\n    `;\n  }\n);\n\nStyledImageCell.defaultProps = defaultThemeProp;\n\nexport const StyledContentCell = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledImageContainer = styled.div<{\n  placement?: ImagePlacement;\n  size?: ImageSize;\n}>(\n  ({\n    theme: {\n      base: { transparency, spacing },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    placement = 'inline-start',\n    size = 'flexible'\n  }) => {\n    return css`\n      aspect-ratio: 4 / 5;\n      max-height: 100%;\n      min-height: 2rem;\n      min-width: 2rem;\n      position: relative;\n      padding: min(${spacing}, 10%);\n\n      img {\n        max-width: 100%;\n        max-height: 100%;\n        box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, ${transparency['transparent-5']});\n        border-radius: calc(${borderRadius} / 2);\n      }\n\n      ${placement === 'block-start' &&\n      css`\n        aspect-ratio: 16 / 9;\n        > img {\n          max-height: 100%;\n        }\n      `}\n\n      ${size === 'flexible' &&\n      css`\n        min-height: 100%;\n      `}\n\n      ${size === 'large' &&\n      css`\n        min-height: 11.0625rem;\n      `}\n\n      ${size === 'small' &&\n      css`\n        aspect-ratio: 1 / 1;\n\n        > img {\n          max-width: 2rem;\n          max-height: 2rem;\n        }\n      `}\n\n      ${StyledIcon} {\n        opacity: ${transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledValueList = styled.ul`\n  width: 100%;\n  list-style-type: none;\n`;\n\nexport const StyledHeader = styled.div`\n  width: 100%;\n`;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing} calc(1.5 * ${theme.base.spacing});\n    overflow-wrap: break-word;\n\n    > ${StyledHeader} {\n      min-height: 2rem;\n    }\n\n    ${StyledValueList}, ${StyledFieldValueList} {\n      margin-block-end: calc(0.75 * ${theme.base.spacing});\n    }\n\n    ${StyledStackedFieldValue} {\n      grid-column: 1 / -1;\n    }\n  `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledTileContent = styled.div<{\n  foregroundColor: string;\n  backgroundColor: string;\n  size?: ImageSize;\n}>(({ theme, foregroundColor, backgroundColor, size = 'large' }) => {\n  const fg = foregroundColor;\n  const bg = backgroundColor;\n  const { l: fontSizeL, xs: fontSizeXs } = calculateFontSize(\n    theme.base['font-size'],\n    theme.base['font-scale']\n  );\n  const {\n    components: {\n      icon: { size: iconSize }\n    }\n  } = theme;\n  return css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: calc(1.5 * ${theme.base.spacing});\n    width: 100%;\n    height: 100%;\n    background: ${bg};\n    color: ${fg};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    font-size: ${fontSizeL};\n\n    ${StyledIcon} {\n      width: ${iconSize.s};\n      height: ${iconSize.s};\n      color: inherit;\n    }\n\n    ${size === 'small' &&\n    css`\n      padding: ${theme.base.spacing};\n      font-size: ${fontSizeXs};\n    `}\n  `;\n});\n\nStyledTileContent.defaultProps = defaultThemeProp;\n\nexport const StyledCardFooter = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: auto;\n    padding-inline: calc(1.5 * ${theme.base.spacing});\n    padding-block-end: ${theme.base.spacing};\n  `;\n});\n\nStyledCardFooter.defaultProps = defaultThemeProp;\n\nexport const StyledSingleField = styled.div<{ truncate?: boolean }>`\n  ${({ truncate }) => truncate && lineClamp(2)}\n`;\n\nexport const getBaseCardContainerStyles = (theme: DefaultTheme) => {\n  return css`\n    display: grid;\n    gap: ${theme.base.spacing};\n    grid-template-columns: repeat(\n      auto-fit,\n      minmax(min(${theme.base['content-width'].sm}, 100%), 1fr)\n    );\n    grid-auto-rows: minmax(2.75rem, auto);\n\n    > ${StyledSelectionCard} {\n      max-width: 100%;\n    }\n  `;\n};\n\nconst getInlineCardColumnTrack = ({\n  placement,\n  size,\n  contentWidth\n}: {\n  placement: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n  size: ImageSize;\n  contentWidth: string;\n}): string => {\n  const imageContainerSize = imageContainerSizes[size];\n  return placement === 'inline-end'\n    ? `minmax(20ch, ${contentWidth}) 1fr ${imageContainerSize}`\n    : `${imageContainerSize} minmax(20ch, ${contentWidth}) 1fr`;\n};\n\nexport const getInlineImageCardContainerStyles = (\n  theme: DefaultTheme,\n  {\n    placement,\n    size\n  }: {\n    placement: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n    size: ImageSize;\n  }\n) => {\n  const columnTrack = getInlineCardColumnTrack({\n    placement,\n    size,\n    contentWidth: theme.base['content-width'].sm\n  });\n  const singleCardSize = `calc(${theme.base['content-width'].sm} + ${imageContainerSizes[size === 'small' ? 'small' : 'large']})`;\n  return css`\n    display: grid;\n    gap: ${theme.base.spacing};\n    grid-template-columns: ${columnTrack};\n\n    @container (min-width: calc(2 * ${singleCardSize})) {\n      grid-template-columns: repeat(2, ${columnTrack});\n    }\n\n    @container (min-width: calc(3 * ${singleCardSize})) {\n      grid-template-columns: repeat(3, ${columnTrack});\n    }\n\n    @container (min-width: calc(4 * ${singleCardSize})) {\n      grid-template-columns: repeat(4, ${columnTrack});\n    }\n\n    > ${StyledSelectionCard} {\n      grid-template-columns: subgrid;\n      grid-column: span 3;\n      column-gap: 0;\n\n      ${StyledImageCell} {\n        grid-column: ${placement === 'inline-start' ? '1 / 2' : '3 / 4'};\n      }\n\n      ${StyledContentCell} {\n        grid-column: span 2;\n      }\n    }\n  `;\n};\n"]}

package/lib/hooks/useI18n.d.ts

@@ -165,6 +165,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     resize_noun: string;
     search_noun: string;
     actions_for: string;
+    edit_for: string;
     edited: string;
     deleted: string;
     done: string;
@@ -332,6 +333,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     multiselect_instructions: string;
     multiselect_instructions_with_links: string;
     selected_items: string;
+    combobox_loading_selected_items: string;
     composite_input_open_button_a11y: string;
     composite_input_close_button_a11y: string;
     list_toolbar_add_view: string;
@@ -1511,6 +1513,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     remove_goto_references: string;
     process_node_task: string;
     process_node_assignment: string;
+    process_node_collect_info: string;
     process_node_automation: string;
     process_node_decision: string;
     process_node_goto: string;
@@ -1521,7 +1524,6 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     process_connector_submit: string;
     process_connector_default: string;
     process_connector_otherwise: string;
-    process_decision_description: string;
     process_icon_assignment: string;
     process_icon_automation: string;
     process_icon_decision: string;
@@ -1656,6 +1658,10 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     custom_caption: string;
     add_label: string;
     custom_add_label: string;
+    search_label: string;
+    custom_search_label: string;
+    default_label_option: string;
+    field_required_error: string;
     instruction_text_label: string;
     paragraph_already_exists_error: string;
     paragraph_create_modal_heading: string;
@@ -1718,6 +1724,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     first_n_fields: string;
     learn_about_primary_fields: string;
     show_lifecycle: string;
+    show_case_type_in_subheading: string;
     use_only_primary_fields: string;
     use_only_primary_fields_info: string;
     new_tab_heading: string;
@@ -1869,6 +1876,8 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     app_info_view_content: string;
     app_info_switch_branch: string;
     app_info_update_from_main: string;
+    app_info_commit_private_changes: string;
+    app_info_merge_to_main: string;
     app_info_view_branches: string;
     app_info_application_version: string;
     app_preview_loading: string;

package/lib/hooks/useI18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/i18n/default.d.ts

@@ -161,6 +161,7 @@ declare const _default: {
     resize_noun: string;
     search_noun: string;
     actions_for: string;
+    edit_for: string;
     edited: string;
     deleted: string;
     done: string;
@@ -328,6 +329,7 @@ declare const _default: {
     multiselect_instructions: string;
     multiselect_instructions_with_links: string;
     selected_items: string;
+    combobox_loading_selected_items: string;
     composite_input_open_button_a11y: string;
     composite_input_close_button_a11y: string;
     list_toolbar_add_view: string;
@@ -1507,6 +1509,7 @@ declare const _default: {
     remove_goto_references: string;
     process_node_task: string;
     process_node_assignment: string;
+    process_node_collect_info: string;
     process_node_automation: string;
     process_node_decision: string;
     process_node_goto: string;
@@ -1517,7 +1520,6 @@ declare const _default: {
     process_connector_submit: string;
     process_connector_default: string;
     process_connector_otherwise: string;
-    process_decision_description: string;
     process_icon_assignment: string;
     process_icon_automation: string;
     process_icon_decision: string;
@@ -1653,6 +1655,10 @@ declare const _default: {
     custom_caption: string;
     add_label: string;
     custom_add_label: string;
+    search_label: string;
+    custom_search_label: string;
+    default_label_option: string;
+    field_required_error: string;
     instruction_text_label: string;
     paragraph_already_exists_error: string;
     paragraph_create_modal_heading: string;
@@ -1715,6 +1721,7 @@ declare const _default: {
     first_n_fields: string;
     learn_about_primary_fields: string;
     show_lifecycle: string;
+    show_case_type_in_subheading: string;
     use_only_primary_fields: string;
     use_only_primary_fields_info: string;
     new_tab_heading: string;
@@ -1872,6 +1879,8 @@ declare const _default: {
     app_info_view_content: string;
     app_info_switch_branch: string;
     app_info_update_from_main: string;
+    app_info_commit_private_changes: string;
+    app_info_merge_to_main: string;
     app_info_view_branches: string;
     app_info_application_version: string;
     /** studio-dx-components: Preview */

package/lib/i18n/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkvDE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkPxB,6CAA6C;;;;;;;;;;;;;;IAgB7C,6CAA6C;;;;;;;;IAS7C,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwGzC,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2C/B,wCAAwC;;IAGxC,oCAAoC;;;;;;;;IASpC,oCAAoC;;;;;;IAOpC,uCAAuC;;;;;;;;;;;IAavC,6CAA6C;;;;;;;IAQ7C,uCAAuC;;;;;;;;IAUvC,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlsE3C,wBAkvEE"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsvDE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuPxB,6CAA6C;;;;;;;;;;;;;;IAgB7C,6CAA6C;;;;;;;;IAS7C,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwGzC,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2C/B,wCAAwC;;IAGxC,oCAAoC;;;;;;;;;;IAWpC,oCAAoC;;;;;;IAOpC,uCAAuC;;;;;;;;;;;IAavC,6CAA6C;;;;;;;IAQ7C,uCAAuC;;;;;;;;IAUvC,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7sE3C,wBA6vEE"}

package/lib/i18n/default.js

@@ -169,6 +169,8 @@ export default {
     search_noun: 'Search {0}',
     /* Contextual actions label */
     actions_for: 'Actions - {0}',
+    /* Contextual edit label */
+    edit_for: 'Edit - {0}',
     /* States */
     edited: 'Edited {0}',
     deleted: '{0} deleted',
@@ -355,6 +357,7 @@ export default {
     multiselect_instructions: 'Arrow {0} from start to review selected items',
     multiselect_instructions_with_links: 'Shift+Tab, then arrow {0} to review selected items',
     selected_items: 'Selected items',
+    combobox_loading_selected_items: 'Loading selected items',
     /* core:CompositeInput */
     composite_input_open_button_a11y: 'Open configuration dialog',
     composite_input_close_button_a11y: 'Close configuration dialog',
@@ -1601,6 +1604,7 @@ export default {
     /* build:ProcessModeller */
     process_node_task: 'Task',
     process_node_assignment: 'Assignment',
+    process_node_collect_info: 'Collect info',
     process_node_automation: 'Automation',
     process_node_decision: 'Decision',
     process_node_goto: 'Go to',
@@ -1611,7 +1615,6 @@ export default {
     process_connector_submit: 'Submit',
     process_connector_default: 'Default',
     process_connector_otherwise: 'Otherwise',
-    process_decision_description: 'Adjust the conditions using the property panel',
     process_icon_assignment: 'Assignment case type',
     process_icon_automation: 'Automation object',
     process_icon_decision: 'Decision step logic',
@@ -1764,6 +1767,10 @@ export default {
     /* authoring-ui-views: TargetClassLabelInput */
     add_label: 'Add label',
     custom_add_label: 'Custom add label',
+    search_label: 'Search label',
+    custom_search_label: 'Custom search label',
+    default_label_option: 'Default',
+    field_required_error: '{0} is required.',
     /* authoring-ui-views: Instructions */
     instruction_text_label: 'Instruction text',
     /* authoring-ui-views: AddParagraphModal */
@@ -1843,6 +1850,7 @@ export default {
     first_n_fields: 'First {0} fields',
     learn_about_primary_fields: 'Learn more about Primary Fields',
     show_lifecycle: 'Show Lifecycle',
+    show_case_type_in_subheading: 'Show Case Type in Subheading',
     use_only_primary_fields: 'Sync to Primary Fields',
     use_only_primary_fields_info: '"Use only Primary Fields" pre-populates and links the Full Object Display Rule with the Primary Fields configured in the Data Model tab.',
     new_tab_heading: 'New Tab',
@@ -2017,7 +2025,9 @@ export default {
     app_info_create_branch: 'Create branch',
     app_info_view_content: 'View branch contents',
     app_info_switch_branch: 'Switch to branch',
-    app_info_update_from_main: 'Update from main',
+    app_info_update_from_main: 'Update from Main',
+    app_info_commit_private_changes: 'Commit private changes to branch',
+    app_info_merge_to_main: 'Merge to Main',
     app_info_view_branches: 'View all branches',
     app_info_application_version: '{0} - v. {1}',
     /** studio-dx-components: Preview */