@stackframe/stack 2.4.1 → 2.4.4

package/dist/esm/components-core/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-core/input.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { ColorPalette, useDesign } from \"../providers/design-provider\";\nimport styled from 'styled-components';\nimport { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES, PRIMARY_FONT_COLORS, SECONDARY_FONT_COLORS } from \"../utils/constants\";\n\ntype InputProps = React.InputHTMLAttributes<HTMLInputElement> & Pick<React.HTMLProps<HTMLInputElement>, 'ref'>\n\n\nconst StyledInput = styled.input<{\n  $colors: ColorPalette,\n}>`\n  font-family: ${FONT_FAMILY};\n  font-size: ${FONT_SIZES.md};\n  height: 2.5rem;\n  border-radius: ${BORDER_RADIUS};\n  background-color: transparent;\n  border: 1px solid;\n  padding: 0rem 1rem;\n  &:disabled {\n    cursor: auto;\n    opacity: 0.5;\n  }\n  &[type=file]::file-selector-button{\n    border: none;\n    background-color: transparent;\n    height: 2.5rem;\n    margin-right: 0.5rem;\n    padding: 0;\n  }\n\n  border-color: ${props => props.$colors.light.neutralColor};\n  color: ${PRIMARY_FONT_COLORS.light};\n  &::placeholder {\n    color: ${SECONDARY_FONT_COLORS.light};\n  }\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ${props => props.$colors.light.primaryColor};\n  }\n  &[type=file] {\n    color: ${SECONDARY_FONT_COLORS.light};\n  }\n  &[type=file]::file-selector-button{\n    color: ${PRIMARY_FONT_COLORS.light};\n  }\n\n  html[data-theme='dark'] & {\n    border-color: ${props => props.$colors.dark.neutralColor};\n    color: ${PRIMARY_FONT_COLORS.dark};\n    &::placeholder {\n      color: ${SECONDARY_FONT_COLORS.dark};\n    }\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${props => props.$colors.dark.primaryColor};\n    }\n    &[type=file] {\n      color: ${SECONDARY_FONT_COLORS.dark};\n    }\n    &[type=file]::file-selector-button{\n      color: ${PRIMARY_FONT_COLORS.dark};\n    }\n  }\n`;\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (props, ref) => {\n    const { colors } = useDesign();\n    return (\n      <StyledInput\n        ref={ref}\n        $colors={colors}\n        {...props}\n      />\n    );\n  }\n);\nInput.displayName = 'Input';\n\nexport { Input };"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,SAAuB,iBAAiB;AACxC,OAAO,YAAY;AACnB,SAAS,eAAe,aAAa,YAAY,qBAAqB,6BAA6B;AAkE7F;AA7DN,IAAM,cAAc,OAAO;AAAA,iBAGV,WAAW;AAAA,eACb,WAAW,EAAE;AAAA;AAAA,mBAET,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBd,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA,WAChD,oBAAoB,KAAK;AAAA;AAAA,aAEvB,sBAAsB,KAAK;AAAA;AAAA;AAAA;AAAA,4BAIZ,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA;AAAA;AAAA,aAGxD,sBAAsB,KAAK;AAAA;AAAA;AAAA,aAG3B,oBAAoB,KAAK;AAAA;AAAA;AAAA;AAAA,oBAIlB,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA,aAC/C,oBAAoB,IAAI;AAAA;AAAA,eAEtB,sBAAsB,IAAI;AAAA;AAAA;AAAA;AAAA,8BAIX,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA;AAAA;AAAA,eAGvD,sBAAsB,IAAI;AAAA;AAAA;AAAA,eAG1B,oBAAoB,IAAI;AAAA;AAAA;AAAA;AAKvC,IAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACR,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components-core/input.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { ColorPalette, useDesign } from \"../providers/design-provider\";\nimport styled from 'styled-components';\nimport { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES, PRIMARY_FONT_COLORS, SECONDARY_FONT_COLORS } from \"../utils/constants\";\n\ntype InputProps = React.InputHTMLAttributes<HTMLInputElement> & Pick<React.HTMLProps<HTMLInputElement>, 'ref'>\n\n\nconst StyledInput = styled.input<{\n  $colors: ColorPalette,\n}>`\n  font-family: ${FONT_FAMILY};\n  font-size: ${FONT_SIZES.md};\n  height: 2.5rem;\n  border-radius: ${BORDER_RADIUS};\n  background-color: transparent;\n  border: 1px solid;\n  padding: 0rem 1rem;\n  &:disabled {\n    cursor: auto;\n    opacity: 0.5;\n  }\n  &[type=file]::file-selector-button{\n    border: none;\n    background-color: transparent;\n    height: 2.5rem;\n    margin-right: 0.5rem;\n    padding: 0;\n  }\n\n  border-color: ${props => props.$colors.light.neutralColor};\n  color: ${PRIMARY_FONT_COLORS.light};\n  &::placeholder {\n    color: ${SECONDARY_FONT_COLORS.light};\n  }\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ${props => props.$colors.light.primaryColor};\n  }\n  &[type=file] {\n    color: ${SECONDARY_FONT_COLORS.light};\n  }\n  &[type=file]::file-selector-button{\n    color: ${PRIMARY_FONT_COLORS.light};\n  }\n\n  html[data-stack-theme='dark'] & {\n    border-color: ${props => props.$colors.dark.neutralColor};\n    color: ${PRIMARY_FONT_COLORS.dark};\n    &::placeholder {\n      color: ${SECONDARY_FONT_COLORS.dark};\n    }\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${props => props.$colors.dark.primaryColor};\n    }\n    &[type=file] {\n      color: ${SECONDARY_FONT_COLORS.dark};\n    }\n    &[type=file]::file-selector-button{\n      color: ${PRIMARY_FONT_COLORS.dark};\n    }\n  }\n`;\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (props, ref) => {\n    const { colors } = useDesign();\n    return (\n      <StyledInput\n        ref={ref}\n        $colors={colors}\n        {...props}\n      />\n    );\n  }\n);\nInput.displayName = 'Input';\n\nexport { Input };"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,SAAuB,iBAAiB;AACxC,OAAO,YAAY;AACnB,SAAS,eAAe,aAAa,YAAY,qBAAqB,6BAA6B;AAkE7F;AA7DN,IAAM,cAAc,OAAO;AAAA,iBAGV,WAAW;AAAA,eACb,WAAW,EAAE;AAAA;AAAA,mBAET,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBd,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA,WAChD,oBAAoB,KAAK;AAAA;AAAA,aAEvB,sBAAsB,KAAK;AAAA;AAAA;AAAA;AAAA,4BAIZ,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA;AAAA;AAAA,aAGxD,sBAAsB,KAAK;AAAA;AAAA;AAAA,aAG3B,oBAAoB,KAAK;AAAA;AAAA;AAAA;AAAA,oBAIlB,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA,aAC/C,oBAAoB,IAAI;AAAA;AAAA,eAEtB,sBAAsB,IAAI;AAAA;AAAA;AAAA;AAAA,8BAIX,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA;AAAA;AAAA,eAGvD,sBAAsB,IAAI;AAAA;AAAA;AAAA,eAG1B,oBAAoB,IAAI;AAAA;AAAA;AAAA;AAKvC,IAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACR,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":[]}

package/dist/esm/components-core/label.js

@@ -17,7 +17,7 @@ var Primitive = styled(LabelPrimitive.Root)`
 
   color: ${SECONDARY_FONT_COLORS.light};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     color: ${SECONDARY_FONT_COLORS.dark};
   }
 `;

