@atom-learning/components 6.6.0-beta.2 → 6.6.0-beta.3
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/banner/banner-slim/BannerSlimContainer.js +2 -2
- package/dist/components/banner/banner-slim/BannerSlimContainer.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlDescription.js +2 -1
- package/dist/components/segmented-control/SegmentedControlDescription.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlHeading.js +2 -1
- package/dist/components/segmented-control/SegmentedControlHeading.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlItem.js +8 -7
- package/dist/components/segmented-control/SegmentedControlItem.js.map +1 -1
- package/dist/index.cjs.js +14 -11
- package/dist/index.cjs.js.map +1 -1
- package/package.json +2 -1
- package/src/responsive-variant-classes.css +1 -1
- package/src/utilities.css +1 -1
|
@@ -38,9 +38,9 @@ var BannerSlimContainer = (props) => {
|
|
|
38
38
|
return "flex-wrap md:flex-nowrap";
|
|
39
39
|
}, [size]);
|
|
40
40
|
return /* @__PURE__ */ React$1.createElement(StyledBannerSlimContainer, {
|
|
41
|
+
...props,
|
|
41
42
|
sizeWorkaround: size,
|
|
42
|
-
className: clsx(direction, align, "gap-4", wrap, props.className)
|
|
43
|
-
...props
|
|
43
|
+
className: clsx(direction, align, "gap-4", wrap, props.className)
|
|
44
44
|
});
|
|
45
45
|
};
|
|
46
46
|
BannerSlimContainer.displayName = "BannerSlimContainer";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { BannerContainer } from '../BannerContainer'\nimport { useBannerContext } from '../BannerContext'\n\nconst toDirection = {\n sm: 'flex-col',\n md: 'flex-row'\n}\n\nconst toAlign = {\n sm: 'items-start',\n md: 'items-center'\n}\n\nconst toWrap = {\n sm: 'flex-wrap',\n md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n BannerContainer,\n {\n base: ['p-4'],\n variants: {\n sizeWorkaround: {\n sm: [],\n md: ['px-6']\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\ntype TBannerSlimContainerProps = React.ComponentProps<\n typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = (\n props: TBannerSlimContainerProps\n): JSX.Element => {\n const { size } = useBannerContext()\n\n const direction = React.useMemo(() => {\n if (typeof size === 'string') {\n return toDirection[size]\n }\n return 'flex-col md:flex-row'\n }, [size])\n\n const align = React.useMemo(() => {\n if (typeof size === 'string') {\n return toAlign[size]\n }\n return 'items-start md:items-center'\n }, [size])\n\n const wrap = React.useMemo(() => {\n if (typeof size === 'string') {\n return toWrap[size]\n }\n return 'flex-wrap md:flex-nowrap'\n }, [size])\n\n return (\n <StyledBannerSlimContainer\n sizeWorkaround={size}\n className={clsx(direction, align, 'gap-4', wrap, props.className)}\n
|
|
1
|
+
{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { BannerContainer } from '../BannerContainer'\nimport { useBannerContext } from '../BannerContext'\n\nconst toDirection = {\n sm: 'flex-col',\n md: 'flex-row'\n}\n\nconst toAlign = {\n sm: 'items-start',\n md: 'items-center'\n}\n\nconst toWrap = {\n sm: 'flex-wrap',\n md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n BannerContainer,\n {\n base: ['p-4'],\n variants: {\n sizeWorkaround: {\n sm: [],\n md: ['px-6']\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\ntype TBannerSlimContainerProps = React.ComponentProps<\n typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = (\n props: TBannerSlimContainerProps\n): JSX.Element => {\n const { size } = useBannerContext()\n\n const direction = React.useMemo(() => {\n if (typeof size === 'string') {\n return toDirection[size]\n }\n return 'flex-col md:flex-row'\n }, [size])\n\n const align = React.useMemo(() => {\n if (typeof size === 'string') {\n return toAlign[size]\n }\n return 'items-start md:items-center'\n }, [size])\n\n const wrap = React.useMemo(() => {\n if (typeof size === 'string') {\n return toWrap[size]\n }\n return 'flex-wrap md:flex-nowrap'\n }, [size])\n\n return (\n <StyledBannerSlimContainer\n {...props}\n sizeWorkaround={size}\n className={clsx(direction, align, 'gap-4', wrap, props.className)}\n />\n )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"mappings":";;;;;;AAQA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACL;AAED,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACL;AAED,IAAM,SAAS;CACb,IAAI;CACJ,IAAI;CACL;AAED,IAAM,4BAA4B,OAChC,iBACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU,EACR,gBAAgB;EACd,IAAI,EAAE;EACN,IAAI,CAAC,OAAO;EACb,EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAMD,IAAa,uBACX,UACgB;CAChB,MAAM,EAAE,SAAS,kBAAkB;CAEnC,MAAM,YAAY,QAAM,cAAc;AACpC,MAAI,OAAO,SAAS,SAClB,QAAO,YAAY;AAErB,SAAO;IACN,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,QAAM,cAAc;AAChC,MAAI,OAAO,SAAS,SAClB,QAAO,QAAQ;AAEjB,SAAO;IACN,CAAC,KAAK,CAAC;CAEV,MAAM,OAAO,QAAM,cAAc;AAC/B,MAAI,OAAO,SAAS,SAClB,QAAO,OAAO;AAEhB,SAAO;IACN,CAAC,KAAK,CAAC;AAEV,QACE,wBAAA,cAAC,2BAAD;EACE,GAAI;EACJ,gBAAgB;EAChB,WAAW,KAAK,WAAW,OAAO,SAAS,MAAM,MAAM,UAAU;EACjE,CAAA;;AAIN,oBAAoB,cAAc"}
|
|
@@ -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} />\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;
|
|
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} noCapsize />\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;EAAM,WAAA;EAAY,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} />\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;
|
|
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} noCapsize />\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;EAAM,WAAA;EAAY,CAAA"}
|
|
@@ -8,7 +8,6 @@ var StyledItem = styled(Trigger, {
|
|
|
8
8
|
"relative",
|
|
9
9
|
"bg-transparent",
|
|
10
10
|
"rounded-md",
|
|
11
|
-
"p-0",
|
|
12
11
|
"z-2",
|
|
13
12
|
"min-w-35",
|
|
14
13
|
"border-2",
|
|
@@ -18,6 +17,7 @@ var StyledItem = styled(Trigger, {
|
|
|
18
17
|
"flex",
|
|
19
18
|
"flex-col",
|
|
20
19
|
"items-center",
|
|
20
|
+
"justify-center",
|
|
21
21
|
"data-[state=active]:border-2",
|
|
22
22
|
"data-[state=active]:border-transparent",
|
|
23
23
|
"data-[state=active]:focus-visible:border-primary-800",
|
|
@@ -39,23 +39,24 @@ var StyledItem = styled(Trigger, {
|
|
|
39
39
|
size: {
|
|
40
40
|
sm: [
|
|
41
41
|
"flex-[unset]",
|
|
42
|
-
"gap-2",
|
|
43
42
|
"px-6",
|
|
44
|
-
"py-
|
|
43
|
+
"py-[11px]"
|
|
45
44
|
],
|
|
46
45
|
md: [
|
|
47
46
|
"flex-1",
|
|
48
|
-
"gap-3",
|
|
49
47
|
"px-4",
|
|
50
|
-
"py-
|
|
48
|
+
"py-[19px]"
|
|
51
49
|
],
|
|
52
50
|
lg: [
|
|
53
51
|
"flex-1",
|
|
54
|
-
"gap-4",
|
|
55
52
|
"px-4",
|
|
56
|
-
"py-
|
|
53
|
+
"py-[19px]"
|
|
57
54
|
]
|
|
58
55
|
}
|
|
56
|
+
},
|
|
57
|
+
defaultVariants: {
|
|
58
|
+
size: "md",
|
|
59
|
+
theme: "primary"
|
|
59
60
|
}
|
|
60
61
|
}, { enabledResponsiveVariants: true });
|
|
61
62
|
var SegmentedControlItem = React$1.forwardRef(({ children, ...props }, ref) => {
|
|
@@ -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 '
|
|
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-[11px]'],\n md: ['flex-1', 'px-4', 'py-[19px]'],\n lg: ['flex-1', 'px-4', 'py-[19px]']\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;IAAQ;IAAY;GACzC,IAAI;IAAC;IAAU;IAAQ;IAAY;GACnC,IAAI;IAAC;IAAU;IAAQ;IAAY;GACpC;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
|
@@ -1944,9 +1944,9 @@ var BannerSlimContainer = (props) => {
|
|
|
1944
1944
|
return "flex-wrap md:flex-nowrap";
|
|
1945
1945
|
}, [size]);
|
|
1946
1946
|
return /* @__PURE__ */ react.createElement(StyledBannerSlimContainer, {
|
|
1947
|
+
...props,
|
|
1947
1948
|
sizeWorkaround: size,
|
|
1948
|
-
className: (0, clsx.default)(direction, align, "gap-4", wrap, props.className)
|
|
1949
|
-
...props
|
|
1949
|
+
className: (0, clsx.default)(direction, align, "gap-4", wrap, props.className)
|
|
1950
1950
|
});
|
|
1951
1951
|
};
|
|
1952
1952
|
BannerSlimContainer.displayName = "BannerSlimContainer";
|
|
@@ -9338,7 +9338,8 @@ var SegmentedControlDescription = (props) => {
|
|
|
9338
9338
|
const { size } = react.useContext(SegmentedControlContext);
|
|
9339
9339
|
return /* @__PURE__ */ react.createElement(StyledText, {
|
|
9340
9340
|
...props,
|
|
9341
|
-
size
|
|
9341
|
+
size,
|
|
9342
|
+
noCapsize: true
|
|
9342
9343
|
});
|
|
9343
9344
|
};
|
|
9344
9345
|
//#endregion
|
|
@@ -9355,7 +9356,8 @@ var SegmentedControlHeading = (props) => {
|
|
|
9355
9356
|
const { size } = react.useContext(SegmentedControlContext);
|
|
9356
9357
|
return /* @__PURE__ */ react.createElement(StyledHeading, {
|
|
9357
9358
|
...props,
|
|
9358
|
-
size
|
|
9359
|
+
size,
|
|
9360
|
+
noCapsize: true
|
|
9359
9361
|
});
|
|
9360
9362
|
};
|
|
9361
9363
|
//#endregion
|
|
@@ -9379,7 +9381,6 @@ var StyledItem = styled(_radix_ui_react_tabs.Trigger, {
|
|
|
9379
9381
|
"relative",
|
|
9380
9382
|
"bg-transparent",
|
|
9381
9383
|
"rounded-md",
|
|
9382
|
-
"p-0",
|
|
9383
9384
|
"z-2",
|
|
9384
9385
|
"min-w-35",
|
|
9385
9386
|
"border-2",
|
|
@@ -9389,6 +9390,7 @@ var StyledItem = styled(_radix_ui_react_tabs.Trigger, {
|
|
|
9389
9390
|
"flex",
|
|
9390
9391
|
"flex-col",
|
|
9391
9392
|
"items-center",
|
|
9393
|
+
"justify-center",
|
|
9392
9394
|
"data-[state=active]:border-2",
|
|
9393
9395
|
"data-[state=active]:border-transparent",
|
|
9394
9396
|
"data-[state=active]:focus-visible:border-primary-800",
|
|
@@ -9410,23 +9412,24 @@ var StyledItem = styled(_radix_ui_react_tabs.Trigger, {
|
|
|
9410
9412
|
size: {
|
|
9411
9413
|
sm: [
|
|
9412
9414
|
"flex-[unset]",
|
|
9413
|
-
"gap-2",
|
|
9414
9415
|
"px-6",
|
|
9415
|
-
"py-
|
|
9416
|
+
"py-[11px]"
|
|
9416
9417
|
],
|
|
9417
9418
|
md: [
|
|
9418
9419
|
"flex-1",
|
|
9419
|
-
"gap-3",
|
|
9420
9420
|
"px-4",
|
|
9421
|
-
"py-
|
|
9421
|
+
"py-[19px]"
|
|
9422
9422
|
],
|
|
9423
9423
|
lg: [
|
|
9424
9424
|
"flex-1",
|
|
9425
|
-
"gap-4",
|
|
9426
9425
|
"px-4",
|
|
9427
|
-
"py-
|
|
9426
|
+
"py-[19px]"
|
|
9428
9427
|
]
|
|
9429
9428
|
}
|
|
9429
|
+
},
|
|
9430
|
+
defaultVariants: {
|
|
9431
|
+
size: "md",
|
|
9432
|
+
theme: "primary"
|
|
9430
9433
|
}
|
|
9431
9434
|
}, { enabledResponsiveVariants: true });
|
|
9432
9435
|
var SegmentedControlItem = react.forwardRef(({ children, ...props }, ref) => {
|