@chayns-components/core 5.4.20-alpha.0 → 5.4.21-alpha.0
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/expandable-content/ExpandableContent.js +30 -12
- package/lib/cjs/components/expandable-content/ExpandableContent.js.map +1 -1
- package/lib/cjs/components/expandable-content/ExpandableContent.styles.js +1 -3
- package/lib/cjs/components/expandable-content/ExpandableContent.styles.js.map +1 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.styles.js +1 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.styles.js.map +1 -1
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js +3 -2
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js.map +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.js +30 -12
- package/lib/esm/components/expandable-content/ExpandableContent.js.map +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.styles.js +1 -3
- package/lib/esm/components/expandable-content/ExpandableContent.styles.js.map +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.styles.js +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.styles.js.map +1 -1
- package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js +3 -2
- package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -12,18 +12,36 @@ const ExpandableContent = ({
|
|
|
12
12
|
children,
|
|
13
13
|
isOpen,
|
|
14
14
|
startDelay
|
|
15
|
-
}) => (0, _react2.useMemo)(() =>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
15
|
+
}) => (0, _react2.useMemo)(() => {
|
|
16
|
+
const variants = {
|
|
17
|
+
open: {
|
|
18
|
+
height: 'auto',
|
|
19
|
+
overflow: 'hidden',
|
|
20
|
+
transition: {
|
|
21
|
+
duration: 0.2,
|
|
22
|
+
type: 'tween',
|
|
23
|
+
delay: startDelay
|
|
24
|
+
},
|
|
25
|
+
transitionEnd: {
|
|
26
|
+
overflow: 'visible'
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
closed: {
|
|
30
|
+
height: '0px',
|
|
31
|
+
overflow: 'hidden',
|
|
32
|
+
transition: {
|
|
33
|
+
duration: 0.2,
|
|
34
|
+
type: 'tween'
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
return /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
39
|
+
initial: false
|
|
40
|
+
}, /*#__PURE__*/_react2.default.createElement(_ExpandableContent.StyledMotionExpandableContent, {
|
|
41
|
+
animate: isOpen ? 'open' : 'closed',
|
|
42
|
+
variants: variants
|
|
43
|
+
}, children));
|
|
44
|
+
}, [children, isOpen, startDelay]);
|
|
27
45
|
ExpandableContent.displayName = 'ExpandableContent';
|
|
28
46
|
var _default = exports.default = ExpandableContent;
|
|
29
47
|
//# sourceMappingURL=ExpandableContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableContent.js","names":["_react","require","_react2","_interopRequireWildcard","_ExpandableContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ExpandableContent","children","isOpen","startDelay","useMemo","
|
|
1
|
+
{"version":3,"file":"ExpandableContent.js","names":["_react","require","_react2","_interopRequireWildcard","_ExpandableContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ExpandableContent","children","isOpen","startDelay","useMemo","variants","open","height","overflow","transition","duration","type","delay","transitionEnd","closed","createElement","AnimatePresence","initial","StyledMotionExpandableContent","animate","displayName","_default","exports"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence, Variants } from 'motion/react';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n /**\n * The children that should be animated.\n */\n children: ReactNode;\n /**\n * An optional start delay.\n */\n startDelay?: number;\n /**\n * Whether the content is expanded.\n */\n isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen, startDelay }) =>\n useMemo(() => {\n const variants: Variants = {\n open: {\n height: 'auto',\n overflow: 'hidden',\n transition: { duration: 0.2, type: 'tween', delay: startDelay },\n transitionEnd: { overflow: 'visible' },\n },\n closed: {\n height: '0px',\n overflow: 'hidden',\n transition: { duration: 0.2, type: 'tween' },\n },\n };\n\n return (\n <AnimatePresence initial={false}>\n <StyledMotionExpandableContent\n animate={isOpen ? 'open' : 'closed'}\n variants={variants}\n >\n {children}\n </StyledMotionExpandableContent>\n </AnimatePresence>\n );\n }, [children, isOpen, startDelay]);\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAA2E,SAAAE,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;AAiB3E,MAAMkB,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAW,CAAC,KACnF,IAAAC,eAAO,EAAC,MAAM;EACV,MAAMC,QAAkB,GAAG;IACvBC,IAAI,EAAE;MACFC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE,QAAQ;MAClBC,UAAU,EAAE;QAAEC,QAAQ,EAAE,GAAG;QAAEC,IAAI,EAAE,OAAO;QAAEC,KAAK,EAAET;MAAW,CAAC;MAC/DU,aAAa,EAAE;QAAEL,QAAQ,EAAE;MAAU;IACzC,CAAC;IACDM,MAAM,EAAE;MACJP,MAAM,EAAE,KAAK;MACbC,QAAQ,EAAE,QAAQ;MAClBC,UAAU,EAAE;QAAEC,QAAQ,EAAE,GAAG;QAAEC,IAAI,EAAE;MAAQ;IAC/C;EACJ,CAAC;EAED,oBACIjC,OAAA,CAAAa,OAAA,CAAAwB,aAAA,CAACvC,MAAA,CAAAwC,eAAe;IAACC,OAAO,EAAE;EAAM,gBAC5BvC,OAAA,CAAAa,OAAA,CAAAwB,aAAA,CAACnC,kBAAA,CAAAsC,6BAA6B;IAC1BC,OAAO,EAAEjB,MAAM,GAAG,MAAM,GAAG,QAAS;IACpCG,QAAQ,EAAEA;EAAS,GAElBJ,QAC0B,CAClB,CAAC;AAE1B,CAAC,EAAE,CAACA,QAAQ,EAAEC,MAAM,EAAEC,UAAU,CAAC,CAAC;AAEtCH,iBAAiB,CAACoB,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/B,OAAA,GAErCS,iBAAiB","ignoreList":[]}
|
|
@@ -7,7 +7,5 @@ exports.StyledMotionExpandableContent = void 0;
|
|
|
7
7
|
var _react = require("motion/react");
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
const StyledMotionExpandableContent = exports.StyledMotionExpandableContent = (0, _styledComponents.default)(_react.motion.div)
|
|
11
|
-
overflow: hidden;
|
|
12
|
-
`;
|
|
10
|
+
const StyledMotionExpandableContent = exports.StyledMotionExpandableContent = (0, _styledComponents.default)(_react.motion.div)``;
|
|
13
11
|
//# sourceMappingURL=ExpandableContent.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableContent.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionExpandableContent","exports","styled","motion","div"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionExpandableContent = styled(motion.div)
|
|
1
|
+
{"version":3,"file":"ExpandableContent.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionExpandableContent","exports","styled","motion","div"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionExpandableContent = styled(motion.div)``;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,6BAA6B,GAAAC,OAAA,CAAAD,6BAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC,EAAE","ignoreList":[]}
|
|
@@ -20,7 +20,7 @@ const StyledMultiActionButton = exports.StyledMultiActionButton = (0, _styledCom
|
|
|
20
20
|
/* Keep normal clipping, but let focus-ring paint outside while focused. */
|
|
21
21
|
&:focus-within {
|
|
22
22
|
overflow: visible;
|
|
23
|
-
z-index:
|
|
23
|
+
z-index: 10;
|
|
24
24
|
}
|
|
25
25
|
`;
|
|
26
26
|
const StyledSeparator = exports.StyledSeparator = _styledComponents.default.span`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMultiActionButton","exports","styled","motion","div","StyledSeparator","span","$gapColor","theme","$isHidden"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n align-items: stretch;\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n position: relative;\n transition: width 0.2s ease;\n width: fit-content;\n\n /* Keep normal clipping, but let focus-ring paint outside while focused. */\n &:focus-within {\n overflow: visible;\n z-index:
|
|
1
|
+
{"version":3,"file":"MultiActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMultiActionButton","exports","styled","motion","div","StyledSeparator","span","$gapColor","theme","$isHidden"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n align-items: stretch;\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n position: relative;\n transition: width 0.2s ease;\n width: fit-content;\n\n /* Keep normal clipping, but let focus-ring paint outside while focused. */\n &:focus-within {\n overflow: visible;\n z-index: 10;\n }\n`;\n\ntype StyledSeparatorProps = WithTheme<{\n $gapColor?: string;\n $isHidden?: boolean;\n}>;\n\nexport const StyledSeparator = styled.span<StyledSeparatorProps>`\n align-self: stretch;\n background: ${({ $gapColor, theme }) => $gapColor || theme?.['cw-body-background'] || '#fff'};\n flex: 0 0 ${({ $isHidden }) => ($isHidden ? 0 : 1)}px;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n overflow: hidden;\n transition:\n flex-basis 0.2s ease,\n opacity 0.2s ease,\n width 0.2s ease;\n width: ${({ $isHidden }) => ($isHidden ? 0 : 1)}px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMC,eAAe,GAAAJ,OAAA,CAAAI,eAAA,GAAGH,yBAAM,CAACI,IAA0B;AAChE;AACA,kBAAkB,CAAC;EAAEC,SAAS;EAAEC;AAAM,CAAC,KAAKD,SAAS,KAAIC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,oBAAoB,CAAC,KAAI,MAAM;AAChG,gBAAgB,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACtD,eAAe,CAAC;EAAEA;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACnD,CAAC","ignoreList":[]}
|
|
@@ -182,9 +182,10 @@ const StyledActionButton = exports.StyledActionButton = _styledComponents.defaul
|
|
|
182
182
|
}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
|
|
183
183
|
&:focus-visible {
|
|
184
184
|
transition: none;
|
|
185
|
+
z-index: 1;
|
|
185
186
|
outline: solid 2px color-mix(in srgb, currentColor 70%, transparent);
|
|
186
|
-
box-shadow: 0 0 0
|
|
187
|
-
outline-offset:
|
|
187
|
+
box-shadow: inset 0 0 0 2px rgba(0, 102, 204, 0.25);
|
|
188
|
+
outline-offset: -2px;
|
|
188
189
|
color: white;
|
|
189
190
|
}
|
|
190
191
|
`}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","pulse","color1","color2","keyframes","StyledActionButton","exports","styled","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","css","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","MultiActionButtonStatusType","Pulse","$shouldShowKeyboardHighlighting","StyledActionContent","span","StyledIconSlot","$isDisabled","StyledLabelWrapper","motion","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n $backgroundColor?: string;\n $isCollapsed?: boolean;\n $isExpanded?: boolean;\n $isHidden?: boolean;\n $isPrimary?: boolean;\n $isSecondary?: boolean;\n $isShrunk?: boolean;\n $isSolo?: boolean;\n $pulseColors?: [string, string];\n $isInteractionDisabled?: boolean;\n $height: number;\n $statusType?: MultiActionButtonStatusType;\n $shouldUseContentWidth?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n 0% {\n background: ${color1};\n }\n 50% {\n background: ${color2};\n }\n 100% {\n background: ${color1};\n }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n align-items: center;\n border: none;\n border-radius: ${({ $height }) => $height / 2}px;\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n height: ${({ $height }) => $height}px;\n line-height: 22px;\n min-height: ${({ $height }) => $height}px;\n overflow: hidden;\n padding: 0;\n position: relative;\n transition:\n background-color 0.2s ease,\n border-radius 0.2s ease,\n color 0.2s ease,\n flex-grow 0.2s ease,\n opacity 0.2s ease,\n padding 0.2s ease,\n width 0.2s ease;\n user-select: none;\n white-space: nowrap;\n\n background-color: ${({ $backgroundColor, theme }) =>\n $backgroundColor || theme?.primary || '#000'};\n color: #fff;\n\n /* When width is content-driven, avoid flex stretching. */\n ${({ $shouldUseContentWidth }) =>\n $shouldUseContentWidth &&\n css`\n flex: 0 1 auto;\n `}\n\n /* Expanded secondary button when width is not content-driven. */\n ${({ $isExpanded, $shouldUseContentWidth }) =>\n $isExpanded &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Collapsed state clamps to a fixed icon size. */\n ${(props) =>\n props.$isCollapsed &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Primary action stretches unless content-driven. */\n ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n $isPrimary &&\n !$isCollapsed &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Shrink the primary action to icon size when secondary is expanded. */\n ${(props) =>\n props.$isShrunk &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Keep secondary icon-only when collapsed and not expanded. */\n ${(props) =>\n props.$isSecondary &&\n !props.$isExpanded &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Fully hide the secondary action when the whole control is collapsed. */\n ${({ $isHidden }) =>\n $isHidden &&\n css`\n opacity: 0;\n pointer-events: none;\n width: 0;\n `}\n\n /* Joining both buttons into a pill shape. */\n ${({ $isPrimary }) =>\n $isPrimary &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `}\n\n ${(props) =>\n props.$isPrimary &&\n props.$isCollapsed &&\n css`\n border-bottom-right-radius: ${props.$height / 2}px;\n border-top-right-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isSecondary }) =>\n $isSecondary &&\n css`\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n `}\n\n ${(props) =>\n props.$isSolo &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${(props) =>\n props.$isCollapsed &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isInteractionDisabled }) =>\n $isInteractionDisabled &&\n css`\n cursor: default;\n `}\n\n /* Optional pulse overlay used by status. */\n ${({ $statusType, $pulseColors }) =>\n $statusType === MultiActionButtonStatusType.Pulse &&\n css`\n overflow: hidden;\n\n &::before {\n animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n 1.6s ease-in-out infinite;\n border-radius: 3px;\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n `}\n\n &:disabled {\n cursor: default;\n }\n\n ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n !$isInteractionDisabled &&\n css`\n &:hover:not(:disabled) {\n background-color: ${`color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n }\n `}\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n transition: none;\n outline: solid 2px color-mix(in srgb, currentColor 70%, transparent);\n box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);\n outline-offset: 1px;\n color: white;\n }\n `}\n`;\n\nexport const StyledActionContent = styled.span`\n align-items: center;\n display: inline-flex;\n flex: 1 1 auto;\n gap: 0;\n min-width: 0;\n position: relative;\n z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number; $isDisabled?: boolean }>`\n align-items: center;\n display: inline-flex;\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n /* The wrapper animates width/margin to avoid layout jumps. */\n display: inline-flex;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n padding-right: 18px;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,kBAAA,GAAAH,OAAA;AAAyE,SAAAE,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;AAmBzE,MAAMkB,KAAK,GAAGA,CAACC,MAAc,EAAEC,MAAc,KAAK,IAAAC,2BAAS;AAC3D;AACA,sBAAsBF,MAAM;AAC5B;AACA;AACA,sBAAsBC,MAAM;AAC5B;AACA;AACA,sBAAsBD,MAAM;AAC5B;AACA,CAAC;AAEM,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,MAA+B;AACxE;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO,GAAG,CAAC;AACjD;AACA;AACA;AACA,cAAc,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,kBAAkB,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC,gBAAgB;EAAEC;AAAM,CAAC,KAC5CD,gBAAgB,KAAIC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,OAAO,KAAI,MAAM;AACpD;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAuB,CAAC,KACzBA,sBAAsB,IACtB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEC,WAAW;EAAEF;AAAuB,CAAC,KACtCE,WAAW,IACX,CAACF,sBAAsB,IACvB,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA,MAAOE,KAAK,IACJA,KAAK,CAACC,YAAY,IAClB,IAAAH,qBAAG;AACX;AACA;AACA,qBAAqBE,KAAK,CAACP,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAES,UAAU;EAAED,YAAY;EAAEJ;AAAuB,CAAC,KACnDK,UAAU,IACV,CAACD,YAAY,IACb,CAACJ,sBAAsB,IACvB,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA,MAAOE,KAAK,IACJA,KAAK,CAACG,SAAS,IACf,CAACH,KAAK,CAACH,sBAAsB,IAC7B,IAAAC,qBAAG;AACX;AACA;AACA,qBAAqBE,KAAK,CAACP,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAOO,KAAK,IACJA,KAAK,CAACI,YAAY,IAClB,CAACJ,KAAK,CAACD,WAAW,IAClB,CAACC,KAAK,CAACH,sBAAsB,IAC7B,IAAAC,qBAAG;AACX;AACA;AACA,qBAAqBE,KAAK,CAACP,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEY;AAAU,CAAC,KACZA,SAAS,IACT,IAAAP,qBAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEI;AAAW,CAAC,KACbA,UAAU,IACV,IAAAJ,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAOE,KAAK,IACJA,KAAK,CAACE,UAAU,IAChBF,KAAK,CAACC,YAAY,IAClB,IAAAH,qBAAG;AACX,0CAA0CE,KAAK,CAACP,OAAO,GAAG,CAAC;AAC3D,uCAAuCO,KAAK,CAACP,OAAO,GAAG,CAAC;AACxD,SAAS;AACT;AACA,MAAM,CAAC;EAAEW;AAAa,CAAC,KACfA,YAAY,IACZ,IAAAN,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAOE,KAAK,IACJA,KAAK,CAACM,OAAO,IACb,IAAAR,qBAAG;AACX,6BAA6BE,KAAK,CAACP,OAAO,GAAG,CAAC;AAC9C,SAAS;AACT;AACA,MAAOO,KAAK,IACJA,KAAK,CAACC,YAAY,IAClB,IAAAH,qBAAG;AACX,6BAA6BE,KAAK,CAACP,OAAO,GAAG,CAAC;AAC9C,SAAS;AACT;AACA,MAAM,CAAC;EAAEc;AAAuB,CAAC,KACzBA,sBAAsB,IACtB,IAAAT,qBAAG;AACX;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEU,WAAW;EAAEC;AAAa,CAAC,KAC5BD,WAAW,KAAKE,8CAA2B,CAACC,KAAK,IACjD,IAAAb,qBAAG;AACX;AACA;AACA;AACA,6BAA6Bb,KAAK,CAAC,CAAAwB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC,CAAC,KAAI,SAAS,EAAE,CAAAA,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC,CAAC,KAAI,SAAS,CAAC;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEF,sBAAsB;EAAEb,gBAAgB;EAAEC;AAAM,CAAC,KAClD,CAACY,sBAAsB,IACvB,IAAAT,qBAAG;AACX;AACA,oCAAoC,sBAAsBJ,gBAAgB,KAAIC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,OAAO,KAAI,MAAM,cAAc;AACpH;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEgB;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAd,qBAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,CAAC;AAEM,MAAMe,mBAAmB,GAAAvB,OAAA,CAAAuB,mBAAA,GAAGtB,yBAAM,CAACuB,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,cAAc,GAAAzB,OAAA,CAAAyB,cAAA,GAAGxB,yBAAM,CAACuB,IAAgD;AACrF;AACA;AACA;AACA,cAAc,CAAC;EAAErB;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,eAAe,CAAC;EAAEuB;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,aAAa,CAAC;EAAEvB;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAEM,MAAMwB,kBAAkB,GAAA3B,OAAA,CAAA2B,kBAAA,GAAG,IAAA1B,yBAAM,EAAC2B,aAAM,CAACJ,IAAI,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMK,oBAAoB,GAAA7B,OAAA,CAAA6B,oBAAA,GAAG5B,yBAAM,CAACuB,IAAI;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","pulse","color1","color2","keyframes","StyledActionButton","exports","styled","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","css","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","MultiActionButtonStatusType","Pulse","$shouldShowKeyboardHighlighting","StyledActionContent","span","StyledIconSlot","$isDisabled","StyledLabelWrapper","motion","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n $backgroundColor?: string;\n $isCollapsed?: boolean;\n $isExpanded?: boolean;\n $isHidden?: boolean;\n $isPrimary?: boolean;\n $isSecondary?: boolean;\n $isShrunk?: boolean;\n $isSolo?: boolean;\n $pulseColors?: [string, string];\n $isInteractionDisabled?: boolean;\n $height: number;\n $statusType?: MultiActionButtonStatusType;\n $shouldUseContentWidth?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n 0% {\n background: ${color1};\n }\n 50% {\n background: ${color2};\n }\n 100% {\n background: ${color1};\n }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n align-items: center;\n border: none;\n border-radius: ${({ $height }) => $height / 2}px;\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n height: ${({ $height }) => $height}px;\n line-height: 22px;\n min-height: ${({ $height }) => $height}px;\n overflow: hidden;\n padding: 0;\n position: relative;\n transition:\n background-color 0.2s ease,\n border-radius 0.2s ease,\n color 0.2s ease,\n flex-grow 0.2s ease,\n opacity 0.2s ease,\n padding 0.2s ease,\n width 0.2s ease;\n user-select: none;\n white-space: nowrap;\n\n background-color: ${({ $backgroundColor, theme }) =>\n $backgroundColor || theme?.primary || '#000'};\n color: #fff;\n\n /* When width is content-driven, avoid flex stretching. */\n ${({ $shouldUseContentWidth }) =>\n $shouldUseContentWidth &&\n css`\n flex: 0 1 auto;\n `}\n\n /* Expanded secondary button when width is not content-driven. */\n ${({ $isExpanded, $shouldUseContentWidth }) =>\n $isExpanded &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Collapsed state clamps to a fixed icon size. */\n ${(props) =>\n props.$isCollapsed &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Primary action stretches unless content-driven. */\n ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n $isPrimary &&\n !$isCollapsed &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Shrink the primary action to icon size when secondary is expanded. */\n ${(props) =>\n props.$isShrunk &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Keep secondary icon-only when collapsed and not expanded. */\n ${(props) =>\n props.$isSecondary &&\n !props.$isExpanded &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Fully hide the secondary action when the whole control is collapsed. */\n ${({ $isHidden }) =>\n $isHidden &&\n css`\n opacity: 0;\n pointer-events: none;\n width: 0;\n `}\n\n /* Joining both buttons into a pill shape. */\n ${({ $isPrimary }) =>\n $isPrimary &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `}\n\n ${(props) =>\n props.$isPrimary &&\n props.$isCollapsed &&\n css`\n border-bottom-right-radius: ${props.$height / 2}px;\n border-top-right-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isSecondary }) =>\n $isSecondary &&\n css`\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n `}\n\n ${(props) =>\n props.$isSolo &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${(props) =>\n props.$isCollapsed &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isInteractionDisabled }) =>\n $isInteractionDisabled &&\n css`\n cursor: default;\n `}\n\n /* Optional pulse overlay used by status. */\n ${({ $statusType, $pulseColors }) =>\n $statusType === MultiActionButtonStatusType.Pulse &&\n css`\n overflow: hidden;\n\n &::before {\n animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n 1.6s ease-in-out infinite;\n border-radius: 3px;\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n `}\n\n &:disabled {\n cursor: default;\n }\n\n ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n !$isInteractionDisabled &&\n css`\n &:hover:not(:disabled) {\n background-color: ${`color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n }\n `}\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n transition: none;\n z-index: 1;\n outline: solid 2px color-mix(in srgb, currentColor 70%, transparent);\n box-shadow: inset 0 0 0 2px rgba(0, 102, 204, 0.25);\n outline-offset: -2px;\n color: white;\n }\n `}\n`;\n\nexport const StyledActionContent = styled.span`\n align-items: center;\n display: inline-flex;\n flex: 1 1 auto;\n gap: 0;\n min-width: 0;\n position: relative;\n z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number; $isDisabled?: boolean }>`\n align-items: center;\n display: inline-flex;\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n /* The wrapper animates width/margin to avoid layout jumps. */\n display: inline-flex;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n padding-right: 18px;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,18 +5,36 @@ const ExpandableContent = ({
|
|
|
5
5
|
children,
|
|
6
6
|
isOpen,
|
|
7
7
|
startDelay
|
|
8
|
-
}) => useMemo(() =>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
}) => useMemo(() => {
|
|
9
|
+
const variants = {
|
|
10
|
+
open: {
|
|
11
|
+
height: 'auto',
|
|
12
|
+
overflow: 'hidden',
|
|
13
|
+
transition: {
|
|
14
|
+
duration: 0.2,
|
|
15
|
+
type: 'tween',
|
|
16
|
+
delay: startDelay
|
|
17
|
+
},
|
|
18
|
+
transitionEnd: {
|
|
19
|
+
overflow: 'visible'
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
closed: {
|
|
23
|
+
height: '0px',
|
|
24
|
+
overflow: 'hidden',
|
|
25
|
+
transition: {
|
|
26
|
+
duration: 0.2,
|
|
27
|
+
type: 'tween'
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
return /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
32
|
+
initial: false
|
|
33
|
+
}, /*#__PURE__*/React.createElement(StyledMotionExpandableContent, {
|
|
34
|
+
animate: isOpen ? 'open' : 'closed',
|
|
35
|
+
variants: variants
|
|
36
|
+
}, children));
|
|
37
|
+
}, [children, isOpen, startDelay]);
|
|
20
38
|
ExpandableContent.displayName = 'ExpandableContent';
|
|
21
39
|
export default ExpandableContent;
|
|
22
40
|
//# sourceMappingURL=ExpandableContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","children","isOpen","startDelay","
|
|
1
|
+
{"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","children","isOpen","startDelay","variants","open","height","overflow","transition","duration","type","delay","transitionEnd","closed","createElement","initial","animate","displayName"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence, Variants } from 'motion/react';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n /**\n * The children that should be animated.\n */\n children: ReactNode;\n /**\n * An optional start delay.\n */\n startDelay?: number;\n /**\n * Whether the content is expanded.\n */\n isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen, startDelay }) =>\n useMemo(() => {\n const variants: Variants = {\n open: {\n height: 'auto',\n overflow: 'hidden',\n transition: { duration: 0.2, type: 'tween', delay: startDelay },\n transitionEnd: { overflow: 'visible' },\n },\n closed: {\n height: '0px',\n overflow: 'hidden',\n transition: { duration: 0.2, type: 'tween' },\n },\n };\n\n return (\n <AnimatePresence initial={false}>\n <StyledMotionExpandableContent\n animate={isOpen ? 'open' : 'closed'}\n variants={variants}\n >\n {children}\n </StyledMotionExpandableContent>\n </AnimatePresence>\n );\n }, [children, isOpen, startDelay]);\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":"AAAA,SAASA,eAAe,QAAkB,cAAc;AACxD,OAAOC,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAASC,6BAA6B,QAAQ,4BAA4B;AAiB1E,MAAMC,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAW,CAAC,KACnFL,OAAO,CAAC,MAAM;EACV,MAAMM,QAAkB,GAAG;IACvBC,IAAI,EAAE;MACFC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE,QAAQ;MAClBC,UAAU,EAAE;QAAEC,QAAQ,EAAE,GAAG;QAAEC,IAAI,EAAE,OAAO;QAAEC,KAAK,EAAER;MAAW,CAAC;MAC/DS,aAAa,EAAE;QAAEL,QAAQ,EAAE;MAAU;IACzC,CAAC;IACDM,MAAM,EAAE;MACJP,MAAM,EAAE,KAAK;MACbC,QAAQ,EAAE,QAAQ;MAClBC,UAAU,EAAE;QAAEC,QAAQ,EAAE,GAAG;QAAEC,IAAI,EAAE;MAAQ;IAC/C;EACJ,CAAC;EAED,oBACIb,KAAA,CAAAiB,aAAA,CAAClB,eAAe;IAACmB,OAAO,EAAE;EAAM,gBAC5BlB,KAAA,CAAAiB,aAAA,CAACf,6BAA6B;IAC1BiB,OAAO,EAAEd,MAAM,GAAG,MAAM,GAAG,QAAS;IACpCE,QAAQ,EAAEA;EAAS,GAElBH,QAC0B,CAClB,CAAC;AAE1B,CAAC,EAAE,CAACA,QAAQ,EAAEC,MAAM,EAAEC,UAAU,CAAC,CAAC;AAEtCH,iBAAiB,CAACiB,WAAW,GAAG,mBAAmB;AAEnD,eAAejB,iBAAiB","ignoreList":[]}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { motion } from 'motion/react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
export const StyledMotionExpandableContent = styled(motion.div)
|
|
4
|
-
overflow: hidden;
|
|
5
|
-
`;
|
|
3
|
+
export const StyledMotionExpandableContent = styled(motion.div)``;
|
|
6
4
|
//# sourceMappingURL=ExpandableContent.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableContent.styles.js","names":["motion","styled","StyledMotionExpandableContent","div"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionExpandableContent = styled(motion.div)
|
|
1
|
+
{"version":3,"file":"ExpandableContent.styles.js","names":["motion","styled","StyledMotionExpandableContent","div"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionExpandableContent = styled(motion.div)``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,6BAA6B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC,EAAE","ignoreList":[]}
|
|
@@ -13,7 +13,7 @@ export const StyledMultiActionButton = styled(motion.div)`
|
|
|
13
13
|
/* Keep normal clipping, but let focus-ring paint outside while focused. */
|
|
14
14
|
&:focus-within {
|
|
15
15
|
overflow: visible;
|
|
16
|
-
z-index:
|
|
16
|
+
z-index: 10;
|
|
17
17
|
}
|
|
18
18
|
`;
|
|
19
19
|
export const StyledSeparator = styled.span`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiActionButton.styles.js","names":["motion","styled","StyledMultiActionButton","div","StyledSeparator","span","$gapColor","theme","$isHidden"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n align-items: stretch;\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n position: relative;\n transition: width 0.2s ease;\n width: fit-content;\n\n /* Keep normal clipping, but let focus-ring paint outside while focused. */\n &:focus-within {\n overflow: visible;\n z-index:
|
|
1
|
+
{"version":3,"file":"MultiActionButton.styles.js","names":["motion","styled","StyledMultiActionButton","div","StyledSeparator","span","$gapColor","theme","$isHidden"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n align-items: stretch;\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n position: relative;\n transition: width 0.2s ease;\n width: fit-content;\n\n /* Keep normal clipping, but let focus-ring paint outside while focused. */\n &:focus-within {\n overflow: visible;\n z-index: 10;\n }\n`;\n\ntype StyledSeparatorProps = WithTheme<{\n $gapColor?: string;\n $isHidden?: boolean;\n}>;\n\nexport const StyledSeparator = styled.span<StyledSeparatorProps>`\n align-self: stretch;\n background: ${({ $gapColor, theme }) => $gapColor || theme?.['cw-body-background'] || '#fff'};\n flex: 0 0 ${({ $isHidden }) => ($isHidden ? 0 : 1)}px;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n overflow: hidden;\n transition:\n flex-basis 0.2s ease,\n opacity 0.2s ease,\n width 0.2s ease;\n width: ${({ $isHidden }) => ($isHidden ? 0 : 1)}px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,eAAe,GAAGH,MAAM,CAACI,IAA0B;AAChE;AACA,kBAAkB,CAAC;EAAEC,SAAS;EAAEC;AAAM,CAAC,KAAKD,SAAS,IAAIC,KAAK,GAAG,oBAAoB,CAAC,IAAI,MAAM;AAChG,gBAAgB,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACtD,eAAe,CAAC;EAAEA;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACnD,CAAC","ignoreList":[]}
|
|
@@ -175,9 +175,10 @@ export const StyledActionButton = styled.button`
|
|
|
175
175
|
}) => $shouldShowKeyboardHighlighting && css`
|
|
176
176
|
&:focus-visible {
|
|
177
177
|
transition: none;
|
|
178
|
+
z-index: 1;
|
|
178
179
|
outline: solid 2px color-mix(in srgb, currentColor 70%, transparent);
|
|
179
|
-
box-shadow: 0 0 0
|
|
180
|
-
outline-offset:
|
|
180
|
+
box-shadow: inset 0 0 0 2px rgba(0, 102, 204, 0.25);
|
|
181
|
+
outline-offset: -2px;
|
|
181
182
|
color: white;
|
|
182
183
|
}
|
|
183
184
|
`}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.styles.js","names":["motion","styled","css","keyframes","MultiActionButtonStatusType","pulse","color1","color2","StyledActionButton","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","Pulse","$shouldShowKeyboardHighlighting","StyledActionContent","span","StyledIconSlot","$isDisabled","StyledLabelWrapper","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n $backgroundColor?: string;\n $isCollapsed?: boolean;\n $isExpanded?: boolean;\n $isHidden?: boolean;\n $isPrimary?: boolean;\n $isSecondary?: boolean;\n $isShrunk?: boolean;\n $isSolo?: boolean;\n $pulseColors?: [string, string];\n $isInteractionDisabled?: boolean;\n $height: number;\n $statusType?: MultiActionButtonStatusType;\n $shouldUseContentWidth?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n 0% {\n background: ${color1};\n }\n 50% {\n background: ${color2};\n }\n 100% {\n background: ${color1};\n }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n align-items: center;\n border: none;\n border-radius: ${({ $height }) => $height / 2}px;\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n height: ${({ $height }) => $height}px;\n line-height: 22px;\n min-height: ${({ $height }) => $height}px;\n overflow: hidden;\n padding: 0;\n position: relative;\n transition:\n background-color 0.2s ease,\n border-radius 0.2s ease,\n color 0.2s ease,\n flex-grow 0.2s ease,\n opacity 0.2s ease,\n padding 0.2s ease,\n width 0.2s ease;\n user-select: none;\n white-space: nowrap;\n\n background-color: ${({ $backgroundColor, theme }) =>\n $backgroundColor || theme?.primary || '#000'};\n color: #fff;\n\n /* When width is content-driven, avoid flex stretching. */\n ${({ $shouldUseContentWidth }) =>\n $shouldUseContentWidth &&\n css`\n flex: 0 1 auto;\n `}\n\n /* Expanded secondary button when width is not content-driven. */\n ${({ $isExpanded, $shouldUseContentWidth }) =>\n $isExpanded &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Collapsed state clamps to a fixed icon size. */\n ${(props) =>\n props.$isCollapsed &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Primary action stretches unless content-driven. */\n ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n $isPrimary &&\n !$isCollapsed &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Shrink the primary action to icon size when secondary is expanded. */\n ${(props) =>\n props.$isShrunk &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Keep secondary icon-only when collapsed and not expanded. */\n ${(props) =>\n props.$isSecondary &&\n !props.$isExpanded &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Fully hide the secondary action when the whole control is collapsed. */\n ${({ $isHidden }) =>\n $isHidden &&\n css`\n opacity: 0;\n pointer-events: none;\n width: 0;\n `}\n\n /* Joining both buttons into a pill shape. */\n ${({ $isPrimary }) =>\n $isPrimary &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `}\n\n ${(props) =>\n props.$isPrimary &&\n props.$isCollapsed &&\n css`\n border-bottom-right-radius: ${props.$height / 2}px;\n border-top-right-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isSecondary }) =>\n $isSecondary &&\n css`\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n `}\n\n ${(props) =>\n props.$isSolo &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${(props) =>\n props.$isCollapsed &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isInteractionDisabled }) =>\n $isInteractionDisabled &&\n css`\n cursor: default;\n `}\n\n /* Optional pulse overlay used by status. */\n ${({ $statusType, $pulseColors }) =>\n $statusType === MultiActionButtonStatusType.Pulse &&\n css`\n overflow: hidden;\n\n &::before {\n animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n 1.6s ease-in-out infinite;\n border-radius: 3px;\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n `}\n\n &:disabled {\n cursor: default;\n }\n\n ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n !$isInteractionDisabled &&\n css`\n &:hover:not(:disabled) {\n background-color: ${`color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n }\n `}\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n transition: none;\n outline: solid 2px color-mix(in srgb, currentColor 70%, transparent);\n box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);\n outline-offset: 1px;\n color: white;\n }\n `}\n`;\n\nexport const StyledActionContent = styled.span`\n align-items: center;\n display: inline-flex;\n flex: 1 1 auto;\n gap: 0;\n min-width: 0;\n position: relative;\n z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number; $isDisabled?: boolean }>`\n align-items: center;\n display: inline-flex;\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n /* The wrapper animates width/margin to avoid layout jumps. */\n display: inline-flex;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n padding-right: 18px;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ActionButton.styles.js","names":["motion","styled","css","keyframes","MultiActionButtonStatusType","pulse","color1","color2","StyledActionButton","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","Pulse","$shouldShowKeyboardHighlighting","StyledActionContent","span","StyledIconSlot","$isDisabled","StyledLabelWrapper","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n $backgroundColor?: string;\n $isCollapsed?: boolean;\n $isExpanded?: boolean;\n $isHidden?: boolean;\n $isPrimary?: boolean;\n $isSecondary?: boolean;\n $isShrunk?: boolean;\n $isSolo?: boolean;\n $pulseColors?: [string, string];\n $isInteractionDisabled?: boolean;\n $height: number;\n $statusType?: MultiActionButtonStatusType;\n $shouldUseContentWidth?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n 0% {\n background: ${color1};\n }\n 50% {\n background: ${color2};\n }\n 100% {\n background: ${color1};\n }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n align-items: center;\n border: none;\n border-radius: ${({ $height }) => $height / 2}px;\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n height: ${({ $height }) => $height}px;\n line-height: 22px;\n min-height: ${({ $height }) => $height}px;\n overflow: hidden;\n padding: 0;\n position: relative;\n transition:\n background-color 0.2s ease,\n border-radius 0.2s ease,\n color 0.2s ease,\n flex-grow 0.2s ease,\n opacity 0.2s ease,\n padding 0.2s ease,\n width 0.2s ease;\n user-select: none;\n white-space: nowrap;\n\n background-color: ${({ $backgroundColor, theme }) =>\n $backgroundColor || theme?.primary || '#000'};\n color: #fff;\n\n /* When width is content-driven, avoid flex stretching. */\n ${({ $shouldUseContentWidth }) =>\n $shouldUseContentWidth &&\n css`\n flex: 0 1 auto;\n `}\n\n /* Expanded secondary button when width is not content-driven. */\n ${({ $isExpanded, $shouldUseContentWidth }) =>\n $isExpanded &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Collapsed state clamps to a fixed icon size. */\n ${(props) =>\n props.$isCollapsed &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Primary action stretches unless content-driven. */\n ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n $isPrimary &&\n !$isCollapsed &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Shrink the primary action to icon size when secondary is expanded. */\n ${(props) =>\n props.$isShrunk &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Keep secondary icon-only when collapsed and not expanded. */\n ${(props) =>\n props.$isSecondary &&\n !props.$isExpanded &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Fully hide the secondary action when the whole control is collapsed. */\n ${({ $isHidden }) =>\n $isHidden &&\n css`\n opacity: 0;\n pointer-events: none;\n width: 0;\n `}\n\n /* Joining both buttons into a pill shape. */\n ${({ $isPrimary }) =>\n $isPrimary &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `}\n\n ${(props) =>\n props.$isPrimary &&\n props.$isCollapsed &&\n css`\n border-bottom-right-radius: ${props.$height / 2}px;\n border-top-right-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isSecondary }) =>\n $isSecondary &&\n css`\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n `}\n\n ${(props) =>\n props.$isSolo &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${(props) =>\n props.$isCollapsed &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isInteractionDisabled }) =>\n $isInteractionDisabled &&\n css`\n cursor: default;\n `}\n\n /* Optional pulse overlay used by status. */\n ${({ $statusType, $pulseColors }) =>\n $statusType === MultiActionButtonStatusType.Pulse &&\n css`\n overflow: hidden;\n\n &::before {\n animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n 1.6s ease-in-out infinite;\n border-radius: 3px;\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n `}\n\n &:disabled {\n cursor: default;\n }\n\n ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n !$isInteractionDisabled &&\n css`\n &:hover:not(:disabled) {\n background-color: ${`color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n }\n `}\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n transition: none;\n z-index: 1;\n outline: solid 2px color-mix(in srgb, currentColor 70%, transparent);\n box-shadow: inset 0 0 0 2px rgba(0, 102, 204, 0.25);\n outline-offset: -2px;\n color: white;\n }\n `}\n`;\n\nexport const StyledActionContent = styled.span`\n align-items: center;\n display: inline-flex;\n flex: 1 1 auto;\n gap: 0;\n min-width: 0;\n position: relative;\n z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number; $isDisabled?: boolean }>`\n align-items: center;\n display: inline-flex;\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n /* The wrapper animates width/margin to avoid layout jumps. */\n display: inline-flex;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n padding-right: 18px;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.4.
|
|
3
|
+
"version": "5.4.21-alpha.0",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"typescript": "^5.9.3"
|
|
72
72
|
},
|
|
73
73
|
"dependencies": {
|
|
74
|
-
"@chayns-components/textstring": "^5.4.
|
|
74
|
+
"@chayns-components/textstring": "^5.4.21-alpha.0",
|
|
75
75
|
"@chayns/colors": "^2.0.2",
|
|
76
76
|
"@chayns/uac-service": "~0.0.62",
|
|
77
77
|
"clsx": "^2.1.1",
|
|
@@ -88,5 +88,5 @@
|
|
|
88
88
|
"publishConfig": {
|
|
89
89
|
"access": "public"
|
|
90
90
|
},
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "6c18a13e244f5ee2027c545c37ba998fc1c33fee"
|
|
92
92
|
}
|