@chayns-components/core 5.0.0-beta.1142 → 5.0.0-beta.1144
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/grouped-image/GroupedImage.js +2 -0
- package/lib/cjs/components/grouped-image/GroupedImage.js.map +1 -1
- package/lib/cjs/components/grouped-image/GroupedImage.styles.js +9 -6
- package/lib/cjs/components/grouped-image/GroupedImage.styles.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.js +1 -0
- package/lib/cjs/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.js.map +1 -1
- package/lib/esm/components/grouped-image/GroupedImage.js +2 -0
- package/lib/esm/components/grouped-image/GroupedImage.js.map +1 -1
- package/lib/esm/components/grouped-image/GroupedImage.styles.js +12 -12
- package/lib/esm/components/grouped-image/GroupedImage.styles.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.js +1 -0
- package/lib/esm/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.js.map +1 -1
- package/lib/types/components/grouped-image/GroupedImage.styles.d.ts +5 -3
- package/package.json +2 -2
|
@@ -38,6 +38,8 @@ const GroupedImage = ({
|
|
|
38
38
|
return /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupedImage, {
|
|
39
39
|
$height: height
|
|
40
40
|
}, imageElements, hasCornerImage && /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledCornerImage, {
|
|
41
|
+
$background: imageBackground,
|
|
42
|
+
$shouldPreventBackground: shouldPreventBackground,
|
|
41
43
|
src: cornerImage,
|
|
42
44
|
key: "corner-image"
|
|
43
45
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireWildcard","require","_GroupedImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GroupedImage","cornerImage","height","imageBackground","images","shouldPreventBackground","shouldShowRoundImage","hasCornerImage","Boolean","hasMultipleImages","length","imageSize","useMemo","ImageSize","GroupedSmall","Small","Grouped","Full","imageElements","slice","map","src","index","createElement","StyledImage","$background","$imageSize","$isSecondImage","$shouldPreventBackground","$shouldShowRoundImage","key","StyledGroupedImage","$height","StyledCornerImage","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, useMemo } from 'react';\nimport {\n ImageSize,\n StyledCornerImage,\n StyledGroupedImage,\n StyledImage,\n} from './GroupedImage.styles';\n\ninterface GroupedImageProps {\n /**\n * Optional image to display in the bottom right corner of the grouped image.\n */\n cornerImage?: string;\n /**\n * Height of the grouped image container.\n */\n height?: CSSProperties['height'];\n /**\n * Background for the single images.\n */\n imageBackground?: CSSProperties['background'];\n /**\n * Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n */\n images: string[];\n /**\n * Whether to prevent the background of the images from being set.\n */\n shouldPreventBackground?: boolean;\n /**\n * Whether to show the images in a round shape.\n */\n shouldShowRoundImage?: boolean;\n}\n\nconst GroupedImage: React.FC<GroupedImageProps> = ({\n cornerImage,\n height = '40px',\n imageBackground,\n images,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasMultipleImages = images.length > 1;\n\n const imageSize = useMemo(() => {\n if (hasCornerImage) {\n return hasMultipleImages ? ImageSize.GroupedSmall : ImageSize.Small;\n }\n\n return hasMultipleImages ? ImageSize.Grouped : ImageSize.Full;\n }, [hasCornerImage, hasMultipleImages]);\n\n const imageElements = images\n .slice(0, 2) // Limit to 2 images for grouping\n .map((src, index) => (\n <StyledImage\n $background={imageBackground}\n $imageSize={imageSize}\n $isSecondImage={index === 1}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n src={src}\n />\n ));\n\n return (\n <StyledGroupedImage $height={height}>\n {imageElements}\n {hasCornerImage && <StyledCornerImage
|
|
1
|
+
{"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireWildcard","require","_GroupedImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GroupedImage","cornerImage","height","imageBackground","images","shouldPreventBackground","shouldShowRoundImage","hasCornerImage","Boolean","hasMultipleImages","length","imageSize","useMemo","ImageSize","GroupedSmall","Small","Grouped","Full","imageElements","slice","map","src","index","createElement","StyledImage","$background","$imageSize","$isSecondImage","$shouldPreventBackground","$shouldShowRoundImage","key","StyledGroupedImage","$height","StyledCornerImage","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, useMemo } from 'react';\nimport {\n ImageSize,\n StyledCornerImage,\n StyledGroupedImage,\n StyledImage,\n} from './GroupedImage.styles';\n\ninterface GroupedImageProps {\n /**\n * Optional image to display in the bottom right corner of the grouped image.\n */\n cornerImage?: string;\n /**\n * Height of the grouped image container.\n */\n height?: CSSProperties['height'];\n /**\n * Background for the single images.\n */\n imageBackground?: CSSProperties['background'];\n /**\n * Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n */\n images: string[];\n /**\n * Whether to prevent the background of the images from being set.\n */\n shouldPreventBackground?: boolean;\n /**\n * Whether to show the images in a round shape.\n */\n shouldShowRoundImage?: boolean;\n}\n\nconst GroupedImage: React.FC<GroupedImageProps> = ({\n cornerImage,\n height = '40px',\n imageBackground,\n images,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasMultipleImages = images.length > 1;\n\n const imageSize = useMemo(() => {\n if (hasCornerImage) {\n return hasMultipleImages ? ImageSize.GroupedSmall : ImageSize.Small;\n }\n\n return hasMultipleImages ? ImageSize.Grouped : ImageSize.Full;\n }, [hasCornerImage, hasMultipleImages]);\n\n const imageElements = images\n .slice(0, 2) // Limit to 2 images for grouping\n .map((src, index) => (\n <StyledImage\n $background={imageBackground}\n $imageSize={imageSize}\n $isSecondImage={index === 1}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n src={src}\n />\n ));\n\n return (\n <StyledGroupedImage $height={height}>\n {imageElements}\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n src={cornerImage}\n key=\"corner-image\"\n />\n )}\n </StyledGroupedImage>\n );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -54,15 +54,18 @@ const StyledImage = exports.StyledImage = _styledComponents.default.img`
|
|
|
54
54
|
`;
|
|
55
55
|
const StyledCornerImage = exports.StyledCornerImage = _styledComponents.default.img`
|
|
56
56
|
aspect-ratio: 1;
|
|
57
|
-
background: ${({
|
|
58
|
-
theme
|
|
59
|
-
}) => `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
|
|
60
|
-
box-shadow: ${({
|
|
61
|
-
theme
|
|
62
|
-
}) => `0 0 0 1px rgba(${theme['009-rgb'] ?? '0,0,0'}, 0.08) inset`};
|
|
63
57
|
bottom: 0;
|
|
64
58
|
height: 50%;
|
|
65
59
|
position: absolute;
|
|
66
60
|
right: 0;
|
|
61
|
+
|
|
62
|
+
${({
|
|
63
|
+
$background,
|
|
64
|
+
$shouldPreventBackground,
|
|
65
|
+
theme
|
|
66
|
+
}) => !$shouldPreventBackground && (0, _styledComponents.css)`
|
|
67
|
+
background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
|
|
68
|
+
box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
|
|
69
|
+
`}
|
|
67
70
|
`;
|
|
68
71
|
//# sourceMappingURL=GroupedImage.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupedImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGroupedImage","exports","styled","div","$height","ImageSize","StyledImage","img","$shouldShowRoundImage","$imageSize","$isSecondImage","css","GroupedSmall","$background","$shouldPreventBackground","theme","StyledCornerImage"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n height: ${({ $height }) => $height};\n position: relative;\n width: ${({ $height }) => $height};\n`;\n\nexport enum ImageSize {\n Full = '100%',\n Small = '75%',\n Grouped = '80%',\n GroupedSmall = '65%',\n}\n\ntype StyledImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $imageSize: ImageSize;\n $isSecondImage?: boolean;\n $shouldPreventBackground?: boolean;\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledImage = styled.img<StyledImageProps>`\n aspect-ratio: 1;\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n height: ${({ $imageSize }) => $imageSize};\n position: absolute;\n\n ${({ $imageSize, $isSecondImage }) =>\n $isSecondImage\n ? css`\n bottom: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n right: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n `\n : css`\n top: 0;\n left: 0;\n `}\n\n ${({ $background, $shouldPreventBackground, theme }) =>\n !$shouldPreventBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n\ntype StyledCornerImageProps = WithTheme<
|
|
1
|
+
{"version":3,"file":"GroupedImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGroupedImage","exports","styled","div","$height","ImageSize","StyledImage","img","$shouldShowRoundImage","$imageSize","$isSecondImage","css","GroupedSmall","$background","$shouldPreventBackground","theme","StyledCornerImage"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n height: ${({ $height }) => $height};\n position: relative;\n width: ${({ $height }) => $height};\n`;\n\nexport enum ImageSize {\n Full = '100%',\n Small = '75%',\n Grouped = '80%',\n GroupedSmall = '65%',\n}\n\ntype StyledImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $imageSize: ImageSize;\n $isSecondImage?: boolean;\n $shouldPreventBackground?: boolean;\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledImage = styled.img<StyledImageProps>`\n aspect-ratio: 1;\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n height: ${({ $imageSize }) => $imageSize};\n position: absolute;\n\n ${({ $imageSize, $isSecondImage }) =>\n $isSecondImage\n ? css`\n bottom: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n right: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n `\n : css`\n top: 0;\n left: 0;\n `}\n\n ${({ $background, $shouldPreventBackground, theme }) =>\n !$shouldPreventBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldPreventBackground?: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n aspect-ratio: 1;\n bottom: 0;\n height: 50%;\n position: absolute;\n right: 0;\n\n ${({ $background, $shouldPreventBackground, theme }) =>\n !$shouldPreventBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAQzC,MAAMkB,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,aAAa,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAAC,IAEUC,SAAS,GAAAJ,OAAA,CAAAI,SAAA,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAed,MAAMC,WAAW,GAAAL,OAAA,CAAAK,WAAA,GAAGJ,yBAAM,CAACK,GAAqB;AACvD;AACA,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,GAAI;AACzF,cAAc,CAAC;EAAEC;AAAW,CAAC,KAAKA,UAAU;AAC5C;AACA;AACA,MAAM,CAAC;EAAEA,UAAU;EAAEC;AAAe,CAAC,KAC7BA,cAAc,GACR,IAAAC,qBAAG;AACjB,4BAA4BF,UAAU,KAAKJ,SAAS,CAACO,YAAY,GAAG,KAAK,GAAG,CAAC;AAC7E,2BAA2BH,UAAU,KAAKJ,SAAS,CAACO,YAAY,GAAG,KAAK,GAAG,CAAC;AAC5E,eAAe,GACD,IAAAD,qBAAG;AACjB;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEE,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzB,IAAAH,qBAAG;AACX,0BAA0BE,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC;AAOM,MAAMC,iBAAiB,GAAAf,OAAA,CAAAe,iBAAA,GAAGd,yBAAM,CAACK,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEM,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzB,IAAAH,qBAAG;AACX,0BAA0BE,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC","ignoreList":[]}
|
|
@@ -11,6 +11,7 @@ const StyledListItemRightElements = exports.StyledListItemRightElements = _style
|
|
|
11
11
|
align-items: start;
|
|
12
12
|
gap: 6px;
|
|
13
13
|
margin-left: 8px;
|
|
14
|
+
flex: 0 0 auto;
|
|
14
15
|
`;
|
|
15
16
|
const StyledListItemRightElementsLeft = exports.StyledListItemRightElementsLeft = _styledComponents.default.div`
|
|
16
17
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemRightElements.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledListItemRightElements","exports","styled","div","StyledListItemRightElementsLeft","StyledListItemRightElementsLeftPseudo","StyledListItemRightElementsLeftTop","$alignment","StyledListItemRightElementsLeftBottom","StyledListItemRightElementsRight"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledListItemRightElements = styled.div`\n display: flex;\n align-items: start;\n gap: 6px;\n margin-left: 8px;\n`;\n\nexport const StyledListItemRightElementsLeft = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n`;\n\nexport const StyledListItemRightElementsLeftPseudo = styled.div`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n color: transparent;\n height: 50%;\n line-height: normal;\n user-select: none;\n`;\n\ntype StyledListItemRightElementsLeftTopProps = {\n $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftTop = styled.div<StyledListItemRightElementsLeftTopProps>`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n height: 50%;\n justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n align-items: center;\n line-height: normal;\n`;\n\ntype StyledListItemRightElementsLeftBottomProps = {\n $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftBottom = styled.div<StyledListItemRightElementsLeftBottomProps>`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n height: 50%;\n justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n align-items: center;\n line-height: normal;\n`;\n\nexport const StyledListItemRightElementsRight = styled.div`\n margin: auto 0;\n display: flex;\n flex: 0 0 auto;\n line-height: normal;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,+BAA+B,GAAAH,OAAA,CAAAG,+BAAA,GAAGF,yBAAM,CAACC,GAAG;AACzD;AACA;AACA;AACA,CAAC;AAEM,MAAME,qCAAqC,GAAAJ,OAAA,CAAAI,qCAAA,GAAGH,yBAAM,CAACC,GAAG;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMG,kCAAkC,GAAAL,OAAA,CAAAK,kCAAA,GAAGJ,yBAAM,CAACC,GAA4C;AACrG;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEI;AAAW,CAAC,KAAKA,UAAU,IAAI,KAAK;AAC9D;AACA;AACA,CAAC;AAMM,MAAMC,qCAAqC,GAAAP,OAAA,CAAAO,qCAAA,GAAGN,yBAAM,CAACC,GAA+C;AAC3G;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEI;AAAW,CAAC,KAAKA,UAAU,IAAI,KAAK;AAC9D;AACA;AACA,CAAC;AAEM,MAAME,gCAAgC,GAAAR,OAAA,CAAAQ,gCAAA,GAAGP,yBAAM,CAACC,GAAG;AAC1D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ListItemRightElements.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledListItemRightElements","exports","styled","div","StyledListItemRightElementsLeft","StyledListItemRightElementsLeftPseudo","StyledListItemRightElementsLeftTop","$alignment","StyledListItemRightElementsLeftBottom","StyledListItemRightElementsRight"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledListItemRightElements = styled.div`\n display: flex;\n align-items: start;\n gap: 6px;\n margin-left: 8px;\n flex: 0 0 auto;\n`;\n\nexport const StyledListItemRightElementsLeft = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n`;\n\nexport const StyledListItemRightElementsLeftPseudo = styled.div`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n color: transparent;\n height: 50%;\n line-height: normal;\n user-select: none;\n`;\n\ntype StyledListItemRightElementsLeftTopProps = {\n $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftTop = styled.div<StyledListItemRightElementsLeftTopProps>`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n height: 50%;\n justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n align-items: center;\n line-height: normal;\n`;\n\ntype StyledListItemRightElementsLeftBottomProps = {\n $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftBottom = styled.div<StyledListItemRightElementsLeftBottomProps>`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n height: 50%;\n justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n align-items: center;\n line-height: normal;\n`;\n\nexport const StyledListItemRightElementsRight = styled.div`\n margin: auto 0;\n display: flex;\n flex: 0 0 auto;\n line-height: normal;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,+BAA+B,GAAAH,OAAA,CAAAG,+BAAA,GAAGF,yBAAM,CAACC,GAAG;AACzD;AACA;AACA;AACA,CAAC;AAEM,MAAME,qCAAqC,GAAAJ,OAAA,CAAAI,qCAAA,GAAGH,yBAAM,CAACC,GAAG;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMG,kCAAkC,GAAAL,OAAA,CAAAK,kCAAA,GAAGJ,yBAAM,CAACC,GAA4C;AACrG;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEI;AAAW,CAAC,KAAKA,UAAU,IAAI,KAAK;AAC9D;AACA;AACA,CAAC;AAMM,MAAMC,qCAAqC,GAAAP,OAAA,CAAAO,qCAAA,GAAGN,yBAAM,CAACC,GAA+C;AAC3G;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEI;AAAW,CAAC,KAAKA,UAAU,IAAI,KAAK;AAC9D;AACA;AACA,CAAC;AAEM,MAAME,gCAAgC,GAAAR,OAAA,CAAAQ,gCAAA,GAAGP,yBAAM,CAACC,GAAG;AAC1D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -32,6 +32,8 @@ const GroupedImage = _ref => {
|
|
|
32
32
|
return /*#__PURE__*/React.createElement(StyledGroupedImage, {
|
|
33
33
|
$height: height
|
|
34
34
|
}, imageElements, hasCornerImage && /*#__PURE__*/React.createElement(StyledCornerImage, {
|
|
35
|
+
$background: imageBackground,
|
|
36
|
+
$shouldPreventBackground: shouldPreventBackground,
|
|
35
37
|
src: cornerImage,
|
|
36
38
|
key: "corner-image"
|
|
37
39
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupedImage.js","names":["React","useMemo","ImageSize","StyledCornerImage","StyledGroupedImage","StyledImage","GroupedImage","_ref","cornerImage","height","imageBackground","images","shouldPreventBackground","shouldShowRoundImage","hasCornerImage","Boolean","hasMultipleImages","length","imageSize","GroupedSmall","Small","Grouped","Full","imageElements","slice","map","src","index","createElement","$background","$imageSize","$isSecondImage","$shouldPreventBackground","$shouldShowRoundImage","key","$height","displayName"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, useMemo } from 'react';\nimport {\n ImageSize,\n StyledCornerImage,\n StyledGroupedImage,\n StyledImage,\n} from './GroupedImage.styles';\n\ninterface GroupedImageProps {\n /**\n * Optional image to display in the bottom right corner of the grouped image.\n */\n cornerImage?: string;\n /**\n * Height of the grouped image container.\n */\n height?: CSSProperties['height'];\n /**\n * Background for the single images.\n */\n imageBackground?: CSSProperties['background'];\n /**\n * Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n */\n images: string[];\n /**\n * Whether to prevent the background of the images from being set.\n */\n shouldPreventBackground?: boolean;\n /**\n * Whether to show the images in a round shape.\n */\n shouldShowRoundImage?: boolean;\n}\n\nconst GroupedImage: React.FC<GroupedImageProps> = ({\n cornerImage,\n height = '40px',\n imageBackground,\n images,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasMultipleImages = images.length > 1;\n\n const imageSize = useMemo(() => {\n if (hasCornerImage) {\n return hasMultipleImages ? ImageSize.GroupedSmall : ImageSize.Small;\n }\n\n return hasMultipleImages ? ImageSize.Grouped : ImageSize.Full;\n }, [hasCornerImage, hasMultipleImages]);\n\n const imageElements = images\n .slice(0, 2) // Limit to 2 images for grouping\n .map((src, index) => (\n <StyledImage\n $background={imageBackground}\n $imageSize={imageSize}\n $isSecondImage={index === 1}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n src={src}\n />\n ));\n\n return (\n <StyledGroupedImage $height={height}>\n {imageElements}\n {hasCornerImage && <StyledCornerImage
|
|
1
|
+
{"version":3,"file":"GroupedImage.js","names":["React","useMemo","ImageSize","StyledCornerImage","StyledGroupedImage","StyledImage","GroupedImage","_ref","cornerImage","height","imageBackground","images","shouldPreventBackground","shouldShowRoundImage","hasCornerImage","Boolean","hasMultipleImages","length","imageSize","GroupedSmall","Small","Grouped","Full","imageElements","slice","map","src","index","createElement","$background","$imageSize","$isSecondImage","$shouldPreventBackground","$shouldShowRoundImage","key","$height","displayName"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, useMemo } from 'react';\nimport {\n ImageSize,\n StyledCornerImage,\n StyledGroupedImage,\n StyledImage,\n} from './GroupedImage.styles';\n\ninterface GroupedImageProps {\n /**\n * Optional image to display in the bottom right corner of the grouped image.\n */\n cornerImage?: string;\n /**\n * Height of the grouped image container.\n */\n height?: CSSProperties['height'];\n /**\n * Background for the single images.\n */\n imageBackground?: CSSProperties['background'];\n /**\n * Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n */\n images: string[];\n /**\n * Whether to prevent the background of the images from being set.\n */\n shouldPreventBackground?: boolean;\n /**\n * Whether to show the images in a round shape.\n */\n shouldShowRoundImage?: boolean;\n}\n\nconst GroupedImage: React.FC<GroupedImageProps> = ({\n cornerImage,\n height = '40px',\n imageBackground,\n images,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasMultipleImages = images.length > 1;\n\n const imageSize = useMemo(() => {\n if (hasCornerImage) {\n return hasMultipleImages ? ImageSize.GroupedSmall : ImageSize.Small;\n }\n\n return hasMultipleImages ? ImageSize.Grouped : ImageSize.Full;\n }, [hasCornerImage, hasMultipleImages]);\n\n const imageElements = images\n .slice(0, 2) // Limit to 2 images for grouping\n .map((src, index) => (\n <StyledImage\n $background={imageBackground}\n $imageSize={imageSize}\n $isSecondImage={index === 1}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n src={src}\n />\n ));\n\n return (\n <StyledGroupedImage $height={height}>\n {imageElements}\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n src={cornerImage}\n key=\"corner-image\"\n />\n )}\n </StyledGroupedImage>\n );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SACIC,SAAS,EACTC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,QACR,uBAAuB;AA6B9B,MAAMC,YAAyC,GAAGC,IAAA,IAO5C;EAAA,IAP6C;IAC/CC,WAAW;IACXC,MAAM,GAAG,MAAM;IACfC,eAAe;IACfC,MAAM;IACNC,uBAAuB,GAAG,KAAK;IAC/BC,oBAAoB,GAAG;EAC3B,CAAC,GAAAN,IAAA;EACG,MAAMO,cAAc,GAAGC,OAAO,CAACP,WAAW,CAAC;EAC3C,MAAMQ,iBAAiB,GAAGL,MAAM,CAACM,MAAM,GAAG,CAAC;EAE3C,MAAMC,SAAS,GAAGjB,OAAO,CAAC,MAAM;IAC5B,IAAIa,cAAc,EAAE;MAChB,OAAOE,iBAAiB,GAAGd,SAAS,CAACiB,YAAY,GAAGjB,SAAS,CAACkB,KAAK;IACvE;IAEA,OAAOJ,iBAAiB,GAAGd,SAAS,CAACmB,OAAO,GAAGnB,SAAS,CAACoB,IAAI;EACjE,CAAC,EAAE,CAACR,cAAc,EAAEE,iBAAiB,CAAC,CAAC;EAEvC,MAAMO,aAAa,GAAGZ,MAAM,CACvBa,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAAA,CACZC,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBACZ3B,KAAA,CAAA4B,aAAA,CAACvB,WAAW;IACRwB,WAAW,EAAEnB,eAAgB;IAC7BoB,UAAU,EAAEZ,SAAU;IACtBa,cAAc,EAAEJ,KAAK,KAAK,CAAE;IAC5BK,wBAAwB,EAAEpB,uBAAwB;IAClDqB,qBAAqB,EAAEpB;IACvB;IAAA;IACAqB,GAAG,EAAEP,KAAM;IACXD,GAAG,EAAEA;EAAI,CACZ,CACJ,CAAC;EAEN,oBACI1B,KAAA,CAAA4B,aAAA,CAACxB,kBAAkB;IAAC+B,OAAO,EAAE1B;EAAO,GAC/Bc,aAAa,EACbT,cAAc,iBACXd,KAAA,CAAA4B,aAAA,CAACzB,iBAAiB;IACd0B,WAAW,EAAEnB,eAAgB;IAC7BsB,wBAAwB,EAAEpB,uBAAwB;IAClDc,GAAG,EAAElB,WAAY;IACjB0B,GAAG,EAAC;EAAc,CACrB,CAEW,CAAC;AAE7B,CAAC;AAED5B,YAAY,CAAC8B,WAAW,GAAG,cAAc;AAEzC,eAAe9B,YAAY","ignoreList":[]}
|
|
@@ -65,21 +65,21 @@ export const StyledImage = styled.img`
|
|
|
65
65
|
`;
|
|
66
66
|
export const StyledCornerImage = styled.img`
|
|
67
67
|
aspect-ratio: 1;
|
|
68
|
-
background: ${_ref7 => {
|
|
69
|
-
let {
|
|
70
|
-
theme
|
|
71
|
-
} = _ref7;
|
|
72
|
-
return `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`;
|
|
73
|
-
}};
|
|
74
|
-
box-shadow: ${_ref8 => {
|
|
75
|
-
let {
|
|
76
|
-
theme
|
|
77
|
-
} = _ref8;
|
|
78
|
-
return `0 0 0 1px rgba(${theme['009-rgb'] ?? '0,0,0'}, 0.08) inset`;
|
|
79
|
-
}};
|
|
80
68
|
bottom: 0;
|
|
81
69
|
height: 50%;
|
|
82
70
|
position: absolute;
|
|
83
71
|
right: 0;
|
|
72
|
+
|
|
73
|
+
${_ref7 => {
|
|
74
|
+
let {
|
|
75
|
+
$background,
|
|
76
|
+
$shouldPreventBackground,
|
|
77
|
+
theme
|
|
78
|
+
} = _ref7;
|
|
79
|
+
return !$shouldPreventBackground && css`
|
|
80
|
+
background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
|
|
81
|
+
box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
|
|
82
|
+
`;
|
|
83
|
+
}}
|
|
84
84
|
`;
|
|
85
85
|
//# sourceMappingURL=GroupedImage.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupedImage.styles.js","names":["styled","css","StyledGroupedImage","div","_ref","$height","_ref2","ImageSize","StyledImage","img","_ref3","$shouldShowRoundImage","_ref4","$imageSize","_ref5","$isSecondImage","GroupedSmall","_ref6","$background","$shouldPreventBackground","theme","StyledCornerImage","_ref7"
|
|
1
|
+
{"version":3,"file":"GroupedImage.styles.js","names":["styled","css","StyledGroupedImage","div","_ref","$height","_ref2","ImageSize","StyledImage","img","_ref3","$shouldShowRoundImage","_ref4","$imageSize","_ref5","$isSecondImage","GroupedSmall","_ref6","$background","$shouldPreventBackground","theme","StyledCornerImage","_ref7"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n height: ${({ $height }) => $height};\n position: relative;\n width: ${({ $height }) => $height};\n`;\n\nexport enum ImageSize {\n Full = '100%',\n Small = '75%',\n Grouped = '80%',\n GroupedSmall = '65%',\n}\n\ntype StyledImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $imageSize: ImageSize;\n $isSecondImage?: boolean;\n $shouldPreventBackground?: boolean;\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledImage = styled.img<StyledImageProps>`\n aspect-ratio: 1;\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n height: ${({ $imageSize }) => $imageSize};\n position: absolute;\n\n ${({ $imageSize, $isSecondImage }) =>\n $isSecondImage\n ? css`\n bottom: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n right: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n `\n : css`\n top: 0;\n left: 0;\n `}\n\n ${({ $background, $shouldPreventBackground, theme }) =>\n !$shouldPreventBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldPreventBackground?: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n aspect-ratio: 1;\n bottom: 0;\n height: 50%;\n position: absolute;\n right: 0;\n\n ${({ $background, $shouldPreventBackground, theme }) =>\n !$shouldPreventBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,IAAA;EAAA,OAAKC,OAAO;AAAA;AACtC;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAQ,CAAC,GAAAC,KAAA;EAAA,OAAKD,OAAO;AAAA;AACrC,CAAC;AAED,WAAYE,SAAS,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAerB,OAAO,MAAMC,WAAW,GAAGR,MAAM,CAACS,GAAqB;AACvD;AACA,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAG,GAAG;AAAA,CAAC;AACzF,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKC,UAAU;AAAA;AAC5C;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAED,UAAU;IAAEE;EAAe,CAAC,GAAAD,KAAA;EAAA,OAC7BC,cAAc,GACRd,GAAG;AACjB,4BAA4BY,UAAU,KAAKN,SAAS,CAACS,YAAY,GAAG,KAAK,GAAG,CAAC;AAC7E,2BAA2BH,UAAU,KAAKN,SAAS,CAACS,YAAY,GAAG,KAAK,GAAG,CAAC;AAC5E,eAAe,GACDf,GAAG;AACjB;AACA;AACA,eAAe;AAAA;AACf;AACA,MAAMgB,KAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,wBAAwB;IAAEC;EAAM,CAAC,GAAAH,KAAA;EAAA,OAC/C,CAACE,wBAAwB,IACzBlB,GAAG;AACX,0BAA0BiB,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AAAA;AACT,CAAC;AAOD,OAAO,MAAMC,iBAAiB,GAAGrB,MAAM,CAACS,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMa,KAAA;EAAA,IAAC;IAAEJ,WAAW;IAAEC,wBAAwB;IAAEC;EAAM,CAAC,GAAAE,KAAA;EAAA,OAC/C,CAACH,wBAAwB,IACzBlB,GAAG;AACX,0BAA0BiB,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemRightElements.styles.js","names":["styled","StyledListItemRightElements","div","StyledListItemRightElementsLeft","StyledListItemRightElementsLeftPseudo","StyledListItemRightElementsLeftTop","_ref","$alignment","StyledListItemRightElementsLeftBottom","_ref2","StyledListItemRightElementsRight"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledListItemRightElements = styled.div`\n display: flex;\n align-items: start;\n gap: 6px;\n margin-left: 8px;\n`;\n\nexport const StyledListItemRightElementsLeft = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n`;\n\nexport const StyledListItemRightElementsLeftPseudo = styled.div`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n color: transparent;\n height: 50%;\n line-height: normal;\n user-select: none;\n`;\n\ntype StyledListItemRightElementsLeftTopProps = {\n $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftTop = styled.div<StyledListItemRightElementsLeftTopProps>`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n height: 50%;\n justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n align-items: center;\n line-height: normal;\n`;\n\ntype StyledListItemRightElementsLeftBottomProps = {\n $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftBottom = styled.div<StyledListItemRightElementsLeftBottomProps>`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n height: 50%;\n justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n align-items: center;\n line-height: normal;\n`;\n\nexport const StyledListItemRightElementsRight = styled.div`\n margin: auto 0;\n display: flex;\n flex: 0 0 auto;\n line-height: normal;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,2BAA2B,GAAGD,MAAM,CAACE,GAAG;AACrD;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CAACE,GAAG;AACzD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,qCAAqC,GAAGJ,MAAM,CAACE,GAAG;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMG,kCAAkC,GAAGL,MAAM,CAACE,GAA4C;AACrG;AACA;AACA;AACA;AACA,uBAAuBI,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAKC,UAAU,IAAI,KAAK;AAAA;AAC9D;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,qCAAqC,GAAGR,MAAM,CAACE,GAA+C;AAC3G;AACA;AACA;AACA;AACA,uBAAuBO,KAAA;EAAA,IAAC;IAAEF;EAAW,CAAC,GAAAE,KAAA;EAAA,OAAKF,UAAU,IAAI,KAAK;AAAA;AAC9D;AACA;AACA,CAAC;AAED,OAAO,MAAMG,gCAAgC,GAAGV,MAAM,CAACE,GAAG;AAC1D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ListItemRightElements.styles.js","names":["styled","StyledListItemRightElements","div","StyledListItemRightElementsLeft","StyledListItemRightElementsLeftPseudo","StyledListItemRightElementsLeftTop","_ref","$alignment","StyledListItemRightElementsLeftBottom","_ref2","StyledListItemRightElementsRight"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledListItemRightElements = styled.div`\n display: flex;\n align-items: start;\n gap: 6px;\n margin-left: 8px;\n flex: 0 0 auto;\n`;\n\nexport const StyledListItemRightElementsLeft = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n`;\n\nexport const StyledListItemRightElementsLeftPseudo = styled.div`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n color: transparent;\n height: 50%;\n line-height: normal;\n user-select: none;\n`;\n\ntype StyledListItemRightElementsLeftTopProps = {\n $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftTop = styled.div<StyledListItemRightElementsLeftTopProps>`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n height: 50%;\n justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n align-items: center;\n line-height: normal;\n`;\n\ntype StyledListItemRightElementsLeftBottomProps = {\n $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftBottom = styled.div<StyledListItemRightElementsLeftBottomProps>`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n height: 50%;\n justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n align-items: center;\n line-height: normal;\n`;\n\nexport const StyledListItemRightElementsRight = styled.div`\n margin: auto 0;\n display: flex;\n flex: 0 0 auto;\n line-height: normal;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,2BAA2B,GAAGD,MAAM,CAACE,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CAACE,GAAG;AACzD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,qCAAqC,GAAGJ,MAAM,CAACE,GAAG;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMG,kCAAkC,GAAGL,MAAM,CAACE,GAA4C;AACrG;AACA;AACA;AACA;AACA,uBAAuBI,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAKC,UAAU,IAAI,KAAK;AAAA;AAC9D;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,qCAAqC,GAAGR,MAAM,CAACE,GAA+C;AAC3G;AACA;AACA;AACA;AACA,uBAAuBO,KAAA;EAAA,IAAC;IAAEF;EAAW,CAAC,GAAAE,KAAA;EAAA,OAAKF,UAAU,IAAI,KAAK;AAAA;AAC9D;AACA;AACA,CAAC;AAED,OAAO,MAAMG,gCAAgC,GAAGV,MAAM,CAACE,GAAG;AAC1D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -18,7 +18,9 @@ type StyledImageProps = WithTheme<{
|
|
|
18
18
|
$shouldShowRoundImage?: boolean;
|
|
19
19
|
}>;
|
|
20
20
|
export declare const StyledImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledImageProps>> & string;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
type StyledCornerImageProps = WithTheme<{
|
|
22
|
+
$background?: CSSProperties['background'];
|
|
23
|
+
$shouldPreventBackground?: boolean;
|
|
24
|
+
}>;
|
|
25
|
+
export declare const StyledCornerImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledCornerImageProps>> & string;
|
|
24
26
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1144",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "68fa568d24f5aa1c5be8966b5768d1eb968ec8bc"
|
|
90
90
|
}
|