@atom-learning/components 11.5.0 → 12.0.0-beta.1

package/dist/components/number-input/NumberInputStepper.js

@@ -10,54 +10,54 @@ var StyledStepperButton = styled(ActionIcon, {
 		"rounded-md",
 		"z-1",
 		"h-full!",
-		"hover:[&_svg]:text-grey-800",
-		"hover:bg-grey-100",
-		"[&_svg]:text-grey-700",
-		"active:[&_svg]:text-grey-900",
-		"active:bg-grey-200",
+		"hover:[&_svg]:text-subtle",
+		"hover:bg-input",
+		"[&_svg]:text-icon-subtle",
+		"active:[&_svg]:text-icon",
+		"active:bg-surface-hover",
 		"disabled:opacity-30",
 		"disabled:pointer-events-none"
 	],
 	variants: {
 		fieldAppearance: {
-			standard: ["bg-white", "border-grey-800!"],
+			standard: ["bg-surface", "border-strong!"],
 			modern: [
-				"bg-grey-100",
-				"border-grey-100!",
-				"hover:bg-grey-200!"
+				"bg-input",
+				"border-(--background-color-input)!",
+				"hover:bg-surface-hover!"
 			]
 		},
-		fieldTheme: {
-			white: [],
-			grey: []
+		fieldFill: {
+			surface: [],
+			subtle: []
 		},
 		emphasis: { bold: [
-			"[&_svg]:text-primary-700",
-			"hover:bg-primary-100!",
-			"hover:[&_svg]:text-primary-800!",
-			"active:bg-primary-200!",
-			"active:[&_svg]:text-primary-900!"
+			"[&_svg]:text-accent",
+			"hover:bg-accent-subtle!",
+			"hover:[&_svg]:text-accent!",
+			"active:bg-accent-subtle-hover!",
+			"active:[&_svg]:text-accent-hover!"
 		] }
 	},
 	compoundVariants: [
 		{
 			fieldAppearance: "modern",
-			fieldTheme: "white",
-			class: ["bg-white"]
+			fieldFill: "surface",
+			class: ["bg-surface"]
 		},
 		{
 			fieldAppearance: "standard",
 			emphasis: "bold",
-			class: ["bg-white", "border-primary-800!"]
+			class: ["bg-surface", "border-accent-solid!"]
 		},
 		{
 			fieldAppearance: "modern",
 			emphasis: "bold",
-			class: ["bg-white!", "hover:bg-primary-100!"]
+			class: ["bg-surface!", "hover:bg-accent-subtle!"]
 		}
 	]
 });
-var NumberInputStepper = ({ ref, icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", fieldTheme, ...rest }) => {
+var NumberInputStepper = ({ ref, icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", fieldFill, ...rest }) => {
 	/**
 	* Focus has been removed from the button
 	* as the increment and decrement buttons should be keyboard accessible via arrow keys.
@@ -73,7 +73,7 @@ var NumberInputStepper = ({ ref, icon, disabledTooltipContent, showTooltip, fiel
 				tabIndex: -1,
 				appearance: "outline",
 				fieldAppearance,
-				fieldTheme,
+				fieldFill,
 				ref,
 				...rest,
 				children: /* @__PURE__ */ jsx(Icon, { is: icon })

package/dist/components/number-input/NumberInputStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-grey-800',\n    'hover:bg-grey-100',\n    '[&_svg]:text-grey-700',\n    'active:[&_svg]:text-grey-900',\n    'active:bg-grey-200',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-white', 'border-grey-800!'],\n      modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n    },\n    fieldTheme: {\n      white: [],\n      grey: []\n    },\n    emphasis: {\n      bold: [\n        '[&_svg]:text-primary-700',\n        'hover:bg-primary-100!',\n        'hover:[&_svg]:text-primary-800!',\n        'active:bg-primary-200!',\n        'active:[&_svg]:text-primary-900!'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      fieldAppearance: 'modern',\n      fieldTheme: 'white',\n      class: ['bg-white']\n    },\n    {\n      fieldAppearance: 'standard',\n      emphasis: 'bold',\n      class: ['bg-white', 'border-primary-800!']\n    },\n    {\n      fieldAppearance: 'modern',\n      emphasis: 'bold',\n      class: ['bg-white!', 'hover:bg-primary-100!']\n    }\n  ]\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = ({\n  ref,\n  icon,\n  disabledTooltipContent,\n  showTooltip,\n  fieldAppearance = 'standard',\n  fieldTheme,\n  ...rest\n}: NumberInputStepperProps) => {\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <span className=\"z-1\" tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            fieldTheme={fieldTheme}\n            ref={ref}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </span>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,sBAAsB,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,kBAAkB;GACzC,QAAQ;IAAC;IAAe;IAAoB;GAAoB;EAClE;EACA,YAAY;GACV,OAAO,CAAC;GACR,MAAM,CAAC;EACT;EACA,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;EACF,EACF;CACF;CACA,kBAAkB;EAChB;GACE,iBAAiB;GACjB,YAAY;GACZ,OAAO,CAAC,UAAU;EACpB;EACA;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,YAAY,qBAAqB;EAC3C;EACA;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,aAAa,uBAAuB;EAC9C;CACF;AACF,CAAC;AAYD,IAAa,sBAAsB,EACjC,KACA,MACA,wBACA,aACA,kBAAkB,YAClB,YACA,GAAG,WAC0B;;;;;;CAM7B,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,QAAQ,SAAT;EAAiB,SAAA;YACf,oBAAC,QAAD;GAAM,WAAU;GAAM,UAAU;aAC9B,oBAAC,qBAAD;IACE,YAAY;IACZ,UAAU;IACV,YAAW;IACM;IACL;IACP;IACL,GAAI;cAEJ,oBAAC,MAAD,EAAM,IAAI,KAAO,CAAA;GACE,CAAA;EACjB,CAAA;CACS,CAAA,GAChB,eACC,oBAAC,QAAQ,SAAT,EAAA,UAAkB,uBAAwC,CAAA,CAErD,EAAA,CAAA;AAEb"}
+{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-subtle',\n    'hover:bg-input',\n    '[&_svg]:text-icon-subtle',\n    'active:[&_svg]:text-icon',\n    'active:bg-surface-hover',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-surface', 'border-strong!'],\n      modern: [\n        'bg-input',\n        'border-(--background-color-input)!',\n        'hover:bg-surface-hover!'\n      ]\n    },\n    fieldFill: {\n      surface: [],\n      subtle: []\n    },\n    emphasis: {\n      bold: [\n        '[&_svg]:text-accent',\n        'hover:bg-accent-subtle!',\n        'hover:[&_svg]:text-accent!',\n        'active:bg-accent-subtle-hover!',\n        'active:[&_svg]:text-accent-hover!'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      fieldAppearance: 'modern',\n      fieldFill: 'surface',\n      class: ['bg-surface']\n    },\n    {\n      fieldAppearance: 'standard',\n      emphasis: 'bold',\n      class: ['bg-surface', 'border-accent-solid!']\n    },\n    {\n      fieldAppearance: 'modern',\n      emphasis: 'bold',\n      class: ['bg-surface!', 'hover:bg-accent-subtle!']\n    }\n  ]\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = ({\n  ref,\n  icon,\n  disabledTooltipContent,\n  showTooltip,\n  fieldAppearance = 'standard',\n  fieldFill,\n  ...rest\n}: NumberInputStepperProps) => {\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <span className=\"z-1\" tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            fieldFill={fieldFill}\n            ref={ref}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </span>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,sBAAsB,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,cAAc,gBAAgB;GACzC,QAAQ;IACN;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,SAAS,CAAC;GACV,QAAQ,CAAC;EACX;EACA,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;EACF,EACF;CACF;CACA,kBAAkB;EAChB;GACE,iBAAiB;GACjB,WAAW;GACX,OAAO,CAAC,YAAY;EACtB;EACA;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,cAAc,sBAAsB;EAC9C;EACA;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,eAAe,yBAAyB;EAClD;CACF;AACF,CAAC;AAYD,IAAa,sBAAsB,EACjC,KACA,MACA,wBACA,aACA,kBAAkB,YAClB,WACA,GAAG,WAC0B;;;;;;CAM7B,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,QAAQ,SAAT;EAAiB,SAAA;YACf,oBAAC,QAAD;GAAM,WAAU;GAAM,UAAU;aAC9B,oBAAC,qBAAD;IACE,YAAY;IACZ,UAAU;IACV,YAAW;IACM;IACN;IACN;IACL,GAAI;cAEJ,oBAAC,MAAD,EAAM,IAAI,KAAO,CAAA;GACE,CAAA;EACjB,CAAA;CACS,CAAA,GAChB,eACC,oBAAC,QAAQ,SAAT,EAAA,UAAkB,uBAAwC,CAAA,CAErD,EAAA,CAAA;AAEb"}

package/dist/components/number-input-field/NumberInputField.d.ts

@@ -13,7 +13,7 @@ export interface NumberInputFieldProps extends NumberInputProps {
     };
     validation?: ValidationOptions;
 }
