@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.11

package/dist/components/button/Button.d.ts

@@ -1,387 +1,21 @@
-import type { VariantProps } from '@atom-learning/stitches-react';
 import * as React from 'react';
 import { NavigatorActions } from '../../types';
 import { Override } from '../../utilities';
-export declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"button", {
-    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "secondary" | undefined;
-    appearance?: "outline" | "solid" | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | undefined;
-    isLoading?: boolean | "true" | undefined;
-    fullWidth?: boolean | "true" | "false" | undefined;
-}, {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, import("@atom-learning/stitches-react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, {
-    colors: {
-        textBold: string;
-        textRegular: string;
-        textSubtle: string;
-        textMinimal: string;
-        background: string;
-        backgroundAccent: string;
-        grey100: string;
-        grey200: string;
-        grey300: string;
-        grey400: string;
-        grey500: string;
-        grey600: string;
-        grey700: string;
-        grey800: string;
-        grey900: string;
-        grey1000: string;
-        grey1100: string;
-        grey1200: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        blue1000: string;
-        blue1100: string;
-        blue1200: string;
-        pink100: string;
-        pink200: string;
-        pink300: string;
-        pink400: string;
-        pink500: string;
-        pink600: string;
-        pink700: string;
-        pink800: string;
-        pink900: string;
-        pink1000: string;
-        pink1100: string;
-        pink1200: string;
-        purple100: string;
-        purple200: string;
-        purple300: string;
-        purple400: string;
-        purple500: string;
-        purple600: string;
-        purple700: string;
-        purple800: string;
-        purple900: string;
-        purple1000: string;
-        purple1100: string;
-        purple1200: string;
-        cyan100: string;
-        cyan200: string;
-        cyan300: string;
-        cyan400: string;
-        cyan500: string;
-        cyan600: string;
-        cyan700: string;
-        cyan800: string;
-        cyan900: string;
-        cyan1000: string;
-        cyan1100: string;
-        cyan1200: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        green1000: string;
-        green1100: string;
-        green1200: string;
-        magenta100: string;
-        magenta200: string;
-        magenta300: string;
-        magenta400: string;
-        magenta500: string;
-        magenta600: string;
-        magenta700: string;
-        magenta800: string;
-        magenta900: string;
-        magenta1000: string;
-        magenta1100: string;
-        magenta1200: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        red1000: string;
-        red1100: string;
-        red1200: string;
-        teal100: string;
-        teal200: string;
-        teal300: string;
-        teal400: string;
-        teal500: string;
-        teal600: string;
-        teal700: string;
-        teal800: string;
-        teal900: string;
-        teal1000: string;
-        teal1100: string;
-        teal1200: string;
-        orange100: string;
-        orange200: string;
-        orange300: string;
-        orange400: string;
-        orange500: string;
-        orange600: string;
-        orange700: string;
-        orange800: string;
-        orange900: string;
-        orange1000: string;
-        orange1100: string;
-        orange1200: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        yellow1000: string;
-        yellow1100: string;
-        yellow1200: string;
-        lime100: string;
-        lime200: string;
-        lime300: string;
-        lime400: string;
-        lime500: string;
-        lime600: string;
-        lime700: string;
-        lime800: string;
-        lime900: string;
-        lime1000: string;
-        lime1100: string;
-        lime1200: string;
-        lapis100: string;
-        lapis200: string;
-        lapis300: string;
-        lapis400: string;
-        lapis500: string;
-        lapis600: string;
-        lapis700: string;
-        lapis800: string;
-        lapis900: string;
-        lapis1000: string;
-        lapis1100: string;
-        lapis1200: string;
-        maroon100: string;
-        maroon200: string;
-        maroon300: string;
-        maroon400: string;
-        maroon500: string;
-        maroon600: string;
-        maroon700: string;
-        maroon800: string;
-        maroon900: string;
-        maroon1000: string;
-        maroon1100: string;
-        maroon1200: string;
-        marsh100: string;
-        marsh200: string;
-        marsh300: string;
-        marsh400: string;
-        marsh500: string;
-        marsh600: string;
-        marsh700: string;
-        marsh800: string;
-        marsh900: string;
-        marsh1000: string;
-        marsh1100: string;
-        marsh1200: string;
-        alpha100: string;
-        alpha150: string;
-        alpha200: string;
-        alpha250: string;
-        alpha600: string;
-        infoLight: string;
-        info: string;
-        infoMid: string;
-        infoDark: string;
-        successLight: string;
-        success: string;
-        successMid: string;
-        successDark: string;
-        dangerLight: string;
-        danger: string;
-        dangerMid: string;
-        dangerDark: string;
-        warningLight: string;
-        warning: string;
-        warningMid: string;
-        warningDark: string;
-        warningText: string;
-        subjectEnglish: string;
-        subjectMaths: string;
-        subjectScience: string;
-        subjectVerbalReasoning: string;
-        subjectNonVerbalReasoning: string;
-        subjectCreativeWriting: string;
-        subjectExamSkills: string;
-        subjectGcseEnglishLiterature: string;
-        subjectGcseMaths: string;
-        subjectGcseChemistry: string;
-        subjectGcsePhysics: string;
-        subjectGcseBiology: string;
-        glBlueLight: string;
-        glBluePrimary: string;
-        glBlueDark: string;
-        primary100: string;
-        primary200: string;
-        primary300: string;
-        primary400: string;
-        primary500: string;
-        primary600: string;
-        primary700: string;
-        primary800: string;
-        primary900: string;
-        primary1000: string;
-        primary1100: string;
-        primary1200: string;
-    };
-    space: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-        "9": string;
-        "24": string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-    };
-    fonts: {
-        sans: string;
-        mono: string;
-        display: string;
-        body: string;
-    };
-    sizes: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-    };
-    radii: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        round: string;
-    };
-    shadows: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-    };
-    ratios: {
-        "16-9": string;
-        "3-2": string;
-        "4-3": string;
-        "1-1": string;
-        "3-4": string;
-    };
-}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
-    bg: (value: import("@atom-learning/stitches-react").PropertyValue<"background">) => {
-        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
-    };
-    size: (value: import("@atom-learning/stitches-react").ScaleValue<"size"> | number | string) => {
-        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-    };
-    p: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-}>>;
-type ButtonProps = Override<React.ComponentProps<typeof StyledButton>, VariantProps<typeof StyledButton> & {
-    as?: React.ComponentType | React.ElementType;
+export declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "theme" | "size" | "appearance" | "isLoading" | "fullWidth"> & {
+    theme?: ("warning" | "success" | "neutral" | "primary" | "danger" | "secondary" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "warning" | "success" | "neutral" | "primary" | "danger" | "secondary">>) | undefined;
+    appearance?: ("outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "outline" | "solid">>) | undefined;
+    size?: ("sm" | "md" | "lg" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xl">>) | undefined;
+    isLoading?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    fullWidth?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type ButtonProps = Override<React.ComponentProps<typeof StyledButton>, {
     children: React.ReactNode;
     href?: string;
     isLoading?: boolean;
 } & NavigatorActions>;
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export {};

package/dist/components/button/Button.js

@@ -1,2 +1,2 @@
-import{opacify as s}from"color2k";import*as a from"react";import{StyledIcon as d}from"../icon/Icon.js";import{Loader as u}from"../loader/Loader.js";import{styled as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as l}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as y}from"../../utilities/uri/index.js";const p=(e,r,i,t)=>({theme:e,appearance:"outline",css:{border:"1px solid",borderColor:"currentColor",color:r,"&[disabled]":l,"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:i},"&:not([disabled]):active":{color:t}}}),n=(e,r,i,t,o="white")=>({theme:e,appearance:"solid",css:{bg:r,color:o,"&[disabled]":l,"&:not([disabled]):hover, &:not([disabled]):focus":{bg:i,color:o},"&:not([disabled]):active":{bg:t}}}),$=c("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$1",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content","&[disabled]":l,variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4",gap:"$2",[`& ${d}`]:{size:16}},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5",gap:"$3",[`& ${d}`]:{size:20}},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5",gap:"$3",[`& ${d}`]:{size:22}},xl:{fontSize:"$lg",lineHeight:1.5,height:"$6",px:"$5",gap:"$3",[`& ${d}`]:{size:22}}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{true:{width:"100%"},false:{width:"max-content"}}},compoundVariants:[n("primary","$primary800","$primary900","$primary1000"),n("secondary","$primary1000","$primary1100","$primary1200"),n("success","$success","$successMid","$successDark"),n("warning","$warning","$warningMid","$warningDark","$grey900"),n("danger","$danger","$dangerMid","$dangerDark"),n("neutral","white",s("white",-.1),s("white",-.25),"$primary800"),p("primary","$primary800","$primary900","$primary1000"),p("secondary","$primary1000","$primary1100","$primary1200"),p("neutral","white",s("white",-.2),s("white",-.35))],defaultVariants:{appearance:"solid",size:"md",theme:"primary"}}),f=c("span",{alignItems:"center",display:"flex",justifyContent:"center",visibility:"hidden",variants:{size:{sm:{gap:"$2"},md:{gap:"$3"},lg:{gap:"$3"},xl:{gap:"$3"}}},defaultVariants:{size:"md"}}),b=({size:e,children:r})=>a.createElement(a.Fragment,null,a.createElement(u,{css:{position:"absolute"}}),a.createElement(f,{size:e},r)),g=a.forwardRef(({children:e,as:r,href:i,isLoading:t=!1,onClick:o,...m},h)=>a.createElement($,{as:r||(i?"a":void 0),href:i,isLoading:t,onClick:t?void 0:o,type:i?void 0:"button",...m,...y(i),ref:h},t?a.createElement(b,{size:m.size},e):e));g.displayName="Button";export{g as Button,$ as StyledButton};
+import*as e from"react";import{Loader as p}from"../loader/Loader.js";import{styled as s}from"../../styled.js";import{getExternalAnchorProps as b}from"../../utilities/uri/index.js";const l=s("button",{base:["items-center","bg-[unset]","border-[unset]","rounded-md","cursor-pointer","flex","font-body","font-semibold","justify-center","px-[unset]","py-[unset]","no-underline","transition-all","duration-100","ease-out","whitespace-nowrap","w-max","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{theme:{primary:["[--base:var(--color-primary-800)]","[--interact:var(--color-primary-900)]","[--active:var(--color-primary-1000)]"],secondary:["[--base:var(--color-primary-1000)]","[--interact:var(--color-primary-1100)]","[--active:var(--color-primary-1200)]"],success:["[--base:var(--color-success)]","[--interact:var(--color-success-mid)]","[--active:var(--color-success-dark)]"],warning:["[--base:var(--color-warning)]","[--interact:var(--color-warning-mid)]","[--active:var(--color-warning-dark)]"],danger:["[--base:var(--color-danger)]","[--interact:var(--color-danger-mid)]","[--active:var(--color-danger-dark)]"],neutral:["[--base:white]","[--interact:rgba(white,0.1)]","[--active:rgba(white,0.25)]","[--text:var(--color-primary-800)]"]},appearance:{solid:["bg-(--base)","text-(--text,white)","disabled:opacity-30","disabled:cursor-not-allowed","not-disabled:hover:bg-(--interact)","not-disabled:hover:text-(--text,white)","not-disabled:focus:bg-(--interact)","not-disabled:focus:text-(--text,white)","not-disabled:active:bg-(--active)"],outline:["border","border-current","text-(--base)","disabled:opacity-30","disabled:cursor-not-allowed","not-disabled:hover:no-underline","not-disabled:hover:text-(--interact)","not-disabled:focus:no-underline","not-disabled:focus:text-(--interact)","not-disabled:active:text-(--active)"]},size:{sm:["text-sm leading-[1.53] h-8 px-4 gap-2 [&_svg]:size-4"],md:["text-md leading-normal h-10 px-8 gap-3 [&_svg]:size-5"],lg:["text-lg leading-normal h-12 px-8 gap-3 [&_svg]:size-[22px]"],xl:["text-lg leading-normal h-16 px-8 gap-3 [&_svg]:size-[22px]"]},isLoading:{true:["cursor-not-allowed opacity-60 pointer-events-none"]},fullWidth:{true:["w-full"],false:["w-max"]}},defaultVariants:{appearance:"solid",size:"md",theme:"primary"}}),u=s("span",{base:["items-center","flex","justify-center","invisible"],variants:{size:{sm:["gap-2"],md:["gap-3"],lg:["gap-3"],xl:["gap-3"]}},defaultVariants:{size:"md"}}),g=({size:a,children:r})=>e.createElement(e.Fragment,null,e.createElement(p,{className:"absolute"}),e.createElement(u,{size:a},r)),d=e.forwardRef(({children:a,as:r,href:t,isLoading:i=!1,onClick:c,disabled:o,...n},m)=>e.createElement(l,{as:r||(t?"a":void 0),...!o&&!i&&{href:t,onClick:c},isLoading:i,type:t?void 0:"button",disabled:o,...n,...b(t),ref:m},i?e.createElement(g,{size:n.size},a):a));d.displayName="Button";export{d as Button,l as StyledButton};
 //# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport { opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'outline',\n  css: {\n    border: '1px solid',\n    borderColor: 'currentColor',\n    color: base,\n    '&[disabled]': disabledStyle,\n    '&:not([disabled]):hover, &:not([disabled]):focus': {\n      textDecoration: 'none',\n      color: interact\n    },\n    '&:not([disabled]):active': { color: active }\n  }\n})\n\nconst getButtonSolidVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string,\n  text = 'white'\n) => ({\n  theme,\n  appearance: 'solid',\n  css: {\n    bg: base,\n    color: text,\n    '&[disabled]': disabledStyle,\n    '&:not([disabled]):hover, &:not([disabled]):focus': {\n      bg: interact,\n      color: text\n    },\n    '&:not([disabled]):active': { bg: active }\n  }\n})\n\nexport const StyledButton = styled('button', {\n  alignItems: 'center',\n  bg: 'unset',\n  border: 'unset',\n  borderRadius: '$1',\n  cursor: 'pointer',\n  display: 'flex',\n  fontFamily: '$body',\n  fontWeight: 600,\n  justifyContent: 'center',\n  p: 'unset',\n  textDecoration: 'none',\n  transition: 'all 100ms ease-out',\n  whiteSpace: 'nowrap',\n  width: 'max-content',\n  '&[disabled]': disabledStyle,\n  variants: {\n    theme: {\n      primary: {},\n      secondary: {},\n      success: {},\n      warning: {},\n      danger: {},\n      neutral: {}\n    },\n    appearance: {\n      solid: {},\n      outline: {}\n    },\n    size: {\n      sm: {\n        fontSize: '$sm',\n        lineHeight: 1.53,\n        height: '$3',\n        px: '$4',\n        gap: '$2',\n        [`& ${StyledIcon}`]: { size: 16 }\n      },\n      md: {\n        fontSize: '$md',\n        lineHeight: 1.5,\n        height: '$4',\n        px: '$5',\n        gap: '$3',\n        [`& ${StyledIcon}`]: { size: 20 }\n      },\n      lg: {\n        fontSize: '$lg',\n        lineHeight: 1.5,\n        height: '$5',\n        px: '$5',\n        gap: '$3',\n        [`& ${StyledIcon}`]: { size: 22 }\n      },\n      xl: {\n        fontSize: '$lg',\n        lineHeight: 1.5,\n        height: '$6',\n        px: '$5',\n        gap: '$3',\n        [`& ${StyledIcon}`]: { size: 22 }\n      }\n    },\n    isLoading: {\n      true: {\n        cursor: 'not-allowed',\n        opacity: 0.6,\n        pointerEvents: 'none'\n      }\n    },\n    fullWidth: {\n      true: { width: '100%' },\n      false: { width: 'max-content' }\n    }\n  },\n\n  // prettier-ignore\n  compoundVariants: [\n    getButtonSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getButtonSolidVariant('secondary', '$primary1000', '$primary1100', '$primary1200'),\n    getButtonSolidVariant('success', '$success', '$successMid', '$successDark'),\n    getButtonSolidVariant('warning', '$warning', '$warningMid', '$warningDark', '$grey900'),\n    getButtonSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n    getButtonSolidVariant('neutral', 'white', opacify('white', -0.1), opacify('white', -0.25), '$primary800'),\n    getButtonOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getButtonOutlineVariant('secondary', '$primary1000', '$primary1100', '$primary1200'),\n    getButtonOutlineVariant('neutral', 'white', opacify('white', -0.2), opacify('white', -0.35))\n  ],\n\n  defaultVariants: {\n    appearance: 'solid',\n    size: 'md',\n    theme: 'primary'\n  }\n})\n\nconst LoaderContentsWrapper = styled('span', {\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n  visibility: 'hidden',\n  variants: {\n    size: {\n      sm: { gap: '$2' },\n      md: { gap: '$3' },\n      lg: { gap: '$3' },\n      xl: { gap: '$3' }\n    }\n  },\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\nconst WithLoader = ({\n  size,\n  children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n  <>\n    <Loader css={{ position: 'absolute' }} />\n    <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n  </>\n)\n\ntype ButtonProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  VariantProps<typeof StyledButton> & {\n    as?: React.ComponentType | React.ElementType\n    children: React.ReactNode\n    href?: string\n    isLoading?: boolean\n  } & NavigatorActions\n>\n\nexport const Button: React.ForwardRefExoticComponent<ButtonProps> =\n  React.forwardRef(\n    ({ children, as, href, isLoading = false, onClick, ...rest }, ref) => (\n      <StyledButton\n        as={as || (href ? 'a' : undefined)}\n        href={href}\n        isLoading={isLoading}\n        onClick={!isLoading ? onClick : undefined}\n        type={!href ? 'button' : undefined}\n        {...rest}\n        {...getExternalAnchorProps(href)}\n        ref={ref}\n      >\n        {isLoading ? (\n          <WithLoader size={rest.size}>{children}</WithLoader>\n        ) : (\n          children\n        )}\n      </StyledButton>\n    )\n  )\n\nButton.displayName = 'Button'\n"],"names":["getButtonOutlineVariant","theme","base","interact","active","disabledStyle","getButtonSolidVariant","text","StyledButton","styled","StyledIcon","opacify","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","as","href","isLoading","onClick","rest","ref","getExternalAnchorProps"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledButton = styled('button', {\n  base: [\n    'items-center',\n    'bg-[unset]',\n    'border-[unset]',\n    'rounded-md',\n    'cursor-pointer',\n    'flex',\n    'font-body',\n    'font-semibold',\n    'justify-center',\n    'px-[unset]',\n    'py-[unset]',\n    'no-underline',\n    'transition-all',\n    'duration-100',\n    'ease-out',\n    'whitespace-nowrap',\n    'w-max',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    theme: {\n      primary: [\n        '[--base:var(--color-primary-800)]',\n        '[--interact:var(--color-primary-900)]',\n        '[--active:var(--color-primary-1000)]'\n      ],\n      secondary: [\n        '[--base:var(--color-primary-1000)]',\n        '[--interact:var(--color-primary-1100)]',\n        '[--active:var(--color-primary-1200)]'\n      ],\n      success: [\n        '[--base:var(--color-success)]',\n        '[--interact:var(--color-success-mid)]',\n        '[--active:var(--color-success-dark)]'\n      ],\n      warning: [\n        '[--base:var(--color-warning)]',\n        '[--interact:var(--color-warning-mid)]',\n        '[--active:var(--color-warning-dark)]'\n      ],\n      danger: [\n        '[--base:var(--color-danger)]',\n        '[--interact:var(--color-danger-mid)]',\n        '[--active:var(--color-danger-dark)]'\n      ],\n      neutral: [\n        '[--base:white]',\n        '[--interact:rgba(white,0.1)]',\n        '[--active:rgba(white,0.25)]',\n        '[--text:var(--color-primary-800)]'\n      ]\n    },\n    appearance: {\n      solid: [\n        'bg-(--base)',\n        'text-(--text,white)',\n        'disabled:opacity-30',\n        'disabled:cursor-not-allowed',\n        'not-disabled:hover:bg-(--interact)',\n        'not-disabled:hover:text-(--text,white)',\n        'not-disabled:focus:bg-(--interact)',\n        'not-disabled:focus:text-(--text,white)',\n        'not-disabled:active:bg-(--active)'\n      ],\n      outline: [\n        'border',\n\n        'border-current',\n        'text-(--base)',\n        'disabled:opacity-30',\n        'disabled:cursor-not-allowed',\n        'not-disabled:hover:no-underline',\n        'not-disabled:hover:text-(--interact)',\n        'not-disabled:focus:no-underline',\n        'not-disabled:focus:text-(--interact)',\n        'not-disabled:active:text-(--active)'\n      ]\n    },\n    size: {\n      sm: ['text-sm leading-[1.53] h-8 px-4 gap-2 [&_svg]:size-4'],\n      md: ['text-md leading-normal h-10 px-8 gap-3 [&_svg]:size-5'],\n      lg: ['text-lg leading-normal h-12 px-8 gap-3 [&_svg]:size-[22px]'],\n      xl: ['text-lg leading-normal h-16 px-8 gap-3 [&_svg]:size-[22px]']\n    },\n    isLoading: {\n      true: ['cursor-not-allowed opacity-60 pointer-events-none']\n    },\n    fullWidth: {\n      true: ['w-full'],\n      false: ['w-max']\n    }\n  },\n\n  defaultVariants: {\n    appearance: 'solid',\n    size: 'md',\n    theme: 'primary'\n  }\n})\n\nconst LoaderContentsWrapper = styled('span', {\n  base: ['items-center', 'flex', 'justify-center', 'invisible'],\n  variants: {\n    size: {\n      sm: ['gap-2'],\n      md: ['gap-3'],\n      lg: ['gap-3'],\n      xl: ['gap-3']\n    }\n  },\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\nconst WithLoader = ({\n  size,\n  children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n  <>\n    <Loader className=\"absolute\" />\n    <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n  </>\n)\n\ntype ButtonProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  {\n    children: React.ReactNode\n    href?: string\n    isLoading?: boolean\n  } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n  (\n    { children, as, href, isLoading = false, onClick, disabled, ...rest },\n    ref\n  ) => (\n    <StyledButton\n      as={as || (href ? 'a' : undefined)}\n      {...(!disabled && !isLoading && { href, onClick })}\n      isLoading={isLoading}\n      type={!href ? 'button' : undefined}\n      disabled={disabled}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref as any}\n    >\n      {isLoading ? (\n        <WithLoader size={rest.size}>{children}</WithLoader>\n      ) : (\n        children\n      )}\n    </StyledButton>\n  )\n)\n\nButton.displayName = 'Button'\n"],"names":["StyledButton","styled","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","as","href","isLoading","onClick","disabled","rest","ref","getExternalAnchorProps"],"mappings":"0LAQaA,EAAeC,EAAO,SAAU,CAC3C,KAAM,CACJ,eACA,aACA,iBACA,aACA,iBACA,OACA,YACA,gBACA,iBACA,aACA,aACA,eACA,iBACA,eACA,WACA,oBACA,QACA,8BACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,oCACA,wCACA,sCACF,EACA,UAAW,CACT,qCACA,yCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,OAAQ,CACN,+BACA,uCACA,qCACF,EACA,QAAS,CACP,iBACA,+BACA,8BACA,mCACF,CACF,EACA,WAAY,CACV,MAAO,CACL,cACA,sBACA,sBACA,8BACA,qCACA,yCACA,qCACA,yCACA,mCACF,EACA,QAAS,CACP,SAEA,iBACA,gBACA,sBACA,8BACA,kCACA,uCACA,kCACA,uCACA,qCACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,sDAAsD,EAC3D,GAAI,CAAC,uDAAuD,EAC5D,GAAI,CAAC,4DAA4D,EACjE,GAAI,CAAC,4DAA4D,CACnE,EACA,UAAW,CACT,KAAM,CAAC,mDAAmD,CAC5D,EACA,UAAW,CACT,KAAM,CAAC,QAAQ,EACf,MAAO,CAAC,OAAO,CACjB,CACF,EAEA,gBAAiB,CACf,WAAY,QACZ,KAAM,KACN,MAAO,SACT,CACF,CAAC,EAEKC,EAAwBD,EAAO,OAAQ,CAC3C,KAAM,CAAC,eAAgB,OAAQ,iBAAkB,WAAW,EAC5D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,CACd,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAEKE,EAAa,CAAC,CAClB,KAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,CAAO,UAAU,WAAW,EAC7BD,EAAA,cAACJ,EAAA,CAAsB,KAAME,CAAAA,EAAOC,CAAS,CAC/C,EAYWG,EAASF,EAAM,WAC1B,CACE,CAAE,SAAAD,EAAU,GAAAI,EAAI,KAAAC,EAAM,UAAAC,EAAY,GAAO,QAAAC,EAAS,SAAAC,EAAU,GAAGC,CAAK,EACpEC,IAEAT,EAAA,cAACN,EACC,CAAA,GAAIS,IAAOC,EAAO,IAAM,QACvB,GAAI,CAACG,GAAY,CAACF,GAAa,CAAE,KAAAD,EAAM,QAAAE,CAAQ,EAChD,UAAWD,EACX,KAAOD,EAAkB,OAAX,SACd,SAAUG,EACT,GAAGC,EACH,GAAGE,EAAuBN,CAAI,EAC/B,IAAKK,CAEJJ,EAAAA,EACCL,EAAA,cAACH,EAAA,CAAW,KAAMW,EAAK,IAAA,EAAOT,CAAS,EAEvCA,CAEJ,CAEJ,EAEAG,EAAO,YAAc"}

package/dist/components/calendar/Calendar.d.ts

@@ -1,6 +1,5 @@
 import type { Props as DayzedInterface } from 'dayzed';
 import * as React from 'react';
-import type { CSS } from '../../stitches';
 export type CalendarTranslationProps = {
     monthNames?: string[];
     weekdayNames?: string[];
@@ -13,13 +12,13 @@ export type CalendarTranslationProps = {
     };
 };
 type CalendarProps = DayzedInterface & CalendarTranslationProps & {
-    css?: CSS;
     refDateToday?: React.RefObject<HTMLButtonElement>;
     refDateSelected?: React.RefObject<HTMLButtonElement>;
     setYear: (date: Date) => Promise<void>;
+    className?: string;
 };
 export declare const Calendar: {
-    ({ css, refDateSelected, refDateToday, firstDayOfWeek, monthNames, weekdayNames, labels, date, minDate, maxDate, setYear, ...remainingProps }: CalendarProps): React.JSX.Element | null;
+    ({ className, refDateSelected, refDateToday, firstDayOfWeek, monthNames, weekdayNames, labels, date, minDate, maxDate, setYear, ...remainingProps }: CalendarProps): React.JSX.Element | null;
     displayName: string;
 };
 export {};

package/dist/components/calendar/Calendar.js

@@ -1,2 +1,2 @@
-import{ChevronLeft as _,ChevronRight as H}from"@atom-learning/icons";import{useDayzed as J}from"dayzed";import*as e from"react";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Box as $}from"../box/Box.js";import{Button as x}from"../button/Button.js";import{Flex as C}from"../flex/Flex.js";import{Icon as Y}from"../icon/Icon.js";import{Text as K}from"../text/Text.js";import{styled as F}from"../../stitches.js";import{monthNamesShort as Q,weekdayNamesShort as V,DEFAULT_LABELS as X}from"./constants.js";import{Day as Z}from"./Day.js";const h=F("div",{display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gridGap:"$1 $2"}),ee=F(x,{color:"$grey1000",p:"$3",width:"$6",variants:{selected:{false:{color:"$grey1000 !important",fontWeight:400,"&:hover":{bg:"$grey200 !important",color:"$grey1000 !important"},"&[disabled]":{bg:"white !important"}}}}}),te=(i,c)=>{const u=i.slice(0,c);return i.slice(c).concat(u)},S=({css:i,refDateSelected:c,refDateToday:u,firstDayOfWeek:y=0,monthNames:N=Q,weekdayNames:T=V,labels:f=X,date:n=new Date,minDate:l,maxDate:s,setYear:A,...L})=>{const[a,E]=e.useState(!1),[m,k]=e.useState(n==null?void 0:n.getFullYear()),O=t=>{const r=n;r.setFullYear(t),A(r),E(!1)},z=l&&m-16<=l.getFullYear(),B=s&&m>=s.getFullYear(),I=Array.from({length:16},(t,r)=>{const o=m-r;return s&&o>s.getFullYear()||l&&o<l.getFullYear()?0:o}),{calendars:d,getBackProps:M,getForwardProps:G,getDateProps:P}=J({firstDayOfWeek:y,showOutsideDays:!0,date:n,minDate:l,maxDate:s,...L});return d.length?e.createElement($,{css:{position:"relative",width:"min-content",mt:"-$1",...i}},e.createElement(C,{css:{position:"absolute",top:0,right:"-$1"}},e.createElement(w,{label:f[a?"previousYear":"previous"],theme:"neutral",size:"md",...!a&&M({calendars:d}),...a&&{onClick:()=>k(m-16)},disabled:a&&z},e.createElement(Y,{is:_})),e.createElement(w,{label:f[a?"nextYear":"next"],theme:"neutral",size:"md",...!a&&G({calendars:d}),...a&&{onClick:()=>k(m+16)},disabled:a&&B},e.createElement(Y,{is:H}))),a&&e.createElement(h,{css:{gridTemplateColumns:"repeat(4, 1fr)",pt:"$7",direction:"rtl",gridGap:"$3 $1"}},I.map((t,r)=>{const o=t===n.getFullYear();return t?e.createElement(ee,{key:`${t}${r}`,theme:o?"primary":"neutral",onClick:()=>O(t),selected:o},t):e.createElement($,{key:r,css:{width:"$6",height:"$4"}})})),!a&&d.map(({month:t,year:r,weeks:o})=>e.createElement($,{key:`${t}${r}`},e.createElement(C,{css:{height:"$4",alignItems:"center",mb:"$4"}},e.createElement(x,{theme:"neutral",css:{px:"0",color:"$grey1000"},onClick:()=>E(!0)},N[t]," ",r)),e.createElement(h,{css:{mb:"$3"}},te(T,y).map(p=>e.createElement(K,{as:"span",size:"sm",weight:"bold",key:`${t}${r}${p}`,css:{textAlign:"center"}},p))),e.createElement(h,null,o.map((p,W)=>p.map((g,j)=>{const D=`${t}${r}${W}${j}`;if(!g)return e.createElement("div",{key:D});const{date:R,selected:b,today:v,prevMonth:U,nextMonth:q}=g;return e.createElement(Z,{isOutsideMonth:U||q,isSelected:b,isToday:v,key:D,ref:b?c:v?u:null,...P({dateObj:g}),type:"button"},R.getDate())})))))):null};S.displayName="Calendar";export{S as Calendar};
+import{ChevronLeft as q,ChevronRight as G}from"@atom-learning/icons";import H from"clsx";import{useDayzed as J}from"dayzed";import*as e from"react";import{ActionIcon as D}from"../action-icon/ActionIcon.js";import{Button as N}from"../button/Button.js";import{Flex as w}from"../flex/Flex.js";import{Icon as Y}from"../icon/Icon.js";import{Text as K}from"../text/Text.js";import{styled as F}from"../../styled.js";import{monthNamesShort as Q,weekdayNamesShort as V,DEFAULT_LABELS as X}from"./constants.js";import{Day as Z}from"./Day.js";const g=F("div",{base:["grid","grid-cols-[repeat(7,1fr)]","gap-x-2","gap-y-1"]}),ee=F(N,{base:["text-grey-1000","p-3","w-16"],variants:{selected:{false:["disabled:bg-white!","font-normal","hover:bg-grey-200!","hover:text-grey-1000!","text-grey-1000!"]}}}),te=(m,i)=>{const u=m.slice(0,i);return m.slice(i).concat(u)},C=({className:m,refDateSelected:i,refDateToday:u,firstDayOfWeek:f=0,monthNames:S=Q,weekdayNames:z=V,labels:h=X,date:o=new Date,minDate:n,maxDate:c,setYear:L,...O})=>{const[r,E]=e.useState(!1),[s,b]=e.useState(o==null?void 0:o.getFullYear()),A=t=>{const a=o;a.setFullYear(t),L(a),E(!1)},B=n&&s-16<=n.getFullYear(),M=c&&s>=c.getFullYear(),T=Array.from({length:16},(t,a)=>{const l=s-a;return c&&l>c.getFullYear()||n&&l<n.getFullYear()?0:l}),{calendars:d,getBackProps:I,getForwardProps:P,getDateProps:j}=J({firstDayOfWeek:f,showOutsideDays:!0,date:o,minDate:n,maxDate:c,...O});return d.length?e.createElement("div",{className:H("relative","w-min","-mt-1",m)},e.createElement(w,{className:"absolute top-0 -right-1"},e.createElement(D,{label:h[r?"previousYear":"previous"],theme:"neutral",size:"md",...!r&&I({calendars:d}),...r&&{onClick:()=>b(s-16)},disabled:r&&B},e.createElement(Y,{is:q})),e.createElement(D,{label:h[r?"nextYear":"next"],theme:"neutral",size:"md",...!r&&P({calendars:d}),...r&&{onClick:()=>b(s+16)},disabled:r&&M},e.createElement(Y,{is:G}))),r&&e.createElement(g,{className:"grid-cols-[repeat(4,1fr)] gap-x-1 gap-y-3 pt-12 [direction:rtl]"},T.map((t,a)=>{const l=t===o.getFullYear();return t?e.createElement(ee,{key:"".concat(t).concat(a),theme:l?"primary":"neutral",onClick:()=>A(t),selected:l},t):e.createElement("div",{key:a,className:"h-10 w-16"})})),!r&&d.map(({month:t,year:a,weeks:l})=>e.createElement("div",{key:"".concat(t).concat(a)},e.createElement(w,{className:"mb-4 h-10 items-center"},e.createElement(N,{theme:"neutral",onClick:()=>E(!0),className:"text-grey-1000 px-0"},S[t]," ",a)),e.createElement(g,{className:"mb-3"},te(z,f).map(p=>e.createElement(K,{as:"span",size:"sm",weight:"bold",key:"".concat(t).concat(a).concat(p),className:"text-center"},p))),e.createElement(g,null,l.map((p,R)=>p.map((y,U)=>{const x="".concat(t).concat(a).concat(R).concat(U);if(!y)return e.createElement("div",{key:x});const{date:W,selected:k,today:v,prevMonth:_,nextMonth:$}=y;return e.createElement(Z,{isOutsideMonth:_||$,isSelected:k,isToday:v,key:x,ref:k?i:v?u:null,...j({dateObj:y}),type:"button"},W.getDate())})))))):null};C.displayName="Calendar";export{C as Calendar};
 //# sourceMappingURL=Calendar.js.map

package/dist/components/calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Box } from '~/components/box'\nimport { Button } from '~/components/button'\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { Text } from '~/components/text'\nimport type { CSS } from '~/stitches'\nimport { styled } from '~/stitches'\n\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst Grid = styled('div', {\n  display: 'grid',\n  gridTemplateColumns: 'repeat(7, 1fr)',\n  gridGap: '$1 $2'\n})\n\nconst StyledButton = styled(Button, {\n  color: '$grey1000',\n  p: '$3',\n  width: '$6',\n  variants: {\n    selected: {\n      false: {\n        color: '$grey1000 !important',\n        fontWeight: 400,\n        '&:hover': {\n          bg: '$grey200 !important',\n          color: '$grey1000 !important'\n        },\n        '&[disabled]': { bg: 'white !important' }\n      }\n    }\n  }\n})\n\nexport type CalendarTranslationProps = {\n  monthNames?: string[]\n  weekdayNames?: string[]\n  labels?: {\n    open: string\n    next: string\n    previous: string\n    nextYear: string\n    previousYear: string\n  }\n}\n\ntype CalendarProps = DayzedInterface &\n  CalendarTranslationProps & {\n    css?: CSS\n    refDateToday?: React.RefObject<HTMLButtonElement>\n    refDateSelected?: React.RefObject<HTMLButtonElement>\n    setYear: (date: Date) => Promise<void>\n  }\n\nconst offsetWeekdayNames = (\n  weekdayNames: string[],\n  firstDayOfWeek: number\n): string[] => {\n  const start = weekdayNames.slice(0, firstDayOfWeek)\n  const end = weekdayNames.slice(firstDayOfWeek)\n  return end.concat(start)\n}\n\nexport const Calendar = ({\n  css,\n  refDateSelected,\n  refDateToday,\n  firstDayOfWeek = 0,\n  monthNames = monthNamesShort,\n  weekdayNames = weekdayNamesShort,\n  labels = DEFAULT_LABELS,\n  date = new Date(),\n  minDate,\n  maxDate,\n  setYear,\n  ...remainingProps\n}: CalendarProps) => {\n  const [showYears, setShowYears] = React.useState<boolean>(false)\n  const [currentYear, setCurrentYear] = React.useState<number>(\n    date?.getFullYear()\n  )\n\n  const handleSetYear = (year: number): void => {\n    const newDate = date\n    newDate.setFullYear(year)\n    setYear(newDate)\n    setShowYears(false)\n  }\n\n  const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n  const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n  const yearList = Array.from({ length: 16 }, (_, i) => {\n    const year = currentYear - i\n    if (\n      (maxDate && year > maxDate.getFullYear()) ||\n      (minDate && year < minDate.getFullYear())\n    )\n      return 0\n    return year\n  })\n\n  const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n    firstDayOfWeek,\n    showOutsideDays: true,\n    date,\n    minDate,\n    maxDate,\n    ...remainingProps\n  })\n\n  if (!calendars.length) return null\n\n  return (\n    <Box\n      css={{ position: 'relative', width: 'min-content', mt: '-$1', ...css }}\n    >\n      <Flex css={{ position: 'absolute', top: 0, right: '-$1' }}>\n        <ActionIcon\n          label={labels[showYears ? 'previousYear' : 'previous']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getBackProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear - 16)\n          })}\n          disabled={showYears && isAtMinYear}\n        >\n          <Icon is={ChevronLeft} />\n        </ActionIcon>\n        <ActionIcon\n          label={labels[showYears ? 'nextYear' : 'next']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getForwardProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear + 16)\n          })}\n          disabled={showYears && isAtMaxYear}\n        >\n          <Icon is={ChevronRight} />\n        </ActionIcon>\n      </Flex>\n      {showYears && (\n        <Grid\n          css={{\n            gridTemplateColumns: 'repeat(4, 1fr)',\n            pt: '$7',\n            direction: 'rtl',\n            gridGap: '$3 $1'\n          }}\n        >\n          {yearList.map((year, i) => {\n            const isCurrentYear = year === date.getFullYear()\n            if (!year)\n              return <Box key={i} css={{ width: '$6', height: '$4' }} />\n\n            return (\n              <StyledButton\n                key={`${year}${i}`}\n                theme={isCurrentYear ? 'primary' : 'neutral'}\n                onClick={() => handleSetYear(year)}\n                selected={isCurrentYear}\n              >\n                {year}\n              </StyledButton>\n            )\n          })}\n        </Grid>\n      )}\n      {!showYears &&\n        calendars.map(({ month, year, weeks }) => (\n          <Box key={`${month}${year}`}>\n            <Flex css={{ height: '$4', alignItems: 'center', mb: '$4' }}>\n              <Button\n                theme=\"neutral\"\n                css={{ px: '0', color: '$grey1000' }}\n                onClick={() => setShowYears(true)}\n              >\n                {monthNames[month]} {year}\n              </Button>\n            </Flex>\n            <Grid css={{ mb: '$3' }}>\n              {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n                (weekday) => (\n                  <Text\n                    as=\"span\"\n                    size=\"sm\"\n                    weight=\"bold\"\n                    key={`${month}${year}${weekday}`}\n                    css={{ textAlign: 'center' }}\n                  >\n                    {weekday}\n                  </Text>\n                )\n              )}\n            </Grid>\n            <Grid>\n              {weeks.map((week, weekIndex) =>\n                week.map((dateObj, index) => {\n                  const key = `${month}${year}${weekIndex}${index}`\n\n                  if (!dateObj) return <div key={key} />\n\n                  const { date, selected, today, prevMonth, nextMonth } =\n                    dateObj\n\n                  return (\n                    <Day\n                      isOutsideMonth={prevMonth || nextMonth}\n                      isSelected={selected}\n                      isToday={today}\n                      key={key}\n                      ref={\n                        selected ? refDateSelected : today ? refDateToday : null\n                      }\n                      {...getDateProps({ dateObj })}\n                      type=\"button\"\n                    >\n                      {date.getDate()}\n                    </Day>\n                  )\n                })\n              )}\n            </Grid>\n          </Box>\n        ))}\n    </Box>\n  )\n}\n\nCalendar.displayName = 'Calendar'\n"],"names":["Grid","styled","StyledButton","Button","offsetWeekdayNames","weekdayNames","firstDayOfWeek","start","Calendar","css","refDateSelected","refDateToday","monthNames","monthNamesShort","weekdayNamesShort","labels","DEFAULT_LABELS","date","minDate","maxDate","setYear","remainingProps","showYears","setShowYears","React","currentYear","setCurrentYear","handleSetYear","year","newDate","isAtMinYear","isAtMaxYear","yearList","_","i","calendars","getBackProps","getForwardProps","getDateProps","useDayzed","Box","Flex","ActionIcon","Icon","ChevronLeft","ChevronRight","isCurrentYear","month","weeks","weekday","Text","week","weekIndex","dateObj","index","key","selected","today","prevMonth","nextMonth","Day"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Button } from '~/components/button'\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { Text } from '~/components/text'\nimport { styled } from '~/styled'\n\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst Grid = styled('div', {\n  base: ['grid', 'grid-cols-[repeat(7,1fr)]', 'gap-x-2', 'gap-y-1']\n})\n\nconst StyledButton = styled(Button, {\n  base: ['text-grey-1000', 'p-3', 'w-16'],\n  variants: {\n    selected: {\n      false: [\n        'disabled:bg-white!',\n        'font-normal',\n        'hover:bg-grey-200!',\n        'hover:text-grey-1000!',\n        'text-grey-1000!'\n      ]\n    }\n  }\n})\n\nexport type CalendarTranslationProps = {\n  monthNames?: string[]\n  weekdayNames?: string[]\n  labels?: {\n    open: string\n    next: string\n    previous: string\n    nextYear: string\n    previousYear: string\n  }\n}\n\ntype CalendarProps = DayzedInterface &\n  CalendarTranslationProps & {\n    refDateToday?: React.RefObject<HTMLButtonElement>\n    refDateSelected?: React.RefObject<HTMLButtonElement>\n    setYear: (date: Date) => Promise<void>\n    className?: string\n  }\n\nconst offsetWeekdayNames = (\n  weekdayNames: string[],\n  firstDayOfWeek: number\n): string[] => {\n  const start = weekdayNames.slice(0, firstDayOfWeek)\n  const end = weekdayNames.slice(firstDayOfWeek)\n  return end.concat(start)\n}\n\nexport const Calendar = ({\n  className,\n  refDateSelected,\n  refDateToday,\n  firstDayOfWeek = 0,\n  monthNames = monthNamesShort,\n  weekdayNames = weekdayNamesShort,\n  labels = DEFAULT_LABELS,\n  date = new Date(),\n  minDate,\n  maxDate,\n  setYear,\n  ...remainingProps\n}: CalendarProps) => {\n  const [showYears, setShowYears] = React.useState<boolean>(false)\n  const [currentYear, setCurrentYear] = React.useState<number>(\n    date?.getFullYear()\n  )\n\n  const handleSetYear = (year: number): void => {\n    const newDate = date\n    newDate.setFullYear(year)\n    setYear(newDate)\n    setShowYears(false)\n  }\n\n  const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n  const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n  const yearList = Array.from({ length: 16 }, (_, i) => {\n    const year = currentYear - i\n    if (\n      (maxDate && year > maxDate.getFullYear()) ||\n      (minDate && year < minDate.getFullYear())\n    )\n      return 0\n    return year\n  })\n\n  const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n    firstDayOfWeek,\n    showOutsideDays: true,\n    date,\n    minDate,\n    maxDate,\n    ...remainingProps\n  })\n\n  if (!calendars.length) return null\n\n  return (\n    <div className={clsx('relative', 'w-min', '-mt-1', className)}>\n      <Flex className=\"absolute top-0 -right-1\">\n        <ActionIcon\n          label={labels[showYears ? 'previousYear' : 'previous']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getBackProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear - 16)\n          })}\n          disabled={showYears && isAtMinYear}\n        >\n          <Icon is={ChevronLeft} />\n        </ActionIcon>\n        <ActionIcon\n          label={labels[showYears ? 'nextYear' : 'next']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getForwardProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear + 16)\n          })}\n          disabled={showYears && isAtMaxYear}\n        >\n          <Icon is={ChevronRight} />\n        </ActionIcon>\n      </Flex>\n      {showYears && (\n        <Grid className=\"grid-cols-[repeat(4,1fr)] gap-x-1 gap-y-3 pt-12 [direction:rtl]\">\n          {yearList.map((year, i) => {\n            const isCurrentYear = year === date.getFullYear()\n            if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n            return (\n              <StyledButton\n                key={`${year}${i}`}\n                theme={isCurrentYear ? 'primary' : 'neutral'}\n                onClick={() => handleSetYear(year)}\n                selected={isCurrentYear}\n              >\n                {year}\n              </StyledButton>\n            )\n          })}\n        </Grid>\n      )}\n      {!showYears &&\n        calendars.map(({ month, year, weeks }) => (\n          <div key={`${month}${year}`}>\n            <Flex className=\"mb-4 h-10 items-center\">\n              <Button\n                theme=\"neutral\"\n                onClick={() => setShowYears(true)}\n                className=\"text-grey-1000 px-0\"\n              >\n                {monthNames[month]} {year}\n              </Button>\n            </Flex>\n            <Grid className=\"mb-3\">\n              {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n                (weekday) => (\n                  <Text\n                    as=\"span\"\n                    size=\"sm\"\n                    weight=\"bold\"\n                    key={`${month}${year}${weekday}`}\n                    className=\"text-center\"\n                  >\n                    {weekday}\n                  </Text>\n                )\n              )}\n            </Grid>\n            <Grid>\n              {weeks.map((week, weekIndex) =>\n                week.map((dateObj, index) => {\n                  const key = `${month}${year}${weekIndex}${index}`\n\n                  if (!dateObj) return <div key={key} />\n\n                  const { date, selected, today, prevMonth, nextMonth } =\n                    dateObj\n\n                  return (\n                    <Day\n                      isOutsideMonth={prevMonth || nextMonth}\n                      isSelected={selected}\n                      isToday={today}\n                      key={key}\n                      ref={\n                        selected ? refDateSelected : today ? refDateToday : null\n                      }\n                      {...getDateProps({ dateObj })}\n                      type=\"button\"\n                    >\n                      {date.getDate()}\n                    </Day>\n                  )\n                })\n              )}\n            </Grid>\n          </div>\n        ))}\n    </div>\n  )\n}\n\nCalendar.displayName = 'Calendar'\n"],"names":["Grid","styled","StyledButton","Button","offsetWeekdayNames","weekdayNames","firstDayOfWeek","start","Calendar","className","refDateSelected","refDateToday","monthNames","monthNamesShort","weekdayNamesShort","labels","DEFAULT_LABELS","date","minDate","maxDate","setYear","remainingProps","showYears","setShowYears","React","currentYear","setCurrentYear","handleSetYear","year","newDate","isAtMinYear","isAtMaxYear","yearList","_","i","calendars","getBackProps","getForwardProps","getDateProps","useDayzed","clsx","Flex","ActionIcon","Icon","ChevronLeft","ChevronRight","isCurrentYear","month","weeks","weekday","Text","week","weekIndex","dateObj","index","key","selected","today","prevMonth","nextMonth","Day"],"mappings":"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"}