@atom-learning/components 6.6.0-beta.2 → 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/banner/banner-slim/BannerSlimContainer.js +2 -2
- package/dist/components/banner/banner-slim/BannerSlimContainer.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlItem.js +7 -3
- package/dist/components/segmented-control/SegmentedControlItem.js.map +1 -1
- package/dist/index.cjs.js +10 -7
- package/dist/index.cjs.js.map +1 -1
- package/package.json +2 -1
- package/src/utilities.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"}
|
|
@@ -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"}
|
|
@@ -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,13 +39,13 @@ var StyledItem = styled(Trigger, {
|
|
|
39
39
|
size: {
|
|
40
40
|
sm: [
|
|
41
41
|
"flex-[unset]",
|
|
42
|
-
"gap-
|
|
42
|
+
"gap-3",
|
|
43
43
|
"px-6",
|
|
44
44
|
"py-4"
|
|
45
45
|
],
|
|
46
46
|
md: [
|
|
47
47
|
"flex-1",
|
|
48
|
-
"gap-
|
|
48
|
+
"gap-4",
|
|
49
49
|
"px-4",
|
|
50
50
|
"py-6"
|
|
51
51
|
],
|
|
@@ -56,6 +56,10 @@ var StyledItem = styled(Trigger, {
|
|
|
56
56
|
"py-6"
|
|
57
57
|
]
|
|
58
58
|
}
|
|
59
|
+
},
|
|
60
|
+
defaultVariants: {
|
|
61
|
+
size: "md",
|
|
62
|
+
theme: "primary"
|
|
59
63
|
}
|
|
60
64
|
}, { enabledResponsiveVariants: true });
|
|
61
65
|
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]', '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,
|
|
@@ -1944,9 +1943,9 @@ var BannerSlimContainer = (props) => {
|
|
|
1944
1943
|
return "flex-wrap md:flex-nowrap";
|
|
1945
1944
|
}, [size]);
|
|
1946
1945
|
return /* @__PURE__ */ react.createElement(StyledBannerSlimContainer, {
|
|
1946
|
+
...props,
|
|
1947
1947
|
sizeWorkaround: size,
|
|
1948
|
-
className: (0, clsx.default)(direction, align, "gap-4", wrap, props.className)
|
|
1949
|
-
...props
|
|
1948
|
+
className: (0, clsx.default)(direction, align, "gap-4", wrap, props.className)
|
|
1950
1949
|
});
|
|
1951
1950
|
};
|
|
1952
1951
|
BannerSlimContainer.displayName = "BannerSlimContainer";
|
|
@@ -9379,7 +9378,6 @@ var StyledItem = styled(_radix_ui_react_tabs.Trigger, {
|
|
|
9379
9378
|
"relative",
|
|
9380
9379
|
"bg-transparent",
|
|
9381
9380
|
"rounded-md",
|
|
9382
|
-
"p-0",
|
|
9383
9381
|
"z-2",
|
|
9384
9382
|
"min-w-35",
|
|
9385
9383
|
"border-2",
|
|
@@ -9389,6 +9387,7 @@ var StyledItem = styled(_radix_ui_react_tabs.Trigger, {
|
|
|
9389
9387
|
"flex",
|
|
9390
9388
|
"flex-col",
|
|
9391
9389
|
"items-center",
|
|
9390
|
+
"justify-center",
|
|
9392
9391
|
"data-[state=active]:border-2",
|
|
9393
9392
|
"data-[state=active]:border-transparent",
|
|
9394
9393
|
"data-[state=active]:focus-visible:border-primary-800",
|
|
@@ -9410,13 +9409,13 @@ var StyledItem = styled(_radix_ui_react_tabs.Trigger, {
|
|
|
9410
9409
|
size: {
|
|
9411
9410
|
sm: [
|
|
9412
9411
|
"flex-[unset]",
|
|
9413
|
-
"gap-
|
|
9412
|
+
"gap-3",
|
|
9414
9413
|
"px-6",
|
|
9415
9414
|
"py-4"
|
|
9416
9415
|
],
|
|
9417
9416
|
md: [
|
|
9418
9417
|
"flex-1",
|
|
9419
|
-
"gap-
|
|
9418
|
+
"gap-4",
|
|
9420
9419
|
"px-4",
|
|
9421
9420
|
"py-6"
|
|
9422
9421
|
],
|
|
@@ -9427,6 +9426,10 @@ var StyledItem = styled(_radix_ui_react_tabs.Trigger, {
|
|
|
9427
9426
|
"py-6"
|
|
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) => {
|