@atom-learning/components 6.0.0-beta.8 → 6.0.0-beta.9

package/dist/styled.d.ts

@@ -3,7 +3,9 @@ type Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl';
 export declare const Theme: ({ children, theme }: React.PropsWithChildren<{
     theme: Record<string, string>;
 }>) => React.JSX.Element;
-export declare const createTheme: (a: any) => string;
+export declare const createTheme: (config: Record<string, Record<string, string>>) => {
+    [k: string]: string;
+};
 type ResponsiveVariant<V extends string | number | boolean> = V | Partial<Record<Breakpoint, V>>;
 type Keys<V> = keyof V;
 type StringKeys<V> = Extract<Keys<V>, string>;

package/dist/styled.js

@@ -1,2 +1,2 @@
-import p from"clsx";import c from"react";import{tv as b}from"tailwind-variants";const g=({children:e,theme:a})=>c.createElement("div",{className:"contents",style:a},e),j=e=>"createTheme",v=(e,a)=>{const u=Object.keys(a.variants||{}),h=b(a);return c.forwardRef((r,o)=>{const E=u.map(t=>{const s=r[t],l=a.variants[t];return typeof s=="object"&&s?Object.entries(s).flatMap(([m,i])=>{const y=l&&l[i];return y?y.flatMap(d=>m==="@initial"?d:"".concat(m.replace("@",""),":").concat(d)):[]}):[]}).flat(),N=h(r),n=Object.fromEntries(Object.entries(r).filter(([t])=>!u.includes(t)&&t!=="as")),f=p(N,E).trim();if(typeof e=="string"||typeof e=="function"||e&&typeof e=="object"){const t=e;if(typeof e=="string")return c.createElement(r.as||t,{...n,as:r.as,ref:o,className:f});const s={...n,as:r.as,className:p(r.className,f).trim(),ref:o};return c.createElement(t,s)}if(c.isValidElement(e)){const t=e,s=t.props.className,l=n.className,m=p(s,l,f).trim(),i={...n,as:r.as||t.props.as,className:m};return o&&(i.ref=o),c.cloneElement(t,i)}throw console.log({el:e,styles:a}),Error("Something is wrong")})};export{g as Theme,j as createTheme,v as styled};
+import y from"clsx";import c from"react";import{tv as N}from"tailwind-variants";const O=({children:e,theme:s})=>c.createElement("div",{className:"contents",style:s},e),h=e=>Object.fromEntries(Object.values(e).flatMap(s=>Object.entries(s).map(([n,p])=>["--".concat(n),p]))),v=(e,s)=>{const n=Object.keys(s.variants||{}),p=N(s);return c.forwardRef((a,o)=>{const E=n.map(t=>{const r=a[t],i=s.variants[t];return typeof r=="object"&&r?Object.entries(r).flatMap(([m,f])=>{const b=i&&i[f];return b?b.flatMap(j=>m==="@initial"?j:"".concat(m.replace("@",""),":").concat(j)):[]}):[]}).flat(),d=p(a),l=Object.fromEntries(Object.entries(a).filter(([t])=>!n.includes(t)&&t!=="as")),u=y(d,E).trim();if(typeof e=="string"||typeof e=="function"||e&&typeof e=="object"){const t=e;if(typeof e=="string")return c.createElement(a.as||t,{...l,ref:o,className:u});const r={...l,as:a.as,className:y(a.className,u).trim(),ref:o};return c.createElement(t,r)}if(c.isValidElement(e)){const t=e,r=t.props.className,i=l.className,m=y(r,i,u).trim(),f={...l,as:a.as||t.props.as,className:m};return o&&(f.ref=o),c.cloneElement(t,f)}throw console.log({el:e,styles:s}),Error("Something is wrong")})};export{O as Theme,h as createTheme,v as styled};
 //# sourceMappingURL=styled.js.map