-export declare function NumberInputField({ className, defaultValue, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...rest }: NumberInputFieldProps): React.JSX.Element;
+export declare function NumberInputField({ className, defaultValue, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, fill, ...rest }: NumberInputFieldProps): React.JSX.Element;
 export declare namespace NumberInputField {
     var displayName: string;
 }

package/dist/components/number-input-field/NumberInputField.js

@@ -6,7 +6,7 @@ import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/number-input-field/NumberInputField.tsx
-var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...rest }) => {
+var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, fill, ...rest }) => {
 	const { control, setValue } = useFormContext();
 	const context = useFormCustomContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
@@ -17,7 +17,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 	});
 	const { error } = useFieldError(name);
 	const formAppearance = context?.appearance || appearance;
-	const formTheme = context?.theme ?? theme;
+	const formFill = context?.fill ?? fill;
 	React$1.useEffect(() => {
 		if (typeof value !== "undefined") setValue(name, value, { shouldDirty: false });
 	}, [
@@ -50,7 +50,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 			},
 			value: innerValue,
 			appearance: formAppearance,
-			theme: formTheme,
+			fill: formFill,
 			...rest
 		})
 	});

package/dist/components/number-input-field/NumberInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport type { ValidationOptions } from '../form/validation'\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  theme,\n  ...rest\n}: NumberInputFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n  }, [value, name, setValue])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;;AAoBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,WACwB;CAC3B,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,UAAU,qBAAqB;CACrC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,QAAM,gBAAgB;EAGpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAChD,GAAG;EAAC;EAAO;EAAM;CAAQ,CAAC;CAE1B,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,aAAD;GACE,IAAI;GACJ,MAAM;GACD;GACL,GAAK,SAAS;IAAE,OAAO;IAAS,gBAAgB;GAAK;GACvC;GACd,gBAAgB,aAAa;IAC3B,SAAS,QAAQ;IACjB,gBAAgB,QAAQ;GAC1B;GACA,OAAO;GACP,YAAY;GACZ,OAAO;GACP,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport type { ValidationOptions } from '../form/validation'\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  fill,\n  ...rest\n}: NumberInputFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n  const formFill = context?.fill ?? fill\n\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n  }, [value, name, setValue])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        fill={formFill}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;;AAoBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,MACA,GAAG,WACwB;CAC3B,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,UAAU,qBAAqB;CACrC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,WAAW,SAAS,QAAQ;CAElC,QAAM,gBAAgB;EAGpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAChD,GAAG;EAAC;EAAO;EAAM;CAAQ,CAAC;CAE1B,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,aAAD;GACE,IAAI;GACJ,MAAM;GACD;GACL,GAAK,SAAS;IAAE,OAAO;IAAS,gBAAgB;GAAK;GACvC;GACd,gBAAgB,aAAa;IAC3B,SAAS,QAAQ;IACjB,gBAAgB,QAAQ;GAC1B;GACA,OAAO;GACP,YAAY;GACZ,MAAM;GACN,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,iBAAiB,cAAc"}

