@traefik-labs/faency 12.0.10 → 12.0.12

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.
Files changed (5) hide show
  1. package/dist/components/Button/Button.cjs +4 -4
  2. package/dist/components/Button/Button.cjs.map +1 -1
  3. package/dist/components/Button/Button.js +4 -4
  4. package/dist/components/Button/Button.js.map +1 -1
  5. package/package.json +34 -28
package/dist/components/Button/Button.cjs CHANGED
@@ -115,7 +115,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
115
115
  },
116
116
  variant: {
117
117
  primary: {
118
- bc: "$primary",
118
+ bc: "$buttonPrimaryBg",
119
119
  c: "$buttonPrimaryText",
120
120
  "&:focus-visible": {
121
121
  boxShadow: "inset 0 0 0 2px $colors$buttonPrimaryFocusBorder"
@@ -123,7 +123,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
123
123
  "@hover": {
124
124
  "&:hover": {
125
125
  "&::after": {
126
- backgroundColor: "$primary"
126
+ backgroundColor: "$buttonPrimaryBg"
127
127
  }
128
128
  }
129
129
  }
@@ -141,7 +141,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
141
141
  "@hover": {
142
142
  "&:hover": {
143
143
  "&::after": {
144
- backgroundColor: "$primary"
144
+ backgroundColor: "$buttonPrimaryBg"
145
145
  }
146
146
  }
147
147
  }
@@ -196,7 +196,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
196
196
  variant: "primary",
197
197
  ghost: "true",
198
198
  css: {
199
- color: "$primary",
199
+ color: "$buttonPrimaryBg",
200
200
  backgroundColor: "transparent",
201
201
  "@hover": {
202
202
  "&:hover": {
package/dist/components/Button/Button.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.cjs","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$primary',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$primary',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$primary',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$primary',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":["keyframes","styled","Slot","useMemo"],"mappings":";;;;;;AAMO,MAAM,qBAAqB;AAAA,EAChC,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,yBAAyB;AAAA,EACzB,cAAc;AAAA,IACZ,eAAe;AAAA,IACf,SAAS;AAAA,EAAA;AAEb;AAEA,MAAM,WAAW;AAAA,EACf,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,0BAA0B,CAAC,UAAiC;AAAA,EAChE,UAAU,SAAS,IAAI;AAAA,EACvB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOjB,WAAW,GAAGA,0BAAU;AAAA,IACtB,QAAQ,EAAE,WAAW,uBAAA;AAAA,EAAuB,CAC7C,CAAC;AACJ;AAEO,MAAM,eAAeC,gBAAAA,OAAO,UAAU,oBAAoB;AAAA;AAAA,EAE/D,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,UAAU;AAAA,EAEV,aAAa;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAAA,EAET,YAAY;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAAA;AAAA,EAIT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAGZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,oBAAoB;AAAA,EAEpB,mBAAmB;AAAA,IACjB,WAAW;AAAA,IACX,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,IAEnB,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAGF,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,aAAa;AAAA,QACX,iBAAiB;AAAA,MAAA;AAAA,MAEnB,YAAY;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAGF,YAAY;AAAA,IACV,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAAA,EAGF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,QACL,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd,QAAQ;AAAA,QACN,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd,OAAO;AAAA,QACL,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,IAEF,SAAS;AAAA,MACP,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,mBAAmB;AAAA,UACjB,WAAW;AAAA,QAAA;AAAA,QAEb,UAAU;AAAA,UACR,WAAW;AAAA,YACT,YAAY;AAAA,cACV,iBAAiB;AAAA,YAAA;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,MAEF,WAAW;AAAA,QACT,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,WAAW;AAAA,QACX,YAAY;AAAA,UACV,WAAW;AAAA,QAAA;AAAA,QAEb,mBAAmB;AAAA,UACjB,WAAW;AAAA,QAAA;AAAA,QAEb,UAAU;AAAA,UACR,WAAW;AAAA,YACT,YAAY;AAAA,cACV,iBAAiB;AAAA,YAAA;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,MAEF,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,mBAAmB;AAAA,UACjB,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,IAEF,OAAO;AAAA,MACL,QAAQ;AAAA,QACN,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,YAAY;AAAA,UACV,iBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,MAEF,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,GAAG;AAAA,QACH,UAAU;AAAA,QACV,eAAe;AAAA,QACf,YAAY;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,UACP,GAAG,wBAAwB,QAAQ;AAAA,QAAA;AAAA,MACrC;AAAA,IACF;AAAA,IAEF,OAAO;AAAA,MACL,MAAM;AAAA,QACJ,WAAW;AAAA,QACX,UAAU;AAAA,UACR,WAAW;AAAA,YACT,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,IAEF,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,EACF;AAAA,EAEF,kBAAkB;AAAA,IAChB;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,UAAU;AAAA,UACR,WAAW;AAAA,YACT,OAAO;AAAA,YACP,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,UAAU;AAAA,UACR,WAAW;AAAA,YACT,OAAO;AAAA,YACP,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,QACH,YAAY,wBAAwB,OAAO;AAAA,MAAA;AAAA,IAC7C;AAAA,IAEF;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,QACH,YAAY,wBAAwB,OAAO;AAAA,MAAA;AAAA,IAC7C;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC;AACD,MAAM,mBAAmBA,gBAAAA,OAAOC,UAAAA,MAAM,YAAY;AAU3C,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,UAAU,SAAS,GAAG,MAAA,GAAS,iBAAiB;AACjD,UAAM,YAAYC,MAAAA,QAAQ,MAAO,UAAU,mBAAmB,cAAe,CAAC,OAAO,CAAC;AACtF,0CACG,WAAA,EAAU,KAAK,cAAe,GAAG,OAC/B,UACH;AAAA,EAEJ;AACF;;;;"}
1
+ {"version":3,"file":"Button.cjs","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":["keyframes","styled","Slot","useMemo"],"mappings":"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"}
package/dist/components/Button/Button.js CHANGED
@@ -113,7 +113,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
113
113
  },
114
114
  variant: {
115
115
  primary: {
116
- bc: "$primary",
116
+ bc: "$buttonPrimaryBg",
117
117
  c: "$buttonPrimaryText",
118
118
  "&:focus-visible": {
119
119
  boxShadow: "inset 0 0 0 2px $colors$buttonPrimaryFocusBorder"
@@ -121,7 +121,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
121
121
  "@hover": {
122
122
  "&:hover": {
123
123
  "&::after": {
124
- backgroundColor: "$primary"
124
+ backgroundColor: "$buttonPrimaryBg"
125
125
  }
126
126
  }
127
127
  }
@@ -139,7 +139,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
139
139
  "@hover": {
140
140
  "&:hover": {
141
141
  "&::after": {
142
- backgroundColor: "$primary"
142
+ backgroundColor: "$buttonPrimaryBg"
143
143
  }
144
144
  }
145
145
  }
@@ -194,7 +194,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
194
194
  variant: "primary",
195
195
  ghost: "true",
196
196
  css: {
197
- color: "$primary",
197
+ color: "$buttonPrimaryBg",
198
198
  backgroundColor: "transparent",
199
199
  "@hover": {
200
200
  "&:hover": {
package/dist/components/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$primary',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$primary',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$primary',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$primary',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@traefik-labs/faency",
3
3
  "description": "Traefik Labs design system",
4
- "version": "12.0.10",
4
+ "version": "12.0.12",
5
5
  "license": "Apache-2.0",
6
6
  "keywords": [
7
7
  "traefiklabs",
@@ -85,10 +85,10 @@
85
85
  "@radix-ui/react-use-layout-effect": "^1.0.0",
86
86
  "@radix-ui/react-visually-hidden": "^1.0.1",
87
87
  "@rehookify/datepicker": "^6.6.7",
88
- "@semantic-release/commit-analyzer": "^9.0.2",
89
- "@semantic-release/github": "^8.0.2",
90
- "@semantic-release/npm": "^9.0.0",
91
- "@semantic-release/release-notes-generator": "^10.0.3",
88
+ "@semantic-release/commit-analyzer": "^13.0.1",
89
+ "@semantic-release/github": "^12.0.6",
90
+ "@semantic-release/npm": "^13.1.5",
91
+ "@semantic-release/release-notes-generator": "^14.1.0",
92
92
  "@stitches/react": "1.2.8",
93
93
  "@storybook/addon-docs": "10.2.10",
94
94
  "@storybook/addon-links": "10.2.10",
@@ -107,7 +107,7 @@
107
107
  "@vanilla-extract/vite-plugin": "^5.1.1",
108
108
  "@vitejs/plugin-react": "^5.1.1",
109
109
  "babel-loader": "^8.2.2",
110
- "conventional-changelog-conventionalcommits": "^4.6.3",
110
+ "conventional-changelog-conventionalcommits": "^9.2.0",
111
111
  "cross-env": "^7.0.3",
112
112
  "date-fns": "^4.1.0",
113
113
  "husky": "^8.0.0",
@@ -118,21 +118,21 @@
118
118
  "prettier": "^3.6.2",
119
119
  "react": "18.2.0",
120
120
  "react-dom": "18.2.0",
121
- "semantic-release": "^19.0.2",
121
+ "semantic-release": "^25.0.3",
122
122
  "storybook": "10.2.10",
123
123
  "tinycolor2": "^1.4.2",
124
124
  "typescript": "^5.8.3",
125
125
  "use-debounce": "9.0.2",
126
- "vite": "7.1.3",
126
+ "vite": "7.1.11",
127
127
  "vite-plugin-dts": "^4.5.4"
128
128
  },
129
129
  "devDependencies": {
130
130
  "@eslint/compat": "^1.3.1",
131
131
  "@eslint/js": "^9.32.0",
132
- "@storybook/addon-docs": "10.0.8",
133
- "@storybook/addon-links": "10.0.8",
134
- "@storybook/builder-vite": "10.0.8",
135
- "@storybook/react-vite": "10.0.8",
132
+ "@storybook/addon-docs": "10.2.10",
133
+ "@storybook/addon-links": "10.2.10",
134
+ "@storybook/builder-vite": "10.2.10",
135
+ "@storybook/react-vite": "10.2.10",
136
136
  "@testing-library/jest-dom": "^5.16.5",
137
137
  "@testing-library/react": "^13.4.0",
138
138
  "@vueless/storybook-dark-mode": "^10.0.3",
@@ -148,9 +148,9 @@
148
148
  "globals": "^15.8.0",
149
149
  "jest": "^27.5.1",
150
150
  "jest-axe": "^6.0.0",
151
- "storybook": "10.0.8",
151
+ "storybook": "10.2.10",
152
152
  "typescript-eslint": "^8.38.0",
153
- "webpack": "^5.94.0"
153
+ "webpack": "5.104.1"
154
154
  },
155
155
  "resolutions": {
156
156
  "@typescript-eslint/project-service@^8.56.0": "8.56.0",
@@ -160,22 +160,23 @@
160
160
  "@typescript-eslint/typescript-estree@^8.56.0": "8.56.0",
161
161
  "@typescript-eslint/utils@^8.56.0": "8.56.0",
162
162
  "@typescript-eslint/visitor-keys@^8.56.0": "8.56.0",
163
- "balanced-match@^4.0.2": "4.0.3",
164
- "brace-expansion@^5.0.2": "5.0.2",
165
- "glob@^13.0.1": "13.0.5",
166
- "minimatch@^3.0.4": "3.1.2",
167
- "minimatch@^3.1.1": "3.1.2",
168
- "minimatch@^5.0.1": "5.1.2",
169
- "minimatch@^5.1.0": "5.1.2",
170
- "minimatch@^9.0.0": "9.0.5",
171
- "minimatch@^9.0.5": "9.0.5",
172
- "minimatch@^10.2.1": "10.2.1",
173
- "minimatch@^10.2.2": "10.2.1",
174
- "path-scurry@^2.0.0": "2.0.1"
163
+ "baseline-browser-mapping@^2.9.0": "2.10.8",
164
+ "browserslist@^4.28.1": "4.28.1",
165
+ "caniuse-lite@^1.0.30001759": "1.0.30001779",
166
+ "conventional-changelog-angular@^8.0.0": "8.3.0",
167
+ "conventional-changelog-conventionalcommits@^9.2.0": "9.2.0",
168
+ "conventional-commits-parser@^6.0.0": "6.3.0",
169
+ "electron-to-chromium@^1.5.263": "1.5.313",
170
+ "minimatch@^10.0.3": "10.2.4",
171
+ "minimatch@^10.1.1": "10.2.4",
172
+ "minimatch@^10.2.1": "10.2.4",
173
+ "minimatch@^10.2.2": "10.2.4",
174
+ "minimatch@^10.2.4": "10.2.4",
175
+ "undici@^7.0.0": "7.24.4"
175
176
  },
176
177
  "publishConfig": {
177
178
  "access": "public",
178
- "registry": "https://registry.npmjs.org"
179
+ "registry": "https://registry.npmjs.org/"
179
180
  },
180
181
  "lint-staged": {
181
182
  "*.{ts,tsx,js,jsx,css,md}": "prettier --write"
@@ -198,7 +199,12 @@
198
199
  "preset": "conventionalcommits"
199
200
  }
200
201
  ],
201
- "@semantic-release/npm",
202
+ [
203
+ "@semantic-release/npm",
204
+ {
205
+ "provenance": true
206
+ }
207
+ ],
202
208
  "@semantic-release/github"
203
209
  ]
204
210
  },