@guardian/stand 0.0.22 → 0.0.23

package/dist/components/radio-group/styles.js

@@ -0,0 +1,73 @@
+import { css } from '@emotion/react';
+import { componentRadioGroup } from '../../styleD/build/typescript/component/radioGroup.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultRadioGroupTheme = componentRadioGroup;
+const radioGroupStyles = (theme, { size }) => {
+  return css`
+		display: ${theme.shared.display};
+		flex-direction: ${theme.shared.flexDirection};
+		gap: ${theme[size].gap};
+		margin-top: ${theme.shared.marginTop};
+		margin-bottom: ${theme.shared.marginBottom};
+	`;
+};
+const radioStyles = (theme, { size, isInvalid }) => {
+  return css`
+		display: ${theme.shared.radio.display};
+		align-items: ${theme.shared.radio.alignItems};
+		gap: ${theme.shared.radio.gap};
+		${convertTypographyToEmotionStringStyle(theme[size].typography)}
+		color: ${theme.shared.radio.color};
+
+		&[data-disabled] {
+			color: ${theme.shared.radio.disabled.color};
+		}
+
+		&[data-disabled] :first-of-type {
+			border: ${theme.shared.indicator.disabled.border};
+		}
+
+		&[data-disabled]&[data-selected] :first-of-type {
+			border: ${theme.shared.indicator.selected.disabled.border};
+
+			::after {
+				background-color: ${theme.shared.indicator.selected.disabled.after.backgroundColor};
+				scale: ${theme.shared.indicator.selected.after.scale};
+			}
+		}
+
+		&[data-focus-visible] :first-of-type {
+			outline: ${theme.shared.indicator.focused.outline};
+			outline-offset: ${theme.shared.indicator.focused.outlineOffset};
+		}
+
+		&[data-selected] :first-of-type {
+			border: ${isInvalid ? theme.shared.indicator.selected.invalid.border : theme.shared.indicator.selected.border};
+
+			::after {
+				background-color: ${isInvalid ? theme.shared.indicator.invalid.after.backgroundColor : theme.shared.indicator.selected.after.backgroundColor};
+				scale: ${theme.shared.indicator.selected.after.scale};
+			}
+		}
+	`;
+};
+const radioIndicatorStyles = (theme, { size, isInvalid }) => {
+  return css`
+		position: ${theme.shared.indicator.position};
+		width: ${theme[size].indicator.width};
+		height: ${theme[size].indicator.height};
+		border-radius: ${theme.shared.indicator.borderRadius};
+		border: ${isInvalid ? theme.shared.indicator.invalid.border : theme.shared.indicator.border};
+
+		&::after {
+			content: '';
+			position: ${theme.shared.indicator.after.position};
+			border-radius: ${theme.shared.indicator.after.borderRadius};
+			inset: ${theme.shared.indicator.after.inset};
+			scale: ${theme.shared.indicator.after.scale};
+		}
+	`;
+};
+
+export { defaultRadioGroupTheme, radioGroupStyles, radioIndicatorStyles, radioStyles };

package/dist/fonts/MaterialSymbolsOutlined.css

@@ -2,7 +2,7 @@
 	font-family: 'Material Symbols Outlined';
 	font-style: normal;
 	font-weight: 400;
-	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-outlined-20260218.woff2)
+	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-outlined-filled-20260414.woff2)
 		format('woff2');
 }
 

package/dist/fonts/MaterialSymbolsRound.css

@@ -2,7 +2,7 @@
 	font-family: 'Material Symbols Round';
 	font-style: normal;
 	font-weight: 400;
-	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-round-20260218.woff2)
+	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-round-filled-20260414.woff2)
 		format('woff2');
 }
 

package/dist/fonts/MaterialSymbolsSharp.css

@@ -2,7 +2,7 @@
 	font-family: 'Material Symbols Sharp';
 	font-style: normal;
 	font-weight: 400;
-	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-sharp-20260218.woff2)
+	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-sharp-filled-20260414.woff2)
 		format('woff2');
 }
 

package/dist/fonts/material-symbols-types.ts

