@pega/cosmos-react-core 10.0.0-build.2.14 → 10.0.0-build.2.15

package/lib/components/ListToolbar/ListToolbar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAYvD,eAAO,MAAM,wBAAwB;;2JAAmB,CAAC;AAGzD,eAAO,MAAM,gBAAgB,6NAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;cAA6B,OAAO;YA4BjE,CAAC;AAIH,eAAO,MAAM,iBAAiB;oBAAgC,OAAO;YAsBpE,CAAC;AAIF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;uRAWlC,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAYnC,CAAC;AAIH,eAAO,MAAM,eAAe,kYAK3B,CAAC;AAIF,eAAO,MAAM,aAAa;eAA2B,OAAO;cAAY,OAAO;YAiD9E,CAAC;AAIF,eAAO,MAAM,eAAe;;;;mBAM1B,CAAC;AAIH,eAAO,MAAM,UAAU,qQAatB,CAAC;AAIF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAQjC,CAAC"}
+{"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ9C,eAAO,MAAM,wBAAwB;;iKAAmB,CAAC;AAGzD,eAAO,MAAM,gBAAgB,6NAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;cAA6B,OAAO;YA0BjE,CAAC;AAIH,eAAO,MAAM,iBAAiB;oBAAgC,OAAO;YAsBpE,CAAC;AAIF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;uRAWlC,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0MAYnC,CAAC;AAIH,eAAO,MAAM,eAAe,kYAK3B,CAAC;AAIF,eAAO,MAAM,aAAa;eACb,OAAO;cACR,OAAO;gBACL,UAAU;YAwDtB,CAAC;AAIH,eAAO,MAAM,eAAe;;;;mBAM1B,CAAC;AAIH,eAAO,MAAM,UAAU,qQAatB,CAAC;AAIF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0MAQjC,CAAC"}

package/lib/components/ListToolbar/ListToolbar.styles.js

