@chayns-components/core 5.0.0-beta.1147 → 5.0.0-beta.1149
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 +1 -1
- package/lib/cjs/components/grouped-image/GroupedImage.js.map +1 -1
- package/lib/cjs/components/grouped-image/GroupedImage.styles.js +3 -2
- package/lib/cjs/components/grouped-image/GroupedImage.styles.js.map +1 -1
- package/lib/esm/components/grouped-image/GroupedImage.js +2 -2
- package/lib/esm/components/grouped-image/GroupedImage.js.map +1 -1
- package/lib/esm/components/grouped-image/GroupedImage.styles.js +2 -1
- package/lib/esm/components/grouped-image/GroupedImage.styles.js.map +1 -1
- package/lib/types/components/grouped-image/GroupedImage.styles.d.ts +1 -1
- package/package.json +2 -2
|
@@ -25,7 +25,7 @@ const GroupedImage = ({
|
|
|
25
25
|
return hasMultipleImages ? _GroupedImage.ImageSize.Grouped : _GroupedImage.ImageSize.Full;
|
|
26
26
|
}, [hasCornerImage, hasMultipleImages]);
|
|
27
27
|
const imageElements = images.slice(0, 2) // Limit to 2 images for grouping
|
|
28
|
-
.map((src, index) => /*#__PURE__*/_react.default.createElement(_GroupedImage.
|
|
28
|
+
.map((src, index) => /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupImageElement, {
|
|
29
29
|
$background: imageBackground,
|
|
30
30
|
$imageSize: imageSize,
|
|
31
31
|
$isSecondImage: index === 1,
|
|
@@ -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","onClick","shouldPreventBackground","shouldShowRoundImage","hasCornerImage","Boolean","hasMultipleImages","length","imageSize","useMemo","ImageSize","GroupedSmall","Small","Grouped","Full","imageElements","slice","map","src","index","createElement","
|
|
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","onClick","shouldPreventBackground","shouldShowRoundImage","hasCornerImage","Boolean","hasMultipleImages","length","imageSize","useMemo","ImageSize","GroupedSmall","Small","Grouped","Full","imageElements","slice","map","src","index","createElement","StyledGroupImageElement","$background","$imageSize","$isSecondImage","$shouldPreventBackground","$shouldShowRoundImage","key","StyledGroupedImage","$height","StyledCornerImage","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, MouseEventHandler, useMemo } from 'react';\nimport {\n ImageSize,\n StyledCornerImage,\n StyledGroupedImage,\n StyledGroupImageElement,\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 * Optional click handler for the grouped image.\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\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 onClick,\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 <StyledGroupImageElement\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 onClick={onClick} $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":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.StyledGroupedImage = exports.StyledGroupImageElement = exports.StyledCornerImage = exports.ImageSize = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
9
9
|
const StyledGroupedImage = exports.StyledGroupedImage = _styledComponents.default.div`
|
|
@@ -23,7 +23,7 @@ let ImageSize = exports.ImageSize = /*#__PURE__*/function (ImageSize) {
|
|
|
23
23
|
ImageSize["GroupedSmall"] = "65%";
|
|
24
24
|
return ImageSize;
|
|
25
25
|
}({});
|
|
26
|
-
const
|
|
26
|
+
const StyledGroupImageElement = exports.StyledGroupImageElement = _styledComponents.default.img`
|
|
27
27
|
aspect-ratio: 1;
|
|
28
28
|
border-radius: ${({
|
|
29
29
|
$shouldShowRoundImage
|
|
@@ -31,6 +31,7 @@ const StyledImage = exports.StyledImage = _styledComponents.default.img`
|
|
|
31
31
|
height: ${({
|
|
32
32
|
$imageSize
|
|
33
33
|
}) => $imageSize};
|
|
34
|
+
object-fit: cover;
|
|
34
35
|
position: absolute;
|
|
35
36
|
|
|
36
37
|
${({
|
|
@@ -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","
|
|
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","StyledGroupImageElement","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 flex: 0 0 auto;\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 StyledGroupImageElement = styled.img<StyledImageProps>`\n aspect-ratio: 1;\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n height: ${({ $imageSize }) => $imageSize};\n object-fit: cover;\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":"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","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
|
-
import { ImageSize, StyledCornerImage, StyledGroupedImage,
|
|
2
|
+
import { ImageSize, StyledCornerImage, StyledGroupedImage, StyledGroupImageElement } from './GroupedImage.styles';
|
|
3
3
|
const GroupedImage = _ref => {
|
|
4
4
|
let {
|
|
5
5
|
cornerImage,
|
|
@@ -19,7 +19,7 @@ const GroupedImage = _ref => {
|
|
|
19
19
|
return hasMultipleImages ? ImageSize.Grouped : ImageSize.Full;
|
|
20
20
|
}, [hasCornerImage, hasMultipleImages]);
|
|
21
21
|
const imageElements = images.slice(0, 2) // Limit to 2 images for grouping
|
|
22
|
-
.map((src, index) => /*#__PURE__*/React.createElement(
|
|
22
|
+
.map((src, index) => /*#__PURE__*/React.createElement(StyledGroupImageElement, {
|
|
23
23
|
$background: imageBackground,
|
|
24
24
|
$imageSize: imageSize,
|
|
25
25
|
$isSecondImage: index === 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupedImage.js","names":["React","useMemo","ImageSize","StyledCornerImage","StyledGroupedImage","
|
|
1
|
+
{"version":3,"file":"GroupedImage.js","names":["React","useMemo","ImageSize","StyledCornerImage","StyledGroupedImage","StyledGroupImageElement","GroupedImage","_ref","cornerImage","height","imageBackground","images","onClick","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, MouseEventHandler, useMemo } from 'react';\nimport {\n ImageSize,\n StyledCornerImage,\n StyledGroupedImage,\n StyledGroupImageElement,\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 * Optional click handler for the grouped image.\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\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 onClick,\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 <StyledGroupImageElement\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 onClick={onClick} $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,IAAsCC,OAAO,QAAQ,OAAO;AACxE,SACIC,SAAS,EACTC,iBAAiB,EACjBC,kBAAkB,EAClBC,uBAAuB,QACpB,uBAAuB;AAiC9B,MAAMC,YAAyC,GAAGC,IAAA,IAQ5C;EAAA,IAR6C;IAC/CC,WAAW;IACXC,MAAM,GAAG,MAAM;IACfC,eAAe;IACfC,MAAM;IACNC,OAAO;IACPC,uBAAuB,GAAG,KAAK;IAC/BC,oBAAoB,GAAG;EAC3B,CAAC,GAAAP,IAAA;EACG,MAAMQ,cAAc,GAAGC,OAAO,CAACR,WAAW,CAAC;EAC3C,MAAMS,iBAAiB,GAAGN,MAAM,CAACO,MAAM,GAAG,CAAC;EAE3C,MAAMC,SAAS,GAAGlB,OAAO,CAAC,MAAM;IAC5B,IAAIc,cAAc,EAAE;MAChB,OAAOE,iBAAiB,GAAGf,SAAS,CAACkB,YAAY,GAAGlB,SAAS,CAACmB,KAAK;IACvE;IAEA,OAAOJ,iBAAiB,GAAGf,SAAS,CAACoB,OAAO,GAAGpB,SAAS,CAACqB,IAAI;EACjE,CAAC,EAAE,CAACR,cAAc,EAAEE,iBAAiB,CAAC,CAAC;EAEvC,MAAMO,aAAa,GAAGb,MAAM,CACvBc,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAAA,CACZC,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBACZ5B,KAAA,CAAA6B,aAAA,CAACxB,uBAAuB;IACpByB,WAAW,EAAEpB,eAAgB;IAC7BqB,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,oBACI3B,KAAA,CAAA6B,aAAA,CAACzB,kBAAkB;IAACQ,OAAO,EAAEA,OAAQ;IAACwB,OAAO,EAAE3B;EAAO,GACjDe,aAAa,EACbT,cAAc,iBACXf,KAAA,CAAA6B,aAAA,CAAC1B,iBAAiB;IACd2B,WAAW,EAAEpB,eAAgB;IAC7BuB,wBAAwB,EAAEpB,uBAAwB;IAClDc,GAAG,EAAEnB,WAAY;IACjB2B,GAAG,EAAC;EAAc,CACrB,CAEW,CAAC;AAE7B,CAAC;AAED7B,YAAY,CAAC+B,WAAW,GAAG,cAAc;AAEzC,eAAe/B,YAAY","ignoreList":[]}
|
|
@@ -22,7 +22,7 @@ export let ImageSize = /*#__PURE__*/function (ImageSize) {
|
|
|
22
22
|
ImageSize["GroupedSmall"] = "65%";
|
|
23
23
|
return ImageSize;
|
|
24
24
|
}({});
|
|
25
|
-
export const
|
|
25
|
+
export const StyledGroupImageElement = styled.img`
|
|
26
26
|
aspect-ratio: 1;
|
|
27
27
|
border-radius: ${_ref3 => {
|
|
28
28
|
let {
|
|
@@ -36,6 +36,7 @@ export const StyledImage = styled.img`
|
|
|
36
36
|
} = _ref4;
|
|
37
37
|
return $imageSize;
|
|
38
38
|
}};
|
|
39
|
+
object-fit: cover;
|
|
39
40
|
position: absolute;
|
|
40
41
|
|
|
41
42
|
${_ref5 => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupedImage.styles.js","names":["styled","css","StyledGroupedImage","div","_ref","$height","_ref2","ImageSize","
|
|
1
|
+
{"version":3,"file":"GroupedImage.styles.js","names":["styled","css","StyledGroupedImage","div","_ref","$height","_ref2","ImageSize","StyledGroupImageElement","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 flex: 0 0 auto;\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 StyledGroupImageElement = styled.img<StyledImageProps>`\n aspect-ratio: 1;\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n height: ${({ $imageSize }) => $imageSize};\n object-fit: cover;\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;AACA,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,uBAAuB,GAAGR,MAAM,CAACS,GAAqB;AACnE;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;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":[]}
|
|
@@ -17,7 +17,7 @@ type StyledImageProps = WithTheme<{
|
|
|
17
17
|
$shouldPreventBackground?: boolean;
|
|
18
18
|
$shouldShowRoundImage?: boolean;
|
|
19
19
|
}>;
|
|
20
|
-
export declare const
|
|
20
|
+
export declare const StyledGroupImageElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledImageProps>> & string;
|
|
21
21
|
type StyledCornerImageProps = WithTheme<{
|
|
22
22
|
$background?: CSSProperties['background'];
|
|
23
23
|
$shouldPreventBackground?: boolean;
|
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.1149",
|
|
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": "e5c721a0efd8539e1f10bce04abbc644f49f2979"
|
|
90
90
|
}
|