@@ -1,4 +1,4 @@
-// to get latest symbols font: npx @material-design-icons/scripts download font --symbols --evergreen --to . --fill 0 --weight 400 --grade 0 --size 24
+// to get latest symbols font: npx @material-design-icons/scripts download font --symbols --evergreen --to . --fill 1 --weight 400 --grade 0 --size 24
 // to generate types: npx @material-design-icons/scripts generate types --symbols --in .
 // last updated: 2026-02-18
 type MaterialSymbols = [
@@ -468,6 +468,8 @@ type MaterialSymbols = [
 	'blender',
 	'blind',
 	'blinds',
+	'blinds_2',
+	'blinds_2_closed',
 	'blinds_closed',
 	'block',
 	'blood_pressure',
@@ -488,6 +490,7 @@ type MaterialSymbols = [
 	'body_fat',
 	'body_system',
 	'bolt',
+	'bolt_boost',
 	'bomb',
 	'book',
 	'book_2',
@@ -697,6 +700,7 @@ type MaterialSymbols = [
 	'chat_paste_go',
 	'chat_paste_go_2',
 	'check',
+	'check_alert',
 	'check_box',
 	'check_box_outline_blank',
 	'check_circle',
@@ -780,6 +784,7 @@ type MaterialSymbols = [
 	'code',
 	'code_blocks',
 	'code_off',
+	'code_xml',
 	'coffee',
 	'coffee_maker',
 	'cognition',
@@ -1334,6 +1339,7 @@ type MaterialSymbols = [
 	'find_replace',
 	'fingerprint',
 	'fingerprint_off',
+	'fire_check',
 	'fire_extinguisher',
 	'fire_hydrant',
 	'fire_truck',
@@ -1344,7 +1350,6 @@ type MaterialSymbols = [
 	'fit_page_width',
 	'fit_screen',
 	'fit_width',
-	'fitbit_raquetball',
 	'fitness_center',
 	'fitness_tracker',
 	'fitness_trackers',
@@ -1416,6 +1421,7 @@ type MaterialSymbols = [
 	'footprint',
 	'for_you',
 	'forest',
+	'fork_chart',
 	'fork_left',
 	'fork_right',
 	'fork_spoon',
@@ -1459,6 +1465,7 @@ type MaterialSymbols = [
 	'format_list_numbered_rtl',
 	'format_overline',
 	'format_paint',
+	'format_paint_off',
 	'format_paragraph',
 	'format_quote',
 	'format_quote_off',
@@ -1538,6 +1545,7 @@ type MaterialSymbols = [
 	'garage',
 	'garage_check',
 	'garage_door',
+	'garage_door_open',
 	'garage_home',
 	'garage_money',
 	'garden_cart',
@@ -1585,12 +1593,14 @@ type MaterialSymbols = [
 	'graph_7',
 	'graph_8',
 	'graphic_eq',
+	'graphic_eq_off',
 	'grass',
 	'grid_3x3',
 	'grid_3x3_off',
 	'grid_4x4',
 	'grid_goldenratio',
 	'grid_guides',
+	'grid_layout_side',
 	'grid_off',
 	'grid_on',
 	'grid_view',
@@ -1714,6 +1724,7 @@ type MaterialSymbols = [
 	'home_repair_service',
 	'home_speaker',
 	'home_storage',
+	'home_storage_gear',
 	'home_work',
 	'horizontal_align_center',
 	'horizontal_align_left',
@@ -1924,12 +1935,14 @@ type MaterialSymbols = [
 	'lift_to_talk',
 	'light',
 	'light_group',
+	'light_group_2',
 	'light_mode',
 	'light_off',
 	'lightbulb',
 	'lightbulb_2',
 	'lightbulb_circle',
 	'lightning_stand',
+	'lightstrip',
 	'line_axis',
 	'line_curve',
 	'line_end',
@@ -2242,6 +2255,7 @@ type MaterialSymbols = [
 	'moved_location',
 	'movie',
 	'movie_edit',
+	'movie_edit_off',
 	'movie_info',
 	'movie_off',
 	'movie_speaker',
@@ -2918,6 +2932,7 @@ type MaterialSymbols = [
 	'self_care',
 	'self_improvement',
 	'sell',
+	'sell_cloud',
 	'send',
 	'send_and_archive',
 	'send_money',
@@ -2978,6 +2993,8 @@ type MaterialSymbols = [
 	'settings_voice',
 	'settop_component',
 	'severe_cold',
+	'shades',
+	'shades_closed',
 	'shadow',
 	'shadow_add',
 	'shadow_minus',
@@ -3038,6 +3055,7 @@ type MaterialSymbols = [
 	'signal_cellular_alt',
 	'signal_cellular_alt_1_bar',
 	'signal_cellular_alt_2_bar',
+	'signal_cellular_alt_off',
 	'signal_cellular_connected_no_internet_0_bar',
 	'signal_cellular_connected_no_internet_4_bar',
 	'signal_cellular_nodata',
@@ -3089,6 +3107,7 @@ type MaterialSymbols = [
 	'snippet_folder',
 	'snooze',
 	'snowboarding',
+	'snowflake',
 	'snowing',
 	'snowing_heavy',
 	'snowmobile',
@@ -3106,6 +3125,7 @@ type MaterialSymbols = [
 	'sound_detection_glass_break',
 	'sound_detection_loud_sound',
 	'sound_sampler',
+	'soundbar',
 	'soup_kitchen',
 	'source_environment',
 	'source_notes',
@@ -3116,11 +3136,13 @@ type MaterialSymbols = [
 	'spa',
 	'space_bar',
 	'space_dashboard',
+	'space_dashboard_2',
 	'spatial_audio',
 	'spatial_audio_off',
 	'spatial_speaker',
 	'spatial_tracking',
 	'speaker',
+	'speaker_2',
 	'speaker_group',
 	'speaker_notes',
 	'speaker_notes_off',
@@ -3185,6 +3207,7 @@ type MaterialSymbols = [
 	'sports_volleyball',
 	'sprinkler',
 	'sprint',
+	'sql',
 	'square',
 	'square_circle',
 	'square_dot',
@@ -3273,6 +3296,7 @@ type MaterialSymbols = [
 	'subtitles_off',
 	'subway',
 	'subway_walk',
+	'subwoofer',
 	'summarize',
 	'sunny',
 	'sunny_snowing',
@@ -3297,8 +3321,10 @@ type MaterialSymbols = [
 	'swipe_down',
 	'swipe_down_alt',
 	'swipe_left',
+	'swipe_left_2',
 	'swipe_left_alt',
 	'swipe_right',
+	'swipe_right_2',
 	'swipe_right_alt',
 	'swipe_up',
 	'swipe_up_alt',
@@ -3312,6 +3338,7 @@ type MaterialSymbols = [
 	'switch_account',
 	'switch_camera',
 	'switch_left',
+	'switch_off',
 	'switch_right',
 	'switch_video',
 	'switches',
@@ -3381,7 +3408,9 @@ type MaterialSymbols = [
 	'temple_hindu',
 	'tenancy',
 	'terminal',
+	'terminal_2',
 	'text_ad',
+	'text_ad_off',
 	'text_compare',
 	'text_decrease',
 	'text_fields',
@@ -3596,6 +3625,8 @@ type MaterialSymbols = [
 	'user_attributes',
 	'vaccines',
 	'vacuum',
+	'vacuum_2',
+	'vacuum_2_on',
 	'valve',
 	'vape_free',
 	'vaping_rooms',
@@ -3717,6 +3748,7 @@ type MaterialSymbols = [
 	'water_damage',
 	'water_do',
 	'water_drop',
+	'water_drops',
 	'water_ec',
 	'water_full',
 	'water_heater',
@@ -3811,7 +3843,6 @@ type MaterialSymbols = [
 	'yard',
 	'yoshoku',
 	'your_trips',
-	'youtube_activity',
 	'youtube_searched_for',
 	'zone_person_alert',
 	'zone_person_idle',

package/dist/index.cjs

@@ -9,6 +9,8 @@ var button = require('./styleD/build/typescript/component/button.cjs');
 var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
+var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
+var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
 var textInput = require('./styleD/build/typescript/component/textInput.cjs');
 var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
 var select = require('./styleD/build/typescript/component/select.cjs');
@@ -36,6 +38,8 @@ exports.componentButton = button.componentButton;
 exports.componentTypography = typography$1.componentTypography;
 exports.componentIcon = icon.componentIcon;
 exports.componentFavicon = favicon.componentFavicon;
+exports.componentRadioGroup = radioGroup.componentRadioGroup;
+exports.componentCheckbox = checkbox.componentCheckbox;
 exports.componentTextInput = textInput.componentTextInput;
 exports.componentInlineMessage = inlineMessage.componentInlineMessage;
 exports.componentSelect = select.componentSelect;

package/dist/index.js

@@ -7,6 +7,8 @@ export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentTypography } from './styleD/build/typescript/component/typography.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
+export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup.js';
+export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';
 export { componentTextInput } from './styleD/build/typescript/component/textInput.js';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
 export { componentSelect } from './styleD/build/typescript/component/select.js';

package/dist/radio-group.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var RadioGroup = require('./components/radio-group/RadioGroup.cjs');
+var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
+
+
+
+exports.Radio = RadioGroup.Radio;
+exports.RadioGroup = RadioGroup.RadioGroup;
+exports.componentRadioGroup = radioGroup.componentRadioGroup;

package/dist/radio-group.js

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from './components/radio-group/RadioGroup.js';
+export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup.js';

package/dist/styleD/build/css/base/typography.css

@@ -29,9 +29,9 @@
 	--base-typography-size-36-rem: 2.25rem;
 	--base-typography-size-42-rem: 2.625rem;
 	--base-typography-size-48-rem: 3rem;
+	--base-typography-weight-guardian-headline-bold: 700;
 	--base-typography-weight-guardian-text-egyptian-normal: 400;
 	--base-typography-weight-guardian-text-egyptian-bold: 700;
-	--base-typography-weight-guardian-headline-bold: 700;
 	--base-typography-weight-open-sans-light: 340;
 	--base-typography-weight-open-sans-normal: 460;
 	--base-typography-weight-open-sans-semi-bold: 600;

package/dist/styleD/build/css/component/checkbox.css

@@ -0,0 +1,57 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-checkbox-input-shared-display: flex;
+	--component-checkbox-input-shared-position: relative;
+	--component-checkbox-input-shared-gap: 0.5rem;
+	--component-checkbox-input-shared-align-items: flex-start;
+	--component-checkbox-input-shared-color: #000000;
+	--component-checkbox-input-shared-cursor: pointer;
+	--component-checkbox-input-shared-indicator-display: flex;
+	--component-checkbox-input-shared-indicator-align-items: center;
+	--component-checkbox-input-shared-indicator-justify-content: center;
+	--component-checkbox-input-shared-indicator-flex-shrink: 0;
+	--component-checkbox-input-shared-indicator-border: 0.0625rem solid #545454;
+	--component-checkbox-input-shared-indicator-border-radius: 0.25rem;
+	--component-checkbox-input-shared-indicator-transition: all 200ms;
+	--component-checkbox-input-shared-indicator-svg-fill: none;
+	--component-checkbox-input-shared-indicator-check-width: 20px;
+	--component-checkbox-input-shared-indicator-check-height: 20px;
+	--component-checkbox-input-shared-indicator-indeterminate-width: 12px;
+	--component-checkbox-input-shared-indicator-indeterminate-height: 2px;
+	--component-checkbox-input-shared-indicator-selected-background-color: #005d8b;
+	--component-checkbox-input-shared-indicator-selected-border: 0.0625rem solid
+		#0072a9;
+	--component-checkbox-input-shared-indicator-selected-svg-fill: #ffffff;
+	--component-checkbox-input-shared-indicator-focus-visible-outline: 0.125rem
+		solid #0072a9;
+	--component-checkbox-input-shared-indicator-focus-visible-outline-offset: 0.125rem;
+	--component-checkbox-input-shared-indicator-error-background-color: #b42a19;
+	--component-checkbox-input-shared-indicator-error-border: 0.0625rem solid
+		#b42a19;
+	--component-checkbox-input-shared-label-align-self: center;
+	--component-checkbox-input-shared-disabled-color: #999999;
+	--component-checkbox-input-shared-disabled-cursor: not-allowed;
+	--component-checkbox-input-shared-disabled-indicator-border: 0.0625rem solid
+		#dcdcdc;
+	--component-checkbox-input-shared-disabled-indicator-selected-background-color: #dcdcdc;
+	--component-checkbox-input-sm-typography-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--component-checkbox-input-sm-typography-letter-spacing: 0;
+	--component-checkbox-input-sm-typography-font-width: 95;
+	--component-checkbox-input-sm-indicator-size: 1.25rem;
+	--component-checkbox-input-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-checkbox-input-md-typography-letter-spacing: 0;
+	--component-checkbox-input-md-typography-font-width: 95;
+	--component-checkbox-input-md-indicator-size: 1.5rem;
+	--component-checkbox-group-shared-display: flex;
+	--component-checkbox-group-shared-flex-direction: column;
+	--component-checkbox-group-sm-gap: 1rem;
+	--component-checkbox-group-sm-margin-top: 0.5rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-checkbox-group-sm-margin-bottom: 0.5rem; /** spacing between the input itself and the following element (error) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-checkbox-group-md-gap: 1.25rem;
+	--component-checkbox-group-md-margin-top: 0.75rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-checkbox-group-md-margin-bottom: 0.75rem; /** spacing between the input itself and the following element (error) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+}

package/dist/styleD/build/css/component/inlineMessage.css

@@ -7,6 +7,7 @@
 	--component-inline-message-shared-gap: 0.25rem;
 	--component-inline-message-shared-align-items: center;
 	--component-inline-message-shared-icon-size: 1.25rem;
+	--component-inline-message-shared-icon-align-self: flex-start;
 	--component-inline-message-shared-typography-font: normal 460 0.875rem/1.3
 		'Open Sans';
 	--component-inline-message-shared-typography-letter-spacing: 0;

package/dist/styleD/build/css/component/radioGroup.css

@@ -0,0 +1,52 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-radio-group-shared-margin-top: 0.5rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-radio-group-shared-margin-bottom: 0.5rem; /** spacing between the input itself and the next element (error text) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-radio-group-shared-display: flex;
+	--component-radio-group-shared-flex-direction: column;
+	--component-radio-group-shared-radio-color: #000000;
+	--component-radio-group-shared-radio-disabled-color: #999999;
+	--component-radio-group-shared-radio-display: flex;
+	--component-radio-group-shared-radio-align-items: center;
+	--component-radio-group-shared-radio-gap: 0.5rem;
+	--component-radio-group-shared-indicator-position: relative;
+	--component-radio-group-shared-indicator-after-position: absolute;
+	--component-radio-group-shared-indicator-after-border-radius: inherit;
+	--component-radio-group-shared-indicator-after-inset: 0;
+	--component-radio-group-shared-indicator-after-scale: 0;
+	--component-radio-group-shared-indicator-border-radius: 50%;
+	--component-radio-group-shared-indicator-border: 0.0625rem solid #545454;
+	--component-radio-group-shared-indicator-focused-outline: 0.125rem solid
+		#0072a9;
+	--component-radio-group-shared-indicator-focused-outline-offset: 0.125rem;
+	--component-radio-group-shared-indicator-invalid-border: 0.0625rem solid
+		#b42a19;
+	--component-radio-group-shared-indicator-invalid-after-background-color: #b42a19;
+	--component-radio-group-shared-indicator-disabled-border: 0.0625rem solid
+		#dcdcdc;
+	--component-radio-group-shared-indicator-selected-after-background-color: #005d8b;
+	--component-radio-group-shared-indicator-selected-after-scale: 0.6rem;
+	--component-radio-group-shared-indicator-selected-border: 0.125rem solid
+		#0072a9;
+	--component-radio-group-shared-indicator-selected-invalid-border: 0.125rem
+		solid #b42a19;
+	--component-radio-group-shared-indicator-selected-disabled-border: 0.125rem
+		solid #dcdcdc;
+	--component-radio-group-shared-indicator-selected-disabled-after-background-color: #dcdcdc;
+	--component-radio-group-sm-gap: 1rem;
+	--component-radio-group-sm-typography-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--component-radio-group-sm-typography-letter-spacing: 0;
+	--component-radio-group-sm-typography-font-width: 95;
+	--component-radio-group-sm-indicator-width: 1.25rem;
+	--component-radio-group-sm-indicator-height: 1.25rem;
+	--component-radio-group-md-gap: 1.25rem;
+	--component-radio-group-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-radio-group-md-typography-letter-spacing: 0;
+	--component-radio-group-md-typography-font-width: 95;
+	--component-radio-group-md-indicator-width: 1.5rem;
+	--component-radio-group-md-indicator-height: 1.5rem;
+}

package/dist/styleD/build/css/semantic/colors.css

@@ -11,6 +11,7 @@
 	--semantic-colors-text-error: #8c2113;
 	--semantic-colors-text-warning: #433608;
 	--semantic-colors-text-success: #326528;
+	--semantic-colors-text-success-inverse: #cde4c9;
 	--semantic-colors-text-information: #00344e;
 	--semantic-colors-text-disabled: #999999;
 	--semantic-colors-text-green: #24491d;
@@ -64,5 +65,6 @@
 	--semantic-colors-fill-information-weak: #e8f0fb;
 	--semantic-colors-fill-error-weak: #f5c6c0;
 	--semantic-colors-fill-error-strong: #b42a19;
-	--semantic-colors-fill-success-weak: #edf5ec;
+	--semantic-colors-fill-success-weak: #cde4c9;
+	--semantic-colors-fill-success-strong: #326528;
 }

package/dist/styleD/build/css/semantic/sizing.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+	--semantic-sizing-height-xxxs: 1.125rem;
 	--semantic-sizing-height-xxs: 1.25rem;
 	--semantic-sizing-height-xs: 1.5rem;
 	--semantic-sizing-height-sm: 2rem;

package/dist/styleD/build/typescript/base/typography.cjs

@@ -32,11 +32,11 @@ const baseTypography = {
     "48-rem": "3rem"
   },
   weight: {
-    "Guardian Text Egyptian": {
-      normal: 400,
+    "Guardian Headline": {
       bold: 700
     },
-    "Guardian Headline": {
+    "Guardian Text Egyptian": {
+      normal: 400,
       bold: 700
     },
     "Open Sans": {

package/dist/styleD/build/typescript/base/typography.js

@@ -30,11 +30,11 @@ const baseTypography = {
     "48-rem": "3rem"
   },
   weight: {
-    "Guardian Text Egyptian": {
-      normal: 400,
+    "Guardian Headline": {
       bold: 700
     },
-    "Guardian Headline": {
+    "Guardian Text Egyptian": {
+      normal: 400,
       bold: 700
     },
     "Open Sans": {

package/dist/styleD/build/typescript/component/checkbox.cjs

@@ -0,0 +1,100 @@
+'use strict';
+
+const componentCheckbox = {
+  input: {
+    shared: {
+      display: "flex",
+      position: "relative",
+      gap: "0.5rem",
+      "align-items": "flex-start",
+      color: "#000000",
+      cursor: "pointer",
+      indicator: {
+        display: "flex",
+        "align-items": "center",
+        "justify-content": "center",
+        "flex-shrink": 0,
+        border: "0.0625rem solid #545454",
+        "border-radius": "0.25rem",
+        transition: "all 200ms",
+        svg: {
+          fill: "none"
+        },
+        check: {
+          width: "20px",
+          height: "20px"
+        },
+        indeterminate: {
+          width: "12px",
+          height: "2px"
+        },
+        selected: {
+          "background-color": "#005d8b",
+          border: "0.0625rem solid #0072a9",
+          svg: {
+            fill: "#ffffff"
+          }
+        },
+        ":focus-visible": {
+          outline: "0.125rem solid #0072a9",
+          "outline-offset": "0.125rem"
+        },
+        error: {
+          "background-color": "#b42a19",
+          border: "0.0625rem solid #b42a19"
+        }
+      },
+      label: {
+        "align-self": "center"
+      },
+      disabled: {
+        color: "#999999",
+        cursor: "not-allowed",
+        indicator: {
+          border: "0.0625rem solid #dcdcdc",
+          selected: {
+            "background-color": "#dcdcdc"
+          }
+        }
+      }
+    },
+    sm: {
+      typography: {
+        font: "normal 460 0.875rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      indicator: {
+        size: "1.25rem"
+      }
+    },
+    md: {
+      typography: {
+        font: "normal 460 1rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      indicator: {
+        size: "1.5rem"
+      }
+    }
+  },
+  group: {
+    shared: {
+      display: "flex",
+      "flex-direction": "column"
+    },
+    sm: {
+      gap: "1rem",
+      "margin-top": "0.5rem",
+      "margin-bottom": "0.5rem"
+    },
+    md: {
+      gap: "1.25rem",
+      "margin-top": "0.75rem",
+      "margin-bottom": "0.75rem"
+    }
+  }
+};
+
+exports.componentCheckbox = componentCheckbox;