package/dist/esm/components-core/label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-core/label.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport styled from 'styled-components';\nimport { FONT_FAMILY, FONT_SIZES, SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport { useDesign } from \"../providers/design-provider\";\n\nconst Primitive = styled(LabelPrimitive.Root)`\n  font-size: ${FONT_SIZES.sm};\n  line-height: 1;\n  font-weight: 500;\n  font-family: ${FONT_FAMILY};\n  display: block;\n  margin-bottom: 0.5rem;\n\n  color: ${SECONDARY_FONT_COLORS.light};\n\n  html[data-theme='dark'] & {\n    color: ${SECONDARY_FONT_COLORS.dark};\n  }\n`;\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(\n  (props, ref) => {\n    return <Primitive\n      ref={ref}\n      {...props}\n    />;\n  }\n);\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,YAAY,oBAAoB;AAChC,OAAO,YAAY;AACnB,SAAS,aAAa,YAAY,6BAA6B;AAuBpD;AApBX,IAAM,YAAY,OAAsB,mBAAI;AAAA,eAC7B,WAAW,EAAE;AAAA;AAAA;AAAA,iBAGX,WAAW;AAAA;AAAA;AAAA;AAAA,WAIjB,sBAAsB,KAAK;AAAA;AAAA;AAAA,aAGzB,sBAAsB,IAAI;AAAA;AAAA;AAIvC,IAAM,QAAQ,MAAM;AAAA,EAIlB,CAAC,OAAO,QAAQ;AACd,WAAO;AAAA,MAAC;AAAA;AAAA,QACN;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EACF;AACF;AACA,MAAM,cAA6B,oBAAK;","names":[]}
+{"version":3,"sources":["../../../src/components-core/label.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport styled from 'styled-components';\nimport { FONT_FAMILY, FONT_SIZES, SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport { useDesign } from \"../providers/design-provider\";\n\nconst Primitive = styled(LabelPrimitive.Root)`\n  font-size: ${FONT_SIZES.sm};\n  line-height: 1;\n  font-weight: 500;\n  font-family: ${FONT_FAMILY};\n  display: block;\n  margin-bottom: 0.5rem;\n\n  color: ${SECONDARY_FONT_COLORS.light};\n\n  html[data-stack-theme='dark'] & {\n    color: ${SECONDARY_FONT_COLORS.dark};\n  }\n`;\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(\n  (props, ref) => {\n    return <Primitive\n      ref={ref}\n      {...props}\n    />;\n  }\n);\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,YAAY,oBAAoB;AAChC,OAAO,YAAY;AACnB,SAAS,aAAa,YAAY,6BAA6B;AAuBpD;AApBX,IAAM,YAAY,OAAsB,mBAAI;AAAA,eAC7B,WAAW,EAAE;AAAA;AAAA;AAAA,iBAGX,WAAW;AAAA;AAAA;AAAA;AAAA,WAIjB,sBAAsB,KAAK;AAAA;AAAA;AAAA,aAGzB,sBAAsB,IAAI;AAAA;AAAA;AAIvC,IAAM,QAAQ,MAAM;AAAA,EAIlB,CAAC,OAAO,QAAQ;AACd,WAAO;AAAA,MAAC;AAAA;AAAA,QACN;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EACF;AACF;AACA,MAAM,cAA6B,oBAAK;","names":[]}

package/dist/esm/components-core/link.js

@@ -18,7 +18,7 @@ var StyledNextLink = styled(NextLink)`
 
   color: ${LINK_COLORS.light};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     color: ${LINK_COLORS.dark};
   }
 `;

package/dist/esm/components-core/link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-core/link.tsx"],"sourcesContent":["'use client';\n\nimport NextLink from \"next/link\";\nimport { FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, LINK_COLORS } from \"../utils/constants\";\nimport { Url } from \"url\";\nimport React from \"react\";\nimport styled from \"styled-components\";\n\ntype LinkProps = {\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n  href: Url | string,\n} & Omit<React.HTMLProps<HTMLLinkElement>, 'size' | 'href'>\n\nconst StyledNextLink = styled(NextLink)<{ \n  $size: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n}>`\n  font-size: ${props => FONT_SIZES[props.$size]};\n  line-height: ${props => LINE_HEIGHTS[props.$size]};\n  font-weight: 500;\n  font-family: ${FONT_FAMILY};\n  text-decoration: underline;\n  margin: 0;\n  padding: 0;\n\n  color: ${LINK_COLORS.light};\n\n  html[data-theme='dark'] & {\n    color: ${LINK_COLORS.dark};\n  }\n`;\n\nexport const Link = React.forwardRef<\n  React.ElementRef<typeof StyledNextLink>,\n  LinkProps\n>(({ size='md', href, ...props }, ref) => {\n  return (\n    <StyledNextLink\n      $size={size}\n      href={href}\n      style={props.style}\n      children={props.children}\n    />\n  );\n});"],"mappings":";;;AAEA,OAAO,cAAc;AACrB,SAAS,aAAa,YAAY,cAAc,mBAAmB;AAEnE,OAAO,WAAW;AAClB,OAAO,YAAY;AA8Bf;AAvBJ,IAAM,iBAAiB,OAAO,QAAQ;AAAA,eAGvB,WAAS,WAAW,MAAM,KAAK,CAAC;AAAA,iBAC9B,WAAS,aAAa,MAAM,KAAK,CAAC;AAAA;AAAA,iBAElC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,WAKjB,YAAY,KAAK;AAAA;AAAA;AAAA,aAGf,YAAY,IAAI;AAAA;AAAA;AAItB,IAAM,OAAO,MAAM,WAGxB,CAAC,EAAE,OAAK,MAAM,MAAM,GAAG,MAAM,GAAG,QAAQ;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,OAAO,MAAM;AAAA,MACb,UAAU,MAAM;AAAA;AAAA,EAClB;AAEJ,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components-core/link.tsx"],"sourcesContent":["'use client';\n\nimport NextLink from \"next/link\";\nimport { FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, LINK_COLORS } from \"../utils/constants\";\nimport { Url } from \"url\";\nimport React from \"react\";\nimport styled from \"styled-components\";\n\ntype LinkProps = {\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n  href: Url | string,\n} & Omit<React.HTMLProps<HTMLLinkElement>, 'size' | 'href'>\n\nconst StyledNextLink = styled(NextLink)<{ \n  $size: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n}>`\n  font-size: ${props => FONT_SIZES[props.$size]};\n  line-height: ${props => LINE_HEIGHTS[props.$size]};\n  font-weight: 500;\n  font-family: ${FONT_FAMILY};\n  text-decoration: underline;\n  margin: 0;\n  padding: 0;\n\n  color: ${LINK_COLORS.light};\n\n  html[data-stack-theme='dark'] & {\n    color: ${LINK_COLORS.dark};\n  }\n`;\n\nexport const Link = React.forwardRef<\n  React.ElementRef<typeof StyledNextLink>,\n  LinkProps\n>(({ size='md', href, ...props }, ref) => {\n  return (\n    <StyledNextLink\n      $size={size}\n      href={href}\n      style={props.style}\n      children={props.children}\n    />\n  );\n});"],"mappings":";;;AAEA,OAAO,cAAc;AACrB,SAAS,aAAa,YAAY,cAAc,mBAAmB;AAEnE,OAAO,WAAW;AAClB,OAAO,YAAY;AA8Bf;AAvBJ,IAAM,iBAAiB,OAAO,QAAQ;AAAA,eAGvB,WAAS,WAAW,MAAM,KAAK,CAAC;AAAA,iBAC9B,WAAS,aAAa,MAAM,KAAK,CAAC;AAAA;AAAA,iBAElC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,WAKjB,YAAY,KAAK;AAAA;AAAA;AAAA,aAGf,YAAY,IAAI;AAAA;AAAA;AAItB,IAAM,OAAO,MAAM,WAGxB,CAAC,EAAE,OAAK,MAAM,MAAM,GAAG,MAAM,GAAG,QAAQ;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,OAAO,MAAM;AAAA,MACb,UAAU,MAAM;AAAA;AAAA,EAClB;AAEJ,CAAC;","names":[]}

package/dist/esm/components-core/loading-indicator.js

@@ -17,7 +17,7 @@ var LoadingIndicator = styled.div`
 
   --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.color.light} 90%, #0000);
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.color.dark} 90%, #0000);
   }
 `;

