@atom-learning/components 6.6.0-beta.3 → 6.6.0-beta.4
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/dist/components/badge/BadgeText.js +1 -2
- package/dist/components/badge/BadgeText.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlDescription.js +1 -2
- package/dist/components/segmented-control/SegmentedControlDescription.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlHeading.js +1 -2
- package/dist/components/segmented-control/SegmentedControlHeading.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlItem.js +6 -3
- package/dist/components/segmented-control/SegmentedControlItem.js.map +1 -1
- package/dist/index.cjs.js +9 -9
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
- package/src/responsive-variant-classes.css +1 -1
|
@@ -19,7 +19,7 @@ var ObserveBadgeTextOverflow = ({ elRef }) => {
|
|
|
19
19
|
return null;
|
|
20
20
|
};
|
|
21
21
|
var StyledBadgeText = styled(Text, {
|
|
22
|
-
base: ["py-0.5"],
|
|
22
|
+
base: ["py-0.5", "capsize-none"],
|
|
23
23
|
variants: { overflow: {
|
|
24
24
|
ellipsis: [
|
|
25
25
|
"overflow-x-hidden",
|
|
@@ -39,7 +39,6 @@ var BadgeText = ({ children, ...rest }) => {
|
|
|
39
39
|
const size = React$1.useMemo(() => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]), [badgeSize]);
|
|
40
40
|
const [elRef, setElRef] = useCallbackRefState();
|
|
41
41
|
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, overflow === "ellipsis" && /* @__PURE__ */ React$1.createElement(ObserveBadgeTextOverflow, { elRef }), /* @__PURE__ */ React$1.createElement(StyledBadgeText, {
|
|
42
|
-
noCapsize: true,
|
|
43
42
|
size,
|
|
44
43
|
overflow,
|
|
45
44
|
ref: setElRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeText.js","names":[],"sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement | null }> = ({\n elRef\n}) => {\n const { setIsOverflowing } = React.useContext(BadgeContext)\n\n useResizeObserver({\n delay: 0,\n elements: [elRef],\n onResize: () => {\n if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n }\n })\n\n return null\n}\n\nconst StyledBadgeText = styled(Text, {\n base: ['py-0.5'],\n variants: {\n overflow: {\n ellipsis: ['overflow-x-hidden', 'text-ellipsis', 'whitespace-nowrap'],\n wrap: ['whitespace-normal']\n }\n }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n xs: 'sm',\n sm: 'md',\n md: 'md'\n}\n\nexport const BadgeText = ({\n children,\n ...rest\n}: TBadgeTextProps): JSX.Element => {\n // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n const size = React.useMemo(\n () => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]),\n [badgeSize]\n )\n\n const [elRef, setElRef] = useCallbackRefState()\n\n return (\n <>\n {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n <StyledBadgeText\n
|
|
1
|
+
{"version":3,"file":"BadgeText.js","names":[],"sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement | null }> = ({\n elRef\n}) => {\n const { setIsOverflowing } = React.useContext(BadgeContext)\n\n useResizeObserver({\n delay: 0,\n elements: [elRef],\n onResize: () => {\n if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n }\n })\n\n return null\n}\n\nconst StyledBadgeText = styled(Text, {\n base: ['py-0.5', 'capsize-none'],\n variants: {\n overflow: {\n ellipsis: ['overflow-x-hidden', 'text-ellipsis', 'whitespace-nowrap'],\n wrap: ['whitespace-normal']\n }\n }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n xs: 'sm',\n sm: 'md',\n md: 'md'\n}\n\nexport const BadgeText = ({\n children,\n ...rest\n}: TBadgeTextProps): JSX.Element => {\n // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n const size = React.useMemo(\n () => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]),\n [badgeSize]\n )\n\n const [elRef, setElRef] = useCallbackRefState()\n\n return (\n <>\n {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n <StyledBadgeText\n size={size}\n overflow={overflow}\n ref={setElRef}\n {...rest}\n >\n {children}\n </StyledBadgeText>\n </>\n )\n}\n"],"mappings":";;;;;;;;AAiBA,IAAM,4BAAsE,EAC1E,YACI;CACJ,MAAM,EAAE,qBAAqB,QAAM,WAAW,aAAa;AAE3D,mBAAkB;EAChB,OAAO;EACP,UAAU,CAAC,MAAM;EACjB,gBAAgB;AACd,OAAI,CAAC,OAAO,eAAe,CAAC,OAAO,YAAa;AAChD,sBAAmB,MAAM,cAAc,MAAM,YAAY;;EAE5D,CAAC;AAEF,QAAO;;AAGT,IAAM,kBAAkB,OAAO,MAAM;CACnC,MAAM,CAAC,UAAU,eAAe;CAChC,UAAU,EACR,UAAU;EACR,UAAU;GAAC;GAAqB;GAAiB;GAAoB;EACrE,MAAM,CAAC,oBAAoB;EAC5B,EACF;CACF,CAAC;AAIF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,aAAa,EACxB,UACA,GAAG,WAC+B;CAElC,MAAM,EAAE,MAAM,WAAW,aAAa,QAAM,WAAW,aAAa;CAEpE,MAAM,OAAO,QAAM,cACX,2BAA2B,YAAY,MAAM,WAAW,GAAG,EACjE,CAAC,UAAU,CACZ;CAED,MAAM,CAAC,OAAO,YAAY,qBAAqB;AAE/C,QACE,wBAAA,cAAA,QAAA,UAAA,MACG,aAAa,cAAc,wBAAA,cAAC,0BAAD,EAAiC,OAAS,CAAA,EACtE,wBAAA,cAAC,iBAAD;EACQ;EACI;EACV,KAAK;EACL,GAAI;EAGY,EADf,SACe,CACjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledText = styled(\n Text,\n {\n base: ['font-body', 'text-text-subtle', 'font-normal'],\n variants: {\n size: {\n sm: ['text-xs', 'leading-[1.6]'],\n md: ['text-sm', 'leading-[1.53]'],\n lg: ['text-md', 'leading-normal']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <StyledText {...props} size={size}
|
|
1
|
+
{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledText = styled(\n Text,\n {\n base: ['font-body', 'text-text-subtle', 'font-normal'],\n variants: {\n size: {\n sm: ['text-xs', 'leading-[1.6]'],\n md: ['text-sm', 'leading-[1.53]'],\n lg: ['text-md', 'leading-normal']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,MACA;CACE,MAAM;EAAC;EAAa;EAAoB;EAAc;CACtD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EAClC,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,+BACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAa;EAAQ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledHeading = styled(\n Text,\n {\n base: ['font-body', 'text-text-regular'],\n variants: {\n size: {\n sm: ['text-sm', 'leading-[1.53]'],\n md: ['text-md', 'leading-normal'],\n lg: ['text-lg', 'leading-[1.52]']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <StyledHeading {...props} size={size}
|
|
1
|
+
{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledHeading = styled(\n Text,\n {\n base: ['font-body', 'text-text-regular'],\n variants: {\n size: {\n sm: ['text-sm', 'leading-[1.53]'],\n md: ['text-md', 'leading-normal'],\n lg: ['text-lg', 'leading-[1.52]']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,oBAAoB;CACxC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EAClC,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,2BACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,wBAAA,cAAC,eAAD;EAAe,GAAI;EAAa;EAAQ,CAAA"}
|
|
@@ -39,18 +39,21 @@ var StyledItem = styled(Trigger, {
|
|
|
39
39
|
size: {
|
|
40
40
|
sm: [
|
|
41
41
|
"flex-[unset]",
|
|
42
|
+
"gap-3",
|
|
42
43
|
"px-6",
|
|
43
|
-
"py-
|
|
44
|
+
"py-4"
|
|
44
45
|
],
|
|
45
46
|
md: [
|
|
46
47
|
"flex-1",
|
|
48
|
+
"gap-4",
|
|
47
49
|
"px-4",
|
|
48
|
-
"py-
|
|
50
|
+
"py-6"
|
|
49
51
|
],
|
|
50
52
|
lg: [
|
|
51
53
|
"flex-1",
|
|
54
|
+
"gap-4",
|
|
52
55
|
"px-4",
|
|
53
|
-
"py-
|
|
56
|
+
"py-6"
|
|
54
57
|
]
|
|
55
58
|
}
|
|
56
59
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(\n Trigger,\n {\n base: [\n 'relative',\n 'bg-transparent',\n 'rounded-md',\n 'z-2',\n 'min-w-35',\n 'border-2',\n 'border-transparent',\n 'cursor-pointer',\n 'select-none',\n 'flex',\n 'flex-col',\n 'items-center',\n 'justify-center',\n 'data-[state=active]:border-2',\n 'data-[state=active]:border-transparent',\n 'data-[state=active]:focus-visible:border-primary-800',\n 'data-[state=active]:focus-visible:shadow-none',\n 'data-[state=active]:font-semibold',\n 'data-[state=active]:shadow-none',\n 'data-[state=active]:text-(--text-bold)',\n 'data-[state=inactive]:font-normal',\n 'data-[state=inactive]:text-grey-900',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'focus-visible:outline-none'\n ],\n variants: {\n theme: {\n primary: [\n 'data-[state=inactive]:hover:bg-primary-300',\n 'focus-visible:border-primary-800'\n ],\n marsh: [\n 'data-[state=inactive]:hover:bg-marsh-300',\n 'focus-visible:border-marsh-800'\n ]\n },\n size: {\n sm: ['flex-[unset]', 'px-6', 'py-
|
|
1
|
+
{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(\n Trigger,\n {\n base: [\n 'relative',\n 'bg-transparent',\n 'rounded-md',\n 'z-2',\n 'min-w-35',\n 'border-2',\n 'border-transparent',\n 'cursor-pointer',\n 'select-none',\n 'flex',\n 'flex-col',\n 'items-center',\n 'justify-center',\n 'data-[state=active]:border-2',\n 'data-[state=active]:border-transparent',\n 'data-[state=active]:focus-visible:border-primary-800',\n 'data-[state=active]:focus-visible:shadow-none',\n 'data-[state=active]:font-semibold',\n 'data-[state=active]:shadow-none',\n 'data-[state=active]:text-(--text-bold)',\n 'data-[state=inactive]:font-normal',\n 'data-[state=inactive]:text-grey-900',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'focus-visible:outline-none'\n ],\n variants: {\n theme: {\n primary: [\n 'data-[state=inactive]:hover:bg-primary-300',\n 'focus-visible:border-primary-800'\n ],\n marsh: [\n 'data-[state=inactive]:hover:bg-marsh-300',\n 'focus-visible:border-marsh-800'\n ]\n },\n size: {\n sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n }\n },\n defaultVariants: {\n size: 'md',\n theme: 'primary'\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = React.forwardRef<\n HTMLButtonElement,\n Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n const { size, theme } = React.useContext(SegmentedControlContext)\n// console.log({size})\n return (\n <StyledItem {...props} theme={theme} size={size} ref={ref}>\n {children}\n </StyledItem>\n )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,SACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,mCACD;GACD,OAAO,CACL,4CACA,iCACD;GACF;EACD,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;IAAO;GAC7C,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACvC,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACxC;EACF;CACD,iBAAiB;EACf,MAAM;EACN,OAAO;EACR;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,uBAAuB,QAAM,YAGvC,EAAE,UAAU,GAAG,SAAS,QAAQ;CACjC,MAAM,EAAE,MAAM,UAAU,QAAM,WAAW,wBAAwB;AAEjE,QACE,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAc;EAAa;EAAW;EAEzC,EADV,SACU;EAEf;AAEF,qBAAqB,cAAc"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -1402,7 +1402,7 @@ var ObserveBadgeTextOverflow = ({ elRef }) => {
|
|
|
1402
1402
|
return null;
|
|
1403
1403
|
};
|
|
1404
1404
|
var StyledBadgeText = styled(Text, {
|
|
1405
|
-
base: ["py-0.5"],
|
|
1405
|
+
base: ["py-0.5", "capsize-none"],
|
|
1406
1406
|
variants: { overflow: {
|
|
1407
1407
|
ellipsis: [
|
|
1408
1408
|
"overflow-x-hidden",
|
|
@@ -1422,7 +1422,6 @@ var BadgeText = ({ children, ...rest }) => {
|
|
|
1422
1422
|
const size = react.useMemo(() => overrideStyledVariantValue(badgeSize, (s) => toTextSize$1[s]), [badgeSize]);
|
|
1423
1423
|
const [elRef, setElRef] = useCallbackRefState();
|
|
1424
1424
|
return /* @__PURE__ */ react.createElement(react.Fragment, null, overflow === "ellipsis" && /* @__PURE__ */ react.createElement(ObserveBadgeTextOverflow, { elRef }), /* @__PURE__ */ react.createElement(StyledBadgeText, {
|
|
1425
|
-
noCapsize: true,
|
|
1426
1425
|
size,
|
|
1427
1426
|
overflow,
|
|
1428
1427
|
ref: setElRef,
|
|
@@ -9338,8 +9337,7 @@ var SegmentedControlDescription = (props) => {
|
|
|
9338
9337
|
const { size } = react.useContext(SegmentedControlContext);
|
|
9339
9338
|
return /* @__PURE__ */ react.createElement(StyledText, {
|
|
9340
9339
|
...props,
|
|
9341
|
-
size
|
|
9342
|
-
noCapsize: true
|
|
9340
|
+
size
|
|
9343
9341
|
});
|
|
9344
9342
|
};
|
|
9345
9343
|
//#endregion
|
|
@@ -9356,8 +9354,7 @@ var SegmentedControlHeading = (props) => {
|
|
|
9356
9354
|
const { size } = react.useContext(SegmentedControlContext);
|
|
9357
9355
|
return /* @__PURE__ */ react.createElement(StyledHeading, {
|
|
9358
9356
|
...props,
|
|
9359
|
-
size
|
|
9360
|
-
noCapsize: true
|
|
9357
|
+
size
|
|
9361
9358
|
});
|
|
9362
9359
|
};
|
|
9363
9360
|
//#endregion
|
|
@@ -9412,18 +9409,21 @@ var StyledItem = styled(_radix_ui_react_tabs.Trigger, {
|
|
|
9412
9409
|
size: {
|
|
9413
9410
|
sm: [
|
|
9414
9411
|
"flex-[unset]",
|
|
9412
|
+
"gap-3",
|
|
9415
9413
|
"px-6",
|
|
9416
|
-
"py-
|
|
9414
|
+
"py-4"
|
|
9417
9415
|
],
|
|
9418
9416
|
md: [
|
|
9419
9417
|
"flex-1",
|
|
9418
|
+
"gap-4",
|
|
9420
9419
|
"px-4",
|
|
9421
|
-
"py-
|
|
9420
|
+
"py-6"
|
|
9422
9421
|
],
|
|
9423
9422
|
lg: [
|
|
9424
9423
|
"flex-1",
|
|
9424
|
+
"gap-4",
|
|
9425
9425
|
"px-4",
|
|
9426
|
-
"py-
|
|
9426
|
+
"py-6"
|
|
9427
9427
|
]
|
|
9428
9428
|
}
|
|
9429
9429
|
},
|