@@ -20,7 +20,6 @@ export const StyledSearchForm = styled.div `
   }
 `;
 export const StyledViewSelector = styled.button(({ theme, required }) => {
-    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const { urgent } = theme.base.palette;
     const hitAreaMouse = theme.base['hit-area']['mouse-min'];
     const hitAreaFinger = theme.base['hit-area']['finger-min'];
@@ -31,7 +30,6 @@ export const StyledViewSelector = styled.button(({ theme, required }) => {
 
     ${StyledText} {
       white-space: nowrap;
-      font-size: ${fontSizes[theme.components.text.h2['font-size']]};
       line-height: ${hitAreaMouse};
       word-break: break-word;
       @media (pointer: coarse) {
@@ -102,52 +100,60 @@ export const StyledErrorIcon = styled(Icon)(({ theme }) => css `
     margin-inline-end: ${theme.base.spacing};
   `);
 StyledErrorIcon.defaultProps = defaultThemeProp;
-export const StyledHeading = styled.div(({ theme, required, showName }) => {
+export const StyledHeading = styled.div(({ theme, required, showName, headingTag }) => {
     const { urgent } = theme.base.palette;
     const hitAreaCompact = theme.base['hit-area'].compact;
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const fontSizeKeys = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+    const headingFontSizeKey = theme.components.text[headingTag]['font-size'];
+    const headingFontSize = fontSizes[fontSizeKeys.find(k => k === headingFontSizeKey) ?? 'm'];
     return css `
-      min-width: 0;
-      position: relative;
-      line-height: ${hitAreaCompact};
-      word-break: break-word;
-      display: flex;
-      align-items: center;
+    min-width: 0;
+    position: relative;
+    line-height: ${hitAreaCompact};
+    word-break: break-word;
+    display: flex;
+    align-items: center;
 
-      ${required &&
+    ${required &&
         css `
-        padding-inline-end: calc(1.5 * ${theme.base.spacing});
-      `}
-      &::after {
-        display: ${required ? 'inline' : 'none'};
-        content: '\\00a0*';
-        vertical-align: top;
-        color: ${urgent};
-        position: absolute;
-        inset-inline-end: 0;
-        inset-block-start: 0;
-      }
+      padding-inline-end: calc(1.5 * ${theme.base.spacing});
+    `}
+    &::after {
+      display: ${required ? 'inline' : 'none'};
+      content: '\\00a0*';
+      vertical-align: top;
+      color: ${urgent};
+      position: absolute;
+      inset-inline-end: 0;
+      inset-block-start: 0;
+    }
 
-      ${StyledErrorIcon} {
-        margin-inline-end: calc(0.5 * ${theme.base.spacing});
-      }
+    ${StyledErrorIcon} {
+      margin-inline-end: calc(0.5 * ${theme.base.spacing});
+    }
 
-      ${StyledText} {
-        line-height: ${hitAreaCompact};
-        ${ellipsisOverflow};
-      }
+    ${StyledText} {
+      line-height: ${hitAreaCompact};
+      ${ellipsisOverflow};
+    }
 
-      ${!required &&
+    ${StyledViewSelector} {
+      font-size: ${headingFontSize};
+    }
+
+    ${!required &&
         !showName &&
         css `
-        > ${StyledText} {
-          ${hideVisually}
-        }
+      > ${StyledText} {
+        ${hideVisually}
+      }
 
-        &:not(:has(${StyledViewSelector})) {
-          margin-inline-end: -${theme.base.spacing};
-        }
-      `}
-    `;
+      &:not(:has(${StyledViewSelector})) {
+        margin-inline-end: -${theme.base.spacing};
+      }
+    `}
+  `;
 });
 StyledHeading.defaultProps = defaultThemeProp;
 export const StyledCountMeta = styled(StyledCount)(({ theme }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { StyledDialogContent } from '../Dialog/Dialog.styles';\nimport { StyledCount } from '../Badges/Count';\nimport type { FormControlProps } from '../FormControl';\nimport Icon from '../Icon';\nimport Flex from '../Flex';\nimport { StyledSearchInput } from '../SearchInput';\nimport { StyledText } from '../Text';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport Button, { StyledButton } from '../Button';\nimport FormDialog from '../Dialog/FormDialog';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nexport const StyledExpandSearchButton = styled(Button)``;\nStyledExpandSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchForm = styled.div`\n  ${StyledSearchInput} {\n    flex-grow: 1;\n    max-width: min(100%, 40ch);\n  }\n`;\n\nexport const StyledViewSelector = styled.button<{ required: boolean }>(({ theme, required }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { urgent } = theme.base.palette;\n  const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n  const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n  return css`\n    flex-shrink: initial;\n    white-space: initial;\n    max-width: 100%;\n\n    ${StyledText} {\n      white-space: nowrap;\n      font-size: ${fontSizes[theme.components.text.h2['font-size'] as FontSize]};\n      line-height: ${hitAreaMouse};\n      word-break: break-word;\n      @media (pointer: coarse) {\n        line-height: ${hitAreaFinger};\n      }\n    }\n\n    ${StyledText}::after {\n      display: ${required ? 'inline-block' : 'none'};\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n    }\n  `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div<{ isSmallOrAbove: boolean }>(\n  ({ theme, isSmallOrAbove }) => {\n    return css`\n      width: 100%;\n      margin-block-end: calc(0.5 * ${theme.base.spacing});\n\n      ${isSmallOrAbove &&\n      css`\n        ${StyledExpandSearchButton} {\n          margin-inline-start: calc(0.5 * ${theme.base.spacing});\n        }\n\n        ${StyledSearchInput} {\n          margin-inline-start: ${theme.base.spacing};\n\n          input {\n            min-width: 20ch;\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledListToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarDialog = styled(FormDialog)(({ theme }) => {\n  return css`\n    min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));\n    max-width: calc(100vw - 4 * ${theme.base.spacing});\n\n    ${StyledDialogContent} {\n      @media (height >= 31.25rem) {\n        min-height: 2rem;\n      }\n    }\n  `;\n});\n\nStyledListToolbarDialog.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarContent = styled(Flex)(({ theme }) => {\n  return css`\n    border-radius: calc(0.25 * ${theme.base['border-radius']});\n\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n\n    ${StyledButton}:focus {\n      z-index: 1;\n    }\n  `;\n});\n\nStyledListToolbarContent.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n  ({ theme }) => css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-end: ${theme.base.spacing};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledHeading = styled.div<{ required?: boolean; showName: boolean }>(\n  ({ theme, required, showName }) => {\n    const { urgent } = theme.base.palette;\n    const hitAreaCompact = theme.base['hit-area'].compact;\n\n    return css`\n      min-width: 0;\n      position: relative;\n      line-height: ${hitAreaCompact};\n      word-break: break-word;\n      display: flex;\n      align-items: center;\n\n      ${required &&\n      css`\n        padding-inline-end: calc(1.5 * ${theme.base.spacing});\n      `}\n      &::after {\n        display: ${required ? 'inline' : 'none'};\n        content: '\\\\00a0*';\n        vertical-align: top;\n        color: ${urgent};\n        position: absolute;\n        inset-inline-end: 0;\n        inset-block-start: 0;\n      }\n\n      ${StyledErrorIcon} {\n        margin-inline-end: calc(0.5 * ${theme.base.spacing});\n      }\n\n      ${StyledText} {\n        line-height: ${hitAreaCompact};\n        ${ellipsisOverflow};\n      }\n\n      ${!required &&\n      !showName &&\n      css`\n        > ${StyledText} {\n          ${hideVisually}\n        }\n\n        &:not(:has(${StyledViewSelector})) {\n          margin-inline-end: -${theme.base.spacing};\n        }\n      `}\n    `;\n  }\n);\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nexport const StyledCountMeta = styled(StyledCount)(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    margin-inline-end: ${theme.base.spacing};\n    width: fit-content;\n  `;\n});\n\nStyledCountMeta.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      components: { 'form-field': formField }\n    }\n  }) => css`\n    ${status &&\n    formField[status] &&\n    css`\n      color: ${formField[status]['status-color']};\n    `}\n  `\n);\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledSearchContainer = styled(Flex)(\n  ({ theme }) => css`\n    margin-block: calc(0.5 * ${theme.base.spacing});\n\n    ${StyledSearchInput} {\n      max-width: 100%;\n    }\n  `\n);\n\nStyledSearchContainer.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { StyledDialogContent } from '../Dialog/Dialog.styles';\nimport { StyledCount } from '../Badges/Count';\nimport type { FormControlProps } from '../FormControl';\nimport Icon from '../Icon';\nimport Flex from '../Flex';\nimport { StyledSearchInput } from '../SearchInput';\nimport { StyledText } from '../Text';\nimport type { HeadingTag } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport Button, { StyledButton } from '../Button';\nimport FormDialog from '../Dialog/FormDialog';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nexport const StyledExpandSearchButton = styled(Button)``;\nStyledExpandSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchForm = styled.div`\n  ${StyledSearchInput} {\n    flex-grow: 1;\n    max-width: min(100%, 40ch);\n  }\n`;\n\nexport const StyledViewSelector = styled.button<{ required: boolean }>(({ theme, required }) => {\n  const { urgent } = theme.base.palette;\n  const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n  const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n  return css`\n    flex-shrink: initial;\n    white-space: initial;\n    max-width: 100%;\n\n    ${StyledText} {\n      white-space: nowrap;\n      line-height: ${hitAreaMouse};\n      word-break: break-word;\n      @media (pointer: coarse) {\n        line-height: ${hitAreaFinger};\n      }\n    }\n\n    ${StyledText}::after {\n      display: ${required ? 'inline-block' : 'none'};\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n    }\n  `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div<{ isSmallOrAbove: boolean }>(\n  ({ theme, isSmallOrAbove }) => {\n    return css`\n      width: 100%;\n      margin-block-end: calc(0.5 * ${theme.base.spacing});\n\n      ${isSmallOrAbove &&\n      css`\n        ${StyledExpandSearchButton} {\n          margin-inline-start: calc(0.5 * ${theme.base.spacing});\n        }\n\n        ${StyledSearchInput} {\n          margin-inline-start: ${theme.base.spacing};\n\n          input {\n            min-width: 20ch;\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledListToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarDialog = styled(FormDialog)(({ theme }) => {\n  return css`\n    min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));\n    max-width: calc(100vw - 4 * ${theme.base.spacing});\n\n    ${StyledDialogContent} {\n      @media (height >= 31.25rem) {\n        min-height: 2rem;\n      }\n    }\n  `;\n});\n\nStyledListToolbarDialog.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarContent = styled(Flex)(({ theme }) => {\n  return css`\n    border-radius: calc(0.25 * ${theme.base['border-radius']});\n\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n\n    ${StyledButton}:focus {\n      z-index: 1;\n    }\n  `;\n});\n\nStyledListToolbarContent.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n  ({ theme }) => css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-end: ${theme.base.spacing};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledHeading = styled.div<{\n  required?: boolean;\n  showName: boolean;\n  headingTag: HeadingTag;\n}>(({ theme, required, showName, headingTag }) => {\n  const { urgent } = theme.base.palette;\n  const hitAreaCompact = theme.base['hit-area'].compact;\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const fontSizeKeys: FontSize[] = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];\n  const headingFontSizeKey = theme.components.text[headingTag]['font-size'];\n  const headingFontSize = fontSizes[fontSizeKeys.find(k => k === headingFontSizeKey) ?? 'm'];\n\n  return css`\n    min-width: 0;\n    position: relative;\n    line-height: ${hitAreaCompact};\n    word-break: break-word;\n    display: flex;\n    align-items: center;\n\n    ${required &&\n    css`\n      padding-inline-end: calc(1.5 * ${theme.base.spacing});\n    `}\n    &::after {\n      display: ${required ? 'inline' : 'none'};\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n      position: absolute;\n      inset-inline-end: 0;\n      inset-block-start: 0;\n    }\n\n    ${StyledErrorIcon} {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n    }\n\n    ${StyledText} {\n      line-height: ${hitAreaCompact};\n      ${ellipsisOverflow};\n    }\n\n    ${StyledViewSelector} {\n      font-size: ${headingFontSize};\n    }\n\n    ${!required &&\n    !showName &&\n    css`\n      > ${StyledText} {\n        ${hideVisually}\n      }\n\n      &:not(:has(${StyledViewSelector})) {\n        margin-inline-end: -${theme.base.spacing};\n      }\n    `}\n  `;\n});\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nexport const StyledCountMeta = styled(StyledCount)(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    margin-inline-end: ${theme.base.spacing};\n    width: fit-content;\n  `;\n});\n\nStyledCountMeta.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      components: { 'form-field': formField }\n    }\n  }) => css`\n    ${status &&\n    formField[status] &&\n    css`\n      color: ${formField[status]['status-color']};\n    `}\n  `\n);\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledSearchContainer = styled(Flex)(\n  ({ theme }) => css`\n    margin-block: calc(0.5 * ${theme.base.spacing});\n\n    ${StyledSearchInput} {\n      max-width: 100%;\n    }\n  `\n);\n\nStyledSearchContainer.defaultProps = defaultThemeProp;\n"]}

package/lib/components/PageTemplates/GridLayout/EditorBackground.js

@@ -43,7 +43,7 @@ const StyledPageBreak = styled.div(({ containerPadding, rowHeight, theme, margin
         font-size: 0.75rem;
         line-height: 1;
         transform: translate(0, -50%);
-        background-color: ${palette['app-background']};
+        background: ${palette['app-background']};
         color: ${palette['border-line']};
         padding-inline-end: 0.25rem;
       }

package/lib/components/PageTemplates/GridLayout/EditorBackground.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Layout } from 'react-grid-layout';\nimport { rgba } from 'polished';\n\nimport Grid from '../../Grid';\nimport type { NoChildrenProp } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { useI18n } from '../../../hooks';\n\nimport useGridLayoutConfig from './config';\nimport { getArrayFromRange } from './utils';\n\nconst StyledGrid = styled(Grid)`\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n  inline-size: 100%;\n`;\n\nconst StyledGridCell = styled.div<{ rowHeight: number; highlighted: boolean }>(\n  ({ theme, highlighted, rowHeight }) => {\n    const {\n      base: { palette }\n    } = theme;\n    const borderColor = palette[highlighted ? 'warn' : 'border-line'];\n    const background = highlighted ? rgba(palette.warn, 0.1) : 'transparent';\n\n    return css`\n      /* stylelint-disable-next-line unit-allowed-list */\n      border: 1px solid ${borderColor};\n      background: ${background};\n      block-size: ${rowHeight}px;\n      border-radius: ${theme.components.card['border-radius']};\n    `;\n  }\n);\nStyledGridCell.defaultProps = defaultThemeProp;\n\ninterface PageBreakProps {\n  rowsAbove: number;\n  rowHeight: number;\n  margin: [number, number];\n  containerPadding: [number, number];\n  prefix: string;\n}\n\nconst StyledPageBreak = styled.div<PageBreakProps>(\n  ({ containerPadding, rowHeight, theme, margin, rowsAbove, prefix }) => {\n    const {\n      base: { palette }\n    } = theme;\n    return css`\n      position: absolute;\n      inset-inline-start: ${containerPadding[0]}px;\n      inset-inline-end: ${containerPadding[0]}px;\n      inset-block-start: ${containerPadding[1] + rowsAbove * (rowHeight + margin[1])}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      margin-block-start: ${-margin[1] / 2 - 1}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      border-block-start: 2px dashed ${palette['border-line']};\n\n      &::before {\n        content: '${prefix}';\n        position: absolute;\n        font-size: 0.75rem;\n        line-height: 1;\n        transform: translate(0, -50%);\n        background-color: ${palette['app-background']};\n        color: ${palette['border-line']};\n        padding-inline-end: 0.25rem;\n      }\n    `;\n  }\n);\nStyledPageBreak.defaultProps = defaultThemeProp;\n\ninterface EditorBackgroundProps extends NoChildrenProp {\n  layout?: Layout[];\n  numColumns: number;\n  rowHeight: number;\n  rowsPerPage: number | null; // null when not applying auto-fit\n  highlighted: boolean;\n}\n\n/**\n * Renders background grid-cells for GridEditor\n * @component\n */\nconst EditorBackground: FC<EditorBackgroundProps> = ({\n  layout,\n  numColumns,\n  rowHeight,\n  rowsPerPage,\n  highlighted\n}) => {\n  const t = useI18n();\n  const { margin, containerPadding } = useGridLayoutConfig(true);\n\n  const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;\n  const maxY = Math.max(maxYInLayout, rowsPerPage || 0);\n  const numGridCells = (maxY + 1) * numColumns;\n  const cells = getArrayFromRange(0, numGridCells, false);\n\n  // rowsPerPage will be null if auto-fit is disabled. Don't show pageBreaks in that case.\n  const numPageBreaks = rowsPerPage ? Math.floor(maxY / rowsPerPage) : 0;\n  const pageBreaks = getArrayFromRange(0, numPageBreaks, false);\n\n  return (\n    <StyledGrid container={{ cols: `repeat(${numColumns}, 1fr)`, gap: 2, pad: [0, 2, 2, 2] }}>\n      {cells.map(n => (\n        <StyledGridCell\n          key={n}\n          rowHeight={rowHeight}\n          // Highlight all cells except the dummy row at the bottom\n          highlighted={highlighted && n < numGridCells - numColumns}\n        />\n      ))}\n      {pageBreaks.map(n => (\n        <StyledPageBreak\n          key={n}\n          rowsAbove={(n + 1) * rowsPerPage!}\n          rowHeight={rowHeight}\n          margin={margin}\n          containerPadding={containerPadding}\n          prefix={t('page_number', [n + 1])}\n        />\n      ))}\n    </StyledGrid>\n  );\n};\n\nexport default EditorBackground;\n"]}
+{"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Layout } from 'react-grid-layout';\nimport { rgba } from 'polished';\n\nimport Grid from '../../Grid';\nimport type { NoChildrenProp } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { useI18n } from '../../../hooks';\n\nimport useGridLayoutConfig from './config';\nimport { getArrayFromRange } from './utils';\n\nconst StyledGrid = styled(Grid)`\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n  inline-size: 100%;\n`;\n\nconst StyledGridCell = styled.div<{ rowHeight: number; highlighted: boolean }>(\n  ({ theme, highlighted, rowHeight }) => {\n    const {\n      base: { palette }\n    } = theme;\n    const borderColor = palette[highlighted ? 'warn' : 'border-line'];\n    const background = highlighted ? rgba(palette.warn, 0.1) : 'transparent';\n\n    return css`\n      /* stylelint-disable-next-line unit-allowed-list */\n      border: 1px solid ${borderColor};\n      background: ${background};\n      block-size: ${rowHeight}px;\n      border-radius: ${theme.components.card['border-radius']};\n    `;\n  }\n);\nStyledGridCell.defaultProps = defaultThemeProp;\n\ninterface PageBreakProps {\n  rowsAbove: number;\n  rowHeight: number;\n  margin: [number, number];\n  containerPadding: [number, number];\n  prefix: string;\n}\n\nconst StyledPageBreak = styled.div<PageBreakProps>(\n  ({ containerPadding, rowHeight, theme, margin, rowsAbove, prefix }) => {\n    const {\n      base: { palette }\n    } = theme;\n    return css`\n      position: absolute;\n      inset-inline-start: ${containerPadding[0]}px;\n      inset-inline-end: ${containerPadding[0]}px;\n      inset-block-start: ${containerPadding[1] + rowsAbove * (rowHeight + margin[1])}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      margin-block-start: ${-margin[1] / 2 - 1}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      border-block-start: 2px dashed ${palette['border-line']};\n\n      &::before {\n        content: '${prefix}';\n        position: absolute;\n        font-size: 0.75rem;\n        line-height: 1;\n        transform: translate(0, -50%);\n        background: ${palette['app-background']};\n        color: ${palette['border-line']};\n        padding-inline-end: 0.25rem;\n      }\n    `;\n  }\n);\nStyledPageBreak.defaultProps = defaultThemeProp;\n\ninterface EditorBackgroundProps extends NoChildrenProp {\n  layout?: Layout[];\n  numColumns: number;\n  rowHeight: number;\n  rowsPerPage: number | null; // null when not applying auto-fit\n  highlighted: boolean;\n}\n\n/**\n * Renders background grid-cells for GridEditor\n * @component\n */\nconst EditorBackground: FC<EditorBackgroundProps> = ({\n  layout,\n  numColumns,\n  rowHeight,\n  rowsPerPage,\n  highlighted\n}) => {\n  const t = useI18n();\n  const { margin, containerPadding } = useGridLayoutConfig(true);\n\n  const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;\n  const maxY = Math.max(maxYInLayout, rowsPerPage || 0);\n  const numGridCells = (maxY + 1) * numColumns;\n  const cells = getArrayFromRange(0, numGridCells, false);\n\n  // rowsPerPage will be null if auto-fit is disabled. Don't show pageBreaks in that case.\n  const numPageBreaks = rowsPerPage ? Math.floor(maxY / rowsPerPage) : 0;\n  const pageBreaks = getArrayFromRange(0, numPageBreaks, false);\n\n  return (\n    <StyledGrid container={{ cols: `repeat(${numColumns}, 1fr)`, gap: 2, pad: [0, 2, 2, 2] }}>\n      {cells.map(n => (\n        <StyledGridCell\n          key={n}\n          rowHeight={rowHeight}\n          // Highlight all cells except the dummy row at the bottom\n          highlighted={highlighted && n < numGridCells - numColumns}\n        />\n      ))}\n      {pageBreaks.map(n => (\n        <StyledPageBreak\n          key={n}\n          rowsAbove={(n + 1) * rowsPerPage!}\n          rowHeight={rowHeight}\n          margin={margin}\n          containerPadding={containerPadding}\n          prefix={t('page_number', [n + 1])}\n        />\n      ))}\n    </StyledGrid>\n  );\n};\n\nexport default EditorBackground;\n"]}

package/lib/components/Preview/PreviewPanel.js

@@ -27,7 +27,7 @@ export const StyledPreviewDrawer = styled(Drawer)(({ theme }) => {
     min-width: ${resizeDrawerMinWidth};
     max-width: ${resizeDrawerMaxWidth};
     width: var(--resize-drawer-width);
-    background-color: ${theme.base.palette['app-background']};
+    background: ${theme.base.palette['app-background']};
     height: auto;
     inset-block-start: var(--appshell-top-offset, 0);
     inset-block-end: var(--appshell-bottom-offset, 0);

package/lib/components/Preview/PreviewPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewPanel.js","sourceRoot":"","sources":["../../../src/components/Preview/PreviewPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport getFocusables from '../../utils/getFocusables';\nimport Icon, { registerIcon } from '../Icon';\nimport Progress from '../Progress';\nimport { readableHue } from '../../styles/utils';\nimport {\n  resizeDrawerDefaultWidth,\n  resizeDrawerMaxWidth,\n  resizeDrawerMinWidth\n} from '../../styles/constants';\nimport { StyledResizeHandle } from '../Drawer/ResizeHandle';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport useConsolidatedRef from '../../hooks/useConsolidatedRef';\nimport useDirection from '../../hooks/useDirection';\nimport useElement from '../../hooks/useElement';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport useI18n from '../../hooks/useI18n';\nimport usePreviewContext from '../../hooks/usePreviewContext';\nimport useTestIds from '../../hooks/useTestIds';\nimport { withTestIds } from '../../utils';\n\nimport { getPreviewPanelTestIds } from './PreviewPanel.test-ids';\nimport type { PreviewPanelProps } from './Preview.types';\n\nregisterIcon(timesIcon);\n\nexport const StyledPreviewDrawer = styled(Drawer)(({ theme }) => {\n  return css`\n    min-width: ${resizeDrawerMinWidth};\n    max-width: ${resizeDrawerMaxWidth};\n    width: var(--resize-drawer-width);\n    background-color: ${theme.base.palette['app-background']};\n    height: auto;\n    inset-block-start: var(--appshell-top-offset, 0);\n    inset-block-end: var(--appshell-bottom-offset, 0);\n    z-index: calc(${theme.base['z-index'].backdrop} - 1);\n    transition-property: transform, box-shadow, opacity, border-inline-start;\n    transition-duration: max(${theme.base.animation.speed}, 1ms);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    ${StyledResizeHandle} {\n      z-index: calc(${theme.base['z-index'].max - 1});\n    }\n\n    @media (width >= ${theme.base.breakpoints.md}) {\n      box-shadow: none;\n      border-inline-start: 0.0625rem solid\n        ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n          mode: 'both',\n          level: 'AANonText'\n        })};\n    }\n  `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst StyledCloseButton = styled(Button)(({ theme }) => {\n  return css`\n    --half-btn-compact-difference: calc(\n      (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2\n    );\n    @media (pointer: coarse) {\n      --half-btn-compact-difference: calc(\n        (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n      );\n    }\n    position: absolute;\n    border: none;\n\n    /* Places above resize handle */\n    z-index: ${theme.base['z-index'].max};\n    box-shadow: ${theme.base.shadow.low};\n    inset-inline-start: calc(-${theme.base['hit-area'].compact} / 2);\n    inset-block-start: calc(2 * ${theme.base.spacing} + var(--half-btn-compact-difference));\n  `;\n});\n\nStyledCloseButton.defaultProps = defaultThemeProp;\n\nconst StyledContentOverflow = styled(Flex)`\n  min-height: 0;\n  overflow-y: auto;\n`;\n\nStyledContentOverflow.defaultProps = defaultThemeProp;\n\nconst PreviewPanel = forwardRef(function PreviewPanel(\n  {\n    testId,\n    previewLabel,\n    open,\n    children,\n    progress,\n    onBeforeOpen,\n    onAfterOpen,\n    onBeforeClose,\n    onAfterClose,\n    ...restProps\n  }: PropsWithoutRef<PreviewPanelProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const testIds = useTestIds(testId, getPreviewPanelTestIds);\n\n  const t = useI18n();\n  const direction = useDirection();\n  const previewRef = useConsolidatedRef(ref);\n  const { previewTriggerRef } = usePreviewContext();\n\n  const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n  const [progressVisible, setProgressVisible] = useState(false);\n\n  const setFocus = () => {\n    if (progressVisible) return;\n\n    const focusables = getFocusables(previewRef).filter(el => el !== closeButtonEl);\n    const focusable = focusables[0] ?? closeButtonEl;\n    focusable?.focus();\n  };\n\n  useEffect(() => {\n    if (!progressVisible) {\n      setFocus();\n    }\n  }, [progressVisible]);\n\n  useFocusTrap(previewRef, true, [], false);\n\n  return (\n    <Drawer\n      data-testid={testIds.root}\n      onBeforeOpen={() => {\n        onBeforeOpen?.();\n      }}\n      onAfterOpen={() => {\n        setFocus();\n        onAfterOpen?.();\n      }}\n      as={StyledPreviewDrawer}\n      role='complementary'\n      forwardedAs={Flex}\n      container={{ direction: 'column' }}\n      ref={previewRef}\n      position='fixed'\n      placement={direction.end}\n      size={resizeDrawerDefaultWidth}\n      aria-label={previewLabel ? t('preview_of_noun', [previewLabel]) : t('preview')}\n      open={open}\n      resizeable\n      shadow\n      nullWhenClosed\n      {...restProps}\n    >\n      <StyledCloseButton\n        data-testid={testIds.close}\n        icon\n        compact\n        onClick={() => {\n          onBeforeClose?.();\n          onAfterClose?.();\n          previewTriggerRef.current?.focus();\n        }}\n        ref={setCloseButtonEl}\n        label={t('close_preview')}\n      >\n        <Icon name='times' size='font-size' />\n      </StyledCloseButton>\n\n      <Progress\n        data-testid={testIds.progress}\n        placement='local'\n        visible={!!progress}\n        focusOnVisible\n        delay\n        onTransitionStartIn={() => {\n          setProgressVisible(true);\n        }}\n        onTransitionEndOut={() => setProgressVisible(false)}\n      />\n      <StyledContentOverflow item={{ grow: 1, basis: '0' }}>\n        {!progress && children}\n      </StyledContentOverflow>\n    </Drawer>\n  );\n});\n\nexport default withTestIds(PreviewPanel, getPreviewPanelTestIds);\n"]}
+{"version":3,"file":"PreviewPanel.js","sourceRoot":"","sources":["../../../src/components/Preview/PreviewPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,aAAa,MAAM,2BAA2B,CAAC;AACtD,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EACL,wBAAwB,EACxB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,kBAAkB,MAAM,gCAAgC,CAAC;AAChE,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAC1C,OAAO,iBAAiB,MAAM,+BAA+B,CAAC;AAC9D,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;iBACK,oBAAoB;iBACpB,oBAAoB;;kBAEnB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;;;oBAIlC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;;+BAEnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;kCACvB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;MAE5D,kBAAkB;sBACF,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,GAAG,CAAC;;;uBAG5B,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;UAGtC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE;QACrF,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,WAAW;KACnB,CAAC;;GAEP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;;SAEH,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;;;;WAI9D,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;;;;;;;eAO7D,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG;kBACtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;gCACP,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;kCAC5B,KAAK,CAAC,IAAI,CAAC,OAAO;GACjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAGzC,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS,YAAY,CACnD,EACE,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,aAAa,EACb,YAAY,EACZ,GAAG,SAAS,EACuB,EACrC,GAAwB;IAExB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;IAE3D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC3C,MAAM,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAElD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,EAAqB,CAAC;IAC1E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,eAAe;YAAE,OAAO;QAE5B,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,aAAa,CAAC,CAAC;QAChF,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC;QACjD,SAAS,EAAE,KAAK,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,YAAY,CAAC,UAAU,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,MAAM,mBACQ,OAAO,CAAC,IAAI,EACzB,YAAY,EAAE,GAAG,EAAE;YACjB,YAAY,EAAE,EAAE,CAAC;QACnB,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;YAChB,QAAQ,EAAE,CAAC;YACX,WAAW,EAAE,EAAE,CAAC;QAClB,CAAC,EACD,EAAE,EAAE,mBAAmB,EACvB,IAAI,EAAC,eAAe,EACpB,WAAW,EAAE,IAAI,EACjB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,GAAG,EAAE,UAAU,EACf,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,SAAS,CAAC,GAAG,EACxB,IAAI,EAAE,wBAAwB,gBAClB,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAC9E,IAAI,EAAE,IAAI,EACV,UAAU,QACV,MAAM,QACN,cAAc,WACV,SAAS,aAEb,KAAC,iBAAiB,mBACH,OAAO,CAAC,KAAK,EAC1B,IAAI,QACJ,OAAO,QACP,OAAO,EAAE,GAAG,EAAE;oBACZ,aAAa,EAAE,EAAE,CAAC;oBAClB,YAAY,EAAE,EAAE,CAAC;oBACjB,iBAAiB,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBACrC,CAAC,EACD,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,YAEzB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,WAAW,GAAG,GACpB,EAEpB,KAAC,QAAQ,mBACM,OAAO,CAAC,QAAQ,EAC7B,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,cAAc,QACd,KAAK,QACL,mBAAmB,EAAE,GAAG,EAAE;oBACxB,kBAAkB,CAAC,IAAI,CAAC,CAAC;gBAC3B,CAAC,EACD,kBAAkB,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,GACnD,EACF,KAAC,qBAAqB,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,YACjD,CAAC,QAAQ,IAAI,QAAQ,GACA,IACjB,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,YAAY,EAAE,sBAAsB,CAAC,CAAC","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport getFocusables from '../../utils/getFocusables';\nimport Icon, { registerIcon } from '../Icon';\nimport Progress from '../Progress';\nimport { readableHue } from '../../styles/utils';\nimport {\n  resizeDrawerDefaultWidth,\n  resizeDrawerMaxWidth,\n  resizeDrawerMinWidth\n} from '../../styles/constants';\nimport { StyledResizeHandle } from '../Drawer/ResizeHandle';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport useConsolidatedRef from '../../hooks/useConsolidatedRef';\nimport useDirection from '../../hooks/useDirection';\nimport useElement from '../../hooks/useElement';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport useI18n from '../../hooks/useI18n';\nimport usePreviewContext from '../../hooks/usePreviewContext';\nimport useTestIds from '../../hooks/useTestIds';\nimport { withTestIds } from '../../utils';\n\nimport { getPreviewPanelTestIds } from './PreviewPanel.test-ids';\nimport type { PreviewPanelProps } from './Preview.types';\n\nregisterIcon(timesIcon);\n\nexport const StyledPreviewDrawer = styled(Drawer)(({ theme }) => {\n  return css`\n    min-width: ${resizeDrawerMinWidth};\n    max-width: ${resizeDrawerMaxWidth};\n    width: var(--resize-drawer-width);\n    background: ${theme.base.palette['app-background']};\n    height: auto;\n    inset-block-start: var(--appshell-top-offset, 0);\n    inset-block-end: var(--appshell-bottom-offset, 0);\n    z-index: calc(${theme.base['z-index'].backdrop} - 1);\n    transition-property: transform, box-shadow, opacity, border-inline-start;\n    transition-duration: max(${theme.base.animation.speed}, 1ms);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    ${StyledResizeHandle} {\n      z-index: calc(${theme.base['z-index'].max - 1});\n    }\n\n    @media (width >= ${theme.base.breakpoints.md}) {\n      box-shadow: none;\n      border-inline-start: 0.0625rem solid\n        ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n          mode: 'both',\n          level: 'AANonText'\n        })};\n    }\n  `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst StyledCloseButton = styled(Button)(({ theme }) => {\n  return css`\n    --half-btn-compact-difference: calc(\n      (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2\n    );\n    @media (pointer: coarse) {\n      --half-btn-compact-difference: calc(\n        (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n      );\n    }\n    position: absolute;\n    border: none;\n\n    /* Places above resize handle */\n    z-index: ${theme.base['z-index'].max};\n    box-shadow: ${theme.base.shadow.low};\n    inset-inline-start: calc(-${theme.base['hit-area'].compact} / 2);\n    inset-block-start: calc(2 * ${theme.base.spacing} + var(--half-btn-compact-difference));\n  `;\n});\n\nStyledCloseButton.defaultProps = defaultThemeProp;\n\nconst StyledContentOverflow = styled(Flex)`\n  min-height: 0;\n  overflow-y: auto;\n`;\n\nStyledContentOverflow.defaultProps = defaultThemeProp;\n\nconst PreviewPanel = forwardRef(function PreviewPanel(\n  {\n    testId,\n    previewLabel,\n    open,\n    children,\n    progress,\n    onBeforeOpen,\n    onAfterOpen,\n    onBeforeClose,\n    onAfterClose,\n    ...restProps\n  }: PropsWithoutRef<PreviewPanelProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const testIds = useTestIds(testId, getPreviewPanelTestIds);\n\n  const t = useI18n();\n  const direction = useDirection();\n  const previewRef = useConsolidatedRef(ref);\n  const { previewTriggerRef } = usePreviewContext();\n\n  const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n  const [progressVisible, setProgressVisible] = useState(false);\n\n  const setFocus = () => {\n    if (progressVisible) return;\n\n    const focusables = getFocusables(previewRef).filter(el => el !== closeButtonEl);\n    const focusable = focusables[0] ?? closeButtonEl;\n    focusable?.focus();\n  };\n\n  useEffect(() => {\n    if (!progressVisible) {\n      setFocus();\n    }\n  }, [progressVisible]);\n\n  useFocusTrap(previewRef, true, [], false);\n\n  return (\n    <Drawer\n      data-testid={testIds.root}\n      onBeforeOpen={() => {\n        onBeforeOpen?.();\n      }}\n      onAfterOpen={() => {\n        setFocus();\n        onAfterOpen?.();\n      }}\n      as={StyledPreviewDrawer}\n      role='complementary'\n      forwardedAs={Flex}\n      container={{ direction: 'column' }}\n      ref={previewRef}\n      position='fixed'\n      placement={direction.end}\n      size={resizeDrawerDefaultWidth}\n      aria-label={previewLabel ? t('preview_of_noun', [previewLabel]) : t('preview')}\n      open={open}\n      resizeable\n      shadow\n      nullWhenClosed\n      {...restProps}\n    >\n      <StyledCloseButton\n        data-testid={testIds.close}\n        icon\n        compact\n        onClick={() => {\n          onBeforeClose?.();\n          onAfterClose?.();\n          previewTriggerRef.current?.focus();\n        }}\n        ref={setCloseButtonEl}\n        label={t('close_preview')}\n      >\n        <Icon name='times' size='font-size' />\n      </StyledCloseButton>\n\n      <Progress\n        data-testid={testIds.progress}\n        placement='local'\n        visible={!!progress}\n        focusOnVisible\n        delay\n        onTransitionStartIn={() => {\n          setProgressVisible(true);\n        }}\n        onTransitionEndOut={() => setProgressVisible(false)}\n      />\n      <StyledContentOverflow item={{ grow: 1, basis: '0' }}>\n        {!progress && children}\n      </StyledContentOverflow>\n    </Drawer>\n  );\n});\n\nexport default withTestIds(PreviewPanel, getPreviewPanelTestIds);\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;

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;

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

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmvDE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1sE3C,wBA0vEE"}
+{"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',