package/dist/esm/components-core/loading-indicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-core/loading-indicator.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nconst l7 = keyframes`\n  33% { background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%; }\n  50% { background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%; }\n  66% { background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%; }\n`;\n\nconst LoadingIndicator = styled.div<{ color: { light: string, dark: string }, size?: number }>`\n  width: ${props => props.size || 36}px;\n  aspect-ratio: 4;\n  background: \n    var(--_g) 0% 50%, \n    var(--_g) 50% 50%, \n    var(--_g) 100% 50%;\n  background-size: calc(100%/3) 100%;\n  animation: ${l7} 1s infinite linear;\n\n  --_g: no-repeat radial-gradient(circle closest-side, ${props => props.color.light} 90%, #0000);\n\n  html[data-theme='dark'] & {\n    --_g: no-repeat radial-gradient(circle closest-side, ${props => props.color.dark} 90%, #0000);\n  }\n`;\nexport default LoadingIndicator;"],"mappings":";AAAA,OAAO,UAAU,iBAAiB;AAElC,IAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAMX,IAAM,mBAAmB,OAAO;AAAA,WACrB,WAAS,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOrB,EAAE;AAAA;AAAA,yDAEwC,WAAS,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,2DAGxB,WAAS,MAAM,MAAM,IAAI;AAAA;AAAA;AAGpF,IAAO,4BAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components-core/loading-indicator.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nconst l7 = keyframes`\n  33% { background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%; }\n  50% { background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%; }\n  66% { background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%; }\n`;\n\nconst LoadingIndicator = styled.div<{ color: { light: string, dark: string }, size?: number }>`\n  width: ${props => props.size || 36}px;\n  aspect-ratio: 4;\n  background: \n    var(--_g) 0% 50%, \n    var(--_g) 50% 50%, \n    var(--_g) 100% 50%;\n  background-size: calc(100%/3) 100%;\n  animation: ${l7} 1s infinite linear;\n\n  --_g: no-repeat radial-gradient(circle closest-side, ${props => props.color.light} 90%, #0000);\n\n  html[data-stack-theme='dark'] & {\n    --_g: no-repeat radial-gradient(circle closest-side, ${props => props.color.dark} 90%, #0000);\n  }\n`;\nexport default LoadingIndicator;"],"mappings":";AAAA,OAAO,UAAU,iBAAiB;AAElC,IAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAMX,IAAM,mBAAmB,OAAO;AAAA,WACrB,WAAS,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOrB,EAAE;AAAA;AAAA,yDAEwC,WAAS,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,2DAGxB,WAAS,MAAM,MAAM,IAAI;AAAA;AAAA;AAGpF,IAAO,4BAAQ;","names":[]}

package/dist/esm/components-core/popover.js

@@ -17,7 +17,7 @@ var StyledContent = styled(PopoverPrimitive.Content)`
   border: 1px solid ${({ $colors }) => $colors.light.neutralColor};
   background-color: ${({ $colors }) => $colors.light.backgroundColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     border-color: ${({ $colors }) => $colors.dark.neutralColor};
     background-color: ${({ $colors }) => $colors.dark.backgroundColor};
   }

package/dist/esm/components-core/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-core/popover.tsx"],"sourcesContent":["import React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport styled, { css } from 'styled-components';\nimport { useDesign } from '..';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst StyledContent = styled(PopoverPrimitive.Content)<{\n  $colors: ColorPalette,\n}>`\n  z-index: 50;\n  width: 18rem;\n  border-radius: 0.375rem;\n  padding: 1rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  outline: none;\n\n  border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n  background-color: ${({ $colors }) => $colors.light.backgroundColor};\n\n  html[data-theme='dark'] & {\n    border-color: ${({ $colors }) => $colors.dark.neutralColor};\n    background-color: ${({ $colors }) => $colors.dark.backgroundColor};\n  }\n`;\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ align = 'center', sideOffset = 4, ...props }, ref) => {\n  const { colors } = useDesign();\n  return (\n    <PopoverPrimitive.Portal>\n      <StyledContent\n        $colors={colors}\n        ref={ref}\n        align={align}\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n});\nPopoverContent.displayName = 'PopoverContent';\n\nexport { Popover, PopoverTrigger, PopoverContent };\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,YAAY,sBAAsB;AAClC,OAAO,YAAqB;AAC5B,SAAS,iBAAiB;AAiCpB;AA9BN,IAAM,UAA2B;AAEjC,IAAM,iBAAkC;AAExC,IAAM,gBAAgB,OAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAU/B,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA,sBAC3C,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA,oBAGhD,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA,wBACtC,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAIrE,IAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,QAAQ,UAAU,aAAa,GAAG,GAAG,MAAM,GAAG,QAAQ;AACzD,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SACE,oBAAkB,yBAAjB,EACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AACD,eAAe,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components-core/popover.tsx"],"sourcesContent":["import React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport styled, { css } from 'styled-components';\nimport { useDesign } from '..';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst StyledContent = styled(PopoverPrimitive.Content)<{\n  $colors: ColorPalette,\n}>`\n  z-index: 50;\n  width: 18rem;\n  border-radius: 0.375rem;\n  padding: 1rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  outline: none;\n\n  border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n  background-color: ${({ $colors }) => $colors.light.backgroundColor};\n\n  html[data-stack-theme='dark'] & {\n    border-color: ${({ $colors }) => $colors.dark.neutralColor};\n    background-color: ${({ $colors }) => $colors.dark.backgroundColor};\n  }\n`;\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ align = 'center', sideOffset = 4, ...props }, ref) => {\n  const { colors } = useDesign();\n  return (\n    <PopoverPrimitive.Portal>\n      <StyledContent\n        $colors={colors}\n        ref={ref}\n        align={align}\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n});\nPopoverContent.displayName = 'PopoverContent';\n\nexport { Popover, PopoverTrigger, PopoverContent };\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,YAAY,sBAAsB;AAClC,OAAO,YAAqB;AAC5B,SAAS,iBAAiB;AAiCpB;AA9BN,IAAM,UAA2B;AAEjC,IAAM,iBAAkC;AAExC,IAAM,gBAAgB,OAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAU/B,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA,sBAC3C,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA,oBAGhD,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA,wBACtC,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAIrE,IAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,QAAQ,UAAU,aAAa,GAAG,GAAG,MAAM,GAAG,QAAQ;AACzD,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SACE,oBAAkB,yBAAjB,EACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AACD,eAAe,cAAc;","names":[]}

package/dist/esm/components-core/separator.js

@@ -13,7 +13,7 @@ var StyledSeparator = styled(SeparatorPrimitive.Root)`
   
   background-color: ${(props) => props.$color.light.neutralColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     background-color: ${(props) => props.$color.dark.neutralColor};
   }
 `;

package/dist/esm/components-core/separator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-core/separator.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport styled from 'styled-components';\nimport { useDesign } from '..';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst StyledSeparator = styled(SeparatorPrimitive.Root)<{ \n  $orientation: string,\n  $color: ColorPalette,\n}>`\n  flex-shrink: 0;\n  ${(props) =>\n    props.$orientation === 'horizontal'\n      ? 'height: 1px; width: 100%;'\n      : 'height: 100%; width: 1px;'}\n  \n  background-color: ${props => props.$color.light.neutralColor};\n\n  html[data-theme='dark'] & {\n    background-color: ${props => props.$color.dark.neutralColor};\n  }\n`;\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(({ orientation = 'horizontal', decorative = true, ...props }, ref) => {\n  const { colors } = useDesign();\n\n  return <StyledSeparator\n    ref={ref}\n    decorative={decorative}\n    $orientation={orientation}\n    $color={colors}\n    {...props}\n  />;\n});\n\nSeparator.displayName = 'Separator';\n\nexport { Separator };\n"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,YAAY,wBAAwB;AACpC,OAAO,YAAY;AACnB,SAAS,iBAAiB;AA0BjB;AAvBT,IAAM,kBAAkB,OAA0B,uBAAI;AAAA;AAAA,IAKlD,CAAC,UACD,MAAM,iBAAiB,eACnB,8BACA,2BAA2B;AAAA;AAAA,sBAEb,WAAS,MAAM,OAAO,MAAM,YAAY;AAAA;AAAA;AAAA,wBAGtC,WAAS,MAAM,OAAO,KAAK,YAAY;AAAA;AAAA;AAI/D,IAAM,YAAY,MAAM,WAGtB,CAAC,EAAE,cAAc,cAAc,aAAa,MAAM,GAAG,MAAM,GAAG,QAAQ;AACtE,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,SAAO;AAAA,IAAC;AAAA;AAAA,MACN;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,QAAQ;AAAA,MACP,GAAG;AAAA;AAAA,EACN;AACF,CAAC;AAED,UAAU,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components-core/separator.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport styled from 'styled-components';\nimport { useDesign } from '..';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst StyledSeparator = styled(SeparatorPrimitive.Root)<{ \n  $orientation: string,\n  $color: ColorPalette,\n}>`\n  flex-shrink: 0;\n  ${(props) =>\n    props.$orientation === 'horizontal'\n      ? 'height: 1px; width: 100%;'\n      : 'height: 100%; width: 1px;'}\n  \n  background-color: ${props => props.$color.light.neutralColor};\n\n  html[data-stack-theme='dark'] & {\n    background-color: ${props => props.$color.dark.neutralColor};\n  }\n`;\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(({ orientation = 'horizontal', decorative = true, ...props }, ref) => {\n  const { colors } = useDesign();\n\n  return <StyledSeparator\n    ref={ref}\n    decorative={decorative}\n    $orientation={orientation}\n    $color={colors}\n    {...props}\n  />;\n});\n\nSeparator.displayName = 'Separator';\n\nexport { Separator };\n"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,YAAY,wBAAwB;AACpC,OAAO,YAAY;AACnB,SAAS,iBAAiB;AA0BjB;AAvBT,IAAM,kBAAkB,OAA0B,uBAAI;AAAA;AAAA,IAKlD,CAAC,UACD,MAAM,iBAAiB,eACnB,8BACA,2BAA2B;AAAA;AAAA,sBAEb,WAAS,MAAM,OAAO,MAAM,YAAY;AAAA;AAAA;AAAA,wBAGtC,WAAS,MAAM,OAAO,KAAK,YAAY;AAAA;AAAA;AAI/D,IAAM,YAAY,MAAM,WAGtB,CAAC,EAAE,cAAc,cAAc,aAAa,MAAM,GAAG,MAAM,GAAG,QAAQ;AACtE,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,SAAO;AAAA,IAAC;AAAA;AAAA,MACN;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,QAAQ;AAAA,MACP,GAAG;AAAA;AAAA,EACN;AACF,CAAC;AAED,UAAU,cAAc;","names":[]}

package/dist/esm/components-core/skeleton.js

@@ -30,7 +30,7 @@ var Primitive = styled("span")`
     animation: ${animationLight} 1s infinite alternate-reverse !important;
   }
 