package/dist/components/pagination/Pagination.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { PaginationProps } from './types';
 export declare const Pagination: {
-    ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children, className, ...rest }: PaginationProps): React.JSX.Element | null;
+    ({ onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children, className, ...rest }: PaginationProps): React.JSX.Element | null;
     displayName: string;
 } & {
     Popover: ({ children }: React.PropsWithChildren<unknown>) => React.JSX.Element;

package/dist/components/pagination/Pagination.js

@@ -1,5 +1,4 @@
 import { cn } from "../../utilities/tw-merge/index.js";
-import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import { VisibleElementsAmount } from "./pagination.constants.js";
 import { PaginationProvider } from "./Pagination.context.js";
 import { PaginationPopover } from "./PaginationPopover.js";
@@ -7,7 +6,7 @@ import { PaginationItems } from "./PaginationItems.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/pagination/Pagination.tsx
-var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, className, ...rest }) => {
+var PaginationComponent = ({ onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, className, ...rest }) => {
 	if (!pagesCount) return null;
 	return /* @__PURE__ */ jsx(PaginationProvider, {
 		onSelectedPageChange,
@@ -18,16 +17,10 @@ var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, vi
 		disabledPages,
 		onItemHover,
 		labels,
-		children: /* @__PURE__ */ jsx(ColorScheme, {
-			base: "grey1",
-			accent: "primary1",
-			...colorScheme,
-			asChild: true,
-			children: /* @__PURE__ */ jsx("div", {
-				...rest,
-				className: cn("flex", "gap-1", className),
-				children: children || /* @__PURE__ */ jsx(PaginationItems, {})
-			})
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: cn("flex", "gap-1", className),
+			children: children || /* @__PURE__ */ jsx(PaginationItems, {})
 		})
 	});
 };

package/dist/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { cn } from '../../styled'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationProvider } from './Pagination.context'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n  colorScheme,\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children,\n  className,\n  ...rest\n}: PaginationProps) => {\n  if (!pagesCount) return null\n\n  const paginationProviderProps: PaginationProviderProps = {\n    onSelectedPageChange,\n    selectedPage,\n    visibleElementsCount,\n    pagesCount,\n    indicatedPages,\n    disabledPages,\n    onItemHover,\n    labels\n  }\n\n  return (\n    <PaginationProvider {...paginationProviderProps}>\n      <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n        <div {...rest} className={cn('flex', 'gap-1', className)}>\n          {children || <PaginationItems />}\n        </div>\n      </ColorScheme>\n    </PaginationProvider>\n  )\n}\n\nexport const Pagination = /* @__PURE__ */ Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"mappings":";;;;;;;;;AAUA,IAAM,uBAAuB,EAC3B,aACA,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,CAAC,GAClB,gBAAgB,CAAC,GACjB,oBAAoB,MACpB,SAAS,CAAC,GACV,UACA,WACA,GAAG,WACkB;CACrB,IAAI,CAAC,YAAY,OAAO;CAaxB,OACE,oBAAC,oBAAD;EAXA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;YAKE,oBAAC,aAAD;GAAa,MAAK;GAAQ,QAAO;GAAW,GAAI;GAAa,SAAA;aAC3D,oBAAC,OAAD;IAAK,GAAI;IAAM,WAAW,GAAG,QAAQ,SAAS,SAAS;cACpD,YAAY,oBAAC,iBAAD,CAAkB,CAAA;GAC5B,CAAA;EACM,CAAA;CACK,CAAA;AAExB;AAEA,IAAa,aAA6B,uBAAO,OAAO,qBAAqB,EAC3E,SAAS,kBACX,CAAC;AAED,oBAAoB,cAAc"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationProvider } from './Pagination.context'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children,\n  className,\n  ...rest\n}: PaginationProps) => {\n  if (!pagesCount) return null\n\n  const paginationProviderProps: PaginationProviderProps = {\n    onSelectedPageChange,\n    selectedPage,\n    visibleElementsCount,\n    pagesCount,\n    indicatedPages,\n    disabledPages,\n    onItemHover,\n    labels\n  }\n\n  return (\n    <PaginationProvider {...paginationProviderProps}>\n      <div {...rest} className={cn('flex', 'gap-1', className)}>\n        {children || <PaginationItems />}\n      </div>\n    </PaginationProvider>\n  )\n}\n\nexport const Pagination = /* @__PURE__ */ Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AASA,IAAM,uBAAuB,EAC3B,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,CAAC,GAClB,gBAAgB,CAAC,GACjB,oBAAoB,MACpB,SAAS,CAAC,GACV,UACA,WACA,GAAG,WACkB;CACrB,IAAI,CAAC,YAAY,OAAO;CAaxB,OACE,oBAAC,oBAAD;EAXA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;YAKE,oBAAC,OAAD;GAAK,GAAI;GAAM,WAAW,GAAG,QAAQ,SAAS,SAAS;aACpD,YAAY,oBAAC,iBAAD,CAAkB,CAAA;EAC5B,CAAA;CACa,CAAA;AAExB;AAEA,IAAa,aAA6B,uBAAO,OAAO,qBAAqB,EAC3E,SAAS,kBACX,CAAC;AAED,oBAAoB,cAAc"}