package/dist/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../src/styled.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React, { ElementType, ReactElement } from 'react'\nimport { tv } from 'tailwind-variants'\n\ntype Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl'\n\nexport const Theme = ({\n  children,\n  theme\n}: React.PropsWithChildren<{ theme: Record<string, string> }>) => (\n  <div className=\"contents\" style={theme}>\n    {children}\n  </div>\n)\n\nexport const createTheme = (a) => 'createTheme'\n\n// ---------------------------------------------------------------------------\n// Local typing for styled()\n// ---------------------------------------------------------------------------\n\n// Responsive variant prop: either a single value or a per-breakpoint map\ntype ResponsiveVariant<V extends string | number | boolean> =\n  | V\n  | Partial<Record<Breakpoint, V>>\n\n// Helpers to derive value type from variant config keys\ntype Keys<V> = keyof V\ntype StringKeys<V> = Extract<Keys<V>, string>\ntype NumberKeys<V> = Extract<Keys<V>, number>\n// Booleans are represented as string keys \"true\"/\"false\" in our VariantConfig,\n// so we only need to detect those in StringKeys.\ntype BooleanKeys<V> = Extract<StringKeys<V>, 'true' | 'false'>\n\ntype HasBoolLikeKeys<V> =\n  BooleanKeys<V> extends never\n    ? Extract<StringKeys<V>, 'true' | 'false'> extends never\n      ? false\n      : true\n    : true\n\n// If a variant's keys are boolean-like, expose the prop as boolean.\n// If it has numeric keys, allow those numbers and their string forms.\n// Otherwise use a string union of the keys.\ntype VariantValueType<V> =\n  HasBoolLikeKeys<V> extends true\n    ? boolean\n    : [NumberKeys<V>] extends [never]\n      ? StringKeys<V>\n      : NumberKeys<V> | `${NumberKeys<V>}`\n\n// Shape of the `variants` section passed to styled()\ntype VariantConfig = Record<string, Record<string | number, string[]>>\n\n// Props derived from a `variants` config\ntype VariantProps<V extends VariantConfig | undefined> = V extends VariantConfig\n  ? {\n      [K in keyof V]?: ResponsiveVariant<VariantValueType<V[K]>>\n    }\n  : {}\n\n// Typed config for our styled helper.\n// We intentionally *don't* rely on tailwind-variants' TS types here;\n// we only care about enough structure to derive props.\ntype StyledConfig<V extends VariantConfig | undefined = undefined> = {\n  base?: string | string[]\n  variants?: V\n  compoundVariants?: Array<\n    {\n      class?: string | string[]\n    } & (V extends VariantConfig\n      ? {\n          [K in keyof V]?: VariantValueType<V[K]> | VariantValueType<V[K]>[]\n        }\n      : Record<string, never>)\n  >\n  defaultVariants?: V extends VariantConfig\n    ? { [K in keyof V]?: VariantValueType<V[K]> }\n    : Record<string, never>\n}\n\nexport const styled = <\n  TElement extends ElementType,\n  V extends VariantConfig | undefined = undefined\n>(\n  el: TElement,\n  styles: StyledConfig<V>\n) => {\n  const variantKeys = Object.keys(styles.variants || {})\n  const tvFn = tv(styles as any)\n\n  type VariantPropsType = VariantProps<V>\n  type BaseProps = React.ComponentPropsWithRef<TElement>\n  type StyledProps = BaseProps & VariantPropsType & { as?: ElementType }\n\n  const Comp = React.forwardRef<React.ElementRef<TElement>, StyledProps>(\n    (props, ref) => {\n      const additionalStyles = variantKeys\n        .map((variantKey) => {\n          const responsiveVariantConfig:\n            | Record<Breakpoint, string>\n            | undefined = props[variantKey]\n          const variantStyles: Record<string, string[]> =\n            styles.variants![variantKey]\n\n          if (\n            typeof responsiveVariantConfig === 'object' &&\n            responsiveVariantConfig\n          ) {\n            return Object.entries(responsiveVariantConfig).flatMap(\n              ([key, val]: [Breakpoint, string]) => {\n                const styleArr: string[] = variantStyles && variantStyles[val]\n\n                if (styleArr) {\n                  return styleArr.flatMap((cls: string) => {\n                    if (key === '@initial') return cls\n                    return `${key.replace('@', '')}:${cls}`\n                  })\n                }\n                return []\n              }\n            )\n          }\n\n          return []\n        })\n        .flat()\n\n      const cls = tvFn(props)\n\n      const filteredProps = Object.fromEntries(\n        Object.entries(props).filter(\n          ([key]) => !variantKeys.includes(key) && key !== 'as'\n        )\n      )\n\n      const mergedClassName = clsx(cls, additionalStyles).trim()\n\n      if (\n        typeof el === 'string' ||\n        typeof el === 'function' ||\n        (el && typeof el === 'object')\n      ) {\n        const elementType = el as ElementType\n\n        // If el is a host string ('div', 'span', etc.) we must not pass variant props to the DOM.\n        if (typeof el === 'string') {\n          return React.createElement(props.as || elementType, {\n            ...filteredProps,\n            as: props.as,\n            ref,\n            className: mergedClassName\n          })\n        }\n\n        // If el is a function component (including forwardRef), pass ALL props through\n        // (the wrapped component may expect variant props), but ensure className and ref are forwarded.\n        const propsForComponent = {\n          ...filteredProps, // original props (includes variant keys)\n          as: props.as,\n          className: clsx((props as any).className, mergedClassName).trim(),\n          ref\n        }\n\n        return React.createElement(elementType, propsForComponent)\n      }\n\n      if (React.isValidElement(el)) {\n        const element = el as ReactElement\n        // Merge existing element className, incoming filteredProps.className and our computed class\n        const existingClass = (element.props as any).className\n        const incomingClass = (filteredProps as any).className\n        const finalClassName = clsx(\n          existingClass,\n          incomingClass,\n          mergedClassName\n        ).trim()\n\n        const cloneProps: any = {\n          // ...element.props,\n          ...filteredProps,\n          as: props.as || element.props.as,\n          className: finalClassName\n        }\n\n        // Forward the ref if provided\n        if (ref) {\n          cloneProps.ref = ref\n        }\n\n        return React.cloneElement(element, cloneProps)\n      }\n\n      console.log({ el, styles })\n      throw Error('Something is wrong')\n    }\n  )\n\n  return Comp\n}\n"],"names":["Theme","children","theme","React","createTheme","a","styled","el","styles","variantKeys","tvFn","tv","props","ref","additionalStyles","variantKey","responsiveVariantConfig","variantStyles","key","val","styleArr","cls","filteredProps","mergedClassName","clsx","elementType","propsForComponent","element","existingClass","incomingClass","finalClassName","cloneProps"],"mappings":"gFAMO,MAAMA,EAAQ,CAAC,CACpB,SAAAC,EACA,MAAAC,CACF,IACEC,EAAA,cAAC,MAAA,CAAI,UAAU,WAAW,MAAOD,CAC9BD,EAAAA,CACH,EAGWG,EAAeC,GAAM,cAkErBC,EAAS,CAIpBC,EACAC,IACG,CACH,MAAMC,EAAc,OAAO,KAAKD,EAAO,UAAY,CAAE,CAAA,EAC/CE,EAAOC,EAAGH,CAAa,EA6G7B,OAvGaL,EAAM,WACjB,CAACS,EAAOC,IAAQ,CACd,MAAMC,EAAmBL,EACtB,IAAKM,GAAe,CACnB,MAAMC,EAEUJ,EAAMG,CAAU,EAC1BE,EACJT,EAAO,SAAUO,CAAU,EAE7B,OACE,OAAOC,GAA4B,UACnCA,EAEO,OAAO,QAAQA,CAAuB,EAAE,QAC7C,CAAC,CAACE,EAAKC,CAAG,IAA4B,CACpC,MAAMC,EAAqBH,GAAiBA,EAAcE,CAAG,EAE7D,OAAIC,EACKA,EAAS,QAASC,GACnBH,IAAQ,WAAmBG,EACxB,GAAG,OAAAH,EAAI,QAAQ,IAAK,EAAE,EAAC,GAAA,EAAI,OAAAG,CACnC,CAAA,EAEI,CACT,CAAA,CACF,EAGK,EACT,CAAC,EACA,KAEGA,EAAAA,EAAMX,EAAKE,CAAK,EAEhBU,EAAgB,OAAO,YAC3B,OAAO,QAAQV,CAAK,EAAE,OACpB,CAAC,CAACM,CAAG,IAAM,CAACT,EAAY,SAASS,CAAG,GAAKA,IAAQ,IACnD,CACF,EAEMK,EAAkBC,EAAKH,EAAKP,CAAgB,EAAE,OAEpD,GACE,OAAOP,GAAO,UACd,OAAOA,GAAO,YACbA,GAAM,OAAOA,GAAO,SACrB,CACA,MAAMkB,EAAclB,EAGpB,GAAI,OAAOA,GAAO,SAChB,OAAOJ,EAAM,cAAcS,EAAM,IAAMa,EAAa,CAClD,GAAGH,EACH,GAAIV,EAAM,GACV,IAAAC,EACA,UAAWU,CACb,CAAC,EAKH,MAAMG,EAAoB,CACxB,GAAGJ,EACH,GAAIV,EAAM,GACV,UAAWY,EAAMZ,EAAc,UAAWW,CAAe,EAAE,OAC3D,IAAAV,CACF,EAEA,OAAOV,EAAM,cAAcsB,EAAaC,CAAiB,CAC3D,CAEA,GAAIvB,EAAM,eAAeI,CAAE,EAAG,CAC5B,MAAMoB,EAAUpB,EAEVqB,EAAiBD,EAAQ,MAAc,UACvCE,EAAiBP,EAAsB,UACvCQ,EAAiBN,EACrBI,EACAC,EACAN,CACF,EAAE,KAAK,EAEDQ,EAAkB,CAEtB,GAAGT,EACH,GAAIV,EAAM,IAAMe,EAAQ,MAAM,GAC9B,UAAWG,CACb,EAGA,OAAIjB,IACFkB,EAAW,IAAMlB,GAGZV,EAAM,aAAawB,EAASI,CAAU,CAC/C,CAEA,MAAA,QAAQ,IAAI,CAAE,GAAAxB,EAAI,OAAAC,CAAO,CAAC,EACpB,MAAM,oBAAoB,CAClC,CACF,CAGF"}
+{"version":3,"file":"styled.js","sources":["../src/styled.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React, { ElementType, ReactElement } from 'react'\nimport { tv } from 'tailwind-variants'\n\ntype Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl'\n\nexport const Theme = ({\n  children,\n  theme\n}: React.PropsWithChildren<{ theme: Record<string, string> }>) => (\n  <div className=\"contents\" style={theme}>\n    {children}\n  </div>\n)\n\nexport const createTheme = (config: Record<string, Record<string, string>>) =>\n  Object.fromEntries(\n    Object.values(config).flatMap((tokens) =>\n      Object.entries(tokens).map(([token, value]) => [`--${token}`, value])\n    )\n  )\n\n// ---------------------------------------------------------------------------\n// Local typing for styled()\n// ---------------------------------------------------------------------------\n\n// Responsive variant prop: either a single value or a per-breakpoint map\ntype ResponsiveVariant<V extends string | number | boolean> =\n  | V\n  | Partial<Record<Breakpoint, V>>\n\n// Helpers to derive value type from variant config keys\ntype Keys<V> = keyof V\ntype StringKeys<V> = Extract<Keys<V>, string>\ntype NumberKeys<V> = Extract<Keys<V>, number>\n// Booleans are represented as string keys \"true\"/\"false\" in our VariantConfig,\n// so we only need to detect those in StringKeys.\ntype BooleanKeys<V> = Extract<StringKeys<V>, 'true' | 'false'>\n\ntype HasBoolLikeKeys<V> =\n  BooleanKeys<V> extends never\n    ? Extract<StringKeys<V>, 'true' | 'false'> extends never\n      ? false\n      : true\n    : true\n\n// If a variant's keys are boolean-like, expose the prop as boolean.\n// If it has numeric keys, allow those numbers and their string forms.\n// Otherwise use a string union of the keys.\ntype VariantValueType<V> =\n  HasBoolLikeKeys<V> extends true\n    ? boolean\n    : [NumberKeys<V>] extends [never]\n      ? StringKeys<V>\n      : NumberKeys<V> | `${NumberKeys<V>}`\n\n// Shape of the `variants` section passed to styled()\ntype VariantConfig = Record<string, Record<string | number, string[]>>\n\n// Props derived from a `variants` config\ntype VariantProps<V extends VariantConfig | undefined> = V extends VariantConfig\n  ? {\n      [K in keyof V]?: ResponsiveVariant<VariantValueType<V[K]>>\n    }\n  : {}\n\n// Typed config for our styled helper.\n// We intentionally *don't* rely on tailwind-variants' TS types here;\n// we only care about enough structure to derive props.\ntype StyledConfig<V extends VariantConfig | undefined = undefined> = {\n  base?: string | string[]\n  variants?: V\n  compoundVariants?: Array<\n    {\n      class?: string | string[]\n    } & (V extends VariantConfig\n      ? {\n          [K in keyof V]?: VariantValueType<V[K]> | VariantValueType<V[K]>[]\n        }\n      : Record<string, never>)\n  >\n  defaultVariants?: V extends VariantConfig\n    ? { [K in keyof V]?: VariantValueType<V[K]> }\n    : Record<string, never>\n}\n\nexport const styled = <\n  TElement extends ElementType,\n  V extends VariantConfig | undefined = undefined\n>(\n  el: TElement,\n  styles: StyledConfig<V>\n) => {\n  const variantKeys = Object.keys(styles.variants || {})\n  const tvFn = tv(styles as any)\n\n  type VariantPropsType = VariantProps<V>\n  type BaseProps = React.ComponentPropsWithRef<TElement>\n  type StyledProps = BaseProps & VariantPropsType & { as?: ElementType }\n\n  const Comp = React.forwardRef<React.ElementRef<TElement>, StyledProps>(\n    (props, ref) => {\n      const additionalStyles = variantKeys\n        .map((variantKey) => {\n          const responsiveVariantConfig:\n            | Record<Breakpoint, string>\n            | undefined = props[variantKey]\n          const variantStyles: Record<string, string[]> =\n            styles.variants![variantKey]\n\n          if (\n            typeof responsiveVariantConfig === 'object' &&\n            responsiveVariantConfig\n          ) {\n            return Object.entries(responsiveVariantConfig).flatMap(\n              ([key, val]: [Breakpoint, string]) => {\n                const styleArr: string[] = variantStyles && variantStyles[val]\n\n                if (styleArr) {\n                  return styleArr.flatMap((cls: string) => {\n                    if (key === '@initial') return cls\n                    return `${key.replace('@', '')}:${cls}`\n                  })\n                }\n                return []\n              }\n            )\n          }\n\n          return []\n        })\n        .flat()\n\n      const cls = tvFn(props)\n\n      const filteredProps = Object.fromEntries(\n        Object.entries(props).filter(\n          ([key]) => !variantKeys.includes(key) && key !== 'as'\n        )\n      )\n\n      const mergedClassName = clsx(cls, additionalStyles).trim()\n\n      if (\n        typeof el === 'string' ||\n        typeof el === 'function' ||\n        (el && typeof el === 'object')\n      ) {\n        const elementType = el as ElementType\n\n        // If el is a host string ('div', 'span', etc.) we must not pass variant props to the DOM.\n        if (typeof el === 'string') {\n          return React.createElement(props.as || elementType, {\n            ...filteredProps,\n            ref,\n            className: mergedClassName\n          })\n        }\n\n        // If el is a function component (including forwardRef), pass ALL props through\n        // (the wrapped component may expect variant props), but ensure className and ref are forwarded.\n        const propsForComponent = {\n          ...filteredProps, // original props (includes variant keys)\n          as: props.as,\n          className: clsx((props as any).className, mergedClassName).trim(),\n          ref\n        }\n\n        return React.createElement(elementType, propsForComponent)\n      }\n\n      if (React.isValidElement(el)) {\n        const element = el as ReactElement\n        // Merge existing element className, incoming filteredProps.className and our computed class\n        const existingClass = (element.props as any).className\n        const incomingClass = (filteredProps as any).className\n        const finalClassName = clsx(\n          existingClass,\n          incomingClass,\n          mergedClassName\n        ).trim()\n\n        const cloneProps: any = {\n          // ...element.props,\n          ...filteredProps,\n          as: props.as || element.props.as,\n          className: finalClassName\n        }\n\n        // Forward the ref if provided\n        if (ref) {\n          cloneProps.ref = ref\n        }\n\n        return React.cloneElement(element, cloneProps)\n      }\n\n      console.log({ el, styles })\n      throw Error('Something is wrong')\n    }\n  )\n\n  return Comp\n}\n"],"names":["Theme","children","theme","React","createTheme","config","tokens","token","value","styled","el","styles","variantKeys","tvFn","tv","props","ref","additionalStyles","variantKey","responsiveVariantConfig","variantStyles","key","val","styleArr","cls","filteredProps","mergedClassName","clsx","elementType","propsForComponent","element","existingClass","incomingClass","finalClassName","cloneProps"],"mappings":"sFAMaA,EAAQ,CAAC,CACpB,SAAAC,EACA,MAAAC,CACF,IACEC,EAAA,cAAC,MAAA,CAAI,UAAU,WAAW,MAAOD,CAC9BD,EAAAA,CACH,EAGWG,EAAeC,GAC1B,OAAO,YACL,OAAO,OAAOA,CAAM,EAAE,QAASC,GAC7B,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACC,EAAOC,CAAK,IAAM,CAAC,KAAK,OAAAD,CAASC,EAAAA,CAAK,CAAC,CACtE,CACF,EAkEWC,EAAS,CAIpBC,EACAC,IACG,CACH,MAAMC,EAAc,OAAO,KAAKD,EAAO,UAAY,CAAE,CAAA,EAC/CE,EAAOC,EAAGH,CAAa,EA4G7B,OAtGaR,EAAM,WACjB,CAACY,EAAOC,IAAQ,CACd,MAAMC,EAAmBL,EACtB,IAAKM,GAAe,CACnB,MAAMC,EAEUJ,EAAMG,CAAU,EAC1BE,EACJT,EAAO,SAAUO,CAAU,EAE7B,OACE,OAAOC,GAA4B,UACnCA,EAEO,OAAO,QAAQA,CAAuB,EAAE,QAC7C,CAAC,CAACE,EAAKC,CAAG,IAA4B,CACpC,MAAMC,EAAqBH,GAAiBA,EAAcE,CAAG,EAE7D,OAAIC,EACKA,EAAS,QAASC,GACnBH,IAAQ,WAAmBG,EACxB,GAAG,OAAAH,EAAI,QAAQ,IAAK,EAAE,EAAC,GAAA,EAAI,OAAAG,CAAAA,CACnC,EAEI,CAAA,CACT,CACF,EAGK,CAAA,CACT,CAAC,EACA,OAEGA,EAAMX,EAAKE,CAAK,EAEhBU,EAAgB,OAAO,YAC3B,OAAO,QAAQV,CAAK,EAAE,OACpB,CAAC,CAACM,CAAG,IAAM,CAACT,EAAY,SAASS,CAAG,GAAKA,IAAQ,IACnD,CACF,EAEMK,EAAkBC,EAAKH,EAAKP,CAAgB,EAAE,KAAK,EAEzD,GACE,OAAOP,GAAO,UACd,OAAOA,GAAO,YACbA,GAAM,OAAOA,GAAO,SACrB,CACA,MAAMkB,EAAclB,EAGpB,GAAI,OAAOA,GAAO,SAChB,OAAOP,EAAM,cAAcY,EAAM,IAAMa,EAAa,CAClD,GAAGH,EACH,IAAAT,EACA,UAAWU,CACb,CAAC,EAKH,MAAMG,EAAoB,CACxB,GAAGJ,EACH,GAAIV,EAAM,GACV,UAAWY,EAAMZ,EAAc,UAAWW,CAAe,EAAE,KAAK,EAChE,IAAAV,CACF,EAEA,OAAOb,EAAM,cAAcyB,EAAaC,CAAiB,CAC3D,CAEA,GAAI1B,EAAM,eAAeO,CAAE,EAAG,CAC5B,MAAMoB,EAAUpB,EAEVqB,EAAiBD,EAAQ,MAAc,UACvCE,EAAiBP,EAAsB,UACvCQ,EAAiBN,EACrBI,EACAC,EACAN,CACF,EAAE,KAAK,EAEDQ,EAAkB,CAEtB,GAAGT,EACH,GAAIV,EAAM,IAAMe,EAAQ,MAAM,GAC9B,UAAWG,CACb,EAGA,OAAIjB,IACFkB,EAAW,IAAMlB,GAGZb,EAAM,aAAa2B,EAASI,CAAU,CAC/C,CAEA,MAAQ,QAAA,IAAI,CAAE,GAAAxB,EAAI,OAAAC,CAAO,CAAC,EACpB,MAAM,oBAAoB,CAClC,CACF,CAGF"}