-  html[data-theme='dark'] &[data-stack-state="activated"] {
+  html[data-stack-theme='dark'] &[data-stack-state="activated"] {
     animation: ${animationDark} 1s infinite alternate-reverse !important;
   }
 `;

package/dist/esm/components-core/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-core/skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport styled, { keyframes } from 'styled-components';\n\nconst getFilterString = (brightness1: number, brightness2: number) => {\n  return `\n    0% {\n      filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(${brightness1});\n    }\n    100% {\n      filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(${brightness2});\n    }\n  `;\n};\n\nconst animationLight = keyframes`${getFilterString(0.8, 0.9)}`;\nconst animationDark = keyframes`${getFilterString(0.2, 0.1)}`;\n\nconst Primitive = styled(\"span\")`\n  &[data-stack-state=\"activated\"], &[data-stack-state=\"activated\"] * {\n    pointer-events: none !important;\n    -webkit-user-select: none !important;\n    -moz-user-select: none !important;\n    user-select: none !important;\n    cursor: default !important;\n  }\n\n  &[data-stack-state=\"activated\"] {\n    animation: ${animationLight} 1s infinite alternate-reverse !important;\n  }\n\n  html[data-theme='dark'] &[data-stack-state=\"activated\"] {\n    animation: ${animationDark} 1s infinite alternate-reverse !important;\n  }\n`;\n\nconst Skeleton = React.forwardRef<\n  React.ElementRef<\"span\">,\n  React.ComponentPropsWithoutRef<\"span\"> & { deactivated?: boolean }\n>(\n  (props, ref) => {\n    return <Primitive\n      ref={ref}\n      data-stack-state={props.deactivated ? \"deactivated\" : \"activated\"}\n      {...props}\n    />;\n  }\n);\nSkeleton.displayName = \"Skeleton\";\n\nexport { Skeleton };\n"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,OAAO,UAAU,iBAAiB;AAuCvB;AArCX,IAAM,kBAAkB,CAAC,aAAqB,gBAAwB;AACpE,SAAO;AAAA;AAAA,4EAEmE,WAAW;AAAA;AAAA;AAAA,4EAGX,WAAW;AAAA;AAAA;AAGvF;AAEA,IAAM,iBAAiB,YAAY,gBAAgB,KAAK,GAAG,CAAC;AAC5D,IAAM,gBAAgB,YAAY,gBAAgB,KAAK,GAAG,CAAC;AAE3D,IAAM,YAAY,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAUd,cAAc;AAAA;AAAA;AAAA;AAAA,iBAId,aAAa;AAAA;AAAA;AAI9B,IAAM,WAAW,MAAM;AAAA,EAIrB,CAAC,OAAO,QAAQ;AACd,WAAO;AAAA,MAAC;AAAA;AAAA,QACN;AAAA,QACA,oBAAkB,MAAM,cAAc,gBAAgB;AAAA,QACrD,GAAG;AAAA;AAAA,IACN;AAAA,EACF;AACF;AACA,SAAS,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components-core/skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport styled, { keyframes } from 'styled-components';\n\nconst getFilterString = (brightness1: number, brightness2: number) => {\n  return `\n    0% {\n      filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(${brightness1});\n    }\n    100% {\n      filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(${brightness2});\n    }\n  `;\n};\n\nconst animationLight = keyframes`${getFilterString(0.8, 0.9)}`;\nconst animationDark = keyframes`${getFilterString(0.2, 0.1)}`;\n\nconst Primitive = styled(\"span\")`\n  &[data-stack-state=\"activated\"], &[data-stack-state=\"activated\"] * {\n    pointer-events: none !important;\n    -webkit-user-select: none !important;\n    -moz-user-select: none !important;\n    user-select: none !important;\n    cursor: default !important;\n  }\n\n  &[data-stack-state=\"activated\"] {\n    animation: ${animationLight} 1s infinite alternate-reverse !important;\n  }\n\n  html[data-stack-theme='dark'] &[data-stack-state=\"activated\"] {\n    animation: ${animationDark} 1s infinite alternate-reverse !important;\n  }\n`;\n\nconst Skeleton = React.forwardRef<\n  React.ElementRef<\"span\">,\n  React.ComponentPropsWithoutRef<\"span\"> & { deactivated?: boolean }\n>(\n  (props, ref) => {\n    return <Primitive\n      ref={ref}\n      data-stack-state={props.deactivated ? \"deactivated\" : \"activated\"}\n      {...props}\n    />;\n  }\n);\nSkeleton.displayName = \"Skeleton\";\n\nexport { Skeleton };\n"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,OAAO,UAAU,iBAAiB;AAuCvB;AArCX,IAAM,kBAAkB,CAAC,aAAqB,gBAAwB;AACpE,SAAO;AAAA;AAAA,4EAEmE,WAAW;AAAA;AAAA;AAAA,4EAGX,WAAW;AAAA;AAAA;AAGvF;AAEA,IAAM,iBAAiB,YAAY,gBAAgB,KAAK,GAAG,CAAC;AAC5D,IAAM,gBAAgB,YAAY,gBAAgB,KAAK,GAAG,CAAC;AAE3D,IAAM,YAAY,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAUd,cAAc;AAAA;AAAA;AAAA;AAAA,iBAId,aAAa;AAAA;AAAA;AAI9B,IAAM,WAAW,MAAM;AAAA,EAIrB,CAAC,OAAO,QAAQ;AACd,WAAO;AAAA,MAAC;AAAA;AAAA,QACN;AAAA,QACA,oBAAkB,MAAM,cAAc,gBAAgB;AAAA,QACrD,GAAG;AAAA;AAAA,IACN;AAAA,EACF;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/esm/components-core/tabs.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import styled from "styled-components";
-import { useDesign } from "..";
+import { Text, useDesign } from "..";
 import { jsx } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
 var StyledTabsList = styled(TabsPrimitive.List)`
@@ -15,7 +15,7 @@ var StyledTabsList = styled(TabsPrimitive.List)`
 
   background-color: rgb(244, 244, 245);
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     background-color: rgb(39, 39, 42);
   }
 `;
@@ -49,20 +49,21 @@ var StyledTabsTrigger = styled(TabsPrimitive.Trigger)`
     background-color: ${({ $colors }) => $colors.light.backgroundColor};
   }
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     &[data-state='active'] {
       background-color: ${({ $colors }) => $colors.dark.backgroundColor};
     }
   }
 `;
-var TabsTrigger = React.forwardRef((props, ref) => {
+var TabsTrigger = React.forwardRef(({ children, ...props }, ref) => {
   const { colors } = useDesign();
   return /* @__PURE__ */ jsx(
     StyledTabsTrigger,
     {
       $colors: colors,
       ...props,
-      ref
+      ref,
+      children: /* @__PURE__ */ jsx(Text, { children })
     }
   );
 });

package/dist/esm/components-core/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-core/tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport styled from 'styled-components';\nimport { useDesign } from '..';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst Tabs = TabsPrimitive.Root;\n\nconst StyledTabsList = styled(TabsPrimitive.List)`\n  display: flex;\n  height: 2.5rem\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.375rem;\n  padding: 0.25rem;\n\n  background-color: rgb(244, 244, 245);\n\n  html[data-theme='dark'] & {\n    background-color: rgb(39, 39, 42);\n  }\n`;\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentProps<typeof TabsPrimitive.List>\n>((props, ref) => {\n  return <StyledTabsList\n    {...props} \n    ref={ref} \n  />;\n});\n\nconst StyledTabsTrigger = styled(TabsPrimitive.Trigger)<{\n  $colors: ColorPalette,\n}>`\n  all: unset;\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  border-radius: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  transition: all;\n  outline: none;\n\n  &:disabled {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  &[data-state='active'] {\n    background-color: ${({ $colors }) => $colors.light.backgroundColor};\n  }\n\n  html[data-theme='dark'] & {\n    &[data-state='active'] {\n      background-color: ${({ $colors }) => $colors.dark.backgroundColor};\n    }\n  }\n`;\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentProps<typeof TabsPrimitive.Trigger>\n>((props, ref) => {\n  const { colors } = useDesign();\n  return <StyledTabsTrigger \n    $colors={colors}\n    {...props} \n    ref={ref} \n  />;\n});\n\nconst StyledTabsContent = styled(TabsPrimitive.Content)`\n  margin-top: 1.5rem;\n`;\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentProps<typeof TabsPrimitive.Content>\n>((props, ref) => {\n  return <StyledTabsContent {...props} ref={ref} />;\n});\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,YAAY,mBAAmB;AAC/B,OAAO,YAAY;AACnB,SAAS,iBAAiB;AAwBjB;AArBT,IAAM,OAAqB;AAE3B,IAAM,iBAAiB,OAAqB,kBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAehD,IAAM,WAAiB,iBAGrB,CAAC,OAAO,QAAQ;AAChB,SAAO;AAAA,IAAC;AAAA;AAAA,MACL,GAAG;AAAA,MACJ;AAAA;AAAA,EACF;AACF,CAAC;AAED,IAAM,oBAAoB,OAAqB,qBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoB9B,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK5C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAAA;AAKvE,IAAM,cAAoB,iBAGxB,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SAAO;AAAA,IAAC;AAAA;AAAA,MACN,SAAS;AAAA,MACR,GAAG;AAAA,MACJ;AAAA;AAAA,EACF;AACF,CAAC;AAED,IAAM,oBAAoB,OAAqB,qBAAO;AAAA;AAAA;AAItD,IAAM,cAAoB,iBAGxB,CAAC,OAAO,QAAQ;AAChB,SAAO,oBAAC,qBAAmB,GAAG,OAAO,KAAU;AACjD,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components-core/tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport styled from 'styled-components';\nimport { Text, useDesign } from '..';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst Tabs = TabsPrimitive.Root;\n\nconst StyledTabsList = styled(TabsPrimitive.List)`\n  display: flex;\n  height: 2.5rem\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.375rem;\n  padding: 0.25rem;\n\n  background-color: rgb(244, 244, 245);\n\n  html[data-stack-theme='dark'] & {\n    background-color: rgb(39, 39, 42);\n  }\n`;\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentProps<typeof TabsPrimitive.List>\n>((props, ref) => {\n  return <StyledTabsList\n    {...props} \n    ref={ref} \n  />;\n});\n\nconst StyledTabsTrigger = styled(TabsPrimitive.Trigger)<{\n  $colors: ColorPalette,\n}>`\n  all: unset;\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  border-radius: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  transition: all;\n  outline: none;\n\n  &:disabled {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  &[data-state='active'] {\n    background-color: ${({ $colors }) => $colors.light.backgroundColor};\n  }\n\n  html[data-stack-theme='dark'] & {\n    &[data-state='active'] {\n      background-color: ${({ $colors }) => $colors.dark.backgroundColor};\n    }\n  }\n`;\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentProps<typeof TabsPrimitive.Trigger>\n>(({children, ...props}, ref) => {\n  const { colors } = useDesign();\n  return <StyledTabsTrigger \n    $colors={colors}\n    {...props} \n    ref={ref} \n  >\n    <Text>{children}</Text>\n  </StyledTabsTrigger>;\n});\n\nconst StyledTabsContent = styled(TabsPrimitive.Content)`\n  margin-top: 1.5rem;\n`;\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentProps<typeof TabsPrimitive.Content>\n>((props, ref) => {\n  return <StyledTabsContent {...props} ref={ref} />;\n});\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,YAAY,mBAAmB;AAC/B,OAAO,YAAY;AACnB,SAAS,MAAM,iBAAiB;AAwBvB;AArBT,IAAM,OAAqB;AAE3B,IAAM,iBAAiB,OAAqB,kBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAehD,IAAM,WAAiB,iBAGrB,CAAC,OAAO,QAAQ;AAChB,SAAO;AAAA,IAAC;AAAA;AAAA,MACL,GAAG;AAAA,MACJ;AAAA;AAAA,EACF;AACF,CAAC;AAED,IAAM,oBAAoB,OAAqB,qBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoB9B,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK5C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAAA;AAKvE,IAAM,cAAoB,iBAGxB,CAAC,EAAC,UAAU,GAAG,MAAK,GAAG,QAAQ;AAC/B,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SAAO;AAAA,IAAC;AAAA;AAAA,MACN,SAAS;AAAA,MACR,GAAG;AAAA,MACJ;AAAA,MAEA,8BAAC,QAAM,UAAS;AAAA;AAAA,EAClB;AACF,CAAC;AAED,IAAM,oBAAoB,OAAqB,qBAAO;AAAA;AAAA;AAItD,IAAM,cAAoB,iBAGxB,CAAC,OAAO,QAAQ;AAChB,SAAO,oBAAC,qBAAmB,GAAG,OAAO,KAAU;AACjD,CAAC;","names":[]}

package/dist/esm/components-core/text.js

@@ -19,7 +19,7 @@ var StyledComponents = typedFromEntries(components.map((component) => {
       padding: 0;
       color: ${(props) => props.$textColor.light};
       
-      html[data-theme='dark'] & {
+      html[data-stack-theme='dark'] & {
         color: ${(props) => props.$textColor.dark};
       }
     `

package/dist/esm/components-core/text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-core/text.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { createElement } from \"react\";\nimport { FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, PRIMARY_FONT_COLORS, SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport styled from \"styled-components\";\nimport { typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\n\nconst components = ['p', 'h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const;\nconst StyledComponents = typedFromEntries(components.map((component) => {\n  return [\n    component,\n    styled(component)<{\n      $size: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n      $textColor: { light: string, dark: string },\n    }>`\n      font-family: ${FONT_FAMILY};\n      font-size: ${props => FONT_SIZES[props.$size]};\n      line-height: ${props => LINE_HEIGHTS[props.$size]};\n      margin: 0;\n      padding: 0;\n      color: ${props => props.$textColor.light};\n      \n      html[data-theme='dark'] & {\n        color: ${props => props.$textColor.dark};\n      }\n    `\n  ] as const;\n}));\n\n\ntype TextProps = {\n  variant?: 'primary' | 'secondary' | 'warning' | 'success',\n  as?: 'p' | 'h6'| 'h5' | 'h4' | 'h3' | 'h2' | 'h1',\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n} & Omit<React.HTMLProps<HTMLParagraphElement>, 'size'>\n\nconst Text = React.forwardRef<HTMLParagraphElement, TextProps>(({\n  variant='primary',\n  size='md',\n  as='p',\n  ...props\n} : TextProps, ref) => {\n  let textColor: { light: string, dark: string };\n  switch (variant) {\n    case 'primary': {\n      textColor = PRIMARY_FONT_COLORS;\n      break;\n    }\n    case 'secondary': {\n      textColor = SECONDARY_FONT_COLORS;\n      break;\n    }\n    case 'warning': {\n      textColor = { light: '#b33b1d', dark: '#ff7b5c' };\n      break;\n    }\n    case 'success': {\n      textColor = { light: '#3da63d', dark: '#3da63d' };\n      break;\n    }\n  }\n  return createElement(StyledComponents[as], {\n    $size: size,\n    $textColor: textColor,\n    ...props,\n    ref,\n  });\n});\n\nText.displayName = 'Text';\n\nexport { Text };"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,YAAY,cAAc,qBAAqB,6BAA6B;AAClG,OAAO,YAAY;AACnB,SAAS,wBAAwB;AAEjC,IAAM,aAAa,CAAC,KAAK,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI;AAC3D,IAAM,mBAAmB,iBAAiB,WAAW,IAAI,CAAC,cAAc;AACtE,SAAO;AAAA,IACL;AAAA,IACA,OAAO,SAAS;AAAA,qBAIC,WAAW;AAAA,mBACb,WAAS,WAAW,MAAM,KAAK,CAAC;AAAA,qBAC9B,WAAS,aAAa,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,eAGxC,WAAS,MAAM,WAAW,KAAK;AAAA;AAAA;AAAA,iBAG7B,WAAS,MAAM,WAAW,IAAI;AAAA;AAAA;AAAA,EAG7C;AACF,CAAC,CAAC;AASF,IAAM,OAAO,MAAM,WAA4C,CAAC;AAAA,EAC9D,UAAQ;AAAA,EACR,OAAK;AAAA,EACL,KAAG;AAAA,EACH,GAAG;AACL,GAAe,QAAQ;AACrB,MAAI;AACJ,UAAQ,SAAS;AAAA,IACf,KAAK,WAAW;AACd,kBAAY;AACZ;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,kBAAY;AACZ;AAAA,IACF;AAAA,IACA,KAAK,WAAW;AACd,kBAAY,EAAE,OAAO,WAAW,MAAM,UAAU;AAChD;AAAA,IACF;AAAA,IACA,KAAK,WAAW;AACd,kBAAY,EAAE,OAAO,WAAW,MAAM,UAAU;AAChD;AAAA,IACF;AAAA,EACF;AACA,SAAO,cAAc,iBAAiB,EAAE,GAAG;AAAA,IACzC,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;AAED,KAAK,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components-core/text.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { createElement } from \"react\";\nimport { FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, PRIMARY_FONT_COLORS, SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport styled from \"styled-components\";\nimport { typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\n\nconst components = ['p', 'h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const;\nconst StyledComponents = typedFromEntries(components.map((component) => {\n  return [\n    component,\n    styled(component)<{\n      $size: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n      $textColor: { light: string, dark: string },\n    }>`\n      font-family: ${FONT_FAMILY};\n      font-size: ${props => FONT_SIZES[props.$size]};\n      line-height: ${props => LINE_HEIGHTS[props.$size]};\n      margin: 0;\n      padding: 0;\n      color: ${props => props.$textColor.light};\n      \n      html[data-stack-theme='dark'] & {\n        color: ${props => props.$textColor.dark};\n      }\n    `\n  ] as const;\n}));\n\n\ntype TextProps = {\n  variant?: 'primary' | 'secondary' | 'warning' | 'success',\n  as?: 'p' | 'h6'| 'h5' | 'h4' | 'h3' | 'h2' | 'h1',\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n} & Omit<React.HTMLProps<HTMLParagraphElement>, 'size'>\n\nconst Text = React.forwardRef<HTMLParagraphElement, TextProps>(({\n  variant='primary',\n  size='md',\n  as='p',\n  ...props\n} : TextProps, ref) => {\n  let textColor: { light: string, dark: string };\n  switch (variant) {\n    case 'primary': {\n      textColor = PRIMARY_FONT_COLORS;\n      break;\n    }\n    case 'secondary': {\n      textColor = SECONDARY_FONT_COLORS;\n      break;\n    }\n    case 'warning': {\n      textColor = { light: '#b33b1d', dark: '#ff7b5c' };\n      break;\n    }\n    case 'success': {\n      textColor = { light: '#3da63d', dark: '#3da63d' };\n      break;\n    }\n  }\n  return createElement(StyledComponents[as], {\n    $size: size,\n    $textColor: textColor,\n    ...props,\n    ref,\n  });\n});\n\nText.displayName = 'Text';\n\nexport { Text };"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,YAAY,cAAc,qBAAqB,6BAA6B;AAClG,OAAO,YAAY;AACnB,SAAS,wBAAwB;AAEjC,IAAM,aAAa,CAAC,KAAK,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI;AAC3D,IAAM,mBAAmB,iBAAiB,WAAW,IAAI,CAAC,cAAc;AACtE,SAAO;AAAA,IACL;AAAA,IACA,OAAO,SAAS;AAAA,qBAIC,WAAW;AAAA,mBACb,WAAS,WAAW,MAAM,KAAK,CAAC;AAAA,qBAC9B,WAAS,aAAa,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,eAGxC,WAAS,MAAM,WAAW,KAAK;AAAA;AAAA;AAAA,iBAG7B,WAAS,MAAM,WAAW,IAAI;AAAA;AAAA;AAAA,EAG7C;AACF,CAAC,CAAC;AASF,IAAM,OAAO,MAAM,WAA4C,CAAC;AAAA,EAC9D,UAAQ;AAAA,EACR,OAAK;AAAA,EACL,KAAG;AAAA,EACH,GAAG;AACL,GAAe,QAAQ;AACrB,MAAI;AACJ,UAAQ,SAAS;AAAA,IACf,KAAK,WAAW;AACd,kBAAY;AACZ;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,kBAAY;AACZ;AAAA,IACF;AAAA,IACA,KAAK,WAAW;AACd,kBAAY,EAAE,OAAO,WAAW,MAAM,UAAU;AAChD;AAAA,IACF;AAAA,IACA,KAAK,WAAW;AACd,kBAAY,EAAE,OAAO,WAAW,MAAM,UAAU;AAChD;AAAA,IACF;AAAA,EACF;AACA,SAAO,cAAc,iBAAiB,EAAE,GAAG;AAAA,IACzC,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;AAED,KAAK,cAAc;","names":[]}

package/dist/esm/components-page/auth-page.js

@@ -13,12 +13,13 @@ import MagicLinkSignIn from "../components/magic-link-sign-in";
 import { jsx, jsxs } from "react/jsx-runtime";
 function AuthPage({
   fullPage = false,
-  type
+  type,
+  mockProject
 }) {
   const stackApp = useStackApp();
   const user = useUser();
-  const project = stackApp.useProject();
-  if (user) {
+  const project = mockProject || stackApp.useProject();
+  if (user && !mockProject) {
     return /* @__PURE__ */ jsx(RedirectMessageCard, { type: "signedIn", fullPage });
   }
   const enableSeparator = (project.credentialEnabled || project.magicLinkEnabled) && project.oauthProviders.filter((p) => p.enabled).length > 0;
@@ -33,7 +34,7 @@ function AuthPage({
         /* @__PURE__ */ jsx(Link, { href: stackApp.urls.signIn, children: "Sign in" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(OAuthGroup, { type: "signin" }),
+    /* @__PURE__ */ jsx(OAuthGroup, { type: "signin", mockProject }),
     enableSeparator && /* @__PURE__ */ jsx(SeparatorWithText, { text: "Or continue with" }),
     project.credentialEnabled && project.magicLinkEnabled ? /* @__PURE__ */ jsxs(Tabs, { defaultValue: "magic-link", children: [
       /* @__PURE__ */ jsxs(TabsList, { children: [

package/dist/esm/components-page/auth-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport CredentialSignIn from '../components/credential-sign-in';\nimport SeparatorWithText from '../components/separator-with-text';\nimport OAuthGroup from '../components/oauth-group';\nimport CardFrame from '../components/card-frame';\nimport { useUser, useStackApp, CredentialSignUp } from '..';\nimport RedirectMessageCard from '../components/redirect-message-card';\nimport { Link, Tabs, TabsContent, TabsList, TabsTrigger, Text } from \"../components-core\";\nimport MagicLinkSignIn from '../components/magic-link-sign-in';\n\nexport default function AuthPage({ \n  fullPage=false,\n  type\n}: { \n  fullPage?: boolean, \n  type: 'sign-in' | 'sign-up',\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const project = stackApp.useProject();\n\n  if (user) {\n    return <RedirectMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  const enableSeparator = (project.credentialEnabled || project.magicLinkEnabled) && project.oauthProviders.filter(p => p.enabled).length > 0;\n\n  return (\n    <CardFrame fullPage={fullPage}>\n      <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>\n        <Text size=\"xl\" as='h2'>{type === 'sign-in' ? 'Sign in to your account' : 'Create a new account'}</Text>\n        {type === 'sign-in' ? (\n          <Text>\n            {\"Don't have an account? \"}\n            <Link href={stackApp.urls.signUp}>\n              Sign up\n            </Link>\n          </Text>\n        ) : (\n          <Text>\n            {\"Already have an account? \"}\n            <Link href={stackApp.urls.signIn}>\n              Sign in\n            </Link>\n          </Text>\n        )}\n      </div>\n      <OAuthGroup type='signin'/>\n      {enableSeparator && <SeparatorWithText text={'Or continue with'} />}\n      {project.credentialEnabled && project.magicLinkEnabled ? (\n        <Tabs defaultValue='magic-link'>\n          <TabsList>\n            <TabsTrigger value='magic-link'>Magic Link</TabsTrigger>\n            <TabsTrigger value='password'>Password</TabsTrigger>\n          </TabsList>\n          <TabsContent value='magic-link'>\n            <MagicLinkSignIn/>\n          </TabsContent>\n          <TabsContent value='password'>\n            {type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>}\n          </TabsContent>\n        </Tabs>\n      ) : project.credentialEnabled ? (\n        type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>\n      ) : project.magicLinkEnabled ? (\n        <MagicLinkSignIn/>\n      ) : null}\n    </CardFrame>\n  );\n}\n"],"mappings":";;;AAEA,OAAO,sBAAsB;AAC7B,OAAO,uBAAuB;AAC9B,OAAO,gBAAgB;AACvB,OAAO,eAAe;AACtB,SAAS,SAAS,aAAa,wBAAwB;AACvD,OAAO,yBAAyB;AAChC,SAAS,MAAM,MAAM,aAAa,UAAU,aAAa,YAAY;AACrE,OAAO,qBAAqB;AAcjB,cAUD,YAVC;AAZI,SAAR,SAA0B;AAAA,EAC/B,WAAS;AAAA,EACT;AACF,GAGG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,UAAU,SAAS,WAAW;AAEpC,MAAI,MAAM;AACR,WAAO,oBAAC,uBAAoB,MAAK,YAAW,UAAoB;AAAA,EAClE;AAEA,QAAM,mBAAmB,QAAQ,qBAAqB,QAAQ,qBAAqB,QAAQ,eAAe,OAAO,OAAK,EAAE,OAAO,EAAE,SAAS;AAE1I,SACE,qBAAC,aAAU,UACT;AAAA,yBAAC,SAAI,OAAO,EAAE,WAAW,UAAU,cAAc,SAAS,GACxD;AAAA,0BAAC,QAAK,MAAK,MAAK,IAAG,MAAM,mBAAS,YAAY,4BAA4B,wBAAuB;AAAA,MAChG,SAAS,YACR,qBAAC,QACE;AAAA;AAAA,QACD,oBAAC,QAAK,MAAM,SAAS,KAAK,QAAQ,qBAElC;AAAA,SACF,IAEA,qBAAC,QACE;AAAA;AAAA,QACD,oBAAC,QAAK,MAAM,SAAS,KAAK,QAAQ,qBAElC;AAAA,SACF;AAAA,OAEJ;AAAA,IACA,oBAAC,cAAW,MAAK,UAAQ;AAAA,IACxB,mBAAmB,oBAAC,qBAAkB,MAAM,oBAAoB;AAAA,IAChE,QAAQ,qBAAqB,QAAQ,mBACpC,qBAAC,QAAK,cAAa,cACjB;AAAA,2BAAC,YACC;AAAA,4BAAC,eAAY,OAAM,cAAa,wBAAU;AAAA,QAC1C,oBAAC,eAAY,OAAM,YAAW,sBAAQ;AAAA,SACxC;AAAA,MACA,oBAAC,eAAY,OAAM,cACjB,8BAAC,mBAAe,GAClB;AAAA,MACA,oBAAC,eAAY,OAAM,YAChB,mBAAS,YAAY,oBAAC,oBAAgB,IAAK,oBAAC,oBAAgB,GAC/D;AAAA,OACF,IACE,QAAQ,oBACV,SAAS,YAAY,oBAAC,oBAAgB,IAAK,oBAAC,oBAAgB,IAC1D,QAAQ,mBACV,oBAAC,mBAAe,IACd;AAAA,KACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport CredentialSignIn from '../components/credential-sign-in';\nimport SeparatorWithText from '../components/separator-with-text';\nimport OAuthGroup from '../components/oauth-group';\nimport CardFrame from '../components/card-frame';\nimport { useUser, useStackApp, CredentialSignUp } from '..';\nimport RedirectMessageCard from '../components/redirect-message-card';\nimport { Link, Tabs, TabsContent, TabsList, TabsTrigger, Text } from \"../components-core\";\nimport MagicLinkSignIn from '../components/magic-link-sign-in';\nimport { ClientProjectJson } from \"@stackframe/stack-shared\";\n\nexport default function AuthPage({ \n  fullPage=false,\n  type,\n  mockProject,\n}: { \n  fullPage?: boolean, \n  type: 'sign-in' | 'sign-up',\n  mockProject?: ClientProjectJson,\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const project = mockProject || stackApp.useProject();\n\n  if (user && !mockProject) {\n    return <RedirectMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  const enableSeparator = (project.credentialEnabled || project.magicLinkEnabled) && project.oauthProviders.filter(p => p.enabled).length > 0;\n\n  return (\n    <CardFrame fullPage={fullPage}>\n      <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>\n        <Text size=\"xl\" as='h2'>{type === 'sign-in' ? 'Sign in to your account' : 'Create a new account'}</Text>\n        {type === 'sign-in' ? (\n          <Text>\n            {\"Don't have an account? \"}\n            <Link href={stackApp.urls.signUp}>\n              Sign up\n            </Link>\n          </Text>\n        ) : (\n          <Text>\n            {\"Already have an account? \"}\n            <Link href={stackApp.urls.signIn}>\n              Sign in\n            </Link>\n          </Text>\n        )}\n      </div>\n      <OAuthGroup type='signin' mockProject={mockProject} />\n      {enableSeparator && <SeparatorWithText text={'Or continue with'} />}\n      {project.credentialEnabled && project.magicLinkEnabled ? (\n        <Tabs defaultValue='magic-link'>\n          <TabsList>\n            <TabsTrigger value='magic-link'>Magic Link</TabsTrigger>\n            <TabsTrigger value='password'>Password</TabsTrigger>\n          </TabsList>\n          <TabsContent value='magic-link'>\n            <MagicLinkSignIn/>\n          </TabsContent>\n          <TabsContent value='password'>\n            {type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>}\n          </TabsContent>\n        </Tabs>\n      ) : project.credentialEnabled ? (\n        type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>\n      ) : project.magicLinkEnabled ? (\n        <MagicLinkSignIn/>\n      ) : null}\n    </CardFrame>\n  );\n}\n"],"mappings":";;;AAEA,OAAO,sBAAsB;AAC7B,OAAO,uBAAuB;AAC9B,OAAO,gBAAgB;AACvB,OAAO,eAAe;AACtB,SAAS,SAAS,aAAa,wBAAwB;AACvD,OAAO,yBAAyB;AAChC,SAAS,MAAM,MAAM,aAAa,UAAU,aAAa,YAAY;AACrE,OAAO,qBAAqB;AAiBjB,cAUD,YAVC;AAdI,SAAR,SAA0B;AAAA,EAC/B,WAAS;AAAA,EACT;AAAA,EACA;AACF,GAIG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,UAAU,eAAe,SAAS,WAAW;AAEnD,MAAI,QAAQ,CAAC,aAAa;AACxB,WAAO,oBAAC,uBAAoB,MAAK,YAAW,UAAoB;AAAA,EAClE;AAEA,QAAM,mBAAmB,QAAQ,qBAAqB,QAAQ,qBAAqB,QAAQ,eAAe,OAAO,OAAK,EAAE,OAAO,EAAE,SAAS;AAE1I,SACE,qBAAC,aAAU,UACT;AAAA,yBAAC,SAAI,OAAO,EAAE,WAAW,UAAU,cAAc,SAAS,GACxD;AAAA,0BAAC,QAAK,MAAK,MAAK,IAAG,MAAM,mBAAS,YAAY,4BAA4B,wBAAuB;AAAA,MAChG,SAAS,YACR,qBAAC,QACE;AAAA;AAAA,QACD,oBAAC,QAAK,MAAM,SAAS,KAAK,QAAQ,qBAElC;AAAA,SACF,IAEA,qBAAC,QACE;AAAA;AAAA,QACD,oBAAC,QAAK,MAAM,SAAS,KAAK,QAAQ,qBAElC;AAAA,SACF;AAAA,OAEJ;AAAA,IACA,oBAAC,cAAW,MAAK,UAAS,aAA0B;AAAA,IACnD,mBAAmB,oBAAC,qBAAkB,MAAM,oBAAoB;AAAA,IAChE,QAAQ,qBAAqB,QAAQ,mBACpC,qBAAC,QAAK,cAAa,cACjB;AAAA,2BAAC,YACC;AAAA,4BAAC,eAAY,OAAM,cAAa,wBAAU;AAAA,QAC1C,oBAAC,eAAY,OAAM,YAAW,sBAAQ;AAAA,SACxC;AAAA,MACA,oBAAC,eAAY,OAAM,cACjB,8BAAC,mBAAe,GAClB;AAAA,MACA,oBAAC,eAAY,OAAM,YAChB,mBAAS,YAAY,oBAAC,oBAAgB,IAAK,oBAAC,oBAAgB,GAC/D;AAAA,OACF,IACE,QAAQ,oBACV,SAAS,YAAY,oBAAC,oBAAgB,IAAK,oBAAC,oBAAgB,IAC1D,QAAQ,mBACV,oBAAC,mBAAe,IACd;AAAA,KACN;AAEJ;","names":[]}

package/dist/esm/index.js

@@ -16,12 +16,14 @@ import { default as default13 } from "./components/oauth-group";
 import { default as default14 } from "./components/password-field";
 import { default as default15 } from "./components/user-button";
 import { default as default16 } from "./components-page/account-settings";
+import { default as default17 } from "./components-page/auth-page";
 import { useDesign } from "./providers/design-provider";
 import { useComponents } from "./providers/component-provider";
 import { StackTheme } from "./providers/theme-provider";
 export * from "./components-core";
 export {
   default16 as AccountSettings,
+  default17 as AuthPage,
   default10 as CredentialSignIn,
   default11 as CredentialSignUp,
   default6 as EmailVerification,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"sourcesContent":["export { default as StackProvider } from \"./providers/stack-provider\";\n\nexport { useUser, useStackApp } from \"./lib/hooks\";\nexport { StackClientApp, StackServerApp, StackAdminApp } from \"./lib/stack-app\";\n\nexport { default as StackHandler } from \"./components-page/stack-handler\";\nexport { default as SignIn } from \"./components-page/sign-in\";\nexport { default as SignUp } from \"./components-page/sign-up\";\nexport { default as EmailVerification } from \"./components-page/email-verification\";\nexport { default as PasswordReset } from \"./components-page/password-reset\";\nexport { default as ForgotPassword } from \"./components-page/forgot-password\";\nexport { default as MessageCard } from \"./components/message-card\";\n\nexport { default as CredentialSignIn } from \"./components/credential-sign-in\";\nexport { default as CredentialSignUp } from \"./components/credential-sign-up\";\nexport { default as OAuthButton } from \"./components/oauth-button\";\nexport { default as OAuthGroup } from \"./components/oauth-group\";\nexport { default as PasswordField } from \"./components/password-field\";\nexport { default as UserButton } from \"./components/user-button\";\nexport { default as AccountSettings } from \"./components-page/account-settings\";\n\nexport { useDesign } from './providers/design-provider';\nexport type { ColorPalette } from './providers/design-provider';\nexport { useComponents } from './providers/component-provider';\nexport { StackTheme } from './providers/theme-provider';\nexport type { ThemeConfig } from './providers/theme-provider';\n\nexport type { \n  CurrentUser, \n  Project, \n  ServerUser as ServerUser, \n  ApiKeySetFirstView, \n  ApiKeySet, \n  ServerTeam, \n  Team, \n  TeamMember,\n  ServerTeamMember,\n  ServerPermission as Permission,\n  ServerPermission,\n} from './lib/stack-app';\n\nexport * from './components-core';\n"],"mappings":";AAAA,SAAoB,WAAXA,gBAAgC;AAEzC,SAAS,SAAS,mBAAmB;AACrC,SAAS,gBAAgB,gBAAgB,qBAAqB;AAE9D,SAAoB,WAAXA,gBAA+B;AACxC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAAoC;AAC7C,SAAoB,WAAXA,gBAAgC;AACzC,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAA8B;AAEvC,SAAoB,WAAXA,iBAAmC;AAC5C,SAAoB,WAAXA,iBAAmC;AAC5C,SAAoB,WAAXA,iBAA8B;AACvC,SAAoB,WAAXA,iBAA6B;AACtC,SAAoB,WAAXA,iBAAgC;AACzC,SAAoB,WAAXA,iBAA6B;AACtC,SAAoB,WAAXA,iBAAkC;AAE3C,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAiB3B,cAAc;","names":["default"]}
+{"version":3,"sources":["../../src/index.tsx"],"sourcesContent":["export { default as StackProvider } from \"./providers/stack-provider\";\n\nexport { useUser, useStackApp } from \"./lib/hooks\";\nexport { StackClientApp, StackServerApp, StackAdminApp } from \"./lib/stack-app\";\n\nexport { default as StackHandler } from \"./components-page/stack-handler\";\nexport { default as SignIn } from \"./components-page/sign-in\";\nexport { default as SignUp } from \"./components-page/sign-up\";\nexport { default as EmailVerification } from \"./components-page/email-verification\";\nexport { default as PasswordReset } from \"./components-page/password-reset\";\nexport { default as ForgotPassword } from \"./components-page/forgot-password\";\nexport { default as MessageCard } from \"./components/message-card\";\n\nexport { default as CredentialSignIn } from \"./components/credential-sign-in\";\nexport { default as CredentialSignUp } from \"./components/credential-sign-up\";\nexport { default as OAuthButton } from \"./components/oauth-button\";\nexport { default as OAuthGroup } from \"./components/oauth-group\";\nexport { default as PasswordField } from \"./components/password-field\";\nexport { default as UserButton } from \"./components/user-button\";\nexport { default as AccountSettings } from \"./components-page/account-settings\";\nexport { default as AuthPage } from \"./components-page/auth-page\";\n\nexport { useDesign } from './providers/design-provider';\nexport type { ColorPalette } from './providers/design-provider';\nexport { useComponents } from './providers/component-provider';\nexport { StackTheme } from './providers/theme-provider';\nexport type { ThemeConfig } from './providers/theme-provider';\n\nexport type { \n  CurrentUser, \n  Project, \n  ServerUser as ServerUser, \n  ApiKeySetFirstView, \n  ApiKeySet, \n  ServerTeam, \n  Team, \n  TeamMember,\n  ServerTeamMember,\n  ServerPermission as Permission,\n  ServerPermission,\n} from './lib/stack-app';\n\nexport * from './components-core';\n"],"mappings":";AAAA,SAAoB,WAAXA,gBAAgC;AAEzC,SAAS,SAAS,mBAAmB;AACrC,SAAS,gBAAgB,gBAAgB,qBAAqB;AAE9D,SAAoB,WAAXA,gBAA+B;AACxC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAAoC;AAC7C,SAAoB,WAAXA,gBAAgC;AACzC,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAA8B;AAEvC,SAAoB,WAAXA,iBAAmC;AAC5C,SAAoB,WAAXA,iBAAmC;AAC5C,SAAoB,WAAXA,iBAA8B;AACvC,SAAoB,WAAXA,iBAA6B;AACtC,SAAoB,WAAXA,iBAAgC;AACzC,SAAoB,WAAXA,iBAA6B;AACtC,SAAoB,WAAXA,iBAAkC;AAC3C,SAAoB,WAAXA,iBAA2B;AAEpC,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAiB3B,cAAc;","names":["default"]}

package/dist/esm/lib/stack-app.js

@@ -430,12 +430,12 @@ var _StackClientAppImpl = class __StackClientAppImpl {
   get urls() {
     return getUrls(this._urlOptions);
   }
-  _redirectTo(handlerName) {
+  async _redirectTo(handlerName) {
     if (!this.urls[handlerName]) {
       throw new Error(`No URL for handler name ${handlerName}`);
     }
     window.location.href = this.urls[handlerName];
-    return wait(2e3);
+    return await wait(2e3);
   }
   async redirectToSignIn() {
     return await this._redirectTo("signIn");