package/dist/components/pagination/PaginationNextButton.d.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
-declare const StyledActionIcon: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
-    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+declare const StyledActionIcon: import("../..").PolymorphicComponent<({ ref, children, tone, inverse, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<Omit<{
+    colorRole?: ("accent" | "inverse" | "neutral" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inverse" | "neutral">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "colorRole" | "isRounded" | "size">, "colorRole">, "as" | "children" | "hasTooltip" | "href" | "inverse" | "label" | "reloadDocument" | "tone" | "tooltipSide"> & {
+    tone?: "danger" | "neutral" | "success" | "warning";
+    inverse?: boolean;
     as?: React.ElementType;
     children: React.ReactNode;
     href?: string;

package/dist/components/pagination/PaginationNextButton.js

@@ -12,7 +12,7 @@ var PaginationNextButton = (props) => {
 	return /* @__PURE__ */ jsx(StyledActionIcon, {
 		hasTooltip: false,
 		size: "md",
-		theme: "neutral",
+		tone: "neutral",
 		onClick: goToNextPage,
 		disabled: !nextAvailablePage,
 		...props,

package/dist/components/pagination/PaginationNextButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationNextButton.js","names":[],"sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['ml-1', 'disabled:opacity-30']\n})\n\nexport const PaginationNextButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToNextPage, labels, nextAvailablePage } = usePagination()\n\n  const isDisabled = !nextAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToNextPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.nextPageButtonLabel || 'Next page'}\n    >\n      <Icon is={ChevronRight} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,qBAAqB,EACtC,CAAC;AAED,IAAa,wBACX,UACG;CACH,MAAM,EAAE,cAAc,QAAQ,sBAAsB,cAAc;CAIlE,OACE,oBAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU,CARM;EAShB,GAAI;EACJ,OAAO,QAAQ,uBAAuB;YAEtC,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;CACT,CAAA;AAEtB"}
+{"version":3,"file":"PaginationNextButton.js","names":[],"sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['ml-1', 'disabled:opacity-30']\n})\n\nexport const PaginationNextButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToNextPage, labels, nextAvailablePage } = usePagination()\n\n  const isDisabled = !nextAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      tone=\"neutral\"\n      onClick={goToNextPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.nextPageButtonLabel || 'Next page'}\n    >\n      <Icon is={ChevronRight} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,qBAAqB,EACtC,CAAC;AAED,IAAa,wBACX,UACG;CACH,MAAM,EAAE,cAAc,QAAQ,sBAAsB,cAAc;CAIlE,OACE,oBAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,MAAK;EACL,SAAS;EACT,UAAU,CARM;EAShB,GAAI;EACJ,OAAO,QAAQ,uBAAuB;YAEtC,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;CACT,CAAA;AAEtB"}

package/dist/components/pagination/PaginationPage.js

@@ -18,18 +18,19 @@ var StyledButton = styled("button", {
 		"flex-col",
 		"p-0",
 		"font-normal",
-		"text-text-subtle",
-		"bg-(--base-1)",
+		"text-subtle",
+		"bg-surface",
 		"relative",
-		"not-disabled:active:bg-(--base-3)",
-		"not-disabled:active:text-(--text-bold)",
-		"not-disabled:focus-visible:outline-none",
+		"not-disabled:active:bg-surface-hover",
+		"not-disabled:active:text-default",
+		"not-disabled:focus-visible:outline-2",
+		"not-disabled:focus-visible:outline-offset-2",
+		"not-disabled:focus-visible:outline-focus",
+		"not-disabled:focus-visible:outline-solid",
 		"not-disabled:focus-visible:relative",
-		"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
-		"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
 		"not-disabled:focus-visible:z-1",
-		"not-disabled:hover:bg-(--base-2)",
-		"not-disabled:hover:text-text-regular",
+		"not-disabled:hover:bg-hover",
+		"not-disabled:hover:text-default",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30",
 		"disabled:pointer-events-none"
@@ -38,37 +39,38 @@ var StyledButton = styled("button", {
 		size: { md: ["size-10"] },
 		selected: { true: [
 			"border",
-			"border-(--accent-9)",
+			"border-accent-solid",
 			"font-semibold",
-			"not-disabled:active:border-(--accent-11)",
-			"not-disabled:active:text-(--accent-11)",
-			"not-disabled:hover:border-(--accent-10)",
-			"not-disabled:hover:text-(--accent-10)",
-			"text-(--accent-9)"
+			"not-disabled:active:border-accent-solid-active",
+			"not-disabled:active:text-accent-active",
+			"not-disabled:hover:border-accent-solid-hover",
+			"not-disabled:hover:text-accent-hover",
+			"text-accent"
 		] },
 		indicated: { true: [
-			"bg-(--accent-9)",
+			"bg-accent-solid",
 			"font-semibold",
-			"not-disabled:active:bg-(--accent-11)",
-			"not-disabled:active:text-white",
-			"not-disabled:hover:bg-(--accent-10)",
-			"not-disabled:hover:text-white",
-			"text-white"
+			"not-disabled:active:bg-accent-solid-active",
+			"not-disabled:active:text-on-accent",
+			"not-disabled:hover:bg-accent-solid-hover",
+			"not-disabled:hover:text-on-accent",
+			"text-on-accent"
 		] }
 	},
 	compoundVariants: [{
 		selected: true,
 		indicated: true,
 		class: [
-			"bg-(--accent-9)",
+			"bg-accent-solid",
 			"font-semibold",
-			"not-disabled:active:bg-(--accent-11)",
-			"not-disabled:active:text-white",
-			"not-disabled:hover:bg-(--accent-10)",
-			"not-disabled:hover:text-white",
-			"not-focus-visible:border-white!",
-			"shadow-[var(--accent-9)_0px_0px_0px_1px]",
-			"text-white"
+			"not-disabled:active:bg-accent-solid-active",
+			"not-disabled:active:text-on-accent",
+			"not-disabled:hover:bg-accent-solid-hover",
+			"not-disabled:hover:text-on-accent",
+			"not-focus-visible:border-(--background-color-surface)!",
+			"ring-1",
+			"ring-accent-solid",
+			"text-on-accent"
 		]
 	}]
 });

package/dist/components/pagination/PaginationPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPage.js","names":[],"sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n  base: [\n    'items-center',\n    'border',\n    'border-transparent',\n    'rounded-sm',\n    'cursor-pointer',\n    'font-body',\n    'justify-center',\n    'whitespace-nowrap',\n    'w-max',\n    'flex',\n    'flex-col',\n    'p-0',\n    'font-normal',\n    'text-text-subtle',\n    'bg-(--base-1)',\n    'relative',\n    'not-disabled:active:bg-(--base-3)',\n    'not-disabled:active:text-(--text-bold)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--base-2)',\n    'not-disabled:hover:text-text-regular',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      md: ['size-10']\n    },\n    selected: {\n      true: [\n        'border',\n        'border-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:border-(--accent-11)',\n        'not-disabled:active:text-(--accent-11)',\n        'not-disabled:hover:border-(--accent-10)',\n        'not-disabled:hover:text-(--accent-10)',\n        'text-(--accent-9)'\n      ]\n    },\n    indicated: {\n      true: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'text-white'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      indicated: true,\n      class: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'not-focus-visible:border-white!',\n        'shadow-[var(--accent-9)_0px_0px_0px_1px]',\n        'text-white'\n      ]\n    }\n  ]\n})\n\nexport const PaginationPage = ({\n  pageNumber,\n  className,\n  onClick\n}: PaginationPageProps) => {\n  const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n    usePagination()\n\n  const isIndicated = indicatedPages.includes(pageNumber)\n  const isDisabled = disabledPages.includes(pageNumber)\n\n  const isSelected = currentPage === pageNumber\n\n  const handleOnHover = () => {\n    if (isSelected || isDisabled) return\n    onItemHover?.(pageNumber)\n  }\n\n  const handleOnClick = (pageNumber) => {\n    onClick?.()\n    goToPage(pageNumber)\n  }\n\n  return (\n    <StyledButton\n      selected={isSelected}\n      size=\"md\"\n      onClick={() => handleOnClick(pageNumber)}\n      className={className}\n      indicated={isIndicated}\n      disabled={isDisabled}\n      aria-current={isSelected && 'page'}\n      aria-disabled={isDisabled}\n      onMouseOver={handleOnHover}\n    >\n      {pageNumber}\n    </StyledButton>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAM,eAAe,OAAO,UAAU;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM,EACJ,IAAI,CAAC,SAAS,EAChB;EACA,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;EACA,WAAW,EACT,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;CACF;CACA,kBAAkB,CAChB;EACE,UAAU;EACV,WAAW;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,CACF;AACF,CAAC;AAED,IAAa,kBAAkB,EAC7B,YACA,WACA,cACyB;CACzB,MAAM,EAAE,aAAa,UAAU,gBAAgB,eAAe,gBAC5D,cAAc;CAEhB,MAAM,cAAc,eAAe,SAAS,UAAU;CACtD,MAAM,aAAa,cAAc,SAAS,UAAU;CAEpD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,sBAAsB;EAC1B,IAAI,cAAc,YAAY;EAC9B,cAAc,UAAU;CAC1B;CAEA,MAAM,iBAAiB,eAAe;EACpC,UAAU;EACV,SAAS,UAAU;CACrB;CAEA,OACE,oBAAC,cAAD;EACE,UAAU;EACV,MAAK;EACL,eAAe,cAAc,UAAU;EAC5B;EACX,WAAW;EACX,UAAU;EACV,gBAAc,cAAc;EAC5B,iBAAe;EACf,aAAa;YAEZ;CACW,CAAA;AAElB"}
+{"version":3,"file":"PaginationPage.js","names":[],"sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n  base: [\n    'items-center',\n    'border',\n    'border-transparent',\n    'rounded-sm',\n    'cursor-pointer',\n    'font-body',\n    'justify-center',\n    'whitespace-nowrap',\n    'w-max',\n    'flex',\n    'flex-col',\n    'p-0',\n    'font-normal',\n    'text-subtle',\n    'bg-surface',\n    'relative',\n    'not-disabled:active:bg-surface-hover',\n    'not-disabled:active:text-default',\n    'not-disabled:focus-visible:outline-2',\n    'not-disabled:focus-visible:outline-offset-2',\n    'not-disabled:focus-visible:outline-focus',\n    'not-disabled:focus-visible:outline-solid',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-hover',\n    'not-disabled:hover:text-default',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      md: ['size-10']\n    },\n    selected: {\n      true: [\n        'border',\n        'border-accent-solid',\n        'font-semibold',\n        'not-disabled:active:border-accent-solid-active',\n        'not-disabled:active:text-accent-active',\n        'not-disabled:hover:border-accent-solid-hover',\n        'not-disabled:hover:text-accent-hover',\n        'text-accent'\n      ]\n    },\n    indicated: {\n      true: [\n        'bg-accent-solid',\n        'font-semibold',\n        'not-disabled:active:bg-accent-solid-active',\n        'not-disabled:active:text-on-accent',\n        'not-disabled:hover:bg-accent-solid-hover',\n        'not-disabled:hover:text-on-accent',\n        'text-on-accent'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      indicated: true,\n      class: [\n        'bg-accent-solid',\n        'font-semibold',\n        'not-disabled:active:bg-accent-solid-active',\n        'not-disabled:active:text-on-accent',\n        'not-disabled:hover:bg-accent-solid-hover',\n        'not-disabled:hover:text-on-accent',\n        // The gap between fill and ring takes the colour of whatever sits behind\n        'not-focus-visible:border-(--background-color-surface)!',\n        'ring-1',\n        'ring-accent-solid',\n        'text-on-accent'\n      ]\n    }\n  ]\n})\n\nexport const PaginationPage = ({\n  pageNumber,\n  className,\n  onClick\n}: PaginationPageProps) => {\n  const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n    usePagination()\n\n  const isIndicated = indicatedPages.includes(pageNumber)\n  const isDisabled = disabledPages.includes(pageNumber)\n\n  const isSelected = currentPage === pageNumber\n\n  const handleOnHover = () => {\n    if (isSelected || isDisabled) return\n    onItemHover?.(pageNumber)\n  }\n\n  const handleOnClick = (pageNumber) => {\n    onClick?.()\n    goToPage(pageNumber)\n  }\n\n  return (\n    <StyledButton\n      selected={isSelected}\n      size=\"md\"\n      onClick={() => handleOnClick(pageNumber)}\n      className={className}\n      indicated={isIndicated}\n      disabled={isDisabled}\n      aria-current={isSelected && 'page'}\n      aria-disabled={isDisabled}\n      onMouseOver={handleOnHover}\n    >\n      {pageNumber}\n    </StyledButton>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAM,eAAe,OAAO,UAAU;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM,EACJ,IAAI,CAAC,SAAS,EAChB;EACA,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;EACA,WAAW,EACT,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;CACF;CACA,kBAAkB,CAChB;EACE,UAAU;EACV,WAAW;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;EACF;CACF,CACF;AACF,CAAC;AAED,IAAa,kBAAkB,EAC7B,YACA,WACA,cACyB;CACzB,MAAM,EAAE,aAAa,UAAU,gBAAgB,eAAe,gBAC5D,cAAc;CAEhB,MAAM,cAAc,eAAe,SAAS,UAAU;CACtD,MAAM,aAAa,cAAc,SAAS,UAAU;CAEpD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,sBAAsB;EAC1B,IAAI,cAAc,YAAY;EAC9B,cAAc,UAAU;CAC1B;CAEA,MAAM,iBAAiB,eAAe;EACpC,UAAU;EACV,SAAS,UAAU;CACrB;CAEA,OACE,oBAAC,cAAD;EACE,UAAU;EACV,MAAK;EACL,eAAe,cAAc,UAAU;EAC5B;EACX,WAAW;EACX,UAAU;EACV,gBAAc,cAAc;EAC5B,iBAAe;EACf,aAAa;YAEZ;CACW,CAAA;AAElB"}

package/dist/components/pagination/PaginationPopover.js

@@ -20,7 +20,7 @@ var PaginationPopover = ({ children }) => {
 			children: children || /* @__PURE__ */ jsx(ActionIcon, {
 				hasTooltip: false,
 				size: "md",
-				theme: "neutral",
+				tone: "neutral",
 				label: labels?.popoverTriggerLabel || "Open pagination popover",
 				"data-testid": "pagination_popover_trigger",
 				children: /* @__PURE__ */ jsx(Icon, { is: Ellypsis })

package/dist/components/pagination/PaginationPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPopover.js","names":[],"sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Popover } from '../popover/Popover'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n  return (\n    <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n      <Popover.Trigger asChild>\n        {children || (\n          <ActionIcon\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n            data-testid=\"pagination_popover_trigger\"\n          >\n            <Icon is={Ellypsis} />\n          </ActionIcon>\n        )}\n      </Popover.Trigger>\n      <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n        <div className=\"flex flex-wrap justify-center gap-1 p-4\">\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,qBAAqB,EAChC,eACsC;CACtC,MAAM,EAAE,YAAY,WAAW,cAAc;CAC7C,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,WAAW,IACpB,GAAG,UAAU,QAAQ,CACxB;CAEA,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAkB,KAAK;CAEzD,OACE,qBAAC,SAAD;EAAS,MAAM;EAAQ,cAAc;EAAW,aAAa;YAA7D,CACE,oBAAC,QAAQ,SAAT;GAAiB,SAAA;aACd,YACC,oBAAC,YAAD;IACE,YAAY;IACZ,MAAK;IACL,OAAM;IACN,OAAO,QAAQ,uBAAuB;IACtC,eAAY;cAEZ,oBAAC,MAAD,EAAM,IAAI,SAAW,CAAA;GACX,CAAA;EAEC,CAAA,GACjB,oBAAC,QAAQ,SAAT;GAAiB,MAAK;GAAK,iBAAiB;GAAO,WAAU;aAC3D,oBAAC,OAAD;IAAK,WAAU;cACZ,iBAAiB,KAAK,eAAe;KACpC,OACE,oBAAC,gBAAD;MAEc;MACZ,eAAe,UAAU,KAAK;KAC/B,GAHM,UAGN;IAEL,CAAC;GACE,CAAA;EACU,CAAA,CACV;;AAEb"}
+{"version":3,"file":"PaginationPopover.js","names":[],"sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Popover } from '../popover/Popover'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n  return (\n    <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n      <Popover.Trigger asChild>\n        {children || (\n          <ActionIcon\n            hasTooltip={false}\n            size=\"md\"\n            tone=\"neutral\"\n            label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n            data-testid=\"pagination_popover_trigger\"\n          >\n            <Icon is={Ellypsis} />\n          </ActionIcon>\n        )}\n      </Popover.Trigger>\n      <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n        <div className=\"flex flex-wrap justify-center gap-1 p-4\">\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,qBAAqB,EAChC,eACsC;CACtC,MAAM,EAAE,YAAY,WAAW,cAAc;CAC7C,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,WAAW,IACpB,GAAG,UAAU,QAAQ,CACxB;CAEA,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAkB,KAAK;CAEzD,OACE,qBAAC,SAAD;EAAS,MAAM;EAAQ,cAAc;EAAW,aAAa;YAA7D,CACE,oBAAC,QAAQ,SAAT;GAAiB,SAAA;aACd,YACC,oBAAC,YAAD;IACE,YAAY;IACZ,MAAK;IACL,MAAK;IACL,OAAO,QAAQ,uBAAuB;IACtC,eAAY;cAEZ,oBAAC,MAAD,EAAM,IAAI,SAAW,CAAA;GACX,CAAA;EAEC,CAAA,GACjB,oBAAC,QAAQ,SAAT;GAAiB,MAAK;GAAK,iBAAiB;GAAO,WAAU;aAC3D,oBAAC,OAAD;IAAK,WAAU;cACZ,iBAAiB,KAAK,eAAe;KACpC,OACE,oBAAC,gBAAD;MAEc;MACZ,eAAe,UAAU,KAAK;KAC/B,GAHM,UAGN;IAEL,CAAC;GACE,CAAA;EACU,CAAA,CACV;;AAEb"}

package/dist/components/pagination/PaginationPreviousButton.d.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
-declare const StyledActionIcon: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
-    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+declare const StyledActionIcon: import("../..").PolymorphicComponent<({ ref, children, tone, inverse, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<Omit<{
+    colorRole?: ("accent" | "inverse" | "neutral" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inverse" | "neutral">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "colorRole" | "isRounded" | "size">, "colorRole">, "as" | "children" | "hasTooltip" | "href" | "inverse" | "label" | "reloadDocument" | "tone" | "tooltipSide"> & {
+    tone?: "danger" | "neutral" | "success" | "warning";
+    inverse?: boolean;
     as?: React.ElementType;
     children: React.ReactNode;
     href?: string;

package/dist/components/pagination/PaginationPreviousButton.js

@@ -12,7 +12,7 @@ var PaginationPreviousButton = (props) => {
 	return /* @__PURE__ */ jsx(StyledActionIcon, {
 		hasTooltip: false,
 		size: "md",
-		theme: "neutral",
+		tone: "neutral",
 		onClick: goToPreviousPage,
 		disabled: !previousAvailablePage,
 		...props,

package/dist/components/pagination/PaginationPreviousButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPreviousButton.js","names":[],"sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['mr-1', 'disabled:opacity-30']\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n  const isDisabled = !previousAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,qBAAqB,EACtC,CAAC;AAED,IAAa,4BACX,UACG;CACH,MAAM,EAAE,kBAAkB,QAAQ,0BAA0B,cAAc;CAI1E,OACE,oBAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU,CARM;EAShB,GAAI;EACJ,OAAO,QAAQ,2BAA2B;YAE1C,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;CACR,CAAA;AAEtB"}
+{"version":3,"file":"PaginationPreviousButton.js","names":[],"sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['mr-1', 'disabled:opacity-30']\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n  const isDisabled = !previousAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      tone=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,qBAAqB,EACtC,CAAC;AAED,IAAa,4BACX,UACG;CACH,MAAM,EAAE,kBAAkB,QAAQ,0BAA0B,cAAc;CAI1E,OACE,oBAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,MAAK;EACL,SAAS;EACT,UAAU,CARM;EAShB,GAAI;EACJ,OAAO,QAAQ,2BAA2B;YAE1C,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;CACR,CAAA;AAEtB"}

package/dist/components/pagination/types.d.ts

@@ -1,4 +1,3 @@
-import type { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 import { GO_TO_NEXT_PAGE, GO_TO_PREVIOUS_PAGE, VIEW_ALL_POPOVER } from './pagination.constants';
 export type PaginationItemsToRender = (number | typeof VIEW_ALL_POPOVER | typeof GO_TO_PREVIOUS_PAGE | typeof GO_TO_NEXT_PAGE)[];
 interface Labels {
@@ -34,7 +33,6 @@ export type PaginationProviderProps = Pick<BasePaginationProps, 'pagesCount'> &
     visibleElementsCount?: VisibleElementsCount;
 };
 export interface PaginationProps extends PaginationProviderProps {
-    colorScheme?: TcolorScheme;
     className?: string;
     children?: React.ReactNode;
 }

package/dist/components/password-field/PasswordField.d.ts

@@ -4,7 +4,7 @@ import { PasswordInput } from '../password-input/PasswordInput';
 type PasswordFieldProps = React.ComponentProps<typeof PasswordInput> & Omit<FieldElementWrapperProps, 'label'> & {
     label?: string;
 };
-export declare function PasswordField({ className, hideLabel, label, name, prompt, description, validation, appearance, theme, ...rest }: PasswordFieldProps): React.JSX.Element;
+export declare function PasswordField({ className, hideLabel, label, name, prompt, description, validation, appearance, fill, ...rest }: PasswordFieldProps): React.JSX.Element;
 export declare namespace PasswordField {
     var displayName: string;
 }

package/dist/components/password-field/PasswordField.js

@@ -7,13 +7,13 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/password-field/PasswordField.tsx
-var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, theme, ...rest }) => {
+var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, fill, ...rest }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
-	const formTheme = context?.theme ?? theme;
+	const formFill = context?.fill ?? fill;
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		description,
 		error,
@@ -30,7 +30,7 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 			id: name,
 			ref,
 			appearance: formAppearance,
-			theme: formTheme,
+			fill: formFill,
 			...error !== void 0 && { state: "error" },
 			...rest
 		})

package/dist/components/password-field/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { cn } from '../../styled'\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { PasswordInput } from '../password-input/PasswordInput'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  className,\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  theme,\n  ...rest\n}: PasswordFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n      className={cn('relative', className)}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error !== undefined && { state: 'error' })}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"mappings":";;;;;;;;;AAiBA,IAAa,iBAAiB,EAC5B,WACA,WACA,QAAQ,YACR,MACA,SAAS,KAAA,GACT,aACA,YACA,YACA,OACA,GAAG,WACqB;CACxB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,OACE,oBAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;EACZ,WAAW,GAAG,YAAY,SAAS;YAEnC,oBAAC,eAAD;GACE,cAAa;GACP;GACN,IAAI;GACC;GACL,YAAY;GACZ,OAAO;GACP,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,QAAQ;GAC7C,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,cAAc,cAAc"}
+{"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { cn } from '../../styled'\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { PasswordInput } from '../password-input/PasswordInput'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  className,\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  fill,\n  ...rest\n}: PasswordFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formFill = context?.fill ?? fill\n\n  return (\n    <FieldWrapper\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n      className={cn('relative', className)}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        fill={formFill}\n        {...(error !== undefined && { state: 'error' })}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"mappings":";;;;;;;;;AAiBA,IAAa,iBAAiB,EAC5B,WACA,WACA,QAAQ,YACR,MACA,SAAS,KAAA,GACT,aACA,YACA,YACA,MACA,GAAG,WACqB;CACxB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,WAAW,SAAS,QAAQ;CAElC,OACE,oBAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;EACZ,WAAW,GAAG,YAAY,SAAS;YAEnC,oBAAC,eAAD;GACE,cAAa;GACP;GACN,IAAI;GACC;GACL,YAAY;GACZ,MAAM;GACN,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,QAAQ;GAC7C,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,cAAc,cAAc"}

package/dist/components/password-input/PasswordInput.js

@@ -21,7 +21,7 @@ var PasswordInput = ({ ref, className, hidePasswordText = "Hide password", showP
 			className: "pr-6"
 		}), /* @__PURE__ */ jsx(ActionIcon, {
 			appearance: "simple",
-			theme: "neutral",
+			tone: "neutral",
 			label: isPasswordVisible ? hidePasswordText : showPasswordText,
 			onClick: togglePasswordVisibility,
 			onMouseDown: (e) => e.preventDefault(),

package/dist/components/password-input/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport type { InputProps } from '../input/Input'\nimport { Input } from '../input/Input'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = ({\n  ref,\n  className,\n  hidePasswordText = 'Hide password',\n  showPasswordText = 'Show password',\n  size = 'md',\n  ...restProps\n}: PasswordInputProps) => {\n  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n  const togglePasswordVisibility = () =>\n    setIsPasswordVisible((currentState) => !currentState)\n\n  const iconSize = getFieldIconSize(size)\n\n  return (\n    <div className={cn('relative', className)}>\n      <Input\n        {...restProps}\n        size={size}\n        type={isPasswordVisible ? 'text' : 'password'}\n        ref={ref}\n        className=\"pr-6\"\n      />\n      <ActionIcon\n        appearance=\"simple\"\n        theme=\"neutral\"\n        label={isPasswordVisible ? hidePasswordText : showPasswordText}\n        onClick={togglePasswordVisibility}\n        onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n        size={iconSize}\n        className={cn(\n          size === 'lg' ? 'bottom-1' : 'bottom-0',\n          'absolute',\n          'right-0'\n        )}\n      >\n        <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n      </ActionIcon>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAgBA,IAAa,iBAAiB,EAC5B,KACA,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,gBACqB;CACxB,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,KAAK;CACzE,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,YAAY;CAEtD,MAAM,WAAW,iBAAiB,IAAI;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;YAAxC,CACE,oBAAC,OAAD;GACE,GAAI;GACE;GACN,MAAM,oBAAoB,SAAS;GAC9B;GACL,WAAU;EACX,CAAA,GACD,oBAAC,YAAD;GACE,YAAW;GACX,OAAM;GACN,OAAO,oBAAoB,mBAAmB;GAC9C,SAAS;GACT,cAAc,MAAM,EAAE,eAAe;GACrC,MAAM;GACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,SACF;aAEA,oBAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,WAAa,CAAA;EACvC,CAAA,CACT;;AAET"}
+{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport type { InputProps } from '../input/Input'\nimport { Input } from '../input/Input'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = ({\n  ref,\n  className,\n  hidePasswordText = 'Hide password',\n  showPasswordText = 'Show password',\n  size = 'md',\n  ...restProps\n}: PasswordInputProps) => {\n  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n  const togglePasswordVisibility = () =>\n    setIsPasswordVisible((currentState) => !currentState)\n\n  const iconSize = getFieldIconSize(size)\n\n  return (\n    <div className={cn('relative', className)}>\n      <Input\n        {...restProps}\n        size={size}\n        type={isPasswordVisible ? 'text' : 'password'}\n        ref={ref}\n        className=\"pr-6\"\n      />\n      <ActionIcon\n        appearance=\"simple\"\n        tone=\"neutral\"\n        label={isPasswordVisible ? hidePasswordText : showPasswordText}\n        onClick={togglePasswordVisibility}\n        onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n        size={iconSize}\n        className={cn(\n          size === 'lg' ? 'bottom-1' : 'bottom-0',\n          'absolute',\n          'right-0'\n        )}\n      >\n        <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n      </ActionIcon>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAgBA,IAAa,iBAAiB,EAC5B,KACA,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,gBACqB;CACxB,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,KAAK;CACzE,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,YAAY;CAEtD,MAAM,WAAW,iBAAiB,IAAI;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;YAAxC,CACE,oBAAC,OAAD;GACE,GAAI;GACE;GACN,MAAM,oBAAoB,SAAS;GAC9B;GACL,WAAU;EACX,CAAA,GACD,oBAAC,YAAD;GACE,YAAW;GACX,MAAK;GACL,OAAO,oBAAoB,mBAAmB;GAC9C,SAAS;GACT,cAAc,MAAM,EAAE,eAAe;GACrC,MAAM;GACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,SACF;aAEA,oBAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,WAAa,CAAA;EACvC,CAAA,CACT;;AAET"}

package/dist/components/popover/Popover.d.ts

@@ -1,13 +1,15 @@
-export declare const Popover: import("react").FC<import("@radix-ui/react-popover").PopoverProps> & {
+import { Portal } from '@radix-ui/react-popover';
+import * as React from 'react';
+export declare const Popover: React.FC<import("@radix-ui/react-popover").PopoverProps> & {
     Content: ({ children, side, sideOffset, closePopoverText, showCloseButton, size, ...rest }: {
         size?: "lg" | "md" | "sm" | undefined;
     } & {
         as?: never;
-    } & Omit<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "as" | "size"> & import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement> & {
+    } & Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "as" | "size"> & import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement> & {
         closePopoverText?: string;
         showCloseButton?: boolean;
-    }) => import("react").JSX.Element;
-    Portal: import("react").FC<import("@radix-ui/react-popover").PopoverPortalProps>;
-    Anchor: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
-    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    }) => React.JSX.Element;
+    Portal: ({ children, ...rest }: React.ComponentProps<typeof Portal>) => React.JSX.Element;
+    Anchor: React.ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/popover/Popover.js

@@ -1,9 +1,16 @@
+import { ThemePortalScope } from "../../experiments/theme/Theme.js";
 import { PopoverContent } from "./PopoverContent.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { Anchor, Portal, Root, Trigger } from "@radix-ui/react-popover";
 //#region src/components/popover/Popover.tsx
+var PopoverPortal = ({ children, ...rest }) => /* @__PURE__ */ jsx(Portal, {
+	...rest,
+	children: /* @__PURE__ */ jsx(ThemePortalScope, { children })
+});
 var Popover = /* @__PURE__ */ Object.assign(Root, {
 	Content: PopoverContent,
-	Portal,
+	Portal: PopoverPortal,
 	Anchor,
 	Trigger
 });

package/dist/components/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Anchor, Portal, Root, Trigger } from '@radix-ui/react-popover'\n\nimport { PopoverContent } from './PopoverContent'\n\nexport const Popover = /* @__PURE__ */ Object.assign(Root, {\n  Content: PopoverContent,\n  Portal,\n  Anchor,\n  Trigger\n})\n\nRoot.displayName = 'Popover'\n"],"mappings":";;;AAIA,IAAa,UAA0B,uBAAO,OAAO,MAAM;CACzD,SAAS;CACT;CACA;CACA;AACF,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Anchor, Portal, Root, Trigger } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { ThemePortalScope } from '../../experiments/theme/Theme'\nimport { PopoverContent } from './PopoverContent'\n\nconst PopoverPortal = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof Portal>) => (\n  <Portal {...rest}>\n    <ThemePortalScope>{children}</ThemePortalScope>\n  </Portal>\n)\n\nexport const Popover = /* @__PURE__ */ Object.assign(Root, {\n  Content: PopoverContent,\n  Portal: PopoverPortal,\n  Anchor,\n  Trigger\n})\n\nRoot.displayName = 'Popover'\n"],"mappings":";;;;;;AAMA,IAAM,iBAAiB,EACrB,UACA,GAAG,WAEH,oBAAC,QAAD;CAAQ,GAAI;WACV,oBAAC,kBAAD,EAAmB,SAA2B,CAAA;AACxC,CAAA;AAGV,IAAa,UAA0B,uBAAO,OAAO,MAAM;CACzD,SAAS;CACT,QAAQ;CACR;CACA;AACF,CAAC;AAED,KAAK,cAAc"}