package/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "6.0.0-beta.8",
+  "version": "6.0.0-beta.9",
   "description": "",
   "files": [
     "dist",

package/src/index.css

@@ -10,6 +10,23 @@
 
   --bg-chevron: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%23757575%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20color%3D%22%23757575%22%3E%3Cpolyline%20points%3D%226%2010%2012%2016%2018%2010%22%2F%3E%3C%2Fsvg%3E);
 
+  /**
+    * Font Feature Settings for Inter
+    *
+    * https://rsms.me/inter/#feature-examples
+    * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
+    *
+    * These font-settings apply various character variants and stylistic alternatives
+    * to improve the readability of text.
+    *
+    * This will usually be applied across all app UI when used by a student.
+    */
+  --readability-features: 'cv02, cv04, cv05, cv08, cv11, ss03';
+  --readability-number-features: 'cv02, cv04, tnum';
+
+  /**
+   * Animations
+   */
   --animate-accordion-open: accordion-open 300ms ease-out;
   --animate-accordion-close: accordion-close 300ms ease-out;
 
@@ -131,3 +148,14 @@
     display: table;
   }
 }
+
+/**
+ * Font Feature Settings for Inter
+ */
+@utility readability-features {
+  font-feature-settings: var(--readability-features);
+}
+
+@utility readability-number-features {
+  font-feature-settings: var(--readability-number-features);
+}