,\n Theme: any,\n Components: S,\n Customisations?: (props: P & C) => C,\n name?: string,\n): React.ForwardRefExoticComponent<\n React.PropsWithoutRef & React.RefAttributes\n> & { className?: string } {\n const component = React.forwardRef((props, forwardRef) => {\n const customisations = Customisations ? Customisations(props) : {}\n\n return (\n \n \n \n )\n })\n\n component.displayName =\n name || Component.displayName || Object.getPrototypeOf(Component).constructor.name\n\n return component\n}\n\n/**\n * Attached the styled components + the customisations to the base component\n * @param Component Base component\n * @param Components Styled components to inject in the base component\n * @param name Name of the component\n * @returns A new instance of Component with 1 new property: styled\n * The contract of that component will be P + C which means Public properties + Customisations properties\n */\nexport function withStyle(\n Component:\n | React.ComponentClass\n | React.FunctionComponent\n | React.ForwardRefExoticComponent,\n Theme: any,\n Components: S,\n name?: string,\n): React.ForwardRefExoticComponent<\n React.PropsWithoutRef & React.PropsWithRef & { className?: string }\n> {\n const component = React.forwardRef((props, forwardRef) => (\n \n \n \n ))\n\n component.displayName =\n name || Component.displayName || Object.getPrototypeOf(Component).constructor.name\n\n return component\n}\n","const getAttributes = (props: any, prefix: string, match?: string) => {\n const newProps = {}\n\n let matchRegex\n if (match) {\n matchRegex = new RegExp(`[^-]+-${match}-.+`, 'i')\n }\n\n Object.keys(props).forEach((key) => {\n if (matchRegex && !matchRegex.test(key)) {\n return\n }\n\n if (key.startsWith(prefix)) {\n newProps[key] = props[key]\n }\n })\n\n return newProps\n}\n\nexport default getAttributes\n","export const DefaultPlaceholder =\n 'https://truelayer-client-logos.s3-eu-west-1.amazonaws.com/placeholder.svg'\n\nexport const DataAttributesPrefix = 'data-'\n\nexport const AriaAttributesPrefix = 'aria-'\n","export const TestId = 'data-testid'\n\nexport const getTestId = (props, name) => {\n if (process.env.NODE_ENV !== 'test') {\n return {}\n }\n\n if (!props[TestId]) {\n return {}\n }\n\n return { [TestId]: `${props[TestId]}-${name}` }\n}\n","export * from './state'\nexport * from './typography'\nexport * from './visuals'\n","const sortBy = require('lodash/sortBy')\nconst zipObject = require('lodash/zipObject')\nconst union = require('lodash/union')\nconst includes = require('lodash/includes')\nconst forEach = require('lodash/forEach')\nconst flatten = require('lodash/flatten')\nconst omit = require('lodash/omit')\nconst find = require('lodash/find')\nconst keys = require('lodash/keys')\nconst sum = require('lodash/sum')\nconst pick = require('lodash/pick')\nconst every = require('lodash/every')\nconst values = require('lodash/values')\nconst filter = require('lodash/filter')\nconst take = require('lodash/take')\nconst reject = require('lodash/reject')\nconst isNil = require('lodash/isNil')\nconst times = require('lodash/times')\nconst debounce = require('lodash/debounce')\nconst takeRight = require('lodash/takeRight')\nconst isEqual = require('lodash/isEqual')\nconst isEmpty = require('lodash/isEmpty')\nconst slice = require('lodash/slice')\nconst get = require('lodash/get')\nconst trim = require('lodash/trim')\nconst without = require('lodash/without')\nconst merge = require('lodash/merge')\nconst reduce = require('lodash/reduce')\nconst head = require('lodash/head')\nconst capitalize = require('lodash/capitalize')\n\nexport {\n get,\n sortBy,\n zipObject,\n union,\n includes,\n forEach,\n flatten,\n omit,\n find,\n keys,\n sum,\n pick,\n every,\n values,\n filter,\n take,\n reject,\n isNil,\n times,\n debounce,\n takeRight,\n isEmpty,\n isEqual,\n slice,\n trim,\n without,\n merge,\n reduce,\n head,\n capitalize,\n}\n","export * from './themes'\nexport * from './components'\n","module.exports = require(\"prop-types\");","/** FontAwesome Solid Icons */\nexport { faSearch as faSolidSearch } from '@fortawesome/pro-solid-svg-icons/faSearch'\nexport { faCheck as faSolidCheck } from '@fortawesome/pro-solid-svg-icons/faCheck'\nexport { faBuilding as faSolidBuilding } from '@fortawesome/pro-solid-svg-icons/faBuilding'\nexport { faInfoCircle as faSolidInfoCircle } from '@fortawesome/pro-solid-svg-icons/faInfoCircle'\nexport { faQuestionCircle as faSolidQuestionCircle } from '@fortawesome/pro-solid-svg-icons/faQuestionCircle'\nexport { faTimes as faSolidTimes } from '@fortawesome/pro-solid-svg-icons/faTimes'\nexport { faTimesCircle as faSolidTimesCircle } from '@fortawesome/pro-solid-svg-icons/faTimesCircle'\nexport { faAngleDown as faSolidAngleDown } from '@fortawesome/pro-solid-svg-icons/faAngleDown'\nexport { faAngleUp as faSolidAngleUp } from '@fortawesome/pro-solid-svg-icons/faAngleUp'\nexport { faAngleRight as faSolidAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight'\nexport { faAngleLeft as faSolidAngleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleLeft'\nexport { faAngleDoubleRight as faSolidAngleDoubleRight } from '@fortawesome/pro-solid-svg-icons/faAngleDoubleRight'\nexport { faAngleDoubleLeft as faSolidAngleDoubleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleDoubleLeft'\nexport { faDownload as faSolidDownload } from '@fortawesome/pro-solid-svg-icons/faDownload'\nexport { faCircle as faSolidCircle } from '@fortawesome/pro-solid-svg-icons/faCircle'\nexport { faTrash as faSolidTrash } from '@fortawesome/pro-solid-svg-icons/faTrash'\nexport { faUserEdit as faSolidUserEdit } from '@fortawesome/pro-solid-svg-icons/faUserEdit'\nexport { faUserTie as faSolidUserTie } from '@fortawesome/pro-solid-svg-icons/faUserTie'\nexport { faCog as faSolidCog } from '@fortawesome/pro-solid-svg-icons/faCog'\nexport { faUser as faSolidUser } from '@fortawesome/pro-solid-svg-icons/faUser'\nexport { faCheckCircle as faSolidCheckCircle } from '@fortawesome/pro-solid-svg-icons/faCheckCircle'\nexport { faExclamationCircle as faSolidExclamationCircle } from '@fortawesome/pro-solid-svg-icons/faExclamationCircle'\nexport { faStar as faSolidStar } from '@fortawesome/pro-solid-svg-icons/faStar'\nexport { faExclamationTriangle as faSolidExclamationTriangle } from '@fortawesome/pro-solid-svg-icons/faExclamationTriangle'\nexport { faUsersCog as faSolidUsersCog } from '@fortawesome/pro-solid-svg-icons/faUsersCog'\nexport { faVideo as faSolidVideo } from '@fortawesome/pro-solid-svg-icons/faVideo'\nexport { faArrowDown as faSolidArrowDown } from '@fortawesome/pro-solid-svg-icons/faArrowDown'\nexport { faSpinnerThird as faSolidSpinnerThird } from '@fortawesome/pro-solid-svg-icons/faSpinnerThird'\nexport { faPlusCircle as faSolidPlusCircle } from '@fortawesome/pro-solid-svg-icons/faPlusCircle'\nexport { faSquare as faSolidSquare } from '@fortawesome/pro-solid-svg-icons/faSquare'\n\n/** FontAwesome Regular Icons */\nexport { faAngleDown as faRegularAngleDown } from '@fortawesome/pro-regular-svg-icons/faAngleDown'\nexport { faTimes as faRegularTimes } from '@fortawesome/pro-regular-svg-icons/faTimes'\nexport { faSearch as faRegularSearch } from '@fortawesome/pro-regular-svg-icons/faSearch'\n\n/** FontAwesome Light Icons */\nexport { faBuilding as faLightBuilding } from '@fortawesome/pro-light-svg-icons/faBuilding'\nexport { faAngleDown as faLightAngleDown } from '@fortawesome/pro-light-svg-icons/faAngleDown'\nexport { faAngleUp as faLightAngleUp } from '@fortawesome/pro-light-svg-icons/faAngleUp'\nexport { faArrowUp as faLightArrowUp } from '@fortawesome/pro-light-svg-icons/faArrowUp'\nexport { faArrowDown as faLightArrowDown } from '@fortawesome/pro-light-svg-icons/faArrowDown'\nexport { faCog as faLightCog } from '@fortawesome/pro-light-svg-icons/faCog'\nexport { faPlusCircle as faLightPlusCircle } from '@fortawesome/pro-light-svg-icons/faPlusCircle'\nexport { faCheck as faLightCheck } from '@fortawesome/pro-light-svg-icons/faCheck'\nexport { faPencilAlt as faLightPencilAlt } from '@fortawesome/pro-light-svg-icons/faPencilAlt'\nexport { faTimes as faLightTimes } from '@fortawesome/pro-light-svg-icons/faTimes'\nexport { faTimesCircle as faLightTimesCircle } from '@fortawesome/pro-light-svg-icons/faTimesCircle'\nexport { faAngleLeft as faLightAngleLeft } from '@fortawesome/pro-light-svg-icons/faAngleLeft'\nexport { faAngleRight as faLightAngleRight } from '@fortawesome/pro-light-svg-icons/faAngleRight'\nexport { faAngleDoubleRight as faLightAngleDoubleRight } from '@fortawesome/pro-light-svg-icons/faAngleDoubleRight'\nexport { faAngleDoubleLeft as faLightAngleDoubleLeft } from '@fortawesome/pro-light-svg-icons/faAngleDoubleLeft'\n\nexport { faTrashAlt as faLightTrashAlt } from '@fortawesome/pro-light-svg-icons/faTrashAlt'\nexport { faSearch as faLightSearch } from '@fortawesome/pro-light-svg-icons/faSearch'\nexport { faUser as faLightUser } from '@fortawesome/pro-light-svg-icons/faUser'\nexport { faCircle as faLightCircle } from '@fortawesome/pro-light-svg-icons/faCircle'\nexport { faCopy as faLightCopy } from '@fortawesome/pro-light-svg-icons/faCopy'\nexport { faEdit as faLightEdit } from '@fortawesome/pro-light-svg-icons/faEdit'\nexport { faEye as faLightEye } from '@fortawesome/pro-light-svg-icons/faEye'\n\n/** FontAwesome types */\nexport type { IconDefinition } from '@fortawesome/fontawesome-svg-core'\n\n/** React FontAwesome types */\nexport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nexport type { FontAwesomeIconProps } from '@fortawesome/react-fontawesome'\n","export const attachIf = (callback, condition: boolean) => {\n return condition ? callback : undefined\n}\n","import * as React from 'react'\n\nimport { flatten, forEach } from './utils/lodash'\n\nlet lastId = 0\n\nexport const newId = (prefix = 'id') => {\n lastId += 1\n return `${prefix}${lastId}`\n}\n\nexport function getChildren(children: any, type: any) {\n return React.Children.map(children, (child: any) => {\n const currentType: string | undefined = child.type\n ? child.type.displayName || child.type\n : undefined\n if (currentType === type) {\n return child\n }\n\n const result: any[] = []\n if (React.isValidElement(child)) {\n const properties: any = child.props\n forEach(getChildren(properties.children, type), (nestedChild: any) => {\n result.push(nestedChild)\n })\n }\n\n return result\n })\n}\n\nexport const convertHex = (hex: string, opacity: number) => {\n if (hex.startsWith('rgba')) {\n return hex\n }\n\n const value = hex.replace('#', '')\n const r = parseInt(value.substring(0, 2), 16)\n const g = parseInt(value.substring(2, 4), 16)\n const b = parseInt(value.substring(4, 6), 16)\n\n return `rgba(${r},${g},${b},${opacity / 100})`\n}\n\nexport const getRootElement = (node?: any): HTMLElement | null => {\n if (node) {\n return (\n node.closest('[data-testid=playground]') ||\n node.closest('[id=root]') ||\n node.closest('[id=docz-root]') ||\n node.closest('[id=modal]')\n )\n }\n\n return (\n document.getElementById('root') ||\n document.getElementById('docz-root') ||\n document.getElementById('modal')\n )\n}\n\nexport const getInnerHeight = (node?: any) => {\n const root = getRootElement(node)\n return root ? root.getBoundingClientRect().height : window.innerHeight\n}\n\nexport const innerDimensions = (node: any) => {\n const computedStyle = getComputedStyle(node)\n\n let width = node.clientWidth // width with padding\n let height = node.clientHeight // height with padding\n\n height -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom)\n width -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight)\n return { height, width }\n}\n\nexport const getWidthDimensions = (node: any) => {\n if (!node) {\n return undefined\n }\n\n const style = node.currentStyle || window.getComputedStyle(node)\n const width = node.offsetWidth // or use style.width\n const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight)\n const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)\n const border = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth)\n\n return {\n width,\n margin,\n padding,\n border,\n }\n}\n\nexport const getHeightDimensions = (node: any) => {\n if (!node) {\n return undefined\n }\n\n const style = node.currentStyle || window.getComputedStyle(node)\n const height = node.offsetHeight // or use style.width\n const margin = parseFloat(style.marginTop) + parseFloat(style.marginBottom)\n const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)\n const border = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)\n\n return {\n height,\n margin,\n padding,\n border,\n }\n}\n\nexport const dimensions = (node: any) => {\n if (!node) {\n return undefined\n }\n\n const widthDimensions = getWidthDimensions(node)!\n const heightDimensions = getHeightDimensions(node)!\n\n return {\n width:\n widthDimensions.width +\n widthDimensions.margin +\n widthDimensions.padding +\n widthDimensions.border,\n height:\n heightDimensions.height +\n heightDimensions.margin +\n heightDimensions.padding +\n heightDimensions.border,\n }\n}\n\nexport const isReactFragment = (component: any) => {\n if (component.type) {\n return component.type === React.Fragment\n }\n\n return component === React.Fragment\n}\n\nexport const getChild = (children: any) => {\n const result = React.Children.toArray(children)\n const items = result.map((x: any) =>\n isReactFragment(x) ? React.Children.toArray(x.props.children) : x,\n )\n return flatten(items)\n}\n\n/**\n * Determine if the value is empty or not\n * @param value value to check\n * @returns {boolean} True if the value is not empty\n * False if the value is empty\n */\nexport const hasValue = (value: any) =>\n value != null && !(Array.isArray(value) && value.length === 0)\n\n/**\n * Determine if field is empty or filled.\n * Response determines if label is presented above field or as placeholder.\n * @param obj\n * @param SSR\n * @returns {boolean} False when not present or empty string.\n * True when any number or string with length.\n */\nexport const isFilled = (obj: any, SSR = false) =>\n obj &&\n ((hasValue(obj.value) && obj.value !== '') ||\n (SSR && hasValue(obj.defaultValue) && obj.defaultValue !== ''))\n\nexport const isDefined = (value: any) => {\n return value !== undefined && value != null\n}\n","import React from 'react'\n\nexport interface FormControlContextProps {\n required?: boolean\n disabled?: boolean\n invalid?: boolean\n readOnly?: boolean\n filled?: boolean\n focused?: boolean\n hovered?: boolean\n variant?: string\n size?: string\n onEmpty?: () => void\n onFilled?: () => void\n onFocus?: (event: React.FocusEvent) => void\n onBlur?: (event: React.FocusEvent) => void\n onHover?: (event: React.MouseEvent) => void\n onLeave?: (event?: React.MouseEvent) => void\n}\n\nexport const FormControlContext = React.createContext(\n undefined,\n)\nFormControlContext.displayName = 'FormControlContext'\n\nexport const useFormControlContext = () => React.useContext(FormControlContext)\n/**\n * Return the form control context if exist, otherwise the props of the component\n * @param props pros of the component\n */\nexport const useFormControl = (props: any): FormControlContextProps => {\n const context = useFormControlContext()\n if (!context) {\n return props\n }\n\n const keys = Object.keys(context)\n return keys.reduce((accumulator: any, currentValue: any) => {\n accumulator[currentValue] = props[currentValue]\n\n if (context) {\n accumulator[currentValue] = context![currentValue]\n }\n\n return accumulator\n }, {})\n}\n","import * as devicesDetect from 'react-device-detect'\nimport { includes, union, sortBy, zipObject } from './utils/lodash'\n\nexport type Device = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport const DEVICES = ['xs', 'sm', 'md', 'lg', 'xl']\n\nexport const defaultDevices: Devices = {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1400,\n}\n\nexport interface Devices {\n xs?: number\n sm?: number\n md?: number\n lg?: number\n xl?: number\n}\n\nexport const getDevices = (props: any) => {\n const customBreakpoints = {\n ...defaultDevices,\n ...props.breakpoints,\n }\n const sorted = sortBy(Object.keys(customBreakpoints), (x: string) => +customBreakpoints[x])\n return zipObject(\n sorted,\n sorted.map((x: any) => customBreakpoints[x]),\n )\n}\n\nexport const getBreakpointValue = (breakpoints: any, device?: string) => {\n if (!device) {\n return 0\n }\n\n const value = breakpoints[device]\n if (value) {\n return value\n }\n\n const keys = Object.keys(breakpoints)\n let i = keys.indexOf(device) !== -1 ? keys.indexOf(device) : keys.length\n for (; i >= 0; i -= 1) {\n const key = keys[i]\n if (breakpoints[key]) {\n return breakpoints[key]\n }\n }\n\n return 0\n}\n\nexport const getBreakpoints = (props: any) => {\n const customBreakpoints = {\n ...defaultDevices,\n ...props.breakpoints,\n }\n return sortBy(Object.keys(customBreakpoints), (x: string) => +customBreakpoints[x])\n}\n\nexport const getBreakpoint = (props: any, device?: string) => {\n const devices = getDevices(props)\n const breakpoints = Object.keys(devices)\n\n const currentDevice = device || props.device\n let i = currentDevice ? breakpoints.indexOf(currentDevice) : breakpoints.length\n\n for (; i >= 0; i -= 1) {\n const key = breakpoints[i]\n if (props[key] !== undefined) {\n return key\n }\n }\n\n return 'xs'\n}\n\nexport const isShortVersion = (device: string, shortBreakpoints?: string[]) => {\n const customBreakpoints = union(['xs', 'sm'], shortBreakpoints || [])\n return includes(customBreakpoints, device)\n}\n\nexport const isBreakpointUpTo = (props: any, current: string, breakpoint: string) => {\n const devices = getDevices(props)\n const breakpoints = Object.keys(devices)\n return breakpoints.indexOf(current) < breakpoints.indexOf(breakpoint)\n}\n\nexport const isBreakpointLowerThan = (props: any, current: string, breakpoint: string) => {\n const devices = getDevices(props)\n const breakpoints = Object.keys(devices)\n return breakpoints.indexOf(current) < breakpoints.indexOf(breakpoint)\n}\n\nexport const isBreakpointGreaterOrEqualThan = (props: any, current: string, breakpoint: string) => {\n const devices = getDevices(props)\n const breakpoints = Object.keys(devices)\n return breakpoints.indexOf(current) >= breakpoints.indexOf(breakpoint)\n}\n\nexport const { isMobile } = devicesDetect\n","module.exports = require(\"styled-components\");","export * from './themes'\n","export { default as Grid } from './Grid'\nexport type { GridPublicProps as GridProps } from './Grid'\n","import * as React from 'react'\nimport { includes } from '../utils/lodash'\n\nconst useControlled = ({\n value,\n default: defaultProp,\n name,\n state = 'value',\n}: {\n value: any\n default: any\n name: string\n state?: string\n}) => {\n const { current: isControlled } = React.useRef(value != null)\n const [valueState, setValue] = React.useState(defaultProp)\n const currentValue = isControlled ? value : valueState\n\n const executeChecks = !includes(['production', 'test'], process.env.NODE_ENV)\n\n React.useEffect(() => {\n if (!executeChecks) {\n return\n }\n\n if (isControlled !== (value !== undefined)) {\n console.error(\n [\n `Prisma: A component is changing the ${\n isControlled ? '' : 'un'\n }controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`,\n 'Elements should not switch from uncontrolled to controlled (or vice versa).',\n `Decide between using a controlled or uncontrolled ${name} ` +\n 'element for the lifetime of the component.',\n \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n 'More info: https://fb.me/react-controlled-components',\n ].join('\\n'),\n )\n }\n }, [executeChecks, value])\n\n const { current: defaultValue } = React.useRef(defaultProp)\n\n React.useEffect(() => {\n if (!executeChecks) {\n return\n }\n\n if (defaultValue !== defaultProp) {\n console.error(\n [\n `Prisma: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +\n `To suppress this warning opt to use a controlled ${name}.`,\n ].join('\\n'),\n )\n }\n }, [executeChecks, JSON.stringify(defaultProp)])\n\n const setValueIfUncontrolled = React.useCallback((newValue) => {\n if (!isControlled) {\n setValue(newValue)\n }\n }, [])\n\n return [currentValue, setValueIfUncontrolled, isControlled]\n}\n\nexport default useControlled\n","import { trim } from '../../../utils/lodash'\nimport { BgColourStates, ColourStates, State } from '../models'\n\n/**\n * Return the colour for the requested state\n * @param value list of colour\n * @param defaultValue List of default colour\n * @param state requested state\n */\nexport const getColour = (\n value: ColourStates,\n defaultValue: string | ColourStates,\n state?: State,\n): string => {\n if (!state) {\n // Enable state is requested\n return value.colour || getDefaultColour(defaultValue, 'colour')\n }\n\n let colour\n let previousFallbackState\n let fallbackState: string = state\n while (!colour && previousFallbackState !== fallbackState) {\n colour =\n value[`${fallbackState}Colour`] ||\n (typeof defaultValue !== 'string'\n ? defaultValue[fallbackState] || defaultValue[`${fallbackState}Colour`]\n : undefined)\n\n previousFallbackState = fallbackState\n fallbackState = getFallbackState(state)\n }\n\n return colour || value.colour || getDefaultColour(defaultValue, 'colour')\n}\n\n/**\n * Return the background colour for the requested state\n * @param value list of background colour\n * @param defaultValue List of default background colour\n * @param state requested state\n */\nexport const getBgColour = (\n value: BgColourStates,\n defaultValue: string | BgColourStates,\n state?: State,\n): string => {\n if (!state) {\n return value.bgColour || getDefaultColour(defaultValue, 'bgColour')\n }\n\n let colour\n let previousFallbackState\n let fallbackState: string = state\n while (!colour && previousFallbackState !== fallbackState) {\n colour =\n value[`${fallbackState}BgColour`] ||\n (typeof defaultValue !== 'string'\n ? defaultValue[fallbackState] || defaultValue[`${fallbackState}BgColour`]\n : undefined)\n\n previousFallbackState = fallbackState\n fallbackState = getFallbackState(state)\n }\n\n return colour || value.bgColour || getDefaultColour(defaultValue, 'bgColour')\n}\n\nexport const getDefaultColour = (\n defaultValue: string | ColourStates | BgColourStates,\n state: string,\n) => (typeof defaultValue === 'string' ? defaultValue : defaultValue[state])\n\nexport function getValueAsPixel(value: string | number): string {\n return typeof value === 'number' ? `${value}px` : trim(value)\n}\n\nexport function getValueAsNumber(value: string | number) {\n if (typeof value === 'string') {\n const pieces = trim(value)?.match(/^(\\d+(.\\d+)?)(px|em|rem)$/i)\n\n if (pieces?.length > 0) return +pieces[1]\n }\n\n return +value\n}\n\nexport const getState = (props: any): State => {\n if (props.disabled) {\n if (props.selected || props.checked) {\n return 'selected'\n }\n\n return 'disabled'\n }\n\n if (props.hovered) {\n if (props.selected || props.checked) {\n return 'hoverSelected'\n }\n\n return 'hover'\n }\n\n if (props.focused) {\n if (props.selected || props.checked) {\n return 'focusSelected'\n }\n\n return 'focus'\n }\n\n if (props.active) {\n return 'active'\n }\n\n if (props.invalid) {\n if (props.selected || props.checked) {\n return 'invalidSelected'\n }\n\n return 'invalid'\n }\n\n if (props.selected || props.checked) {\n return 'selected'\n }\n\n return undefined\n}\n\nexport const getFallbackState = (state?: State, defaultState?: string) => {\n switch (state) {\n case 'disabled':\n return defaultState\n case 'hoverSelected':\n return 'selected'\n case 'focusSelected':\n return 'selected'\n case 'invalidSelected':\n return 'invalid'\n default:\n return state\n }\n}\n","export const getValueAsPixel = (value: string | number) => {\n if (typeof value === 'undefined') {\n return value\n }\n\n if (typeof value === 'number') {\n return `${value}px`\n }\n\n return value\n}\n\nexport const getValueAsNumber = (value: string | number) => {\n if (typeof value === 'undefined') {\n return value\n }\n\n if (typeof value === 'string') {\n const pieces = value?.match(/^(\\d+(.\\d+)?)(px|em|rem)$/i)\n if (pieces?.length > 0) {\n return +pieces[1]\n }\n }\n\n return +value\n}\n","export * from './themes'\n","import { useCallback } from 'react'\nimport type { FormControlContextProps } from '../FormControl.context'\nimport { isFilled } from '../../utils'\n\n/**\n * Notify the form control when the input is filled or emptied\n * @param formControl context of the form control\n */\nconst useCheckDirty = (formControl: FormControlContextProps) => {\n const onFilled = formControl && formControl.onFilled\n const onEmpty = formControl && formControl.onEmpty\n\n return useCallback(\n (obj: any) => {\n if (isFilled(obj)) {\n if (onFilled) {\n onFilled()\n }\n } else if (onEmpty) {\n onEmpty()\n }\n },\n [onFilled, onEmpty],\n )\n}\n\nexport default useCheckDirty\n","import { useEffect, useLayoutEffect } from 'react'\n\nconst useEnhancedEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport default useEnhancedEffect\n","import * as React from 'react'\n\nexport interface TableLevel2ContextProps {\n variant: 'header' | 'body' | 'footer'\n}\n\nconst TableLevel2Context = React.createContext(undefined)\nTableLevel2Context.displayName = 'TableLevel2Context'\n\nexport default TableLevel2Context\n","import * as React from 'react'\n\nexport interface StepperContextProps {\n activeStep: number\n alternativeLabel: boolean\n connector?: React.ReactNode\n nonLinear: boolean\n orientation: 'horizontal' | 'vertical'\n}\n\nconst StepperContext = React.createContext({\n orientation: 'horizontal',\n activeStep: 0,\n alternativeLabel: false,\n nonLinear: false,\n})\nStepperContext.displayName = 'StepperContext'\n\nexport default StepperContext\n","import * as React from 'react'\n\nexport interface StepContextProps {\n /**\n * Index of the step\n */\n index: number\n /**\n * True if the step is the last one\n */\n last: boolean\n /**\n * True if the content step is expanded, false otherwise\n */\n expanded: boolean\n /**\n * True if the step is the active one\n */\n active: boolean\n /**\n * True if the step is disabled\n */\n disabled: boolean\n /**\n * True if the step is completed\n */\n completed: boolean\n /**\n * True the icon will have a disable effect when the step is complete, false otherwise\n */\n widthDisableEffectOnComplete: boolean\n}\n\nconst StepperContext = React.createContext({\n index: 0,\n last: false,\n expanded: false,\n active: false,\n disabled: false,\n completed: false,\n widthDisableEffectOnComplete: false,\n})\nStepperContext.displayName = 'StepContext'\n\nexport default StepperContext\n","import * as React from 'react'\nimport { isLiveEnvironment } from './utils/environment'\n\nexport type ResponsiveContext = {\n /**\n * @ignore\n * Breakpoint point of the component. Possible values are 'xs', 'sm', 'md', 'lg' and 'xl'\n */\n device?: string\n /**\n * @ignore\n * List of breakpoints available. Possible values are 'xs', 'sm', 'md', 'lg' and 'xl'\n */\n breakpoints?: any\n /**\n * @ignore\n * List of breakpoints defining a short device. Possible values are 'xs', 'sm', 'md', 'lg' and 'xl'\n */\n shortBreakpoints?: any\n}\n\nexport const Context = React.createContext({} as any)\nif (!isLiveEnvironment()) {\n Context.displayName = 'ResponsiveContext'\n}\n\nexport const ResponsiveConsumer = Context.Consumer\n\nexport const ResponsiveProvider = Context.Provider\n","export * from './visuals'\nexport * from './colours'\nexport * from './spaces'\n","export * from './utils'\nexport * from './models'\n","export * from './colours'\nexport * from './models'\nexport * from './typography'\nexport * from './visuals'\n","import type { FormLabelCustomisations } from '../../../FormLabel/themes/Developer/customisations'\nimport type { FormHelperTextCustomisations } from '../../../FormHelperText/themes/Developer/customisations'\nimport type { FormValidityTextCustomisations } from '../../../FormValidityText/themes/Developer/customisations'\nimport type { TooltipCustomisations } from '../../../Tooltip/themes/Developer/customisations'\nimport type { FontAwesomeIconCustomisations as IconCustomisations } from '../../../Icon/components/FontAwesomeIcon/themes/Developer/customisations'\nimport type { FieldStyleProps } from './DevField.styles'\nimport type { FontAwesomeIconPublicProps } from '../../../Icon/components/FontAwesomeIcon/FontAwesomeIcon'\nimport type { FieldCustomisations as BaseFieldCustomisations } from '../../Field.customisations'\nimport type { FieldPublicProps } from '../../Field'\nimport { omit } from '../../../utils/lodash'\n\nexport interface FieldValidityStatusCustomisations {\n /**\n * Colour of the Validity status when valid\n */\n colour?: string\n /**\n * Colour of the Validity status when invalid\n */\n invalidColour?: string\n}\n\nexport interface DevFieldCustomisations {\n /**\n * Label customisations\n */\n Label?: FormLabelCustomisations\n /**\n * Helper text customisations\n */\n HelperText?: FormHelperTextCustomisations\n /**\n * Validity text customisations\n */\n ValidityText?: FormValidityTextCustomisations\n /**\n * Tooltip customisations\n */\n Tooltip?: TooltipCustomisations\n /**\n * Validity status customisations\n */\n ValidityStatus?: FieldValidityStatusCustomisations\n}\n\nconst getTooltipIconColour = (props: FieldStyleProps) =>\n props.customisations.Tooltip?.Icon?.colour || props.theme.colours.tints.lightGrey[150]\n\nconst getTooltipIconhoverColour = (props: FieldStyleProps) =>\n props.customisations.Tooltip?.Icon?.hoverColour || props.theme.colours.tints.sun[50]\n\nconst getToolTipCustomisations = (\n props: FieldStyleProps & FontAwesomeIconPublicProps,\n): TooltipCustomisations => ({\n ...omit(props.customisations.Tooltip, 'Icon'),\n Icon: {\n colour: getTooltipIconColour(props),\n hoverColour: getTooltipIconhoverColour(props),\n },\n})\n\nconst getValidityStatusValidColour = (props: FieldStyleProps) =>\n props.customisations.ValidityStatus?.colour || props.theme.colours.tertiary.semantic.green\n\nconst getValidityStatusInvalidColour = (props: FieldStyleProps) =>\n props.customisations.ValidityStatus?.invalidColour || props.theme.colours.tertiary.semantic.red\n\nconst getValidityStatusColour = (props: FieldStyleProps) =>\n props.styleProps.invalid\n ? getValidityStatusInvalidColour(props)\n : getValidityStatusValidColour(props)\n\nconst getValidationStatusCustomisations = (\n props: FieldStyleProps & FontAwesomeIconPublicProps,\n): IconCustomisations => ({\n colour: getValidityStatusColour(props),\n hoverColour: getValidityStatusColour(props),\n})\n\nexport const Customisations = {\n Label: (props: FieldStyleProps) => props.customisations.Label!,\n HelperText: (props: FieldStyleProps) => props.customisations.HelperText!,\n ValidityText: (props: FieldStyleProps) => props.customisations.ValidityText!,\n Tooltip: getToolTipCustomisations,\n ValidityStatus: getValidationStatusCustomisations,\n}\n\nexport type FieldCustomisations = BaseFieldCustomisations & DevFieldCustomisations\n\nexport default (props: FieldPublicProps & FieldCustomisations): FieldCustomisations => ({\n Label: props.Label,\n HelperText: props.HelperText,\n ValidityText: props.ValidityText,\n Tooltip: props.Tooltip,\n ValidityStatus: props.ValidityStatus,\n})\n","export const ownerDocument = (node: Node | undefined): Document => {\n return (node && node.ownerDocument) || document\n}\n","import { css } from '../themed-component'\n\nconst NoSelection = css`\n * {\n ::selection {\n background: transparent;\n }\n }\n`\n\nexport const DisabledState = css`\n ${NoSelection};\n\n cursor: default;\n user-select: none;\n pointer-events: none;\n opacity: ${({ theme: { visuals } }) => visuals.opacity.disable};\n`\n\nexport const ReadOnlyState = css`\n ${NoSelection};\n\n cursor: default;\n user-select: none;\n pointer-events: none;\n`\n\n/**\n * TODO: to populate common props across all components based on hovered state\n */\nexport const HoveredState = css``\n\n/**\n * TODO: to populate common props across all components based on focused state\n */\nexport const FocusedState = css``\n\n/**\n * TODO: to populate common props across all components based on active state\n */\nexport const ActiveState = css``\n","const getValue = (contextValue: any, propValue: any) =>\n typeof contextValue === 'undefined' ? propValue : contextValue\n\nexport default getValue\n","import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport * as ReactDOM from 'react-dom'\nimport useForkRef from '../hooks/useForkRef'\nimport useRef from '../hooks/useRef'\nimport getContainer from './Portal.utils'\nimport useEnhancedEffect from '../hooks/useEnhancedEffect'\nimport HTMLElementType from '../utils/HTMLElementType'\n\nexport interface PortalPublicProps {\n /**\n * A HTML element, component instance, or function that returns either.\n * The `container` will have the portal children appended to it.\n *\n * By default, it uses the body of the top-level document object,\n * so it's simply `document.body` most of the time.\n */\n container?: Element | (() => Element | null) | null | unknown\n /**\n * The `children` will be inside the DOM hierarchy of the parent component.\n * @default false\n */\n disablePortal?: boolean\n /**\n * The children to render into the `container`.\n */\n children?: React.ReactNode\n}\n\nexport type PortalProps = PortalPublicProps\n\n/**\n * Portals provide a first-class way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nconst Portal = React.forwardRef((props: PortalProps, ref: React.Ref) => {\n const [mountNode, setMountNode] = React.useState(null)\n\n const handleRef = useForkRef(\n React.isValidElement(props.children) ? (props.children as any).ref : null,\n ref,\n )\n\n // Mount the element that will have the portal children appended to it.\n useEnhancedEffect(() => {\n if (!props.disablePortal) {\n setMountNode(getContainer(props.container) || document.body)\n }\n }, [props.container, props.disablePortal])\n\n // Attach the mount element to the DOM ref\n useEnhancedEffect(() => {\n if (mountNode && !props.disablePortal) {\n useRef(ref, mountNode)\n return () => {\n useRef(ref, null)\n }\n }\n\n return undefined\n }, [ref, mountNode, props.disablePortal])\n\n if (props.disablePortal) {\n if (React.isValidElement(props.children)) {\n return React.cloneElement(props.children, {\n ref: handleRef,\n })\n }\n\n return props.children\n }\n\n const node = mountNode as any\n return node ? ReactDOM.createPortal(props.children, node) : node\n})\n\nPortal.propTypes = {\n container: PropTypes.oneOfType([HTMLElementType, PropTypes.func]),\n disablePortal: PropTypes.bool,\n children: PropTypes.node,\n}\n\nexport default Portal\n","import * as React from 'react'\nimport useRef from './useRef'\n\nconst useForkRef = (refA: any, refB: any) => {\n /**\n * This will create a new function if the ref props change and are defined.\n * This means react will call the old forkRef with `null` and the new forkRef\n * with the ref. Cleanup naturally emerges from this behavior\n */\n return React.useMemo(() => {\n if (refA == null && refB == null) {\n return null\n }\n\n return (refValue: any) => {\n useRef(refA, refValue)\n useRef(refB, refValue)\n }\n }, [refA, refB])\n}\n\nexport default useForkRef\n","const useRef = (ref: any, value: any) => {\n if (typeof ref === 'function') {\n ref(value)\n } else if (ref) {\n /* eslint-disable-next-line no-param-reassign */\n ref.current = value\n }\n}\n\nexport default useRef\n","export * from './themes'\nexport * from './components'\n","import { CheckboxFieldStyleProps } from './DevCheckboxField.styles'\nimport { CheckboxFieldPublicProps } from '../../CheckboxField'\nimport { DevCheckboxGroupCustomisations as CheckboxGroupCustomisations } from '../../../CheckboxGroup/themes/Developer/DevCheckboxGroup.customisations'\nimport ConvertFieldCustomisations, {\n FieldCustomisations,\n} from '../../../Field/themes/Developer/DevField.customisations'\n\nexport interface CheckboxFieldCustomisations extends FieldCustomisations {\n CheckboxGroup?: CheckboxGroupCustomisations\n}\n\nexport const Customisations = {\n CheckboxGroup: (props: CheckboxFieldStyleProps) => props.customisations.CheckboxGroup!,\n Field: (props: CheckboxFieldStyleProps) => ({\n Label: props.customisations?.Label,\n HelperText: props.customisations.HelperText,\n ValidityText: props.customisations.ValidityText,\n Tooltip: props.customisations.Tooltip,\n ValidityStatus: props.customisations.ValidityStatus,\n }),\n}\n\nexport default (\n props: CheckboxFieldPublicProps & CheckboxFieldCustomisations,\n): CheckboxFieldCustomisations => ({\n CheckboxGroup: props.CheckboxGroup || {},\n ...ConvertFieldCustomisations(props),\n})\n","export * from './models'\nexport * from './colours'\nexport * from './typography'\n","export * from './themes'\nexport * from './components'\n","import type { RadioFieldStyleProps } from './DevRadioField.styles'\nimport type { RadioFieldPublicProps } from '../../RadioField'\nimport type { DevRadioGroupCustomisations as RadioGroupCustomisations } from '../../../RadioGroup/themes/Developer/DevRadioGroup.customisations'\nimport type { FieldCustomisations } from '../../../Field/themes/Developer/DevField.customisations'\n\nexport interface RadioFieldCustomisations extends FieldCustomisations {\n RadioGroup?: RadioGroupCustomisations\n}\n\nexport const Customisations = {\n RadioGroup: (props: RadioFieldStyleProps) => props.customisations.RadioGroup!,\n Field: (props: RadioFieldStyleProps) => ({\n Label: props.customisations?.Label,\n HelperText: props.customisations.HelperText,\n ValidityText: props.customisations.ValidityText,\n Tooltip: props.customisations.Tooltip,\n ValidityStatus: props.customisations.ValidityStatus,\n }),\n}\n\nexport default (\n props: RadioFieldPublicProps & RadioFieldCustomisations,\n): RadioFieldCustomisations => ({\n RadioGroup: props.RadioGroup || {},\n Label: props.Label || {},\n HelperText: props.HelperText || {},\n ValidityText: props.ValidityText || {},\n Tooltip: props.Tooltip || {},\n ValidityStatus: props.ValidityStatus || {},\n})\n","export * from './themes'\nexport * from './templates'\nexport * from './components'\n","export * from './colours'\nexport * from './models'\nexport * from './typography'\nexport * from './visuals'\nexport * from './spaces'\n","import type { SelectStyleProps } from './DevSelect.styles'\nimport type { SelectPublicProps } from '../../Select'\nimport { SelectCustomisations, getArrowBgColour, getArrowColour } from './customisations'\n\nexport const Customisations = {\n Arrow: (props: SelectStyleProps) => ({\n colour: getArrowColour(props),\n hoverColour: getArrowColour(props),\n bgColour: getArrowBgColour(props),\n hoverBgColour: getArrowBgColour(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: SelectPublicProps & SelectCustomisations): SelectCustomisations => ({\n border: props.border,\n paddingLeft: props.paddingLeft,\n Option: props.Option,\n Selection: props.Selection,\n})\n","import type { ListItemIconPublicProps } from '../../ListItemIcon'\nimport type { ListItemIconStyleProps } from './DevListItemIcon.styles'\nimport { getColour, ListItemIconCustomisations } from './customisations'\n\nexport const Customisations = {\n Icon: (props: ListItemIconStyleProps) => ({\n colour: getColour(props),\n hoverColour: getColour(props),\n }),\n FontAwesomeIcon: (props: ListItemIconStyleProps) => ({\n colour: getColour(props),\n hoverColour: getColour(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (\n props: ListItemIconPublicProps & ListItemIconCustomisations,\n): ListItemIconCustomisations => ({\n colour: props.colour,\n})\n","import * as React from 'react'\nimport useEnhancedEffect from './useEnhancedEffect'\n\n/**\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n * @param {function} fn\n */\nconst useEventCallback = (fn: any) => {\n const ref = React.useRef(fn)\n\n useEnhancedEffect(() => {\n ref.current = fn\n })\n\n /* eslint-disable-next-line no-void */\n return React.useCallback((...args) => (void 0, ref.current)(...args), [])\n}\n\nexport default useEventCallback\n","export * from './themes'\n","const getValue = (value: number | string) => {\n if (typeof value === 'number') {\n return `${value}px`\n }\n\n return value || 'auto'\n}\n\nexport { getValue }\n","import * as React from 'react'\n\nexport interface MenuContextProps {\n variant: 'dropdown' | 'fly-out' | 'accordion' | 'tab'\n adjustSize?: () => void\n}\n\nconst MenuContext = React.createContext({\n variant: 'dropdown',\n})\n\nMenuContext.displayName = 'MenuContext'\n\nexport default MenuContext\n","export * from './components'\nexport { default as Modal } from './Modal'\nexport type { ModalPublicProps as ModalProps } from './Modal'\n","import { FontVariants } from '../../Common'\n\nimport { FontSize, LineHeight, LetterSpacing, TextAlign } from './models'\n\nexport const fontSize: FontSize = {\n h1: { rem: 4.5, px: 72 },\n h2: { rem: 3, px: 48 },\n h3: { rem: 2, px: 32 },\n h4: { rem: 1.5, px: 24 },\n h5: { rem: 1.125, px: 18 },\n h6: { rem: 1, px: 16 },\n bodyL: { rem: 1.125, px: 18 },\n bodyM: { rem: 1, px: 16 },\n bodyS: { rem: 0.875, px: 14 },\n bodyXs: { rem: 0.75, px: 12 },\n captionL: { rem: 1, px: 16 },\n captionM: { rem: 0.875, px: 14 },\n captionS: { rem: 0.6875, px: 11 },\n captionXs: { rem: 0.625, px: 10 },\n captionXxs: { rem: 0.5, px: 8 },\n}\n\nexport const fontFamily = `proxima-nova, sans-serif`\n\nexport const fontWeight: FontVariants = {\n heading: 700,\n bold: 700,\n regular: 400,\n thin: 300,\n}\n\nexport const textAlign: TextAlign = 'left'\n\nexport const lineHeight: LineHeight = {\n h1: '80px',\n h2: '56px',\n h3: '48px',\n h4: '36px',\n h5: '28px',\n h6: '24px',\n bodyL: '28px',\n bodyM: '24px',\n bodyS: '20px',\n bodyXs: '16px',\n captionL: '20px',\n captionM: '16px',\n captionS: '12px',\n captionXs: '12px',\n captionXxs: '8px',\n}\n\nexport const letterSpacing: LetterSpacing = '0.8px'\n\nexport default {\n fontFamily,\n fontSize,\n fontWeight,\n lineHeight,\n letterSpacing,\n textAlign,\n}\n\nexport interface ITypography {\n fontFamily?: string\n fontSize?: FontSize\n lineHeight?: LineHeight\n letterSpacing?: LetterSpacing\n fontWeight?: FontVariants\n textAlign?: TextAlign\n}\n","export { colours } from './colours'\nexport { spaces } from './spacing'\nexport { visuals } from './visuals'\nexport * from './models'\nexport * from './customisations'\nexport * from './constants'\n","import type { Property } from '..'\nimport type { Opacity } from './opacity'\n\nexport * from './border'\nexport * from './height'\nexport * from './opacity'\nexport * from './width'\n\nexport interface IVisuals {\n borderRadius: Property\n boxShadow: Property\n borderSize: Property\n opacity: Opacity\n letterSpace: Property\n lineHeight: Property\n}\n","import type { ButtonPublicProps } from '../../Button'\nimport type { ButtonCustomisations } from './customisations'\nimport type { ButtonStyleProps } from './DevButton.styles'\n\n/** Icon */\nexport const Customisations = {\n Icon: (props: ButtonStyleProps) => ({\n colour: 'inherit',\n hoverColour: 'inherit',\n }),\n}\n\nconst check = (props: ButtonPublicProps & ButtonCustomisations) => {\n if (props.type === 'secondary') {\n if (props.hoverColour) {\n console.warn('The hover colour customisations is not available for secondary button')\n }\n\n if (props.bgColour) {\n console.warn('The background colour customisations is not available for secondary button')\n }\n\n if (props.hoverBgColour) {\n console.warn(\n 'The hover background colour customisations is not available for secondary button',\n )\n }\n }\n\n if (props.type === 'tertiary') {\n if (props.bgColour) {\n console.warn('The background colour customisations is not available for tertiary button')\n }\n\n if (props.hoverBgColour) {\n console.warn(\n 'The hover background colour customisations is not available for tertiary button',\n )\n }\n }\n}\n\n/**\n * Extract the customisations from the Developer component properties\n */\nexport default (props: ButtonPublicProps & ButtonCustomisations): ButtonCustomisations => {\n check(props)\n\n return {\n colour: props.colour,\n hoverColour: props.hoverColour,\n bgColour: props.bgColour,\n hoverBgColour: props.hoverBgColour,\n fontSize: props.fontSize,\n }\n}\n","import Icon, { IconPublicProps } from '../../Icon'\nimport Theme from '../../../themes/Developer/theme'\nimport { withCustomisedStyle } from '../../../providers'\nimport Customisations from './DevIcon.customisations'\nimport type { IconContext } from '../../Icon.composition'\nimport Styles from './DevIcon.styles'\nimport { IconCustomisations } from './customisations'\n\nexport const DevIcon = withCustomisedStyle(\n Icon,\n Theme,\n Styles,\n Customisations,\n 'Icon',\n)\n\nexport type DevIconCustomisations = IconCustomisations\nexport type DevIconProps = IconPublicProps & IconCustomisations\n","/* Theme TrueLayer */\nexport { default as DevTheme } from './Developer/theme'\nexport { default as DevStyled, css as DevCss } from './Developer/themed-component'\nexport type { DeveloperTheme as IDevTheme } from './Developer/theme'\nexport type { ThemeProps as DevThemeProps } from './Developer/themed-component'\n","import type { IconStyleProps } from './DevIcon.styles'\nimport * as theme from '../../../themes/Developer/common'\n\nexport const sizes: theme.Spacing1Value = {\n xxs: 8,\n xs: 10,\n sm: 12,\n md: 14,\n lg: 16,\n xl: 18,\n xxl: 24,\n xxxl: 32,\n xxxxl: 48,\n}\n\n/** Size */\nexport const getSize = (props: IconStyleProps) =>\n typeof props.styleProps.size === 'string' ? sizes[props.styleProps.size] : props.styleProps.size\n","export * from './themes'\n","import { FormControlContextProps } from '../FormControl/FormControl.context'\n\n/**\n * Determine if the input is inputtable or not\n * @param formControl form control context\n * @returns {boolean} True the input is inputtable\n * False the input is not inputtable\n */\nexport const isInputtable = (formControl: FormControlContextProps) =>\n !formControl.disabled && !formControl.readOnly\n\n/**\n * Get the placeholder with the asterisk is the input is required\n * @param placeholder placeholder to display in the input\n * @param required true if the input is required, false otherwise\n * @returns {string} return the new placeholder formatted\n */\nexport const getPlaceholder = (placeholder?: string, required?: boolean) =>\n placeholder && required ? `${placeholder}*` : placeholder\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { InputStyleProps } from '../DevInput.styles'\n\n/** Colour */\nexport const getColour = (props: InputStyleProps) =>\n theme.getColour(props, props.theme.colours.tints.charcoal[100], theme.getState(props.styleProps))\n\n/** Background colour */\nexport const getBgColour = (props: InputStyleProps) =>\n theme.getBgColour(\n props,\n props.theme.colours.tertiary.neutral.white,\n theme.getState(props.styleProps),\n )\n\ntype BorderColours = Pick<\n theme.ColourStates,\n 'colour' | 'hoverColour' | 'activeColour' | 'focusColour' | 'invalidColour' | 'selectedColour'\n>\n\n/** Border colour */\nexport const getBorderColour = (props: InputStyleProps): BorderColours => ({\n colour: props.theme.colours.tertiary.neutral.grey,\n hoverColour: props.theme.colours.tints.sun[50],\n activeColour: props.theme.colours.tints.sun[50],\n focusColour: props.theme.colours.tints.sun[50],\n invalidColour: props.theme.colours.tertiary.semantic.red,\n selectedColour: props.theme.colours.tints.sun[50],\n})\n\n/** Placeholder colour */\nexport const getPlaceholderColour = (props: InputStyleProps) =>\n theme.getColour(\n props,\n props.theme.colours.tertiary.neutral.grey,\n theme.getState(props.styleProps),\n )\n","import * as React from 'react'\n\nexport interface GridContextProps {\n direction: string\n alignItems: string\n // When using offset in a grid with a column direction the margin-bottom used with a calculation using 100% does not work. The width is used instead of the height\n // Solution => use the real height of the parent (grid container) to compute the margin-bottom\n containerSize?: number\n noWrap: boolean\n overflow: boolean\n}\n\nexport const GridContext = React.createContext(null)\n","export * from './themes'\n","export * from './themes'\n","export * from './themes'\n","export * from './themes'\n","export * from './themes'\n","module.exports = require(\"react-dom\");","import { Ref, useEffect, useRef, useState } from 'react'\n\nconst useHover = (opts?: { ref?: Ref; initialValue?: boolean }): any => {\n const ref: any = opts?.ref || useRef(null)\n\n const [hovered, setHovered] = useState(opts?.initialValue || false)\n\n const handleMouseOver = () => {\n // console.log(\"HOVER\")\n setHovered(true)\n }\n const handleMouseOut = () => {\n // console.log(\"LEAVE\")\n\n setHovered(false)\n }\n\n useEffect(\n () => {\n const node: any = ref.current\n if (node) {\n node.addEventListener('mouseover', handleMouseOver)\n node.addEventListener('mouseout', handleMouseOut)\n\n return () => {\n node.removeEventListener('mouseover', handleMouseOver)\n node.removeEventListener('mouseout', handleMouseOut)\n }\n }\n\n return () => null\n },\n [ref.current], // Recall only if ref changes\n )\n\n return [ref, hovered, setHovered]\n}\n\nexport default useHover\n","import type { TooltipStyleProps } from '../DevTooltip.styles'\nimport * as theme from '../../../../themes/Developer/proxima-nova'\n\n/** Colour */\nexport const getColour = (props: TooltipStyleProps) =>\n theme.getColour(\n props,\n props.theme.colours.tertiary.neutral.white,\n theme.getState(props.styleProps),\n )\n\n/** Background colour */\nexport const getBgColour = (props: TooltipStyleProps) =>\n theme.getBgColour(\n props,\n props.theme.colours.tints.charcoal[100],\n theme.getState(props.styleProps),\n )\n\n/** Border */\n/** Colour */\nexport const defaultBorderColour = (props: TooltipStyleProps) => ({\n colour: props.theme.colours.tints.charcoal[100],\n})\n\n/** Icon */\nexport const defaultIconColour = (props: TooltipStyleProps) => ({\n colour: props.theme.colours.tertiary.neutral.grey,\n hoverColour: props.theme.colours.tints.sun[80],\n focusColour: props.theme.colours.tertiary.neutral.grey,\n})\n\nexport const getIconColour = (props: TooltipStyleProps, state?: theme.State) => {\n const customisations = theme.getCustomisations(props, 'Icon')\n return theme.getColour(customisations, defaultIconColour(props), state)\n}\n\nexport const defaultIconBorderColour = (props: TooltipStyleProps) => ({\n colour: 'transparent',\n focusColour: props.theme.colours.tints.azure[80],\n})\n\nexport const getIconBorderColour = (props: TooltipStyleProps, state?: theme.State) => {\n const customisations = theme.getCustomisations(props, 'Icon')\n return theme.getBorderColour(customisations, defaultIconBorderColour(props), state)\n}\n","import type { TooltipStyleProps } from './DevTooltip.styles'\nimport type { TooltipPublicProps } from '../../Tooltip'\nimport { TooltipCustomisations } from './customisations'\nimport type { FontAwesomeIconCustomisations as IconCustomisations } from '../../../Icon/components/FontAwesomeIcon/themes/Developer/customisations'\n\nexport const Customisations = {\n Icon: (props: TooltipStyleProps): IconCustomisations => props.customisations.Icon!,\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: TooltipPublicProps & TooltipCustomisations): TooltipCustomisations => ({\n colour: props.colour,\n bgColour: props.bgColour,\n border: props.border,\n fontSize: props.fontSize,\n Icon: props.Icon || {},\n})\n","import type { InputFieldStyleProps } from './DevInputField.styles'\nimport type { InputFieldPublicProps } from '../../InputField'\nimport type { InputCustomisations } from '../../../Input/themes/Developer/customisations'\nimport ConvertFieldCustomisations, {\n FieldCustomisations,\n} from '../../../Field/themes/Developer/DevField.customisations'\n\nexport interface InputFieldCustomisations extends FieldCustomisations {\n Input?: InputCustomisations\n}\n\nexport const Customisations = {\n Input: (props: InputFieldStyleProps) => props.customisations.Input!,\n Field: (props: InputFieldStyleProps) => ({\n Label: props.customisations?.Label,\n HelperText: props.customisations.HelperText,\n ValidityText: props.customisations.ValidityText,\n Tooltip: props.customisations.Tooltip,\n ValidityStatus: props.customisations.ValidityStatus,\n }),\n}\n\nexport default (\n props: InputFieldPublicProps & InputFieldCustomisations,\n): InputFieldCustomisations => ({\n Input: props.Input || {},\n ...ConvertFieldCustomisations(props),\n})\n","import * as React from 'react'\nimport * as PropTypes from 'prop-types'\n\nimport { useFormControl } from '../FormControl/FormControl.context'\nimport { CheckboxContext } from './Checkbox.composition'\nimport { isInputtable } from './Checkbox.utils'\nimport useResponsive from '../hooks/useResponsive'\nimport useControlled from '../hooks/useControlled'\nimport useCheckDirty from '../FormControl/hooks/useCheckDirty'\nimport { StyledProps } from '../providers'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\nimport { newId } from '../utils'\nimport { faSolidCheck } from '../utils/fontawesome'\nimport { attachIf } from '../utils/event-handler'\nimport { getTestId } from '../utils/test'\n\nexport interface CheckboxPublicProps {\n /**\n * Id of the checkbox.\n */\n id?: string\n /**\n * Label of the checkbox.\n */\n label?: string\n /**\n * Name of the checkbox.\n */\n name?: string\n /**\n * Value of the checkbox.\n */\n value?: string | boolean\n /**\n * True if the checkbox is ticked, false otherwise.\n */\n checked?: boolean\n /**\n * The default value if the checkbox is ticked or not. Use when the component is not controlled.\n */\n defaultChecked?: boolean\n /**\n * Icon representing the tick.\n */\n icon?: any\n /**\n * If `true`, the checkbox can be unticked, false otherwise\n */\n untickable?: boolean\n /**\n * If `true`, the `input` element will be disabled.\n */\n disabled?: boolean\n /**\n * It prevents the user from changing the value of the field\n * (not from interacting with the field).\n */\n readOnly?: boolean\n /**\n * If `true`, the label will be displayed in an error state.\n */\n invalid?: boolean\n /**\n * If `true`, the component will be displayed in focused state.\n */\n focused?: boolean\n /**\n * If `true`, the component will be displayed in hovered state.\n */\n hovered?: boolean\n /**\n * Size of the input.\n */\n size?: 'small' | 'medium' | 'large'\n /**\n * -1 if the checkbox is not keyboard accessible, index in the sequential keyboard navigation otherwise\n */\n tabIndex?: number\n /**\n * Handler when the value changes. The new value is passed as parameter.\n */\n onChange?: (value?: string | boolean) => void\n /**\n * Handler when the user clicks on the checkbox.\n */\n onClick?: (event: React.MouseEvent) => void\n /**\n * Handler when the input loses the focus. The new value is passed as parameter.\n */\n onBlur?: (event: React.FocusEvent) => void\n /**\n * Handler when the input gets the focus.\n */\n onFocus?: (event: React.FocusEvent) => void\n /**\n * Handler when the input is hovered\n */\n onHover?: (event: React.MouseEvent) => void\n /**\n * Handler when the input is not hovered\n */\n onLeave?: (event?: React.MouseEvent) => void\n /**\n * Component used as label\n */\n children?: React.ReactNode\n}\n\nexport interface CheckboxProps extends CheckboxPublicProps, StyledProps {}\n\nexport interface CheckboxCoreStyle {\n checked: boolean\n disabled: boolean\n readOnly: boolean\n invalid: boolean\n variant: string\n size: string\n filled: boolean\n hovered: boolean\n focused: boolean\n active: boolean\n}\n\nconst Checkbox = React.forwardRef((props: CheckboxProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const inputRef = React.useRef(null)\n\n const formControl = useFormControl(props)\n const checkDirty = useCheckDirty(formControl)\n\n const [checked, setChecked] = useControlled({\n value: props.checked,\n default: props.defaultChecked,\n name: 'Checkbox',\n })\n\n const [hovered, setHovered] = React.useState(props.hovered)\n const [focused, setFocused] = React.useState(props.focused)\n const [active, setActive] = React.useState(false)\n\n const isActionable = isInputtable(formControl)\n\n const tabIndex = formControl.readOnly || formControl.disabled ? -1 : props.tabIndex\n\n React.useEffect(() => {\n inputRef.current.checked = checked\n checkDirty({ value: checked })\n }, [checked])\n\n // Remove the focus when the input is disabled and has the focus\n React.useEffect(() => {\n if (!isInputtable(formControl) && props.focused) {\n inputRef.current!.blur()\n }\n }, [formControl, props.disabled, props.readOnly, props.focused])\n\n const generateId = React.useMemo(() => {\n return newId()\n }, [])\n\n const getCoreStyle = (): CheckboxCoreStyle => ({\n checked,\n disabled: formControl.disabled!,\n readOnly: formControl.readOnly!,\n invalid: formControl.invalid!,\n variant: formControl.variant!,\n size: formControl.size!,\n filled: formControl.filled!,\n focused,\n hovered,\n active,\n })\n\n const handleClick = (event: React.MouseEvent) => {\n if (props.onClick) {\n props.onClick(event)\n }\n\n handleChange(event)\n }\n\n const handleKeyUp = (event: React.KeyboardEvent) => {\n if (event.key !== 'Enter') {\n return\n }\n\n handleChange(event)\n }\n\n const handleChange = (event: React.SyntheticEvent) => {\n if (props.untickable || formControl.readOnly) {\n event.stopPropagation()\n return\n }\n\n const nextState = !checked\n setChecked(nextState)\n\n if (props.onChange) {\n const update = props.value === undefined ? nextState : props.value\n props.onChange(update)\n }\n }\n\n const handleFocus = (event: React.FocusEvent) => {\n if (props.onFocus) {\n props.onFocus(event)\n }\n\n setFocused(true)\n }\n\n const handleBlur = (event: React.FocusEvent) => {\n if (props.onBlur) {\n props.onBlur(event)\n }\n\n setFocused(false)\n }\n\n const handleHover = (event: React.MouseEvent) => {\n if (props.onHover) {\n props.onHover(event)\n }\n\n setHovered(true)\n }\n\n const handleLeave = (event?: React.MouseEvent) => {\n if (props.onLeave) {\n props.onLeave(event)\n }\n\n setHovered(false)\n }\n\n const renderTickIcon = () => {\n const icon = checked ? faSolidCheck : props.icon\n\n const { TickIcon: Icon } = props.styled!\n return icon ? (\n \n ) : null\n }\n\n const renderTick = () => {\n const { Tick } = props.styled!\n return (\n \n {renderTickIcon()}\n \n )\n }\n\n const renderLabel = () => {\n const label = props.label || props.children\n\n const { Label } = props.styled!\n return label ? (\n \n {label}\n \n ) : null\n }\n\n const renderInput = () => {\n const { Input } = props.styled!\n return (\n null}\n styleProps={getCoreStyle()}\n customisations={props.customisations}\n {...getTestId(props, 'input')}\n />\n )\n }\n\n const { Root } = props.styled!\n return (\n \n {renderTick()}\n {renderLabel()}\n {renderInput()}\n \n )\n})\n\nCheckbox.defaultProps = {\n size: 'medium',\n disabled: false,\n tabIndex: 0,\n id: newId(),\n}\n\nCheckbox.propTypes = {\n id: PropTypes.string,\n label: PropTypes.string,\n name: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n icon: PropTypes.any,\n untickable: PropTypes.bool,\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n invalid: PropTypes.bool,\n focused: PropTypes.bool,\n hovered: PropTypes.bool,\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n tabIndex: PropTypes.number,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n onHover: PropTypes.func,\n onLeave: PropTypes.func,\n}\n\nexport default Checkbox\n","export * from './models'\nexport * from './colours'\nexport * from './visuals'\nexport * from './typography'\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { CheckboxStyleProps } from '../DevCheckbox.styles'\n\n/** Global */\n/** Background colour */\nexport const getBgColour = (props: CheckboxStyleProps) =>\n theme.getBgColour(\n props,\n props.theme.colours.tertiary.neutral.white,\n theme.getState(props.styleProps),\n )\n\n/** Border colour */\nexport const getBorderColour = (props: CheckboxStyleProps): theme.BorderProps => ({\n colour: props.theme.colours.tints.charcoal[80],\n hoverColour: props.theme.colours.tints.sun[80],\n activeColour: props.theme.colours.tints.sun[80],\n focusColour: props.theme.colours.tints.sun[50],\n invalidColour: props.theme.colours.tertiary.semantic.red,\n selectedColour: props.theme.colours.tints.charcoal[80],\n hoverSelectedColour: props.theme.colours.tints.sun[80],\n focusSelectedColour: props.theme.colours.tints.sun[80],\n})\n\n/** Label */\n/** Colour */\nexport const getLabelColour = (props: CheckboxStyleProps) => {\n const customisations = theme.getCustomisations(props, 'Label')\n const currentState = theme.getState(props.styleProps)\n return theme.getColour(customisations, props.theme.colours.tints.charcoal[100], currentState)\n}\n\n/** Tick */\n/** Colour */\nconst tickDefaultColour = (props: CheckboxStyleProps) => ({\n colour: props.theme.colours.tints.charcoal[80],\n selectedColour: props.theme.colours.tertiary.semantic.green,\n invalidColour: props.theme.colours.tertiary.semantic.red,\n})\n\nexport const getTickColour = (props: CheckboxStyleProps) => {\n const customisations = theme.getCustomisations(props, 'Tick')\n const currentState = theme.getState(props.styleProps)\n return theme.getColour(customisations, tickDefaultColour(props), currentState)\n}\n","import { CheckboxCustomisations, getTickColour } from './customisations'\nimport { FontAwesomeIconCustomisations as IconCustomisations } from '../../../Icon/components/FontAwesomeIcon/themes/Developer/customisations'\nimport type { CheckboxPublicProps } from '../../Checkbox'\nimport type { CheckboxStyleProps } from './DevCheckbox.styles'\n\nexport const Customisations = {\n Icon: (props: CheckboxStyleProps): IconCustomisations => ({\n colour: getTickColour(props),\n hoverColour: getTickColour(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: CheckboxPublicProps & CheckboxCustomisations): CheckboxCustomisations => ({\n bgColour: props.bgColour,\n border: props.border,\n Label: props.Label || {},\n Tick: props.Tick || {},\n})\n","import type { NativeCheckboxPublicProps } from '../../NativeCheckbox'\nimport type { NativeCheckboxStyleProps } from './DevNativeCheckbox.styles'\nimport type { FontAwesomeIconCustomisations as IconCustomisations } from '../../../../../Icon/components/FontAwesomeIcon/themes/Developer/customisations'\nimport { NativeCheckboxCustomisations, getTickColour } from './customisations'\n\nexport const Customisations = {\n Icon: (props: NativeCheckboxStyleProps): IconCustomisations => ({\n colour: getTickColour(props),\n hoverColour: getTickColour(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (\n props: NativeCheckboxPublicProps & NativeCheckboxCustomisations,\n): NativeCheckboxCustomisations => ({\n Label: props.Label || {},\n Tick: props.Tick || {},\n})\n","export * from './models'\nexport * from './colours'\nexport * from './visuals'\nexport * from './typography'\n","import type { NativeCheckboxStyleProps } from '../DevNativeCheckbox.styles'\nimport * as theme from '../../../../../../themes/Developer/proxima-nova'\n\n/** Label */\n/** Colour */\nexport const getLabelColour = (props: NativeCheckboxStyleProps) => {\n const customisations = theme.getCustomisations(props, 'Label')\n const currentState = theme.getState(props.styleProps)\n return theme.getColour(customisations, props.theme.colours.tints.charcoal[100], currentState)\n}\n\n/** Background colour */\nexport const getLabelBgColour = (props: NativeCheckboxStyleProps) => {\n const customisations = theme.getCustomisations(props, 'Label')\n const currentState = theme.getState(props.styleProps)\n return theme.getBgColour(customisations, undefined, currentState)\n}\n\n/** Tick */\n/** Colour */\nconst tickDefaultColour = (\n props: NativeCheckboxStyleProps,\n): Pick => ({\n colour: props.theme.colours.tints.lightGrey[100],\n selectedColour: props.theme.colours.tertiary.semantic.green,\n invalidColour: props.theme.colours.tertiary.semantic.red,\n})\n\nexport const getTickColour = (props: NativeCheckboxStyleProps) => {\n const customisations = theme.getCustomisations(props, 'Tick')\n const currentState = theme.getState(props.styleProps)\n return theme.getColour(customisations, tickDefaultColour(props), currentState)\n}\n\n/** Background colour */\nexport const getTickBgColour = (props: NativeCheckboxStyleProps) => {\n const customisations = theme.getCustomisations(props, 'Tick')\n const currentState = theme.getState(props.styleProps)\n return theme.getBgColour(customisations, undefined, currentState)\n}\n\n/** Border */\nexport const getBorderColour = (props: NativeCheckboxStyleProps): theme.ColourStates => ({\n colour: props.theme.colours.tints.charcoal[80],\n hoverColour: props.theme.colours.tints.sun[80],\n activeColour: props.theme.colours.tints.sun[80],\n focusColour: props.theme.colours.tints.sun[50],\n invalidColour: props.theme.colours.tertiary.semantic.red,\n selectedColour: props.theme.colours.tints.charcoal[80],\n hoverSelectedColour: props.theme.colours.tints.sun[80],\n focusSelectedColour: props.theme.colours.tints.sun[80],\n})\n","import * as React from 'react'\nimport type { CheckboxGroupContext } from './CheckboxGroup.composition'\nimport { StyledProps } from '../providers'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\nimport useResponsive from '../hooks/useResponsive'\nimport { getBreakpointValue } from '../devices'\nimport { getTestId } from '../utils/test'\nimport { includes } from '../utils/lodash'\n\nexport interface CheckboxBreakpoint {\n [key: string]: number\n}\n\nexport interface CheckboxGroupPublicProps {\n /**\n * Id of the group of checkbox\n */\n id: string\n /**\n * Name of the group of checkbox\n */\n name?: string\n /**\n * Current value of the group of checkbox\n */\n value?: string[]\n /**\n * Space between the checkbox\n */\n spacing?: number\n /**\n * True if the group of checkbox is disabled, false otherwise\n */\n disabled?: boolean\n /**\n * It prevents the user from changing the value of the field\n * (not from interacting with the field).\n */\n readOnly?: boolean\n /**\n * If `true`, the label will be displayed in an error state.\n */\n invalid?: boolean\n /**\n * True, if at least one checkbox has to be checked, false otherwise\n */\n atLeastOne?: boolean\n /**\n * Size of the input.\n */\n size?: 'small' | 'medium' | 'large'\n /**\n * Orientation of the checkbox inside the group\n */\n orientation?: 'horizontal' | 'vertical'\n /**\n * List of breakpoint with the number of columns the group has to display per line\n */\n breakpoints?: CheckboxBreakpoint[]\n /**\n * Handler triggered when the current value of the group of checkbox changed\n */\n onChange?: (values: string[]) => void\n /**\n * List of checkbox components to display as a group\n */\n children?: React.ReactNode\n}\n\ninterface CheckboxGroupProps extends CheckboxGroupPublicProps, StyledProps {}\n\nconst CheckboxGroup = React.forwardRef(\n (props: CheckboxGroupProps, forwardRef: React.Ref) => {\n const { ref, device } = useResponsive({ ref: forwardRef })\n\n const checkboxes = React.Children.toArray(props.children)\n\n const [values, setValues] = React.useState(props.value!)\n\n const direction = props.orientation === 'vertical' ? 'column' : 'row'\n\n React.useEffect(() => {\n setValues(props.value!)\n }, [props.value])\n\n const getCoreStyle = () => ({})\n\n const getPropertyValue = (child: any, name: string): T =>\n typeof child.props[name] === 'undefined' ? props[name] : child.props[name]\n\n const getItemProperties = () => {\n let itemProperties = {}\n\n if (props.breakpoints) {\n const numberOfColumn = getBreakpointValue(props.breakpoints, device)\n\n if (device) {\n itemProperties = {\n [device!]: 12 / numberOfColumn,\n }\n }\n } else {\n itemProperties = { xs: true }\n }\n\n return itemProperties\n }\n\n const handleChange = (value: string) => {\n let nextValues: string[] = []\n\n if (includes(values, value)) {\n const keepPrevValue = props.atLeastOne && values.length === 1\n nextValues = !keepPrevValue ? values.filter((x) => x !== value) : values\n } else {\n nextValues = values.concat([value])\n }\n\n setValues(nextValues)\n\n if (props.onChange) {\n props.onChange(nextValues)\n }\n }\n\n const renderItem = (child: any, index: number) => {\n const customisations: any = props.customisations || {}\n\n const component = React.cloneElement(child, {\n ...customisations,\n ...child.props,\n checked: includes(values, child.props.value),\n size: getPropertyValue(child, 'size'),\n disabled: getPropertyValue(child, 'disabled'),\n readOnly: getPropertyValue(child, 'readOnly'),\n invalid: getPropertyValue(child, 'invalid'),\n untickable: props.atLeastOne && values.length === 1 && values[0] === child.props.value,\n onChange: handleChange,\n ...getTestId(props, `checkbox-${index + 1}`),\n })\n\n const { Item } = props.styled!\n return (\n \n {component}\n \n )\n }\n\n const { Root } = props.styled!\n return (\n \n {checkboxes.map(renderItem)}\n \n )\n },\n)\n\nCheckboxGroup.defaultProps = {\n value: [],\n size: 'medium',\n orientation: 'horizontal',\n}\n\nexport default CheckboxGroup\n","import CheckboxCustomise, {\n Customisations as CheckboxCustomisations,\n} from '../../../../themes/Developer/DevCheckboxField.customisations'\nimport type { DevCheckboxFieldCustomisations } from '../../../../themes/Developer'\n\nexport type NativeCheckboxFieldCustomisations = DevCheckboxFieldCustomisations\n\nexport const Customisations = {\n CheckboxGroup: CheckboxCustomisations.CheckboxGroup,\n Field: CheckboxCustomisations.Field,\n}\n\nexport default CheckboxCustomise\n","export * from './themes'\n\n// export { default as Collapse } from './Collapse';\n// export type { CollapsePublicProps as CollapseProps } from \"./Collapse\";\n","import styled, { css, ThemeProps } from '../../../themes/Developer/themed-component'\nimport type { CollapseContext } from '../../Collapse.composition'\nimport type { CollapseCoreStyle } from '../../Collapse'\nimport type { StyleProps } from '../../../types'\nimport * as theme from '../../../themes/Developer/proxima-nova'\n\nexport type CollapseStyleProps = StyleProps & ThemeProps\n\nconst getFontSize = (fontSize: keyof theme.FontSize) => css`\n font-size: ${(props) =>\n theme.getValueAsPixel(props.theme.typography.proximaNova.fontSize[fontSize].px)};\n`\n\nconst HorizontalInnerWrapper = css`\n width: auto;\n height: 100%;\n`\n\nconst HorizontalWrapper = css`\n width: auto;\n height: 100%;\n`\n\nconst HorizontalRoot = css`\n height: auto;\n width: 0;\n\n ${(props) =>\n props.styleProps.entered &&\n css`\n width: auto;\n `};\n`\n\nconst VerticalRoot = css`\n ${(props) =>\n props.styleProps.entered &&\n css`\n height: auto;\n overflow: visible;\n `};\n`\n\nconst InnerWrapper = styled.div`\n width: 100%;\n\n ${(props) => props.styleProps.orientation === 'horizontal' && HorizontalInnerWrapper};\n`\n\nconst Wrapper = styled.div`\n display: flex;\n width: 100%;\n\n ${(props) => props.styleProps.orientation === 'horizontal' && HorizontalWrapper};\n`\n\nconst Root = styled.div`\n height: 0;\n overflow: hidden;\n\n ${getFontSize('bodyM')}\n ${(props) => props.styleProps.orientation === 'horizontal' && HorizontalRoot};\n ${(props) => props.styleProps.orientation === 'vertical' && VerticalRoot};\n`\n\nconst Components: CollapseContext = {\n Root,\n Wrapper,\n InnerWrapper,\n}\n\nexport default Components\n","import type { LinkPublicProps } from '../../Link'\nimport type { LinkStyleProps } from './DevLink.styles'\nimport { getFontSize, getIconColour, LinkCustomisations } from './customisations'\n\nexport const Customisations = {\n Icon: (props: LinkStyleProps) => ({\n colour: getIconColour(props),\n hoverColour: getIconColour(props),\n fontSize: getFontSize(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: LinkPublicProps & LinkCustomisations): LinkCustomisations => ({\n colour: props.colour,\n hoverColour: props.hoverColour,\n fontSize: props.fontSize,\n border: props.border,\n Icon: props.Icon || {},\n})\n","export const sizes = {\n small: 35,\n medium: 53,\n large: 84,\n}\n\nexport const thickness = {\n small: 1,\n medium: 3,\n large: 5,\n}\n","import * as React from 'react'\nimport * as PropTypes from 'prop-types'\n\nimport { useFormControl } from '../FormControl/FormControl.context'\nimport { RadioContext } from './Radio.composition'\nimport useResponsive from '../hooks/useResponsive'\nimport useControlled from '../hooks/useControlled'\nimport useCheckDirty from '../FormControl/hooks/useCheckDirty'\nimport { StyledProps } from '../providers'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\nimport { newId } from '../utils'\nimport { isInputtable } from './Radio.utils'\nimport { attachIf } from '../utils/event-handler'\nimport { getTestId } from '../utils/test'\n\nexport interface RadioPublicProps {\n /**\n * Id of the Radio.\n */\n id?: string\n /**\n * Label of the Radio.\n */\n label: string\n /**\n * Name of the Radio.\n */\n name?: string\n /**\n * Value of the Radio.\n */\n value?: string | boolean\n /**\n * True if the radio is ticked, false otherwise.\n */\n checked?: boolean\n /**\n * The default value if the radio is ticked or not. Use when the component is not controlled.\n */\n defaultChecked?: boolean\n /**\n * The icon to display within the \n */\n icon?: any\n /**\n * If `true`, the Radio can be unticked, false otherwise\n */\n untickable?: boolean\n /**\n * If `true`, the `input` element will be disabled.\n */\n disabled?: boolean\n /**\n * It prevents the user from changing the value of the field\n * (not from interacting with the field).\n */\n readOnly?: boolean\n /**\n * If `true`, the label will be displayed in an error state.\n */\n invalid?: boolean\n /**\n * If `true`, the component will be displayed in focused state.\n */\n focused?: boolean\n /**\n * If `true`, the component will be displayed in hovered state.\n */\n hovered?: boolean\n /**\n * Size of the input.\n */\n size?: 'small' | 'medium' | 'large'\n /**\n * -1 if the checkbox is not keyboard accessible, index in the sequential keyboard navigation otherwise\n */\n tabIndex?: number\n /**\n * Component to display before the label\n */\n adornment?: React.ReactNode\n /**\n * Handler when the value changes.\n */\n onChange?: (value?: string | boolean) => void\n /**\n * Handler when the user clicks on the Radio.\n */\n onClick?: (event: React.MouseEvent) => void\n /**\n * Handler when the user check/uncheck the Radio.\n */\n onCheck?: (checked: boolean) => void\n /**\n * Handler when the input loses the focus. The new value is passed as parameter.\n */\n onBlur?: (event: React.FocusEvent) => void\n /**\n * Handler when the input gets the focus.\n */\n onFocus?: (event: React.FocusEvent) => void\n /**\n * Handler when the input is hovered\n */\n onHover?: (event: React.MouseEvent) => void\n /**\n * Handler when the input is not hovered\n */\n onLeave?: (event?: React.MouseEvent) => void\n /**\n * Component used as label\n */\n children?: React.ReactNode\n}\n\nexport interface RadioProps extends RadioPublicProps, StyledProps {}\n\nexport interface RadioState {\n value: boolean\n}\n\nexport interface RadioCoreStyle {\n checked: boolean\n disabled: boolean\n readOnly: boolean\n invalid: boolean\n variant: string\n size: string\n filled: boolean\n hovered: boolean\n focused: boolean\n active: boolean\n}\n\nconst Radio = React.forwardRef((props: RadioProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const inputRef = React.useRef(null)\n\n const formControl = useFormControl(props)\n const checkDirty = useCheckDirty(formControl)\n\n const [checked, setChecked] = useControlled({\n value: props.checked,\n default: props.defaultChecked,\n name: 'Radio',\n })\n\n const [hovered, setHovered] = React.useState(props.hovered)\n const [focused, setFocused] = React.useState(props.focused)\n const [active, setActive] = React.useState(false)\n\n const isActionable = isInputtable(formControl)\n\n const tabIndex = formControl.readOnly || formControl.disabled ? -1 : props.tabIndex\n\n React.useLayoutEffect(() => {\n inputRef.current.checked = checked\n checkDirty({ value: checked })\n }, [checked])\n\n // Remove the focus when the input is disabled and has the focus\n React.useEffect(() => {\n if (!isInputtable(formControl) && props.focused) {\n inputRef.current!.blur()\n }\n }, [formControl, props.disabled, props.readOnly, props.focused])\n\n const generateId = React.useMemo(() => {\n return newId()\n }, [])\n\n const getCoreStyle = (): RadioCoreStyle => {\n return {\n checked,\n disabled: formControl.disabled!,\n readOnly: formControl.readOnly!,\n invalid: formControl.invalid!,\n variant: formControl.variant!,\n size: formControl.size!,\n filled: formControl.filled!,\n focused,\n hovered,\n active,\n }\n }\n\n const handleClick = (event: React.MouseEvent) => {\n if (props.onClick) {\n props.onClick(event)\n }\n\n handleChange(event)\n }\n\n const handleKeyUp = (event: React.KeyboardEvent) => {\n if (event.key !== 'Enter') {\n return\n }\n\n handleChange(event)\n }\n\n const handleChange = (event: React.SyntheticEvent) => {\n if (props.untickable || formControl.readOnly) {\n event.stopPropagation()\n return\n }\n\n const nextState = !checked\n setChecked(nextState)\n\n if (props.onCheck) {\n props.onCheck(nextState)\n }\n\n if (props.onChange) {\n const update = props.value === undefined ? nextState : props.value\n props.onChange(update)\n }\n }\n\n const handleFocus = (event: React.FocusEvent) => {\n if (props.onFocus) {\n props.onFocus(event)\n }\n\n setFocused(true)\n }\n\n const handleBlur = (event: React.FocusEvent) => {\n if (props.onBlur) {\n props.onBlur(event)\n }\n\n setFocused(false)\n }\n\n const handleHover = (event: React.MouseEvent) => {\n if (props.onHover) {\n props.onHover(event)\n }\n\n setHovered(true)\n }\n\n const handleLeave = (event?: React.MouseEvent) => {\n if (props.onLeave) {\n props.onLeave(event)\n }\n\n setHovered(false)\n }\n\n const renderAdornment = () => {\n if (props.adornment) {\n return props.adornment\n }\n\n const { Icon } = props.styled!\n return props.icon ? (\n \n ) : null\n }\n\n const renderLabel = () => {\n const { Label } = props.styled!\n return (\n \n {props.label || props.children}\n \n )\n }\n\n const renderInput = () => {\n const { Input } = props.styled!\n return (\n null}\n styleProps={getCoreStyle()}\n customisations={props.customisations}\n {...getTestId(props, 'input')}\n />\n )\n }\n\n const { Root } = props.styled!\n return (\n \n {renderAdornment()}\n {renderLabel()}\n {renderInput()}\n \n )\n})\n\nRadio.defaultProps = {\n size: 'medium',\n disabled: false,\n tabIndex: 0,\n id: newId(),\n}\n\nRadio.propTypes = {\n id: PropTypes.string,\n label: PropTypes.string,\n name: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n icon: PropTypes.any,\n untickable: PropTypes.bool,\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n invalid: PropTypes.bool,\n focused: PropTypes.bool,\n hovered: PropTypes.bool,\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n tabIndex: PropTypes.number,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n onHover: PropTypes.func,\n onLeave: PropTypes.func,\n}\n\nexport default Radio\n","import type { RadioPublicProps } from '../../Radio'\nimport type { RadioStyleProps } from './DevRadio.styles'\nimport type { RadioCustomisations } from './customisations'\nimport type { FontAwesomeIconCustomisations as IconCustomisations } from '../../../Icon/components/FontAwesomeIcon/themes/Developer/customisations'\n\nexport const Customisations = {\n Icon: (props: RadioStyleProps): IconCustomisations => ({\n colour: 'inherit',\n hoverColour: 'inherit',\n }),\n TickIcon: (props: RadioStyleProps): IconCustomisations => ({\n colour: 'inherit',\n hoverColour: 'inherit',\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: RadioPublicProps & RadioCustomisations): RadioCustomisations => ({\n colour: props.colour,\n hoverColour: props.hoverColour,\n focusColour: props.focusColour,\n selectedColour: props.selectedColour,\n bgColour: props.bgColour,\n hoverBgColour: props.hoverBgColour,\n focusBgColour: props.focusBgColour,\n selectedBgColour: props.selectedBgColour,\n border: props.border,\n})\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { RadioStyleProps } from '../DevRadio.styles'\n\ntype DefaultColour = Pick<\n theme.ColourStates,\n 'colour' | 'hoverColour' | 'focusColour' | 'selectedColour'\n>\n\n/** Global */\n/** Colour */\nconst defaultColour = (props: RadioStyleProps): DefaultColour => ({\n colour: props.theme.colours.tints.charcoal[80],\n hoverColour: props.theme.colours.tints.charcoal[100],\n focusColour: props.theme.colours.tints.charcoal[100],\n selectedColour: props.theme.colours.tints.charcoal[100],\n})\n\nexport const getColour = (props: RadioStyleProps) => {\n const currentState = theme.getState(props.styleProps)\n return theme.getColour(props, defaultColour(props), currentState)\n}\n\ntype DefaultBgColour = Pick<\n theme.BgColourStates,\n 'bgColour' | 'hoverBgColour' | 'focusBgColour' | 'selectedBgColour'\n>\n\n/* Background colour */\nconst defaultBgColour = (props: RadioStyleProps): DefaultBgColour => ({\n bgColour: props.theme.colours.tertiary.neutral.white,\n hoverBgColour: props.theme.colours.tints.sun[50],\n focusBgColour: props.theme.colours.tints.sun[80],\n selectedBgColour: props.theme.colours.tints.sun[30],\n})\n\nexport const getBgColour = (props: RadioStyleProps) =>\n theme.getBgColour(props, defaultBgColour(props), theme.getState(props.styleProps))\n\ntype BorderColour = DefaultColour & Pick\n\n/** Border colour */\nexport const getBorderColour = (props: RadioStyleProps): BorderColour => ({\n colour: props.theme.colours.tints.charcoal[80],\n hoverColour: props.theme.colours.tints.charcoal[80],\n activeColour: props.theme.colours.tints.lightGrey[180],\n focusColour: props.theme.colours.tints.charcoal[80],\n invalidColour: props.theme.colours.tertiary.semantic.red,\n selectedColour: props.theme.colours.tints.charcoal[80],\n})\n","import { getTickColour, NativeRadioCustomisations } from './customisations'\nimport { FontAwesomeIconCustomisations as IconCustomisations } from '../../../../../Icon/components/FontAwesomeIcon/themes/Developer/customisations'\nimport type { NativeRadioPublicProps } from '../../NativeRadio'\nimport type { NativeRadioStyleProps } from './DevNativeRadio.styles'\n\nexport const Customisations = {\n Icon: (props: NativeRadioStyleProps): IconCustomisations => ({\n colour: 'inherit',\n hoverColour: 'inherit',\n }),\n TickIcon: (props: NativeRadioStyleProps): IconCustomisations => ({\n colour: getTickColour(props),\n hoverColour: getTickColour(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (\n props: NativeRadioPublicProps & NativeRadioCustomisations,\n): NativeRadioCustomisations => ({\n Label: props.Label || {},\n Tick: props.Tick || {},\n})\n","export * from './models'\nexport * from './colours'\nexport * from './visuals'\nexport * from './typography'\n","import * as theme from '../../../../../../themes/Developer/proxima-nova'\nimport type { NativeRadioStyleProps } from '../DevNativeRadio.styles'\n\nconst defaultLabelColour = (props: NativeRadioStyleProps) => ({\n colour: props.theme.colours.tints.charcoal[80],\n hoverColour: props.theme.colours.tints.charcoal[100],\n focusColour: props.theme.colours.tints.charcoal[100],\n selectedColour: props.theme.colours.tints.charcoal[100],\n})\n\n/** Label */\n/** Colour */\nexport const getLabelColour = (props: NativeRadioStyleProps) =>\n theme.getColour(\n theme.getCustomisations(props, 'Label'),\n defaultLabelColour(props),\n theme.getState(props.styleProps),\n )\n\n/** Background colour */\nexport const getLabelBgColour = (props: NativeRadioStyleProps) =>\n theme.getBgColour(\n theme.getCustomisations(props, 'Label'),\n 'inherit',\n theme.getState(props.styleProps),\n )\n\ntype TickDefaultColour = Pick\n\nconst tickDefaultColour = (props: NativeRadioStyleProps): TickDefaultColour => ({\n colour: props.theme.colours.tints.lightGrey[100],\n selectedColour: props.theme.colours.tertiary.semantic.green,\n invalidColour: props.theme.colours.tertiary.semantic.red,\n})\n\nexport const getTickColour = (props: NativeRadioStyleProps) =>\n theme.getColour(\n theme.getCustomisations(props, 'Tick'),\n tickDefaultColour(props),\n theme.getState(props.styleProps),\n )\n\nexport const getTickBorderColour = (props: NativeRadioStyleProps): theme.ColourStates => ({\n colour: props.theme.colours.tints.charcoal[80],\n hoverColour: props.theme.colours.tints.sun[80],\n activeColour: props.theme.colours.tints.lightGrey[180],\n focusColour: props.theme.colours.tints.sun[50],\n invalidColour: props.theme.colours.tertiary.semantic.red,\n selectedColour: props.theme.colours.tints.charcoal[80],\n hoverSelectedColour: props.theme.colours.tints.sun[80],\n focusSelectedColour: props.theme.colours.tints.sun[80],\n})\n","import * as React from 'react'\nimport type { RadioGroupContext } from './RadioGroup.composition'\nimport type { StyledProps } from '../providers'\nimport useResponsive from '../hooks/useResponsive'\nimport { getBreakpointValue } from '../devices'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\nimport { getTestId } from '../utils/test'\n\nexport interface RadioBreakpoint {\n [key: string]: number\n}\n\nexport interface RadioGroupPublicProps {\n /**\n * Id of the group of Radio\n */\n id: string\n /**\n * Name of the group of Radio\n */\n name?: string\n /**\n * Current value of the group of Radio\n */\n value?: string\n /**\n * Space between the Radio\n */\n spacing?: number\n /**\n * True if the group of Radio is disabled, false otherwise\n */\n disabled?: boolean\n /**\n * It prevents the user from changing the value of the field\n * (not from interacting with the field).\n */\n readOnly?: boolean\n /**\n * If `true`, the label will be displayed in an error state.\n */\n invalid?: boolean\n /**\n * Size of the input.\n */\n size?: 'small' | 'medium' | 'large'\n /**\n * Orientation of the checkbox inside the group\n */\n orientation?: 'horizontal' | 'vertical'\n /**\n * List of breakpoint with the number of columns the group has to display per line\n */\n breakpoints?: RadioBreakpoint[]\n /**\n * Handler triggered when the current value of the group of Radio changed\n */\n onChange?: (value: string) => void\n /**\n * List of radio components to display as a group\n */\n children?: React.ReactNode\n}\n\nexport interface RadioGroupCoreStyle {\n removeBorderOverlap: boolean\n hasCurrent?: boolean\n}\n\nexport type RadioGroupProps = RadioGroupPublicProps & StyledProps\n\nconst RadioGroup = React.forwardRef(\n (props: RadioGroupProps, forwardRef: React.Ref) => {\n const { ref, device } = useResponsive({ ref: forwardRef })\n\n const radios = React.Children.toArray(props.children)\n\n const [value, setValue] = React.useState(props.value!)\n const [hovered, setHovered] = React.useState(-1)\n const [focused, setFocused] = React.useState(-1)\n\n const direction = props.orientation === 'vertical' ? 'column' : 'row'\n\n React.useEffect(() => {\n setValue(props.value!)\n }, [props.value])\n\n const getCoreStyle = (extra?: any): RadioGroupCoreStyle => ({\n removeBorderOverlap: props.spacing === 0,\n ...extra,\n })\n\n const getPropertyValue = (child: any, name: string): T =>\n typeof child.props[name] === 'undefined' ? props[name] : child.props[name]\n\n const getItemProperties = () => {\n let itemProperties = {}\n\n if (props.breakpoints) {\n const numberOfColumn = getBreakpointValue(props.breakpoints, device)\n\n if (device) {\n itemProperties = {\n [device!]: 12 / numberOfColumn,\n }\n }\n } else {\n itemProperties = { xs: true }\n }\n\n return itemProperties\n }\n\n const handleChange = (nextValue: string) => {\n setValue(nextValue)\n\n if (props.onChange) {\n props.onChange(nextValue)\n }\n }\n\n const handleFocus = (event: React.FocusEvent) => {\n const element: any = event.currentTarget\n\n const index = +element.getAttribute('data-cell-index')\n setFocused(index)\n }\n\n const handleBlur = () => setFocused(-1)\n\n const handleHover = (event: React.MouseEvent) => {\n const element: any = event.currentTarget\n\n const index = +element.getAttribute('data-cell-index')\n setHovered(index)\n }\n\n const handleLeave = () => setHovered(-1)\n\n const renderItem = (child: any, index: number) => {\n const checked = value ? value === child.props.value : index === 0\n const dataAttributes = {\n ...getTestId(props, `radio-${index + 1}`),\n ...getAttributes(child.props, DataAttributesPrefix),\n 'data-cell-index': index,\n }\n\n const customisations: any = props.customisations || {}\n\n const component = React.cloneElement(child, {\n ...customisations,\n ...child.props,\n ...dataAttributes,\n checked,\n size: getPropertyValue(child, 'size'),\n disabled: getPropertyValue(child, 'disabled'),\n readOnly: getPropertyValue(child, 'readOnly'),\n invalid: getPropertyValue(child, 'invalid'),\n untickable: checked,\n onChange: handleChange,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onHover: handleHover,\n onLeave: handleLeave,\n })\n\n const styleProps = {\n hasCurrent: focused === index || hovered === index || checked,\n }\n\n const { Item } = props.styled!\n return (\n \n {component}\n \n )\n }\n\n const { Root } = props.styled!\n return (\n \n {radios.map(renderItem)}\n \n )\n },\n)\n\nRadioGroup.defaultProps = {\n size: 'medium',\n spacing: 0,\n}\n\nexport default RadioGroup\n","import RadioCustomise, {\n Customisations as RadioCustomisations,\n} from '../../../../themes/Developer/DevRadioField.customisations'\nimport type { DevRadioFieldCustomisations } from '../../../../index'\n\nexport type NativeRadioFieldCustomisations = DevRadioFieldCustomisations\n\nexport const Customisations = {\n RadioGroup: RadioCustomisations.RadioGroup,\n Field: RadioCustomisations.Field,\n}\n\nexport default RadioCustomise\n","import Select, { SelectPublicProps } from '../../Select'\nimport Theme from '../../../themes/Developer/theme'\nimport { withCustomisedStyle } from '../../../providers'\nimport Styles from './DevSelect.styles'\nimport Customisations from './DevSelect.customisations'\nimport type { SelectContext } from '../../Select.composition'\nimport type { SelectCustomisations } from './customisations'\n\nexport const DevSelect = withCustomisedStyle<\n SelectPublicProps,\n SelectContext,\n SelectCustomisations\n>(Select, Theme, Styles, Customisations, 'Select')\n\nexport type DevSelectCustomisations = SelectCustomisations\nexport type DevSelectProps = SelectPublicProps & SelectCustomisations\n","import { RefObject, SetStateAction, useCallback, useEffect, useState } from 'react'\n\n// Webpack compilation error so for now we return any\n// Reference: https://stackoverflow.com/questions/62079477/line-0-parsing-error-cannot-read-property-map-of-undefined/63652345#63652345\n// export type HookResponse = [\n// number,\n// React.Dispatch>\n// ];\n\n/**\n * https://a11y-solutions.stevenwoodson.com/solutions/focus/roving-focus/\n * @param ref\n * @param size\n * @param silent\n */\n// [number, (currentFocus: number) => void]\nconst useRoveFocus = (ref: RefObject, size: number, silent?: boolean): any => {\n const [currentFocus, setCurrentFocus] = useState(-1)\n\n const ArrowDown = (event: KeyboardEvent) => event.key === 'ArrowDown'\n const ArrowUp = (event: KeyboardEvent) => event.key === 'ArrowUp'\n const Tab = (event: KeyboardEvent) => !event.shiftKey && event.key === 'Tab'\n const ShiftTab = (event: KeyboardEvent) => event.shiftKey && event.key === 'Tab'\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (silent) {\n return\n }\n\n if (ArrowDown(event) || Tab(event)) {\n event.preventDefault()\n setCurrentFocus((prev) => (prev === size - 1 ? 0 : prev + 1))\n } else if (ArrowUp(event) || ShiftTab(event)) {\n event.preventDefault()\n setCurrentFocus((prev) => (prev <= 0 ? size - 1 : prev - 1))\n }\n },\n [size, silent],\n )\n\n useEffect(() => {\n const node = ref?.current as HTMLElement\n if (node) {\n node.addEventListener('keydown', handleKeyDown)\n\n return () => {\n node.removeEventListener('keydown', handleKeyDown)\n }\n }\n\n return () => null\n }, [ref?.current, handleKeyDown])\n\n return [currentFocus, setCurrentFocus]\n}\n\nexport default useRoveFocus\n","import { Ref, useEffect, useMemo, useRef, useState } from 'react'\n\nconst useComponentVisible = (opts?: {\n ref?: Ref\n isMobile?: boolean\n initialIsVisible?: boolean\n}): any => {\n const [isComponentVisible, setIsComponentVisible] = useState(false)\n\n const defaultRef = useRef(null)\n const ref: any = opts?.ref || defaultRef\n\n const handleClickOutside = (event: any) => {\n if (ref.current && !ref.current.contains(event.target)) {\n setIsComponentVisible(false)\n }\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setIsComponentVisible(false)\n } else if (event.key === 'Enter') {\n setIsComponentVisible((prev) => !prev)\n }\n }\n\n useEffect(() => {\n const event = opts?.isMobile ? 'touchstart' : 'mousedown'\n document.addEventListener(event, handleClickOutside, true)\n\n return () => {\n document.removeEventListener(event, handleClickOutside, true)\n }\n }, [])\n\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener('keyup', handleKeyDown)\n }\n\n return () => {\n if (ref.current) {\n ref.current.removeEventListener('keyup', handleKeyDown)\n }\n }\n }, [ref.current])\n\n return useMemo(\n () => ({\n ref,\n isComponentVisible,\n setIsComponentVisible,\n }),\n [ref.current, isComponentVisible, setIsComponentVisible],\n )\n}\n\nexport default useComponentVisible\n","import * as React from 'react'\nimport * as ReactDOM from 'react-dom'\nimport { dimensions, innerDimensions } from '../utils'\n\nconst truncateFormat = {\n numberOfWord: '(+{0})',\n}\n\nconst createCanvas = (style: any) => {\n const canvas: any = document.createElement('canvas')\n const docFragment = document.createDocumentFragment()\n const font = [\n style['font-weight'],\n style['font-style'],\n style['font-size'],\n style['font-family'],\n ].join(' ')\n\n docFragment.appendChild(canvas)\n const canvasElement = canvas.getContext('2d')\n canvasElement.font = font\n return canvasElement\n}\n\nconst OverflowComponent = ({\n truncateBy,\n numberOfOverflow,\n notStyled,\n}: {\n truncateBy: any\n numberOfOverflow: number\n notStyled?: boolean\n}) => {\n const style: any = notStyled\n ? {}\n : {\n flexGrow: 1,\n textAlign: 'right',\n }\n\n return numberOfOverflow > 0 ? (\n {truncateFormat[truncateBy].replace('{0}', numberOfOverflow)}
\n ) : null\n}\n\nlet canvas: any = null\n\nconst useTruncate = (opts?: {\n ref?: React.RefObject\n separator?: string\n truncateBy?: string\n}): any => {\n const defaultRef = React.useRef(null)\n const ref: any = opts?.ref || defaultRef\n\n let node: any\n let container: any\n let loaded = false\n\n React.useEffect(() => {\n node = ref.current\n }, [ref.current])\n\n const measureWidth = (text: string) => Math.ceil(canvas.measureText(text).width)\n\n const truncateString = (text: any) => {\n const style = window.getComputedStyle(ref.current)\n if (!canvas) {\n canvas = createCanvas(style)\n }\n\n const separator = opts?.separator || ' '\n const truncateBy = opts?.truncateBy || 'numberOfWord'\n\n const size = innerDimensions(ref.current)\n if (Number.isNaN(size.width) || size.width === 0) {\n return text\n }\n\n let truncatedText = ''\n let i = 0\n\n const words = text!.split(separator)\n\n for (i = 0; i < words.length; i += 1) {\n const nextItem = (i > 0 ? `${separator} ` : '') + words[i]\n const nextTruncated = `${truncatedText + nextItem} ${truncateFormat[truncateBy].replace(\n '{0}',\n words.length - (i + 1),\n )}`\n\n const width = measureWidth(i === 0 ? nextItem : nextTruncated)\n\n if (width > size.width) {\n break\n } else {\n truncatedText += nextItem\n }\n }\n\n if (i === words.length) {\n return truncatedText\n }\n\n return `${truncatedText} ${truncateFormat[truncateBy].replace('{0}', words.length - i)}`\n }\n\n const checkFlag = () => {\n if (!loaded) {\n window.setTimeout(checkFlag, 100) /* this checks the flag every 100 milliseconds */\n } else {\n /* do something */\n }\n }\n\n const truncateComponents = (components: any) => {\n const truncateBy = opts?.truncateBy || 'numberOfWord'\n\n const children: any[] = Array.from(components.props.children || [])\n\n const nodeSize = innerDimensions(node)\n\n // Render the components + the overflow one\n container.style.height = `${nodeSize.height}px`\n ReactDOM.render(\n [\n ...children,\n ,\n ],\n container,\n () => {\n loaded = true\n },\n )\n\n checkFlag()\n\n if (container.childNodes.length - 1 !== children.length) {\n // We don't have the components rendered yet in the temporary container\n return components\n }\n\n const overflowDimensions = dimensions(container.childNodes[container.childNodes.length - 1])!\n if (Number.isNaN(overflowDimensions.width)) {\n return components\n }\n\n const childNodes = Array.from(container.childNodes).slice(0, container.childNodes.length - 1)\n\n let totalWidth = 0\n let i = 0\n for (; i < childNodes.length; i += 1) {\n const childNode = childNodes[i]\n\n const size = dimensions(childNode)\n if (size) {\n if (totalWidth + size.width + overflowDimensions.width > nodeSize.width) {\n break\n }\n\n totalWidth += size.width\n }\n }\n\n // Remove the temporary container and release resources\n ReactDOM.unmountComponentAtNode(container)\n document.body.removeChild(container)\n container = null\n\n loaded = false\n\n return [\n ...children.slice(0, i),\n ,\n ]\n }\n\n const truncate = (value: any) => {\n if (!ref.current || !value) {\n return value\n }\n\n let truncated = null\n if (typeof value !== 'object') {\n truncated = truncateString(value)\n } else {\n truncated = value\n }\n\n return truncated\n }\n\n return React.useMemo(() => ({ ref, truncate }), [ref.current])\n}\n\nexport default useTruncate\n","import { useEffect, useRef } from 'react'\n\nconst useDidMount = (func: any, deps: any[]) => {\n const didMount = useRef(false)\n\n useEffect(() => {\n if (didMount.current) func()\n else didMount.current = true\n }, deps)\n}\n\nexport default useDidMount\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { SelectStyleProps } from '../DevSelect.styles'\nimport type { DeveloperTheme } from '../../../../themes/Developer/theme'\nimport type { State } from '../../../../themes/Common'\n\n/** Global */\n/** Border colour */\nexport const defaultBorderColour = ({ colours }: DeveloperTheme) => ({\n colour: colours.tertiary.neutral.grey,\n hoverColour: colours.tints.sun[100],\n activeColour: colours.tints.sun[50],\n focusColour: colours.tints.sun[100],\n invalidColour: colours.tertiary.semantic.red,\n selectedColour: colours.tertiary.neutral.grey,\n})\n\n/** Arrow */\n/** Colour */\nexport const defaultArrowColour = ({ colours }: DeveloperTheme) => ({\n colour: colours.tints.charcoal[100],\n hoverColour: colours.tints.charcoal[100],\n focusColour: colours.tints.charcoal[100],\n invalidColour: colours.tertiary.semantic.red,\n selectedColour: colours.tints.charcoal[100],\n})\n\nexport const getArrowColour = (props: SelectStyleProps) => {\n const currentState = theme.getState(props.styleProps)\n const borderColour = theme.getBorderColour(props, defaultArrowColour(props.theme), currentState)\n\n const customisations = theme.getCustomisations(props, 'Selection.Arrow')\n if (!customisations.customisations.colour) {\n // We take the global border colour if we don't have one provided by the arrow customisations\n customisations.customisations.colour = borderColour\n }\n\n return theme.getColour(customisations, defaultArrowColour(props.theme), currentState)\n}\n\n/** Background colour */\nexport const getArrowBgColour = (props: SelectStyleProps) =>\n theme.getBgColour(\n theme.getCustomisations(props, 'Selection.Arrow'),\n 'transparent',\n theme.getState(props.styleProps),\n )\n\n/** Selection */\n/** Colour */\nexport const getSelectionColour = (props: SelectStyleProps) =>\n theme.getColour(\n theme.getCustomisations(props, 'Selection'),\n props.theme.colours.tertiary.neutral.charcoal,\n theme.getState(props.styleProps),\n )\n\n/** Background colour */\nexport const getSelectionBgColour = (props: SelectStyleProps) =>\n theme.getBgColour(\n theme.getCustomisations(props, 'Selection'),\n props.theme.colours.tertiary.neutral.white,\n theme.getState(props.styleProps),\n )\n\n/** Option */\n/** Colour */\nexport const getOptionColour = (props: SelectStyleProps) => {\n return theme.getColour(\n theme.getCustomisations(props, 'Option'),\n props.theme.colours.tertiary.neutral.charcoal,\n theme.getState(props.styleProps),\n )\n}\n\n/** Background colour */\nconst optionDefaultBgColour = (props: SelectStyleProps) => ({\n bgColour: props.theme.colours.tertiary.neutral.white,\n hoverBgColour: props.theme.colours.tints.sun[30],\n focusBgColour: props.theme.colours.tints.sun[30],\n selectedBgColour: props.theme.colours.tints.sun[10],\n})\n\nexport const getOptionBgColour = (props: SelectStyleProps, state?: State) =>\n theme.getBgColour(\n theme.getCustomisations(props, 'Option'),\n optionDefaultBgColour(props),\n state || theme.getState(props.styleProps.option || {}),\n )\n","import type { SearchableSelectStyleProps } from './DevSearchableSelect.styles'\nimport type { SearchableSelectPublicProps } from '../../SearchableSelect'\nimport type { SearchableSelectCustomisations } from './customisations'\nimport ConvertSelectCustomisations from '../../../../themes/Developer/DevSelect.customisations'\n\nexport const Customisations = {\n Search: (props: SearchableSelectStyleProps) => ({\n colour: props.theme.colours.tertiary.neutral.charcoal,\n hoverColour: props.theme.colours.tertiary.neutral.charcoal,\n bgColour: 'transparent',\n hoverBgColour: 'transparent',\n }),\n Reset: (props: SearchableSelectStyleProps) => ({\n colour: props.theme.colours.tertiary.neutral.charcoal,\n hoverColour: props.theme.colours.tints.kashmirBlue[100],\n bgColour: 'transparent',\n hoverBgColour: 'transparent',\n }),\n Select: (props: SearchableSelectStyleProps) => ({\n paddingLeft: 0,\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (\n props: SearchableSelectPublicProps & SearchableSelectCustomisations,\n): SearchableSelectCustomisations => {\n const search = props.Selection?.Search || {}\n const reset = props.Selection?.Reset || {}\n return {\n ...ConvertSelectCustomisations(props),\n Selection: {\n ...props.Selection,\n Search: {\n colour: search.colour,\n bgColour: search.bgColour,\n borderRight: search.borderRight,\n },\n Reset: {\n colour: reset.colour,\n bgColour: reset.bgColour,\n borderLeft: reset.borderLeft,\n },\n },\n }\n}\n","import type { SelectFieldStyleProps } from './DevSelectField.styles'\nimport type { SelectFieldPublicProps } from '../../SelectField'\nimport type { SelectCustomisations } from '../../../Select/themes/Developer/customisations'\nimport type { FieldCustomisations } from '../../../Field/themes/Developer/DevField.customisations'\n\nexport interface SelectFieldCustomisations extends FieldCustomisations {\n Select?: SelectCustomisations\n}\n\nexport const Customisations = {\n Select: (props: SelectFieldStyleProps) => props.customisations.Select!,\n Field: (props: SelectFieldStyleProps) => ({\n Label: props.customisations?.Label,\n HelperText: props.customisations.HelperText,\n ValidityText: props.customisations.ValidityText,\n Tooltip: props.customisations.Tooltip,\n ValidityStatus: props.customisations.ValidityStatus,\n }),\n}\n\nexport default (\n props: SelectFieldPublicProps & SelectFieldCustomisations,\n): SelectFieldCustomisations => ({\n Select: props.Select || {},\n Label: props.Label || {},\n HelperText: props.HelperText || {},\n ValidityText: props.ValidityText || {},\n Tooltip: props.Tooltip || {},\n ValidityStatus: props.ValidityStatus || {},\n})\n","import { sizes, thickness } from './CircularProgress.models'\n\nexport const getSize = (value: string | number) =>\n typeof value === 'string' ? +sizes[value] : value\n\nexport const getThickness = (value: string | number) =>\n typeof value === 'string' ? +thickness[value] : value\n","import * as React from 'react'\nimport useResponsive from '../../../hooks/useResponsive'\nimport getAttributes from '../../../attributes'\nimport { DataAttributesPrefix } from '../../../constants'\nimport type { StyledProps } from '../../../providers'\nimport type { ListItemContext } from './ListItem.composition'\n\nexport interface ListItemPublicProps {\n /**\n * The html tag used for the root node.\n */\n as?: 'li' | 'div'\n /**\n * Component used as content of the li element\n */\n children?: React.ReactNode\n}\n\nexport interface ListItemInternalProps {\n /**\n * List of properties that will be used by the styles\n */\n styleProps?: any\n /**\n * List of properties that will be plugged to the root element coming from the override\n */\n rootProps?: any\n}\n\nexport interface ListItemProps\n extends ListItemPublicProps,\n ListItemInternalProps,\n StyledProps {}\n\nconst ListItem = React.forwardRef((props: ListItemProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const { Root } = props.styled!\n return (\n \n {props.children}\n \n )\n})\n\nListItem.defaultProps = {\n as: 'li',\n rootProps: {},\n}\n\nexport default ListItem\n","import * as React from 'react'\nimport useResponsive from '../../../hooks/useResponsive'\nimport getAttributes from '../../../attributes'\nimport { DataAttributesPrefix } from '../../../constants'\nimport { getTestId } from '../../../utils/test'\nimport type { StyledProps } from '../../../providers'\nimport type { ListItemTextContext } from './ListItemText.composition'\n\nexport interface ListItemTextPublicProps {\n /**\n * The main content element.\n */\n primary: string | React.ReactNode\n /**\n * The secondary content element.\n */\n secondary?: string | React.ReactNode\n}\n\ntype ListItemTextProps = ListItemTextPublicProps & StyledProps\n\nconst ListItemText = React.forwardRef(\n (props: ListItemTextProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const getCoreStyle = () => ({})\n\n const renderPrimary = () => {\n if (typeof props.primary !== 'string') {\n return props.primary\n }\n\n const { Primary } = props.styled!\n return (\n \n {props.primary}\n \n )\n }\n\n const renderSecondary = () => {\n if (!props.secondary) {\n return null\n }\n\n if (typeof props.secondary !== 'string') {\n return props.secondary\n }\n\n const { Secondary } = props.styled!\n return (\n \n {props.secondary}\n \n )\n }\n\n const { Root } = props.styled!\n return (\n \n {renderPrimary()}\n {renderSecondary()}\n \n )\n },\n)\n\nexport default ListItemText\n","import type { ListItemTextPublicProps } from '../../ListItemText'\nimport type { ListItemTextCustomisations } from './customisations'\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (\n props: ListItemTextPublicProps & ListItemTextCustomisations,\n): ListItemTextCustomisations => ({\n colour: props.colour,\n Primary: {\n colour: props.Primary?.colour,\n },\n Secondary: {\n colour: props.Secondary?.colour,\n },\n})\n","import styled, { css, ThemeProps } from '../../../../../themes/Developer/themed-component'\nimport type { ListItemTextContext } from '../../ListItemText.composition'\nimport type { StyleProps } from '../../../../../types'\nimport { getValueAsPixel } from '../../../../../customisations'\nimport {\n getColour,\n getPrimaryColour,\n getSecondaryColour,\n ListItemTextCustomisations,\n} from './customisations'\nimport * as themeStyles from '../../../../../themes/Developer/styles'\n\nexport type ListItemTextStyleProps = StyleProps & ThemeProps\n\nconst PrimaryTextLineHeight = css`\n /** Visuals */\n line-height: ${(props) => getValueAsPixel(props.theme.typography.proximaNova.lineHeight.bodyS)};\n`\n\nconst SecondaryTextLineHeight = css`\n /** Visuals */\n line-height: ${(props) => getValueAsPixel(props.theme.typography.proximaNova.lineHeight.bodyXs)};\n`\n\nconst Secondary = styled.span`\n /** Typography */\n font-size: ${(props) => getValueAsPixel(props.theme.typography.proximaNova.fontSize.captionS.px)};\n\n /** Colours */\n color: ${(props) => getSecondaryColour(props)};\n\n /** Visuals */\n ${SecondaryTextLineHeight}\n`\n\nconst Primary = styled.span`\n /** Typography */\n font-size: ${(props) => getValueAsPixel(props.theme.typography.proximaNova.fontSize.bodyS.px)};\n\n /** Colours */\n color: ${(props) => getPrimaryColour(props)};\n\n /** Visuals */\n ${PrimaryTextLineHeight}\n`\n\nconst Root = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n flex-grow: 1;\n color: ${(props) => getColour(props)};\n\n /** Typography */\n ${themeStyles.FontFamily}\n`\n\nconst Components: ListItemTextContext = {\n Root,\n Primary,\n Secondary,\n}\n\nexport default Components\n","import * as React from 'react'\nimport useResponsive from '../../../hooks/useResponsive'\nimport getAttributes from '../../../attributes'\nimport { DataAttributesPrefix } from '../../../constants'\nimport { getTestId } from '../../../utils/test'\nimport type { StyledProps } from '../../../providers'\nimport type { ListItemIconContext } from './ListItemIcon.composition'\nimport type { IconDefinition } from '../../../utils/fontawesome'\n\nexport interface ListItemIconPublicProps {\n /**\n * Icon to display\n */\n src?: string | IconDefinition\n /**\n * Icon size to display\n */\n size?: IconSizes | number\n /**\n * Component used as content of the li element\n */\n children?: React.ReactNode\n}\n\ntype IconSizes = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ntype ListItemIconProps = ListItemIconPublicProps & StyledProps\n\nconst ListItemIcon = React.forwardRef(\n (props: ListItemIconProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const getCoreStyle = () => ({})\n\n const renderFrontAwesomeIcon = () => {\n const { FontAwesomeIcon } = props.styled!\n return (\n \n )\n }\n\n const renderIcon = () => {\n if (props.children) {\n return props.children\n }\n\n if (typeof props.src !== 'string') {\n return renderFrontAwesomeIcon()\n }\n\n const { Icon } = props.styled!\n return (\n \n )\n }\n\n const { Root } = props.styled!\n return (\n \n {renderIcon()}\n \n )\n },\n)\n\nListItemIcon.defaultProps = {\n size: 'sm',\n}\n\nexport default ListItemIcon\n","import styled, { ThemeProps } from '../../../../../themes/Developer/themed-component'\nimport { Customisations } from './DevListItemIcon.customisations'\nimport { DevFontAwesomeIcon } from '../../../../../Icon/components/FontAwesomeIcon'\nimport { DevIcon } from '../../../../../Icon'\nimport type { StyleProps } from '../../../../../types'\nimport type { ListItemIconContext } from '../../ListItemIcon.composition'\nimport type { ListItemIconCustomisations } from './customisations'\n\nexport type ListItemIconStyleProps = StyleProps & ThemeProps\n\nconst FontAwesomeIcon = styled(DevFontAwesomeIcon).attrs(\n Customisations.FontAwesomeIcon,\n)`\n cursor: inherit;\n`\n\nconst Icon = styled(DevIcon).attrs(Customisations.Icon)`\n cursor: inherit;\n`\n\nconst Root = styled.div`\n margin-right: ${(props) => props.theme.spaces.xs};\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n`\n\nconst Components: ListItemIconContext = {\n Root,\n FontAwesomeIcon,\n Icon,\n}\n\nexport default Components\n","import * as React from 'react'\nimport useResponsive from '../../../hooks/useResponsive'\nimport getAttributes from '../../../attributes'\nimport { DataAttributesPrefix } from '../../../constants'\nimport type { StyledProps } from '../../../providers'\nimport type { ListSubheaderContext } from './ListSubheader.composition'\n\nexport interface ListSubheaderPublicProps {\n as?: 'li' | 'div'\n /**\n * Component used as content of the li element\n */\n children?: React.ReactNode\n}\n\ntype ListSubheaderProps = ListSubheaderPublicProps & StyledProps\n\nconst ListSubheader = React.forwardRef(\n (props: ListSubheaderProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const getCoreStyle = () => ({})\n\n const { Root } = props.styled!\n return (\n \n {props.children}\n \n )\n },\n)\n\nListSubheader.defaultProps = {\n as: 'li',\n}\n\nexport default ListSubheader\n","import type { ListSubheaderPublicProps } from '../../ListSubheader'\nimport type { ListSubheaderCustomisations } from './customisations'\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (\n props: ListSubheaderPublicProps & ListSubheaderCustomisations,\n): ListSubheaderCustomisations => ({\n colour: props.colour,\n bgColour: props.bgColour,\n})\n","import styled, { ThemeProps } from '../../../../../themes/Developer/themed-component'\nimport { getBgColour, getColour, ListSubheaderCustomisations } from './customisations'\nimport type { ListSubheaderContext } from '../../ListSubheader.composition'\nimport type { StyleProps } from '../../../../../types'\nimport * as themeStyles from '../../../../../themes/Developer/styles'\n\nexport type ListSubheaderStyleProps = StyleProps & ThemeProps\n\nconst Root = styled.li`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n list-style-type: none;\n\n /** Colour */\n color: ${(props) => getColour(props)};\n background-color: ${(props) => getBgColour(props)};\n\n /* Typography */\n ${themeStyles.FontFamily}\n font-size: ${(props) => props.theme.typography.proximaNova.fontSize.bodyS.px};\n\n /** Spacing */\n padding: ${(props) => props.theme.spaces.xxs} ${(props) => props.theme.spaces.xs};\n`\n\nconst Components: ListSubheaderContext = {\n Root,\n}\n\nexport default Components\n","import * as React from 'react'\nimport type { StyledProps } from '../providers'\nimport type { ListContext } from './List.composition'\nimport useResponsive from '../hooks/useResponsive'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\n\nexport interface ListPublicProps {\n /**\n * The content of the subheader, normally `ListSubheader`.\n */\n subheader?: React.ReactNode\n /**\n * List of items to display\n */\n children?: React.ReactNode\n}\n\nexport interface ListInternalProps {\n as?: string\n styleProps?: any\n}\n\ntype ListProps = ListPublicProps & ListInternalProps & StyledProps\n\nconst List = React.forwardRef((props: ListProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const { Root } = props.styled!\n return (\n \n {props.subheader}\n {props.children}\n \n )\n})\n\nList.defaultProps = {\n as: 'ul',\n}\n\nexport default List\n","import { css } from '../themes/Developer/themed-component'\n\nexport const Root = css`\n display: flex;\n flex-direction: column;\n align-items: stretch;\n padding: 0;\n margin: 0;\n`\n","import { useEffect, useRef } from 'react'\n\nconst useClickAway = (opts?: {\n refs?: any[]\n isMobile?: boolean\n default?: boolean\n callback?: () => void\n}): any => {\n const references = opts?.refs || []\n const defaultValue = opts?.default || false\n\n const isMobile = opts?.isMobile || false\n const callback = opts?.callback\n\n const inside = useRef(defaultValue)\n\n const checkIfClickIsTriggeredOutsideTheElement = (event: any) => {\n const outside = references.every((reference: any) =>\n reference.current ? !reference.current.contains(event.target) : false,\n )\n\n if (!outside) {\n // Click inside the element\n if (!inside.current) {\n inside.current = true\n }\n\n return\n }\n\n // Click outside the element\n if (!inside.current) {\n // Previous click was already outside\n return\n }\n\n inside.current = false\n\n if (callback) {\n callback()\n }\n }\n\n const handleTouchStart = (event: any) => {\n event.preventDefault()\n\n checkIfClickIsTriggeredOutsideTheElement(event)\n }\n\n const handleMouseDown = (event: any) => {\n event.preventDefault()\n\n checkIfClickIsTriggeredOutsideTheElement(event)\n }\n\n useEffect(() => {\n if (isMobile) {\n document.addEventListener('touchstart', handleTouchStart)\n } else {\n document.addEventListener('mousedown', handleMouseDown)\n }\n\n return () => {\n if (isMobile) {\n document.removeEventListener('touchstart', handleTouchStart)\n } else {\n document.removeEventListener('mousedown', handleMouseDown)\n }\n }\n }, [])\n\n return []\n}\n\nexport default useClickAway\n","export * from './models'\nexport * from './colours'\n","import { getScrollButtonColour, TabsCustomisations } from './customisations'\nimport type { TabsPublicProps } from '../../Tabs'\nimport type { TabsStyleProps } from './DevTabs.styles'\n\nexport const Customisations = {\n ScrollButton: (props: TabsStyleProps) => ({\n colour: getScrollButtonColour(props),\n hoverColour: getScrollButtonColour(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: TabsPublicProps & TabsCustomisations): TabsCustomisations => ({\n Indicator: props.Indicator || {},\n Tab: props.Tab || {},\n ScrollButton: props.ScrollButton || {},\n MoreButton: props.MoreButton || {},\n})\n","export * from './models'\nexport * from './colours'\n","import { getColour, TabCustomisations } from './customisations'\nimport type { TabStyleProps } from './DevTab.styles'\nimport type { TabPublicProps } from '../../Tab'\n\nexport const Customisations = {\n Icon: (props: TabStyleProps) => ({\n colour: getColour(props),\n hoverColour: getColour(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: TabPublicProps & TabCustomisations): TabCustomisations => ({\n colour: props.colour,\n bgColour: props.bgColour,\n selectedColour: props.selectedColour,\n})\n","import type { BannerPublicProps } from '../../Banner'\nimport type { BannerStyleProps } from './DevBanner.styles'\nimport { getBorderColour, BannerCustomisations } from './customisations'\n\nexport const Customisations = {\n Icon: (props: BannerStyleProps) => ({\n colour: getBorderColour(props).colour,\n hoverColour: getBorderColour(props).colour,\n }),\n CrossIcon: (props: BannerStyleProps) => ({\n colour: props.theme.colours.tints.lightGrey[150],\n hoverColour: props.theme.colours.tints.lightGrey[150],\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: BannerPublicProps & BannerCustomisations): BannerCustomisations => ({\n colour: props.colour,\n bgColour: props.bgColour,\n border: props.border,\n})\n","export * from './models'\nexport * from './colours'\nexport * from './visuals'\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { BannerStyleProps } from '../DevBanner.styles'\n\n/** Colour */\nexport const getColour = (props: BannerStyleProps) => {\n const currentState = theme.getState(props.styleProps)\n return theme.getColour(props, props.theme.colours.tertiary.neutral.charcoal, currentState)\n}\n\nconst defaultBgColour = (props: BannerStyleProps) => ({\n bgColour: props.theme.colours.tertiary.neutral.white,\n})\n\n/** Background colour */\nconst getDefaultBgColour = (props: BannerStyleProps) =>\n theme.getBgColour(props, defaultBgColour(props), theme.getState(props.styleProps))\n\nexport const getBgColour = (props: BannerStyleProps) => {\n const currentState = theme.getState(props.styleProps)\n return theme.getBgColour(props, getDefaultBgColour(props), currentState)\n}\n\n/** Border colour */\nexport const getBorderColour = (props: BannerStyleProps) => {\n switch (props.styleProps.type) {\n case 'warning':\n return getBorderStateColour(props.theme.colours.tints.sun[100])\n case 'success':\n return getBorderStateColour(props.theme.colours.tertiary.semantic.green)\n case 'error':\n return getBorderStateColour(props.theme.colours.tertiary.semantic.red)\n case 'info':\n return getBorderStateColour(props.theme.colours.tints.azure[100])\n default:\n return getBorderStateColour(props.theme.colours.tertiary.neutral.charcoal)\n }\n}\n\nconst getBorderStateColour = (value: string) => ({\n colour: value,\n})\n","export { default as useClickAway } from './useClickAway'\nexport { default as useComponentVisible } from './useComponentVisible'\nexport { default as useControlled } from './useControlled'\nexport { default as useDebounce } from './useDebounce'\nexport { default as useDidMount } from './useDidMount'\nexport { default as useEnhancedEffect } from './useEnhancedEffect'\nexport { default as useEventCallback } from './useEventCallback'\nexport { default as useForkRef } from './useForkRef'\nexport { default as useForm } from './useForm'\nexport { default as useHover } from './useHover'\nexport { default as useIntercom } from './useIntercom'\nexport { default as usePagination } from './usePagination'\nexport { default as useResponsive } from './useResponsive'\nexport { default as useRoveFocus } from './useRoveFocus'\nexport { default as useTruncate } from './useTruncate'\nexport { default as useRef } from './useRef'\nexport { default as useClickToward } from './useClickToward'\nexport { default as useEscape } from './useKey'\n","import useControlled from './useControlled'\n\ninterface PaginationProps {\n /**\n * Name of the component\n * @default 'usePagination'\n */\n componentName?: string\n /**\n * Number of always visible pages at the beginning and end.\n * @default 1\n */\n boundaryCount?: number\n /**\n * The total number of pages.\n * @default 1\n */\n count?: number\n /**\n * The page selected by default when the component is uncontrolled.\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination component will be disabled.\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, hide the next-page button.\n * @default false\n */\n hideNextButton?: boolean\n /**\n * If `true`, hide the previous-page button.\n * @default false\n */\n hidePrevButton?: boolean\n /**\n * Callback fired when the page is changed.\n *\n * @param {object} event The event source of the callback.\n * @param {number} page The page selected.\n */\n onChange?: (event: React.ChangeEvent, page: number) => void\n /**\n * The current page.\n */\n page?: number\n /**\n * The shape of the pagination items.\n * @default 'circular'\n */\n shape?: 'circular' | 'rounded'\n /**\n * If `true`, show the first-page button.\n * @default false\n */\n showFirstButton?: boolean\n /**\n * If `true`, show the last-page button.\n * @default false\n */\n showLastButton?: boolean\n /**\n * Number of always visible pages before and after the current page.\n * @default 1\n */\n siblingCount?: number\n /**\n * The size of the pagination component.\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large'\n}\n\nconst usePagination = (props: PaginationProps = {}) => {\n // keep default values in sync with @default tags in Pagination.propTypes\n const {\n boundaryCount = 1,\n componentName = 'usePagination',\n count = 1,\n defaultPage = 1,\n disabled = false,\n hideNextButton = false,\n hidePrevButton = false,\n onChange: handleChange,\n page: pageProp,\n showFirstButton = false,\n showLastButton = false,\n siblingCount = 1,\n ...other\n } = props\n\n const [page, setPageState] = useControlled({\n value: pageProp,\n default: defaultPage,\n name: componentName,\n state: 'page',\n })\n\n const handleClick = (event: React.ChangeEvent, value: any) => {\n if (!pageProp) {\n setPageState(value)\n }\n\n if (handleChange) {\n handleChange(event, value)\n }\n }\n\n // https://dev.to/namirsab/comment/2050\n const range = (start, end) => {\n const length = end - start + 1\n return Array.from({ length }, (_, i) => start + i)\n }\n\n const startPages = range(1, Math.min(boundaryCount, count))\n const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count)\n\n const siblingsStart = Math.max(\n Math.min(\n // Natural start\n page - siblingCount,\n // Lower boundary when page is high\n count - boundaryCount - siblingCount * 2 - 1,\n ),\n // Greater than startPages\n boundaryCount + 2,\n )\n\n const siblingsEnd = Math.min(\n Math.max(\n // Natural end\n page + siblingCount,\n // Upper boundary when page is low\n boundaryCount + siblingCount * 2 + 2,\n ),\n // Less than endPages\n endPages.length > 0 ? endPages[0] - 2 : count - 1,\n )\n\n // Basic list of items to render\n // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']\n const itemList = [\n ...(showFirstButton ? ['first'] : []),\n ...(hidePrevButton ? [] : ['previous']),\n ...startPages,\n\n // Start ellipsis\n // eslint-disable-next-line no-nested-ternary\n ...(siblingsStart > boundaryCount + 2\n ? ['start-ellipsis']\n : boundaryCount + 1 < count - boundaryCount\n ? [boundaryCount + 1]\n : []),\n\n // Sibling pages\n ...range(siblingsStart, siblingsEnd),\n\n // End ellipsis\n // eslint-disable-next-line no-nested-ternary\n ...(siblingsEnd < count - boundaryCount - 1\n ? ['end-ellipsis']\n : count - boundaryCount > boundaryCount\n ? [count - boundaryCount]\n : []),\n\n ...endPages,\n ...(hideNextButton ? [] : ['next']),\n ...(showLastButton ? ['last'] : []),\n ]\n\n // Map the button type to its page number\n const buttonPage = (type) => {\n switch (type) {\n case 'first':\n return 1\n case 'previous':\n return page - 1\n case 'next':\n return page + 1\n case 'last':\n return count\n default:\n return null\n }\n }\n\n // Convert the basic item list to PaginationItem props objects\n const items = itemList.map((item) => {\n return typeof item === 'number'\n ? {\n onClick: (event: React.ChangeEvent) => {\n handleClick(event, item)\n },\n type: 'page',\n page: item,\n selected: item === page,\n disabled,\n 'aria-current': item === page ? 'true' : undefined,\n }\n : {\n onClick: (event: React.ChangeEvent) => {\n handleClick(event, buttonPage(item))\n },\n type: item,\n page: buttonPage(item),\n selected: false,\n disabled:\n disabled ||\n (item.indexOf('ellipsis') === -1 &&\n (item === 'next' || item === 'last' ? page >= count : page <= 1)),\n }\n })\n\n return {\n items,\n ...other,\n }\n}\n\nexport default usePagination\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { SwitchStyleProps } from '../DevSwitch.styles'\n\n/** Label */\n/** Colour */\nexport const getLabelColour = (props: SwitchStyleProps) =>\n theme.getColour(\n theme.getCustomisations(props, 'Label'),\n props.theme.colours.tertiary.neutral.charcoal,\n theme.getState(props.styleProps),\n )\n\n/** Track */\n/** Background colour */\nconst trackDefaultBgColour = (props: SwitchStyleProps): theme.BgColourStates => ({\n bgColour: props.theme.colours.tints.charcoal[30],\n hoverBgColour: props.theme.colours.tints.charcoal[50],\n hoverSelectedBgColour: props.theme.colours.tints.azure[50],\n focusBgColour: props.theme.colours.tints.charcoal[30],\n selectedBgColour: props.theme.colours.tints.azure[30],\n invalidSelectedBgColour: props.theme.colours.tints.red[30],\n})\n\nexport const getTrackBgColour = (props: SwitchStyleProps) =>\n theme.getBgColour(\n theme.getCustomisations(props, 'Track'),\n trackDefaultBgColour(props),\n theme.getState(props.styleProps),\n )\n\n/** Thumb */\n/** Background colour */\nconst thumbDefaultBgColour = (props: SwitchStyleProps): theme.BgColourStates => ({\n bgColour: props.theme.colours.tertiary.neutral.white,\n hoverBgColour: props.theme.colours.tertiary.neutral.white,\n focusBgColour: props.theme.colours.tertiary.neutral.white,\n selectedBgColour: props.theme.colours.tints.azure[80],\n invalidBgColour: props.theme.colours.tertiary.semantic.red,\n invalidSelectedBgColour: props.theme.colours.tints.red[130],\n})\n\nexport const getThumbBgColour = (props: SwitchStyleProps) =>\n theme.getBgColour(\n theme.getCustomisations(props, 'Thumb'),\n thumbDefaultBgColour(props),\n theme.getState(props.styleProps),\n )\n\n/** Border colour */\nexport const thumbBorderColour = (props: SwitchStyleProps): theme.ColourStates => ({\n colour: props.theme.colours.tints.charcoal[30],\n hoverColour: props.theme.colours.tints.charcoal[30],\n selectedColour: props.theme.colours.tints.azure[80],\n hoverSelectedColour: props.theme.colours.tints.azure[80],\n activeColour: props.theme.colours.tints.sun[50],\n focusColour: props.theme.colours.tints.charcoal[30],\n focusSelectedColour: props.theme.colours.tints.azure[80],\n invalidColour: props.theme.colours.tertiary.semantic.red,\n})\n\nexport const getThumbBoxShadowColour = (props: SwitchStyleProps) =>\n theme.getBorderColour(\n theme.getCustomisations(props, 'Thumb'),\n thumbBorderColour(props),\n theme.getState(props.styleProps),\n )\n","export * from './themes'\n","import type { SwitchFieldStyleProps } from './DevSwitchField.styles'\nimport type { SwitchFieldPublicProps } from '../../SwitchField'\nimport type { DevSwitchGroupCustomisations as SwitchGroupCustomisations } from '../../../SwitchGroup/themes/Developer/DevSwitchGroup.customisations'\nimport type { FieldCustomisations } from '../../../Field/themes/Developer/DevField.customisations'\n\nexport interface SwitchFieldCustomisations extends FieldCustomisations {\n SwitchGroup?: SwitchGroupCustomisations\n}\n\nexport const Customisations = {\n SwitchGroup: (props: SwitchFieldStyleProps) => props.customisations.SwitchGroup!,\n Field: (props: SwitchFieldStyleProps) => ({\n Label: props.customisations?.Label,\n HelperText: props.customisations.HelperText,\n ValidityText: props.customisations.ValidityText,\n Tooltip: props.customisations.Tooltip,\n ValidityStatus: props.customisations.ValidityStatus,\n }),\n}\n\nexport default (\n props: SwitchFieldPublicProps & SwitchFieldCustomisations,\n): SwitchFieldCustomisations => ({\n SwitchGroup: props.SwitchGroup || {},\n Label: props.Label || {},\n HelperText: props.HelperText || {},\n ValidityText: props.ValidityText || {},\n Tooltip: props.Tooltip || {},\n ValidityStatus: props.ValidityStatus || {},\n})\n","export * from './models'\nexport * from './colours'\nexport * from './typography'\n","import type { StarsStyleProps } from './DevStars.styles'\nimport type { StarsPublicProps } from '../../Stars'\nimport { getColour, StarsCustomisations } from './customisations'\n\nexport const Customisations = {\n Icon: (props: StarsStyleProps) => ({\n colour: getColour(props),\n hoverColour: getColour(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: StarsPublicProps & StarsCustomisations): StarsCustomisations => ({\n colour: props.colour,\n selectedColour: props.selectedColour,\n Label: props.Label || {},\n})\n","export * from './PaginationItem'\n","import type { PaginationItemCustomisations } from './customisations'\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: PaginationItemCustomisations): PaginationItemCustomisations => ({\n bgColour: props.bgColour,\n hoverBgColour: props.hoverBgColour,\n focusBgColour: props.focusBgColour,\n selectedBgColour: props.selectedBgColour,\n border: props.border,\n})\n","import ItemCustomisations from '../../components/PaginationItem/themes/Developer/DevPaginationItem.customisations'\nimport type { PaginationItemCustomisations } from '../../components/PaginationItem/themes/Developer/customisations'\nimport type { PaginationStyleProps } from './DevPagination.styles'\n\nexport type PaginationCustomisations = PaginationItemCustomisations\n\nexport const Customisations = {\n ItemContent: (props: PaginationStyleProps): PaginationCustomisations => ({\n ...props.customisations,\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: PaginationCustomisations): PaginationCustomisations =>\n ItemCustomisations(props)\n","import * as React from 'react'\n\nexport interface TableContextProps {\n size: 'small' | 'medium'\n stickyHeader: boolean\n}\n\nexport const DefaultProps: TableContextProps = {\n size: 'small',\n stickyHeader: false,\n}\n\nconst TableContext = React.createContext(DefaultProps)\nTableContext.displayName = 'TableContext'\n\nexport default TableContext\n","import * as theme from '../../../../../../themes/Developer/proxima-nova'\nimport type { TableCellStyleProps } from '../DevTableCell.styles'\n\n/** Colour */\nexport const getColour = (props: TableCellStyleProps) =>\n theme.getColour(props, 'inherit', theme.getState(props.styleProps))\n\n/** Background colour */\nexport const getBgColour = (props: TableCellStyleProps) =>\n theme.getBgColour(props, 'inherit', theme.getState(props.styleProps))\n\n/** Header */\n/** Colour */\nexport const defaultHeaderColour = (props: TableCellStyleProps) => ({\n colour: props.theme.colours.tints.charcoal[50],\n})\n\nexport const getHeaderColour = (props: TableCellStyleProps) =>\n theme.getColour(props, defaultHeaderColour(props), theme.getState(props.styleProps))\n\n/** Border colour */\nexport const getBorderColour = (props: TableCellStyleProps) => ({\n colour: props.theme.colours.tints.lightGrey[130],\n hoverColour: props.theme.colours.tints.sun[80],\n activeColour: props.theme.colours.tints.sun[80],\n focusColour: props.theme.colours.tints.sun[80],\n invalidColour: props.theme.colours.tertiary.semantic.red,\n selectedColour: props.theme.colours.tints.lightGrey[180],\n})\n","import { getIconColour, TableSortLabelCustomisations } from './customisations'\nimport type { TableSortLabelPublicProps } from '../../TableSortLabel'\nimport type { TableSortLabelStyleProps } from './DevTableSortLabel.styles'\n\nexport const Customisations = {\n Icon: (props: TableSortLabelStyleProps) => ({\n colour: getIconColour(props),\n hoverColour: getIconColour(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (\n props: TableSortLabelPublicProps & TableSortLabelCustomisations,\n): TableSortLabelCustomisations => ({\n colour: props.colour,\n})\n","export * from './models'\nexport * from './colours'\n","import { getColour, TablePaginationActionsCustomisations } from './customisations'\nimport type { TablePaginationActionsPublicProps } from '../../TablePaginationActions'\nimport type { TablePaginationActionsStyleProps } from './DevTablePaginationActions.styles'\n\nexport const Customisations = {\n Icon: (props: TablePaginationActionsStyleProps) => ({\n colour: getColour(props),\n hoverColour: getColour(props, 'hover'),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (\n props: TablePaginationActionsPublicProps & TablePaginationActionsCustomisations,\n): TablePaginationActionsCustomisations => ({\n colour: props.colour,\n hoverColour: props.hoverColour,\n})\n","import type { TablePaginationPublicProps } from '../../TablePagination'\nimport type { TablePaginationStyleProps } from './DevTablePagination.styles'\nimport { getSelect, TablePaginationCustomisations } from './customisations'\n\nexport const Customisations = {\n Actions: (props: TablePaginationStyleProps) => props.customisations.Actions,\n Selection: (props: TablePaginationStyleProps) => getSelect(props),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (\n props: TablePaginationPublicProps & TablePaginationCustomisations,\n): TablePaginationCustomisations => ({\n colour: props.colour,\n bgColour: props.bgColour,\n Select: props.Select || {},\n Actions: props.Actions || {},\n})\n","export * from './models'\nexport * from './colours'\nexport * from './component'\n","import * as theme from '../../../../../../themes/Developer/proxima-nova'\nimport type { TablePaginationStyleProps } from '../DevTablePagination.styles'\n\n/** Colour */\nexport const getColour = (props: TablePaginationStyleProps) =>\n theme.getColour(\n props,\n props.theme.colours.tertiary.neutral.charcoal,\n theme.getState(props.styleProps),\n )\n\n/** Background colour */\nexport const getBgColour = (props: TablePaginationStyleProps) =>\n theme.getBgColour(\n props,\n props.theme.colours.tertiary.neutral.white,\n theme.getState(props.styleProps),\n )\n\n/** Select > Selection */\n/** Colour */\nexport const getSelectionColour = (props: TablePaginationStyleProps) =>\n theme.getColour(\n theme.getCustomisations(props, 'Select.Selection'),\n props.theme.colours.tertiary.neutral.charcoal,\n theme.getState(props.styleProps),\n )\n","import { getArrowColour, MenuGroupCustomisations } from './customisations'\nimport type { MenuGroupPublicProps } from '../../MenuGroup'\nimport type { MenuGroupStyleProps } from './DevMenuGroup.styles'\n\nexport const Customisations = {\n Arrow: (props: MenuGroupStyleProps) => ({\n colour: getArrowColour(props),\n hoverColour: getArrowColour(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: MenuGroupPublicProps & MenuGroupCustomisations): MenuGroupCustomisations => {\n const header = props.Header || {}\n const content = props.Content || {}\n return {\n Header: {\n colour: header.colour,\n hoverColour: header.hoverColour,\n focusColour: header.focusColour,\n activeColour: header.activeColour,\n selectedColour: header.selectedColour,\n hoverSelectedColour: header.hoverSelectedColour,\n focusSelectedColour: header.focusSelectedColour,\n bgColour: header.bgColour,\n hoverBgColour: header.hoverBgColour,\n focusBgColour: header.focusBgColour,\n activeBgColour: header.activeBgColour,\n selectedBgColour: header.selectedBgColour,\n hoverSelectedBgColour: header.hoverSelectedBgColour,\n focusSelectedBgColour: header.focusSelectedBgColour,\n padding: header.padding,\n border: header.border,\n borderTop: header.borderTop,\n borderRight: header.borderRight,\n borderBottom: header.borderBottom,\n borderLeft: header.borderLeft,\n Arrow: header.Arrow || {},\n },\n Content: {\n colour: content.colour,\n bgColour: content.bgColour,\n padding: content.padding,\n border: content.border,\n borderTop: content.borderTop,\n borderRight: content.borderRight,\n borderBottom: content.borderBottom,\n borderLeft: content.borderLeft,\n },\n }\n}\n","export * from './models'\nexport * from './colours'\nexport * from './spaces'\nexport * from './visuals'\n","export * from './Step'\nexport * from './StepConnector'\nexport * from './StepLabel'\nexport * from './StepIcon'\nexport * from './StepContent'\n","export * from './themes'\n","export * from './models'\nexport * from './colours'\n","import type { StepIconStyleProps } from './DevStepIcon.styles'\nimport type { StepIconPublicProps } from '../../StepIcon'\nimport { getCircleColour, StepIconCustomisations } from './customisations'\n\nexport const Customisations = {\n Icon: (props: StepIconStyleProps) => ({\n colour: getCircleColour(props),\n hoverColour: getCircleColour(props),\n }),\n}\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: StepIconPublicProps & StepIconCustomisations): StepIconCustomisations => ({\n Circle: props.Circle || {},\n Text: props.Text || {},\n})\n","export * from './SimpleBackdrop'\n","import { ownerDocument } from './document'\n\nexport const getInnerHeight = () => {\n const element: any = document.getElementById('docz-root')\n return element ? element.offsetHeight : window.innerHeight\n}\n\nexport const ownerWindow = (node: Node | null): Window => {\n const doc = ownerDocument(node)\n return doc.defaultView || window\n}\n","/* Components */\nexport * from './Button'\nexport * from './Icon'\nexport * from './Input'\nexport * from './InputField'\nexport * from './Checkbox'\nexport * from './CheckboxField'\nexport * from './CheckboxGroup'\nexport * from './Collapse'\nexport * from './Link'\nexport * from './Field'\nexport * from './Loader'\nexport * from './Logo'\nexport * from './Paragraph'\nexport * from './Placeholder'\nexport * from './Radio'\nexport * from './RadioField'\nexport * from './RadioGroup'\nexport * from './Select'\nexport * from './SelectField'\nexport * from './Progress'\nexport * from './Title'\nexport * from './Separator'\nexport * from './List'\nexport * from './LegalNote'\nexport * from './Tabs'\nexport * from './Banner'\nexport * from './Grid'\nexport * from './Dropzone'\nexport * from './Switch'\nexport * from './SwitchGroup'\nexport * from './SwitchField'\nexport * from './Stars'\nexport * from './Paper'\nexport * from './Pagination'\nexport * from './Table'\nexport * from './FormControl'\nexport * from './FormHelperText'\nexport * from './FormLabel'\nexport * from './FormValidityText'\nexport * from './Menu'\nexport * from './Portal/Portal'\nexport * from './Stepper'\nexport * from './Tooltip'\nexport * from './Modal'\nexport * from './BreadCrumbs'\nexport * from './Popover'\nexport * from './Dialog'\n\n/* Hooks */\nexport * from './hooks'\n\n/* Themes */\nexport * from './themes'\n\n/** Responsive */\nexport { ResponsiveProvider } from './responsives'\n\nexport { default as Slick } from './Slick/Slick'\nexport { default as Preview, PreviewType } from './Preview/Preview'\nexport * from './devices'\nexport { autoOverflowY, noSelection } from './mixins'\n","export * from './themes'\n","export * from './Developer'\n","export * from './DevButton'\n","import Button, { ButtonPublicProps } from '../../Button'\nimport Theme from '../../../themes/Developer/theme'\nimport Styles from './DevButton.styles'\nimport Customisations from './DevButton.customisations'\nimport { withCustomisedStyle } from '../../../providers'\nimport type { ButtonContext } from '../../Button.composition'\nimport type { ButtonCustomisations } from './customisations'\n\nexport const DevButton = withCustomisedStyle<\n ButtonPublicProps,\n ButtonContext,\n ButtonCustomisations\n>(Button, Theme, Styles, Customisations, 'Button')\n\nexport type DevButtonCustomisations = ButtonCustomisations\nexport type DevButtonProps = ButtonPublicProps & ButtonCustomisations\n","import * as React from 'react'\nimport * as PropTypes from 'prop-types'\n\nimport { StyledProps } from '../providers'\nimport { ButtonContext } from './Button.composition'\nimport useResponsive from '../hooks/useResponsive'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\nimport { getTestId } from '../utils/test'\nimport { isEmpty, includes } from '../utils/lodash'\n\nexport interface ButtonPublicProps {\n /**\n * The id of the button\n */\n id?: string\n /**\n * The label of the button\n */\n label?: string\n /**\n * The type of the button\n */\n type?: 'primary' | 'secondary' | 'tertiary'\n /**\n * The html tag used to render the button\n */\n htmlTag?: 'a' | 'button' | 'submit' | 'reset'\n /**\n * Icon to display within the button\n */\n icon?: any\n /**\n * Position of the icon within the button\n */\n iconPosition?: 'right' | 'left' | 'bottom' | 'top'\n /**\n * True if the button is in disabled state, false otherwise\n */\n disabled?: boolean\n /**\n * It prevents the user from clicking\n */\n readOnly?: boolean\n /**\n * True if the button is in error state, false otherwise\n * Use it only for primary button\n */\n invalid?: boolean\n /**\n * -1 if the input is not keyboard accessible, index in the sequential keyboard navigation otherwise\n */\n tabIndex?: number\n /**\n * True if the button will fit the content, false otherwise\n */\n fitContent?: boolean\n /**\n * Handler when the button is clicked\n */\n onClick?: (event: React.MouseEvent) => void\n /**\n * Handler when the button loses the focus.\n */\n onBlur?: (event: React.FocusEvent) => void\n /**\n * Handler when the button gets the focus.\n */\n onFocus?: (event: React.FocusEvent) => void\n /**\n * Handler when the button is hovered\n */\n onHover?: (event: React.MouseEvent) => void\n /**\n * Handler when the button is not hovered\n */\n onLeave?: (event: React.MouseEvent) => void\n}\n\nexport interface ButtonProps extends ButtonPublicProps, StyledProps {}\n\nexport interface ButtonCoreStyle {\n iconPosition: string\n type: string\n hasLabel: boolean\n disabled?: boolean\n animation?: string\n iconSize: string\n height: number\n invalid: boolean\n readOnly: boolean\n fitContent: boolean\n}\n\n/**\n * Button is a clickable element that allows you to trigger an action. Buttons are typically used in navigations, menus, forms, dialogues, or CTAs.\n */\nconst Button = React.forwardRef((props: ButtonProps, forwardRef: React.Ref) => {\n const { disabled, readOnly } = props\n\n const { ref, height } = useResponsive({ ref: forwardRef })\n\n const isClickable = !disabled && !readOnly\n\n const getCoreStyle = (): ButtonCoreStyle => {\n const icon = props.icon || {}\n return {\n iconPosition: icon.position || props.iconPosition!,\n type: props.type!,\n hasLabel: !isEmpty(props.label),\n disabled: props.disabled,\n invalid: props.invalid,\n animation: icon.animation,\n iconSize: icon.size || 'small',\n height: height || 0,\n readOnly: props.readOnly,\n fitContent: props.fitContent,\n }\n }\n\n const handleClick = (event: React.MouseEvent) => {\n event.preventDefault()\n\n if (props.onClick) {\n props.onClick(event)\n }\n }\n\n const renderIcon = () => {\n const { Icon } = props.styled!\n return props.icon ? (\n \n ) : null\n }\n\n const renderLabel = () => {\n const { Label } = props.styled!\n return props.label ? (\n \n {props.label}\n \n ) : null\n }\n\n const rootTag: any = includes(['a'], props.htmlTag) ? props.htmlTag : 'button'\n\n const properties = rootTag === 'button' && {\n disabled: props.disabled,\n type: props.htmlTag,\n }\n\n const { Root } = props.styled!\n return (\n \n {renderLabel()}\n {renderIcon()}\n \n )\n})\n\nButton.defaultProps = {\n htmlTag: 'button',\n type: 'primary',\n iconPosition: 'right',\n disabled: false,\n invalid: false,\n readOnly: false,\n tabIndex: 0,\n fitContent: false,\n}\n\nButton.propTypes = {\n id: PropTypes.string,\n label: PropTypes.string,\n type: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),\n htmlTag: PropTypes.oneOf(['a', 'button', 'submit', 'reset']),\n icon: PropTypes.any,\n iconPosition: PropTypes.oneOf(['right', 'left', 'bottom', 'top']),\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n invalid: PropTypes.bool,\n tabIndex: PropTypes.number,\n fitContent: PropTypes.bool,\n onClick: PropTypes.func,\n onHover: PropTypes.func,\n onLeave: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n}\n\nexport default Button\n","module.exports = require(\"resize-observer-polyfill\");","const isLiveEnvironment = () => {\n const nodeEnv: string = process.env.NODE_ENV as string\n return nodeEnv === 'production' || nodeEnv === 'sandbox'\n}\n\nexport { isLiveEnvironment }\n","module.exports = require(\"react-device-detect\");","module.exports = require(\"lodash/sortBy\");","module.exports = require(\"lodash/zipObject\");","module.exports = require(\"lodash/union\");","module.exports = require(\"lodash/includes\");","module.exports = require(\"lodash/forEach\");","module.exports = require(\"lodash/flatten\");","module.exports = require(\"lodash/omit\");","module.exports = require(\"lodash/find\");","module.exports = require(\"lodash/keys\");","module.exports = require(\"lodash/sum\");","module.exports = require(\"lodash/pick\");","module.exports = require(\"lodash/every\");","module.exports = require(\"lodash/values\");","module.exports = require(\"lodash/filter\");","module.exports = require(\"lodash/take\");","module.exports = require(\"lodash/reject\");","module.exports = require(\"lodash/isNil\");","module.exports = require(\"lodash/times\");","module.exports = require(\"lodash/debounce\");","module.exports = require(\"lodash/takeRight\");","module.exports = require(\"lodash/isEqual\");","module.exports = require(\"lodash/isEmpty\");","module.exports = require(\"lodash/slice\");","module.exports = require(\"lodash/get\");","module.exports = require(\"lodash/trim\");","module.exports = require(\"lodash/without\");","module.exports = require(\"lodash/merge\");","module.exports = require(\"lodash/reduce\");","module.exports = require(\"lodash/head\");","module.exports = require(\"lodash/capitalize\");","import { FontVariants } from '../../Common'\n\nimport { FontSize, LineHeight, LetterSpacing } from './models'\n\nexport const fontSize: FontSize = {\n codeM: { rem: 0.75, px: 12 },\n codeS: { rem: 0.625, px: 10 },\n}\n\nexport const fontFamily = `Consolas, monaco, monospace`\n\nexport const fontWeight: FontVariants = {\n heading: 700,\n bold: 700,\n regular: 400,\n thin: 300,\n}\n\nexport const lineHeight: LineHeight = {\n codeM: '14px',\n codeS: '11px',\n}\n\nexport const letterSpacing: LetterSpacing = '0.4px'\n\nexport default {\n fontFamily,\n fontSize,\n fontWeight,\n lineHeight,\n letterSpacing,\n}\n\nexport interface ITypography {\n fontFamily?: string\n fontSize?: FontSize\n lineHeight?: LineHeight\n letterSpacing?: LetterSpacing\n fontWeight?: FontVariants\n}\n","import type {\n Colours as CoreColours,\n Primary,\n Secondary,\n Tertiary,\n TintRange,\n Tints,\n} from './models'\n\nexport enum Colours {\n Sun = '#F7AB1B',\n Azure = '#058ED8',\n DarkViolet = '#42448E',\n KashmirBlue = '#44689A',\n CloudBurst = '#093554',\n Cyan = '#38E2F8',\n SoftAzure = '#87BAFC',\n ElectricViolet = '#7A7FFF',\n BurntSun = '#F38D00',\n Charcoal = '#2D2D2D',\n LightGrey = '#F4F7F9',\n Grey = '#AAAAAA',\n White = '#FFFFFF',\n Green = '#399847',\n Red = '#C00023',\n}\n\nexport const primary: Primary = {\n sun: Colours.Sun,\n azure: Colours.Azure,\n darkViolet: Colours.DarkViolet,\n}\n\nexport const secondary: Secondary = {\n burntSun: Colours.BurntSun,\n cloudBurst: Colours.CloudBurst,\n cyan: Colours.Cyan,\n electricViolet: Colours.ElectricViolet,\n kashmirBlue: Colours.KashmirBlue,\n softAzure: Colours.SoftAzure,\n}\n\nexport const tertiary: Tertiary = {\n neutral: {\n charcoal: Colours.Charcoal,\n lightGrey: Colours.LightGrey,\n grey: Colours.Grey,\n white: Colours.White,\n },\n semantic: {\n green: Colours.Green,\n red: Colours.Red,\n },\n}\n\nconst sun = createColourWithTints({\n 10: '#FEF0D6',\n 30: '#FCE0AC',\n 50: '#FBD183',\n 80: '#F8BA44',\n 100: '#F7AB1B',\n})\n\nconst azure = createColourWithTints({\n 10: '#D2EAF8',\n 30: '#A4D6F1',\n 50: '#77C1EA',\n 80: '#32A3DF',\n 100: '#058ED8',\n 110: '#0480C2',\n 130: '#036397',\n})\n\nconst darkViolet = createColourWithTints({\n 10: '#DDDDEA',\n 30: '#BABBD6',\n 50: '#9899C1',\n 80: '#6466A3',\n 100: '#42448E',\n})\n\nconst kashmirBlue = createColourWithTints({\n 10: '#DDE4ED',\n 30: '#BBC8DA',\n 50: '#99ADC8',\n 80: '#6683AC',\n 100: '#44689A',\n})\n\nconst cloudBurst = createColourWithTints({\n 10: '#D2DAE0',\n 30: '#A6B6C1',\n 50: '#7991A2',\n 80: '#365A73',\n 100: '#093554',\n})\n\nconst cyan = createColourWithTints({\n 10: '#EBFCFE',\n 30: '#BEF6FD',\n 50: '#92EFFB',\n 80: '#65E9FA',\n 100: '#38E2F8',\n 110: '#0480C2',\n 130: '#036397',\n})\n\nconst softAzure = createColourWithTints({\n 10: '#E9F2FE',\n 30: '#D3E6FE',\n 50: '#BED9FD',\n 80: '#9DC7FD',\n 100: '#87BAFC',\n})\n\nconst electricViolet = createColourWithTints({\n 10: '#E7E8FF',\n 30: '#CFD0FF',\n 50: '#B6B9FF',\n 80: '#9296FF',\n 100: '#7A7FFF',\n})\n\nconst burntSun = createColourWithTints({\n 10: '#FDEAD1',\n 30: '#FBD6A2',\n 50: '#F8C174',\n 80: '#F5A22E',\n 100: '#F38D00',\n})\n\nconst charcoal = createColourWithTints({\n 10: '#EAEAEA',\n 30: '#C0C0C0',\n 50: '#969696',\n 80: '#575757',\n 100: '#2D2D2D',\n})\n\nconst lightGrey = createColourWithTints({\n 100: '#F4F7F9',\n 130: '#EFF3F6',\n 150: '#CEDBE4',\n 180: '#ADC3D2',\n})\n\nconst green = createColourWithTints({\n 30: '#74B77E',\n 100: '#399847',\n 130: '#286A32',\n})\n\nconst red = createColourWithTints({\n 30: '#D34D65',\n 100: '#C00023',\n 130: '#860019',\n})\n\nfunction createColourWithTints(tints: T): T {\n return tints\n}\n\nexport const tints: Tints = {\n sun,\n azure,\n darkViolet,\n kashmirBlue,\n cloudBurst,\n cyan,\n softAzure,\n electricViolet,\n burntSun,\n charcoal,\n lightGrey,\n green,\n red,\n}\n\nexport const colours: CoreColours = {\n primary,\n secondary,\n tertiary,\n tints,\n}\n","import { Spacing1Value } from './models'\n\nexport const spaces: Spacing1Value = {\n xxs: '4px',\n xs: '8px',\n sm: '12px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n xxl: '40px',\n xxxl: '48px',\n xxxxl: '56px',\n}\n","import type { Opacity, IVisuals } from './models'\n\nconst opacity: Opacity = {\n disable: 0.3,\n light: 0.1,\n normal: 0.5,\n dark: 0.8,\n}\n\nexport const visuals: IVisuals = {\n borderRadius: '5px',\n opacity,\n boxShadow: '0 2px 4px rgba(0, 0, 0, 0.5)',\n borderSize: '1px',\n letterSpace: '1.3px',\n lineHeight: 1.6,\n}\n","export * from './colours'\nexport * from '../../../Common/models/visuals'\nexport * from '../../../Common/models/spaces'\nexport * from '../../../Common/models/states'\n\nexport type Customisations = { customisations: Partial } & T\n","export * from './colours'\nexport * from '../../../Core/common/customisations/visuals'\nexport * from '../../../Core/common/customisations/spaces'\n","export * from './borderRadius'\nexport * from './border'\n","export const inputSize = {\n small: 32,\n medium: 40,\n large: 48,\n}\n","import styled, { css, ThemeProps } from '../../../themes/Developer/themed-component'\nimport { ButtonCoreStyle } from '../../Button'\nimport { Customisations } from './DevButton.customisations'\nimport { DevFontAwesomeIcon } from '../../../Icon'\nimport { StyleProps } from '../../../types'\nimport { DisabledState, ReadOnlyState } from '../../../themes/Developer/styles/state'\nimport { ButtonContext } from '../../Button.composition'\nimport { rotate } from '../../../utils/animation'\nimport {\n ButtonCustomisations,\n getBgColour,\n getBorderColour,\n getColour,\n getFontSize,\n} from './customisations'\nimport * as themeStyles from '../../../themes/Developer/styles'\n\nexport type ButtonStyleProps = StyleProps & ThemeProps\n\nconst isPrimary = (props: ButtonStyleProps) => props.styleProps.type === 'primary'\n\nconst isTertiary = (props: ButtonStyleProps) => props.styleProps.type === 'tertiary'\n\nconst isInvalidPrimary = (props: ButtonStyleProps) => isPrimary(props) && props.styleProps.invalid\n\nconst EnabledButton = css`\n /** Colour */\n color: ${(props) => getColour(props)};\n background-color: ${(props) => getBgColour(props)};\n border-color: ${(props) => getBorderColour(props)};\n`\n\nconst DisabledButton = css`\n :disabled {\n ${DisabledState}\n\n /** Colour */\n color: ${(props) => getColour(props, 'disabled')};\n background-color: ${(props) => getBgColour(props, 'disabled')};\n border-color: ${(props) => getBorderColour(props, 'disabled')};\n }\n`\n\nconst HoverButton = css`\n :hover {\n transition: 0.5s;\n\n /** Colour */\n color: ${(props) => getColour(props, 'hover')};\n background-color: ${(props) => getBgColour(props, 'hover')};\n border-color: ${(props) => getBorderColour(props, 'hover')};\n\n /** Visual */\n ${(props) =>\n isTertiary(props) &&\n css`\n text-decoration: underline;\n `}\n }\n`\n\nconst FocusButton = css`\n :focus {\n transition: 0.5s;\n\n /** Colour : take the hover one */\n color: ${(props) => getColour(props, 'focus')};\n background-color: ${(props) => getBgColour(props, 'hover')};\n border-color: ${(props) => getBorderColour(props, 'focus')};\n\n /** Visual */\n ${(props) =>\n isTertiary(props) &&\n css`\n text-decoration: underline;\n `}\n }\n`\n\nconst InvalidButton = css`\n border-color: ${(props) => props.theme.colours.tertiary.semantic.red} !important;\n`\n\nconst BorderButton = css`\n border-style: solid;\n border-radius: ${(props) => props.theme.spaces.xxs};\n border-width: ${(props) => props.theme.visuals.borderSize};\n`\n\nconst FitContentButton = css`\n width: auto;\n`\n\nconst FadeInAnimation = (Components: any) => css`\n position: relative;\n overflow: hidden;\n\n & > ${Components.Icon} {\n position: relative;\n\n ${(props) =>\n props.styleProps.iconPosition === 'top' &&\n css`\n top: -${props.styleProps.height}px;\n `}\n\n ${(props) =>\n props.styleProps.iconPosition === 'bottom' &&\n css`\n bottom: -${props.styleProps.height}px;\n `}\n\n ${(props) =>\n props.styleProps.iconPosition === 'right' &&\n css`\n right: -60%;\n `}\n\n ${(props) =>\n props.styleProps.iconPosition === 'left' &&\n css`\n left: -60%;\n `}\n }\n\n & > ${Components.Label} {\n position: relative;\n\n ${(props) =>\n props.styleProps.iconPosition === 'top' &&\n css`\n transform: translateY(calc(-50% - calc(${props.theme.spaces.xs} / 2)));\n `}\n\n ${(props) =>\n props.styleProps.iconPosition === 'bottom' &&\n css`\n transform: translateY(calc(50% + calc(${props.theme.spaces.xs} / 2)));\n `}\n\n ${(props) =>\n props.styleProps.iconPosition === 'right' &&\n css`\n transform: translateX(50%);\n `}\n\n ${(props) =>\n props.styleProps.iconPosition === 'left' &&\n css`\n transform: translateX(-50%);\n `}\n }\n\n :hover {\n & > ${Components.Label} {\n -webkit-transition: all 0.5s;\n -moz-transition: all 0.5s;\n -o-transition: all 0.5s;\n transition: all 0.5s;\n transform: unset;\n }\n\n & > ${Components.Icon} {\n position: relative;\n -webkit-transition: all 0.5s;\n -moz-transition: all 0.5s;\n -o-transition: all 0.5s;\n transition: all 0.5s;\n\n ${(props) =>\n props.styleProps.iconPosition === 'top' &&\n css`\n top: 0;\n `}\n\n ${(props) =>\n props.styleProps.iconPosition === 'bottom' &&\n css`\n bottom: 0;\n `}\n\n ${(props) =>\n props.styleProps.iconPosition === 'right' &&\n css`\n right: 0;\n `}\n\n ${(props) =>\n props.styleProps.iconPosition === 'left' &&\n css`\n left: 0;\n `}\n }\n }\n`\n\nconst RotateAnimation = (Components: any) => css`\n & > ${Components.Icon} {\n animation: ${rotate} ${`1s infinite linear`};\n }\n`\n\nconst PositionIconToTheLeft = (Components: any) => css`\n flex-direction: row-reverse;\n\n & > ${Components.Icon} {\n ${(props) =>\n props.styleProps.hasLabel &&\n css`\n margin-right: ${props.theme.spaces.xs};\n `};\n }\n`\n\nconst PositionIconToTheRight = (Components: any) => css`\n flex-direction: row;\n\n & > ${Components.Icon} {\n ${(props) =>\n props.styleProps.hasLabel &&\n css`\n margin-left: ${props.theme.spaces.xs};\n `};\n }\n`\n\nconst PositionIconToTheTop = (Components: any) => css`\n flex-direction: column-reverse;\n\n & > ${Components.Icon} {\n ${(props) =>\n props.styleProps.hasLabel &&\n css`\n margin-bottom: ${props.theme.spaces.xs};\n `};\n }\n`\n\nconst PositionIconToTheBottom = (Components: any) => css`\n flex-direction: column;\n\n & > ${Components.Icon} {\n ${(props) =>\n props.styleProps.hasLabel &&\n css`\n margin-top: ${props.theme.spaces.xs};\n `};\n }\n`\n\nconst Icon = styled(DevFontAwesomeIcon).attrs(Customisations.Icon)`\n font-size: inherit;\n`\n\nconst Label = styled.label`\n text-transform: uppercase;\n`\n\nconst Root = styled.button`\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n cursor: pointer;\n width: 100%;\n box-sizing: border-box;\n ${BorderButton}\n\n /* Typography */\n ${themeStyles.FontFamily}\n font-size: ${(props) => getFontSize(props)};\n font-weight: ${(props) => props.theme.typography.proximaNova.fontWeight.regular};\n\n /* Visual */\n ${themeStyles.LetterSpacing}\n line-height: ${(props) => props.theme.typography.proximaNova.lineHeight.bodyXs};\n\n /* Spacing */\n padding: ${(props) => props.theme.spaces.xs};\n\n /* State */\n ${EnabledButton}\n ${DisabledButton}\n ${HoverButton}\n ${FocusButton}\n ${(props) => props.styleProps.readOnly && ReadOnlyState}\n ${(props) => isInvalidPrimary(props) && InvalidButton}\n\n /* Positioning */\n ${(props) => props.styleProps.iconPosition === 'left' && PositionIconToTheLeft(Components)}\n ${(props) => props.styleProps.iconPosition === 'right' && PositionIconToTheRight(Components)}\n ${(props) => props.styleProps.iconPosition === 'top' && PositionIconToTheTop(Components)}\n ${(props) => props.styleProps.iconPosition === 'bottom' && PositionIconToTheBottom(Components)}\n\n /* Animation */\n ${(props) => props.styleProps.animation === 'fadeIn' && FadeInAnimation(Components)}\n ${(props) => props.styleProps.animation === 'rotate' && RotateAnimation(Components)}\n \n ${(props) => props.styleProps.fitContent && FitContentButton}\n\n * {\n cursor: inherit !important;\n }\n`\n\nconst Components: ButtonContext = {\n Icon,\n Label,\n Root,\n}\n\nexport default Components\n","export * from './Developer'\n","export * from './DevIcon'\n","import * as React from 'react'\nimport type { IconContext } from './Icon.composition'\nimport type { StyledProps } from '../providers'\nimport useResponsive from '../hooks/useResponsive'\nimport getAttributes from '../attributes'\nimport { AriaAttributesPrefix, DataAttributesPrefix } from '../constants'\nimport { checkImageFeature } from './Icon.checks'\nimport { attachIf } from '../utils/event-handler'\nimport { getTestId } from '../utils/test'\n\nexport interface IconPublicProps extends React.AriaAttributes {\n /**\n * Icon to display\n */\n src?: string\n /**\n * Alternative information for the image\n */\n alt?: string\n /**\n * Icon size to display\n */\n size?: IconSizes | number\n /**\n * True if the icon has to fit the container\n */\n mustFit?: boolean\n /**\n * True if the icon is disabled, false otherwise\n */\n disabled?: boolean\n /**\n * It prevents the user from clicking on the icon if it is a clickable icon\n */\n readOnly?: boolean\n /**\n * -1 if the icon is not keyboard accessible, index in the sequential keyboard navigation otherwise\n */\n tabIndex?: number\n /**\n * Handler when the icon is clicked\n */\n onClick?: (event: React.MouseEvent) => void\n /**\n * Handler when the icon is hovered\n */\n onHover?: (event: React.MouseEvent) => void\n /**\n * Handler when the icon is not hovered\n */\n onLeave?: (event?: React.MouseEvent) => void\n /**\n * Component to display as icon\n */\n children?: React.ReactNode\n}\n\ntype IconSizes = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport type IconProps = IconPublicProps & StyledProps\n\nexport interface IconCoreStyle {\n isClickable: boolean\n size: string | number\n mustFit: boolean\n disabled: boolean\n readOnly: boolean\n}\n\nexport const Icon = React.forwardRef((props: IconProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const isClickable = props.onClick\n const isActionable = !props.readOnly && !props.disabled\n\n checkImageFeature(props)\n\n const getCoreStyle = (): IconCoreStyle => ({\n isClickable: props.onClick !== undefined,\n size: props.size!,\n mustFit: props.mustFit!,\n disabled: !!props.disabled!,\n readOnly: props.readOnly,\n })\n\n const handleClick = (event: React.MouseEvent) => {\n event.preventDefault()\n event.stopPropagation()\n\n if (props.onClick) {\n props.onClick(event)\n }\n }\n\n const renderImage = () => {\n if (props.children) {\n return props.children\n }\n\n const { Image } = props.styled!\n return props.src ? (\n \n ) : null\n }\n\n const tag = isClickable ? 'button' : 'div'\n\n const buttonProperties = isClickable\n ? {\n tabIndex: props.tabIndex,\n disabled: props.disabled,\n 'aria-disabled': props.disabled,\n onClick: attachIf(handleClick, isActionable),\n }\n : {}\n\n const { ImageContainer, Root } = props.styled!\n return (\n \n \n {renderImage()}\n \n \n )\n})\n\nIcon.defaultProps = {\n size: 'sm',\n tabIndex: 0,\n disabled: false,\n readOnly: false,\n}\n\nexport default Icon\n","import { IconProps } from './Icon'\n\nimport { filter, includes, isEmpty, pick, values } from '../utils/lodash'\n\nconst executeChecks = !includes(['production', 'test'], process.env.NODE_ENV)\n\n/**\n * The icon won't be clickable if all handlers are undefined\n * The icon will be clickable it all handlers are not undefined\n * Otherwise, error\n */\nexport const checkClickableFeature = (props: IconProps) => {\n if (!executeChecks) {\n return\n }\n\n const handlers = filter(values(pick(props, ['onClick', 'onTouchStart', 'onTouchEnd'])), !isEmpty)\n\n if (handlers.length !== 0 && handlers.length !== 3) {\n console.error(\n [\n 'Prisma: The clickable feature is not configured correctly.',\n 'Add an handler for onClick, onTouchStart and onTouchEnd.',\n ].join('\\n'),\n )\n }\n}\n\nexport const checkImageFeature = (props: IconProps) => {\n if (!executeChecks) {\n return\n }\n\n if (!props.children && !props.src) {\n console.error(\n [\n 'Prisma: The image feature is not configured correctly.',\n 'Use src property for a uri or children property for a component',\n ].join('\\n'),\n )\n }\n}\n","import type { IconPublicProps } from '../../Icon'\nimport type { IconCustomisations } from './customisations'\n\nexport default (props: IconPublicProps & IconCustomisations): IconCustomisations => ({\n bgColour: props.bgColour,\n hoverBgColour: props.hoverBgColour,\n border: props.border,\n borderRadius: props.borderRadius,\n padding: props.padding,\n})\n","import styled, { css, ThemeProps } from '../../../themes/Developer/themed-component'\nimport type { IconCoreStyle } from '../../Icon'\nimport type { IconContext } from '../../Icon.composition'\nimport type { StyleProps } from '../../../types'\nimport {\n getBorder,\n getBorderColour,\n getBorderRadius,\n getPadding,\n getBgColour,\n} from './customisations'\nimport { DisabledState, ReadOnlyState } from '../../../themes/Developer/styles'\nimport { getSize } from './DevIcon.utils'\n\nexport type IconStyleProps = StyleProps & ThemeProps\n\nconst Clickable = css`\n cursor: pointer;\n border: none;\n outline: none;\n`\n\nconst FitContainer = (Components: IconContext) => css`\n width: inherit;\n height: inherit;\n`\n\nconst FocusRoot = css`\n :focus {\n border-color: ${(props) => getBorderColour(props, 'focus')};\n }\n`\n\nconst Image = styled.img`\n color: inherit;\n background-color: inherit;\n cursor: inherit !important;\n width: ${(props) => getSize(props)}px;\n height: ${(props) => getSize(props)}px;\n`\n\nconst ImageContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst Root = styled.div`\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n background-color: ${(props) => getBgColour(props)};\n cursor: default;\n\n /** Visuals */\n border: ${(props) => getBorder(props)};\n border-radius: ${(props) => getBorderRadius(props)};\n\n /** Spacing */\n padding: ${(props) => getPadding(props)};\n\n /** States */\n ${FocusRoot}\n ${(props) => props.styleProps.disabled && DisabledState};\n ${(props) => props.styleProps.readOnly && ReadOnlyState};\n ${(props) => props.styleProps.isClickable && Clickable}\n ${(props) => props.styleProps.mustFit && FitContainer(Components)};\n`\n\nconst Components: IconContext = {\n Root,\n ImageContainer,\n Image,\n}\n\nexport default Components\n","export * from './models'\nexport * from './colours'\nexport * from './visuals'\nexport * from './spaces'\n","import type { IconStyleProps } from '../DevIcon.styles'\nimport * as theme from '../../../../themes/Developer/proxima-nova'\n\n/** Background colour */\nexport const getBgColour = (props: IconStyleProps, state?: theme.State) =>\n theme.getBgColour(props, 'transparent', state)\n\n/** Background colour */\nexport const getBorderColour = (props: IconStyleProps, state?: theme.State) =>\n theme.getBorderColour(props, 'transparent', state)\n","export * from './typography'\n","export * from './typography'\n","export * from './typography'\nexport * from '../../common/utils'\n","import { ThemeProps } from '../../themed-component'\n\nimport { FontSize, FontWeight, LetterSpacing, LineHeight, TextAlign } from '../models/typography'\n\nimport {\n CmFontSize,\n CmFontWeight,\n CmLetterSpacing,\n CmLineHeight,\n CmTextAlign,\n} from '../customisations/typography'\n\nimport { Customisations } from '../../common/models'\n\nexport function getFontSize(\n props: Customisations,\n defaultValue?: keyof FontSize,\n) {\n const fontSize = props.customisations.fontSize || defaultValue || 'bodyM'\n // TODO: Why px and not rem?\n return `${props.theme.typography.proximaNova.fontSize[fontSize].px}px`\n}\n\nexport function getFontWeight(\n props: Customisations,\n defaultValue?: keyof FontWeight,\n) {\n const fontWeight = props.customisations.fontWeight || defaultValue || 'regular'\n return props.theme.typography.proximaNova.fontWeight[fontWeight]\n}\n\nexport function getLetterSpacing(\n props: Customisations,\n defaultValue?: LetterSpacing,\n) {\n return props.customisations.letterSpacing || defaultValue || '1.3px'\n}\n\nexport function getLineHeight(\n props: Customisations,\n defaultValue?: keyof LineHeight,\n) {\n const lineHeight = props.customisations.lineHeight || defaultValue || 'bodyXs'\n return props.theme.typography.proximaNova.lineHeight[lineHeight]\n}\n\n/** Text Align */\nexport const getTextAlign = (\n props: Customisations,\n defaultValue?: TextAlign,\n) => props.customisations.textAlign || defaultValue || 'left'\n","export * from './colours'\nexport * from '../../../Core/common/utils/opaques'\nexport * from './spaces'\nexport * from '../../../Core/common/utils/tints'\nexport * from './visuals'\nexport * from '../../../Core/common/utils/customisations'\n","import { ThemeProps } from '../../themed-component'\nimport * as utils from '../../../Common/utils'\nimport { ICustomisations, State, Border, BgColourStates, ColourStates } from '../../../Common'\n\nexport {\n getState,\n getFallbackState,\n getValueAsNumber,\n getValueAsPixel,\n} from '../../../Core/common/utils/colours'\n\n/** Colour */\nconst defaultColour = ({ theme }: ThemeProps) => ({\n colour: theme.colours.tertiary.neutral.charcoal,\n})\n\nexport const getColour = (\n props: ICustomisations,\n defaultValue?: string | ColourStates,\n state?: State,\n): string => {\n let currentDefaultColour: any = defaultColour(props)\n if (defaultValue) {\n currentDefaultColour =\n typeof defaultValue === 'string' ? defaultValue : { ...currentDefaultColour, ...defaultValue }\n }\n\n return utils.getColour(props.customisations, currentDefaultColour, state)\n}\n\n/** Background colour */\nconst defaultBgColour = ({ theme }: ThemeProps) => ({\n bgColour: theme.colours.tertiary.neutral.white,\n})\n\nexport const getBgColour = (\n props: ICustomisations,\n defaultValue?: string | BgColourStates,\n state?: State,\n): string => {\n let currentDefaultBgColour: any = defaultBgColour(props)\n if (defaultValue) {\n currentDefaultBgColour =\n typeof defaultValue === 'string'\n ? defaultValue\n : { ...currentDefaultBgColour, ...defaultValue }\n }\n\n return utils.getBgColour(props.customisations, currentDefaultBgColour, state)\n}\n\n/** Border colour */\nexport const defaultBorderColours = ({ theme: { colours } }: ThemeProps): ColourStates => ({\n colour: colours.tints.lightGrey[180],\n hoverColour: colours.tints.sun[50],\n focusColour: colours.tints.sun[50],\n activeColour: colours.tints.lightGrey[180],\n selectedColour: colours.tints.lightGrey[180],\n hoverSelectedColour: colours.tints.sun[50],\n focusSelectedColour: colours.tints.sun[50],\n disabledColour: colours.tints.lightGrey[180],\n invalidColour: colours.tertiary.semantic.red,\n})\n\nexport const getBorderColour = (\n props: ICustomisations,\n defaultValue?: string | ColourStates,\n state?: State,\n): string => {\n // TODO: appended string to satisfy ts typing, otherwise 'string' is not possible\n let currentDefaultBorderColour: ColourStates | string = defaultBorderColours(props)\n if (defaultValue) {\n currentDefaultBorderColour =\n typeof defaultValue === 'string'\n ? defaultValue\n : { ...currentDefaultBorderColour, ...defaultValue }\n }\n\n const border = (props.customisations.border as ColourStates) || {}\n return utils.getColour(border, currentDefaultBorderColour, state)\n}\n","export * from './border'\nexport * from './borderRadius'\nexport * from './height'\nexport * from './opacity'\nexport * from './width'\n","import { getColour } from '../colours'\nimport { omit } from '../../../../utils/lodash'\nimport { Border, BorderProps, BorderType } from '../../models'\nimport { State } from '../../models/states'\n\nconst isCorrectBorderProps = (value: BorderProps) => value.width && value.style && value.colour\n\n/**\n * Return the border as width-style-colour i.e `1px solid #00FF00`\n * @param props Customisations for the border\n * @param defaultValue Default border\n * @param type Type of border requested\n */\nexport const getBorder = (\n value: Border,\n defaultValue: BorderProps | 'none',\n type: BorderType = 'border',\n state?: State,\n asObject?: boolean,\n) => {\n const hasIndividualBorder =\n value.borderRight || value.borderLeft || value.borderTop || value.borderBottom\n\n // Check default value is provided correctly\n if (defaultValue !== 'none' && !isCorrectBorderProps(defaultValue as BorderProps)) {\n console.warn(\n \"The default value has to be 'none' or an object with width, style and colour provided.\",\n )\n return 'none'\n }\n\n // Check border and (borderRight|borderLeft|boarderTop|boarderBottom) are not used at the same time\n if (value.border && hasIndividualBorder) {\n console.warn('You can not mix border. Use border or the other.')\n return 'none'\n }\n\n let border = value[type] || value.border\n if (border === 'none') {\n // No border has been provided for the requested type\n return 'none'\n }\n\n if (!border && defaultValue === 'none') {\n // No default border has been provided\n return 'none'\n }\n\n border = border || {}\n const defaultBorder = (defaultValue as BorderProps) || {}\n\n let { width = undefined } = border\n if (!width) {\n width = defaultBorder?.width\n }\n\n let { style = undefined } = border\n if (!style) {\n style = defaultBorder?.style\n }\n\n const defaultColours = omit(defaultBorder, ['width', 'style'])\n const colour = getColour(border, defaultColours, state)\n\n return asObject ? { width, style, colour } : `${width} ${style} ${colour}`\n}\n","import { CmBorderRadius } from '../../../Core/common'\nimport { Property } from '../../models'\nimport { getValueAsPixel } from '../colours'\n\nexport const getBorderRadius = (value: CmBorderRadius, defaultValue: Property) =>\n getValueAsPixel(value.borderRadius) || getValueAsPixel(defaultValue)\n","import { Height, Property } from '../../models'\nimport { getValueAsPixel } from '../colours'\n\nexport const getHeight = (value: Height, defaultValue: Property) =>\n getValueAsPixel(value.height) || getValueAsPixel(defaultValue)\n","import { Opacity } from '../../models'\n\nexport const getOpacity = (value: Opacity, defaultValue: number) => {\n if (value < 0 || value > 1) {\n console.warn('[PRISMA] Opacity has to be a value between 0 and 1.')\n return 0\n }\n\n return value.opacity || defaultValue\n}\n","import { Property, Width } from '../../models'\nimport { getValueAsPixel } from '../colours'\n\nexport const getWidth = (value: Width, defaultValue: Property) =>\n getValueAsPixel(value.width) || getValueAsPixel(defaultValue)\n","import type {\n // spacing\n Spacing2Values,\n Spacing3Values,\n Spacing4Values,\n Spacing,\n Property,\n\n // padding\n Padding,\n PaddingType,\n\n // margin\n Margin,\n MarginType,\n} from '../models'\nimport { trim, isEmpty } from '../../../utils/lodash'\nimport { getValueAsPixel } from '../../../customisations'\n\nconst isSingleString = (value: Spacing) =>\n typeof value === 'string' && trim(value).toString().split(' ').length === 1\n\nconst isSingleNumber = (value: Spacing) => typeof value === 'number'\n\nconst isSpacing1Value = (value: Spacing): value is string | number =>\n isSingleString(value) || isSingleNumber(value)\n\nconst isSpacing2Values = (value: Spacing): value is Spacing2Values =>\n !isSpacing1Value(value) &&\n (value as Spacing4Values)?.top === undefined &&\n (value as Spacing4Values)?.right === undefined &&\n (value as Spacing4Values)?.bottom === undefined &&\n (value as Spacing4Values)?.left === undefined\n\nconst isSpacing3Values = (value: Spacing): value is Spacing3Values =>\n !isSpacing1Value(value) &&\n (value as Spacing2Values)?.topBottom === undefined &&\n (value as Spacing4Values)?.right === undefined &&\n (value as Spacing4Values)?.left === undefined\n\nconst isSpacing4Values = (value: Spacing): value is Spacing3Values =>\n !isSpacing1Value(value) &&\n (value as Spacing2Values)?.topBottom === undefined &&\n (value as Spacing2Values)?.leftRight === undefined\n\n/**\n * Format the spacing requested to match the traditional 4 values\n * @param value value to format\n */\nexport const getSpacing = (value: Spacing) => {\n // Check value is provided correctly\n const mixCheck = [\n isSpacing1Value(value),\n isSpacing2Values(value),\n isSpacing3Values(value),\n isSpacing4Values(value),\n ]\n\n if (mixCheck.filter((x) => x === true).length !== 1) {\n console.warn('[PRISMA] You can not mix the available format.')\n return 0\n }\n\n if (isSpacing1Value(value)) {\n const currentValue = getValueAsPixel(value as string | number)\n return `${currentValue} ${currentValue} ${currentValue} ${currentValue}`\n }\n\n if (isSpacing2Values(value)) {\n return `${getValueAsPixel(value.topBottom as string | number)} ${getValueAsPixel(\n value.leftRight as string | number,\n )} ${getValueAsPixel(value.topBottom as string | number)} ${getValueAsPixel(\n value.leftRight as string | number,\n )}`\n }\n\n if (isSpacing3Values(value)) {\n return `${getValueAsPixel(value.top as string | number)} ${getValueAsPixel(\n value.leftRight as string | number,\n )} ${getValueAsPixel(value.bottom as string | number)} ${getValueAsPixel(\n value.leftRight as string | number,\n )}`\n }\n\n const margin4Values = value as Spacing4Values\n\n return `${getValueAsPixel(margin4Values.top as string | number)} ${getValueAsPixel(\n margin4Values.right as string | number,\n )} ${getValueAsPixel(margin4Values.bottom as string | number)} ${getValueAsPixel(\n margin4Values.left as string | number,\n )}`\n}\n\n/**\n * Return the padding as top-right-bottom-left i.e `10px 10px 10px 10px`\n * @param defaultValue Default padding\n * @param type Type of border requested\n */\nexport const getPadding = (\n value: Padding,\n defaultValue?: Spacing,\n type: PaddingType = 'padding',\n) => {\n const hasIndividualBorder =\n value.paddingRight || value.paddingLeft || value.paddingTop || value.paddingBottom\n\n // Check padding and (paddingRight|paddingLeft|paddingTop|paddingBottom) are not used at the same time\n if (!isEmpty(value.padding) && hasIndividualBorder) {\n console.warn('You can not mix padding. Use padding or the other.')\n return 0\n }\n\n if (type !== 'padding') {\n return getSpecificPadding(value, defaultValue as Property, type)\n }\n\n const padding = value.padding!\n\n if (padding === 0) {\n // No border has been provided for the requested type\n return 0\n }\n\n if (!padding && defaultValue === 0) {\n // No default border has been provided\n return 0\n }\n\n if (padding) {\n return getSpacing(padding)\n }\n\n return getSpacing(defaultValue)\n}\n\nconst getSpecificPadding = (\n value: Padding,\n defaultValue?: Property,\n type: PaddingType = 'padding',\n) => {\n const currentDefaultValue = getValueAsPixel(defaultValue)\n\n const paddingTop =\n getValueAsPixel(value.paddingTop) ||\n (type === 'paddingTop' ? currentDefaultValue : undefined) ||\n '0px'\n const paddingRight =\n getValueAsPixel(value.paddingRight) ||\n (type === 'paddingRight' ? currentDefaultValue : undefined) ||\n '0px'\n const paddingBottom =\n getValueAsPixel(value.paddingBottom) ||\n (type === 'paddingBottom' ? currentDefaultValue : undefined) ||\n '0px'\n const paddingLeft =\n getValueAsPixel(value.paddingLeft) ||\n (type === 'paddingLeft' ? currentDefaultValue : undefined) ||\n '0px'\n\n return `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`\n}\n\n/**\n * Return the margin as top-right-bottom-left i.e `10px 10px 10px 10px`\n * @param defaultValue Default margin\n * @param type Type of border requested\n */\nexport const getMargin = (value: Margin, defaultValue?: Spacing, type: MarginType = 'margin') => {\n const hasIndividualBorder =\n value.marginRight || value.marginLeft || value.marginTop || value.marginBottom\n\n // Check margin and (marginRight|marginLeft|marginTop|marginBottom) are not used at the same time\n if (value.margin && hasIndividualBorder) {\n console.warn('You can not mix margin. Use margin or the other.')\n return 0\n }\n\n if (type !== 'margin') {\n return getSpecificMargin(value, defaultValue as Property, type)\n }\n\n const margin = value.margin!\n if (margin === 0) {\n // No border has been provided for the requested type\n return 0\n }\n\n if (!margin && defaultValue === 0) {\n // No default border has been provided\n return 0\n }\n\n if (margin) {\n return getSpacing(margin)\n }\n\n return getSpacing(defaultValue)\n}\n\nconst getSpecificMargin = (\n value: Margin,\n defaultValue?: Property,\n type: MarginType = 'margin',\n): Spacing => {\n const currentDefaultValue = getValueAsPixel(defaultValue)\n\n const marginTop =\n getValueAsPixel(value.marginTop) ||\n (type === 'marginTop' ? currentDefaultValue : undefined) ||\n '0px'\n const marginRight =\n getValueAsPixel(value.marginRight) ||\n (type === 'marginRight' ? currentDefaultValue : undefined) ||\n '0px'\n const marginBottom =\n getValueAsPixel(value.marginBottom) ||\n (type === 'marginBottom' ? currentDefaultValue : undefined) ||\n '0px'\n const marginLeft =\n getValueAsPixel(value.marginLeft) ||\n (type === 'marginLeft' ? currentDefaultValue : undefined) ||\n '0px'\n\n return `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`\n}\n","import { ThemeProps } from '../../themed-component'\nimport * as utils from '../../../Common/utils'\nimport { ICustomisations, State, Border, BgColourStates, ColourStates } from '../../../Common'\n\nexport {\n getState,\n getFallbackState,\n getValueAsNumber,\n getValueAsPixel,\n} from '../../../Common/utils/colours'\n\n/** Colour */\nconst defaultColour = ({ theme }: ThemeProps) => ({\n colour: theme.colours.tertiary.neutral.charcoal,\n})\n\nexport const getColour = (\n props: ICustomisations,\n defaultValue?: string | ColourStates,\n state?: State,\n): string => {\n let currentDefaultColour: any = defaultColour(props)\n if (defaultValue) {\n currentDefaultColour =\n typeof defaultValue === 'string' ? defaultValue : { ...currentDefaultColour, ...defaultValue }\n }\n\n return utils.getColour(props.customisations, currentDefaultColour, state)\n}\n\n/** Background colour */\nconst defaultBgColour = ({ theme }: ThemeProps) => ({\n bgColour: theme.colours.tertiary.neutral.white,\n})\n\nexport const getBgColour = (\n props: ICustomisations,\n defaultValue?: string | BgColourStates,\n state?: State,\n): string => {\n let currentDefaultBgColour: any = defaultBgColour(props)\n if (defaultValue) {\n currentDefaultBgColour =\n typeof defaultValue === 'string'\n ? defaultValue\n : { ...currentDefaultBgColour, ...defaultValue }\n }\n\n return utils.getBgColour(props.customisations, currentDefaultBgColour, state)\n}\n\n/** Border colour */\nexport const defaultBorderColours = ({ theme: { colours } }: ThemeProps): ColourStates => ({\n colour: colours.tints.lightGrey[180],\n hoverColour: colours.tints.sun[50],\n focusColour: colours.tints.sun[50],\n activeColour: colours.tints.lightGrey[180],\n selectedColour: colours.tints.lightGrey[180],\n hoverSelectedColour: colours.tints.sun[50],\n focusSelectedColour: colours.tints.sun[50],\n disabledColour: colours.tints.lightGrey[180],\n invalidColour: colours.tertiary.semantic.red,\n})\n\nexport const getBorderColour = (\n props: ICustomisations,\n defaultValue?: string | ColourStates,\n state?: State,\n): string => {\n // TODO: appended string to satisfy ts typing, otherwise 'string' is not possible\n let currentDefaultBorderColour: ColourStates | string = defaultBorderColours(props)\n if (defaultValue) {\n currentDefaultBorderColour =\n typeof defaultValue === 'string'\n ? defaultValue\n : { ...currentDefaultBorderColour, ...defaultValue }\n }\n\n const border = (props.customisations.border as ColourStates) || {}\n return utils.getColour(border, currentDefaultBorderColour, state)\n}\n","/**\n * Returns the percent opacity associated to the hex colour\n * @param hex hexa of the colour\n * @param percent percent of the requested opacity i.e 10, 30, etc\n */\nexport const getOpaque = (hex: string, percent: number) => {\n if (hex === 'transparent') {\n return hex\n }\n\n if (hex.startsWith('rgba')) {\n return hex\n }\n\n const value = hex.replace('#', '')\n const r = parseInt(value.substring(0, 2), 16)\n const g = parseInt(value.substring(2, 4), 16)\n const b = parseInt(value.substring(4, 6), 16)\n\n return `rgba(${r},${g},${b},${percent / 100})`\n}\n","// utils\nimport * as helpers from '../../../Common/utils'\nimport type {\n MarginType,\n PaddingType,\n Spacing,\n ICustomisations,\n Margin,\n Padding,\n} from '../../../Common'\nimport { ThemeProps } from '../../themed-component'\n\n/** Padding */\nexport const getPadding = (\n props: ICustomisations,\n defaultValue: Spacing = 0,\n type: PaddingType = 'padding',\n) => helpers.getPadding(props.customisations, defaultValue, type)\n\n/** Margin */\nexport const getMargin = (\n props: ICustomisations,\n defaultValue: Spacing = 0,\n type: MarginType = 'margin',\n) => helpers.getMargin(props.customisations, defaultValue, type)\n","import { DevTheme } from '../../../index'\nimport { keys } from '../../../../utils/lodash'\nimport { Tints } from '../models'\n\n/**\n * Returns the percent tints associated to the hex colour\n * @param hex hexa of the colour\n * @param percent percent of the requested tint i.e 10, 30, etc\n */\nexport const getTint = (hex: string, percent: number) => {\n const properties = keys(DevTheme.colours.tints) as (keyof Tints)[]\n\n const tintRequested = properties.find((property) => {\n if (DevTheme.colours.tints[property]?.[100]) {\n // if 100% tint exists that means we deal with a tints object\n const tints = keys(DevTheme.colours.tints[property])\n return tints.find((tint: string) => DevTheme.colours.tints?.[property][tint] === hex)\n }\n\n return false\n })\n\n return tintRequested ? DevTheme.colours.tints?.[tintRequested][percent] : undefined\n}\n","export * from './border'\nexport * from './borderRadius'\nexport * from './opacity'\n","// utils\nimport * as common from '../../../../Common'\n\n// types\nimport type { BorderProps, BorderType, Customisations } from '../../models'\nimport type { DeveloperTheme } from '../../../theme'\nimport type { ThemeProps } from '../../../themed-component'\nimport { State } from '../../../../Common'\nimport { CmBorder } from '../../customisations'\n\n/** Borders */\nconst defaultThemedBorder = ({ visuals, colours }: DeveloperTheme) => ({\n width: visuals.borderSize,\n style: 'solid',\n colour: colours.tints.lightGrey[180],\n})\n\nexport const getBorder = (\n props: Customisations,\n defaultValue?: BorderProps | 'none',\n type: BorderType = 'border',\n state?: State,\n asObject?: boolean,\n) => {\n let currentDefaultValue = defaultValue || {}\n if (currentDefaultValue !== 'none') {\n currentDefaultValue = {\n ...defaultThemedBorder(props.theme),\n ...currentDefaultValue,\n }\n }\n\n return common.getBorder(props.customisations, currentDefaultValue, type, state, asObject)\n}\n","export * from './colours'\nexport * from './visuals'\nexport * from './typography'\nexport * from './spaces'\nexport * from './states'\n\nexport type Property = string | number\n\nexport type ICustomisations = { customisations: Partial } & T\n","import * as common from '../../../../Common'\nimport type { Customisations } from '../../models'\nimport type { ThemeProps } from '../../../themed-component'\nimport { CmBorderRadius } from '../../customisations'\n\n/** Border radius */\nexport const getBorderRadius = (\n props: Customisations,\n defaultValue?: common.Property,\n) => common.getBorderRadius(props.customisations, defaultValue || 0)\n","import * as common from '../../../../Common'\nimport type { Opacity, Customisations } from '../../models'\nimport type { ThemeProps } from '../../../themed-component'\n\n/** Opacity */\nexport const getOpacity = (props: Customisations, defaultValue?: number) =>\n common.getOpacity(props.customisations, defaultValue || 0)\n","import { get, isEmpty } from '../../../../utils/lodash'\n\n/**\n * Return the requested customisations.\n * @param props object containing the customisations\n * @param name name of the requested customisation\n */\nexport const getCustomisations = (props: any, name: string) => {\n const values = get(props.customisations, name) || {}\n return { customisations: values, theme: props.theme }\n}\n\nexport const hasCustomisations = (props: any, name: string) => {\n const value = get(props.customisations, name) || {}\n return !isEmpty(value)\n}\n","import type { IconStyleProps } from '../DevIcon.styles'\nimport * as theme from '../../../../themes/Developer/proxima-nova'\n\n/* Border */\nexport const getBorder = (props: IconStyleProps) => {\n return theme.getBorder(props, 'none', 'border')\n}\n\nexport const getBorderRadius = (props: IconStyleProps, defaultValue?: string | number) =>\n theme.getBorderRadius(props, theme.getValueAsPixel(defaultValue) || 0)\n","import { IconStyleProps } from '../DevIcon.styles'\nimport * as theme from '../../../../themes/Developer/proxima-nova'\n\n/** Padding */\nexport const getPadding = (props: IconStyleProps, defaultValue?: theme.Spacing) =>\n theme.getPadding(props, defaultValue)\n","import { css } from '../themed-component'\n\nexport const FontFamily = css`\n ${(props) =>\n props.theme.typography &&\n css`\n font-family: ${props.theme.typography.proximaNova.fontFamily};\n `};\n`\n\nexport const LetterSpacing = css`\n ${(props) =>\n props.theme.typography &&\n css`\n letter-spacing: ${props.theme.typography.proximaNova.letterSpacing};\n `};\n`\n","import { css } from '../themed-component'\n\nexport const Border = css`\n border-style: solid;\n border-radius: ${(props) => props.theme.spaces.xxs};\n border-width: ${(props) => props.theme.visuals.borderSize};\n`\n","export * from './FontAwesomeIcon'\n","export * from './Developer'\n","export * from './DevFontAwesomeIcon'\n","import FontAwesomeIcon, { FontAwesomeIconPublicProps } from '../../FontAwesomeIcon'\nimport Theme from '../../../../../themes/Developer/theme'\nimport { withCustomisedStyle } from '../../../../../providers'\nimport Styles from './DevFontAwesomeIcon.styles'\nimport Customisations from './DevFontAwesomeIcon.customisations'\nimport type { FontAwesomeIconContext } from '../../FontAwesomeIcon.composition'\nimport type { FontAwesomeIconCustomisations } from './customisations'\n\nexport const DevFontAwesomeIcon = withCustomisedStyle<\n FontAwesomeIconPublicProps,\n FontAwesomeIconContext,\n FontAwesomeIconCustomisations\n>(FontAwesomeIcon, Theme, Styles, Customisations, 'FontAwesomeIcon')\n\nexport type DevFontAwesomeIconCustomisations = FontAwesomeIconCustomisations\nexport type DevFontAwesomeIconProps = FontAwesomeIconPublicProps & FontAwesomeIconCustomisations\n","import * as React from 'react'\nimport useResponsive from '../../../hooks/useResponsive'\nimport getAttributes from '../../../attributes'\nimport { DataAttributesPrefix } from '../../../constants'\nimport { getTestId } from '../../../utils/test'\nimport type { IconDefinition } from '../../../utils/fontawesome'\nimport type { StyledProps } from '../../../providers'\nimport type { FontAwesomeIconContext } from './FontAwesomeIcon.composition'\nimport type { IconPublicProps } from '../../Icon'\n\nimport { omit } from '../../../utils/lodash'\n\ntype IconPublicWithoutSrcProps = Omit\n\nexport interface FontAwesomeIconPublicProps extends IconPublicWithoutSrcProps {\n /**\n * Icon to display\n */\n src: IconDefinition\n}\n\ntype FontAwesomeIconProps = FontAwesomeIconPublicProps & StyledProps\n\nexport interface FontAwesomeIconCoreStyle {\n size: string | number\n readOnly: boolean\n}\n\nconst FontAwesomeIcon = React.forwardRef(\n (props: FontAwesomeIconProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const getCoreStyle = (): FontAwesomeIconCoreStyle => ({\n size: props.size!,\n readOnly: props.readOnly,\n })\n\n const renderFontAwesomeIcon = () => {\n const { FontAwesomeIcon: FontAwesomeIconCore } = props.styled!\n return (\n \n )\n }\n\n const { Root } = props.styled!\n return (\n \n {renderFontAwesomeIcon()}\n \n )\n },\n)\n\nFontAwesomeIcon.defaultProps = {\n size: 'sm',\n readOnly: false,\n}\n\nexport default FontAwesomeIcon\n","import styled, { css, ThemeProps } from '../../../../../themes/Developer/themed-component'\nimport { DevIcon } from '../../../../index'\nimport { FontAwesomeIcon as FontAwesomeIconCore } from '../../../../../utils/fontawesome'\nimport { FontAwesomeIconContext } from '../../FontAwesomeIcon.composition'\nimport { getSize } from './DevFontAwesomeIcon.utils'\nimport {\n FontAwesomeIconCustomisations,\n getBgColour,\n getColour,\n getBorder,\n getBorderColour,\n getBorderRadius,\n getPadding,\n} from './customisations'\nimport type { FontAwesomeIconCoreStyle } from '../../FontAwesomeIcon'\nimport type { StyleProps } from '../../../../../types'\nimport * as themeStyles from '../../../../../themes/Developer/styles'\n\nexport type FontAwesomeIconStyleProps = StyleProps<\n FontAwesomeIconCoreStyle,\n FontAwesomeIconCustomisations\n> &\n ThemeProps\n\nconst EnabledRoot = css`\n color: ${(props) => getColour(props)};\n background-color: ${(props) => getBgColour(props)};\n`\n\nconst DisabledRoot = css`\n :disabled {\n ${themeStyles.DisabledState}\n }\n`\n\nconst HoverRoot = css`\n :hover {\n color: ${(props) => getColour(props, 'hover')};\n background-color: ${(props) => getBgColour(props, 'hover')};\n }\n`\n\nconst FocusRoot = css`\n :focus {\n border-color: ${(props) => getBorderColour(props, 'focus')};\n }\n`\n\nconst FontAwesomeIcon = styled(FontAwesomeIconCore)`\n font-size: inherit;\n color: inherit;\n background-color: inherit;\n width: 1em !important;\n`\n\nconst Root = styled(DevIcon)`\n position: relative;\n font-size: ${(props) => getSize(props)}px;\n\n /** Visuals */\n border: ${(props) => getBorder(props)};\n border-radius: ${(props) => getBorderRadius(props)};\n\n /** Spaces */\n padding: ${(props) => getPadding(props)};\n\n /** State */\n ${EnabledRoot}\n ${DisabledRoot}\n ${HoverRoot}\n ${FocusRoot}\n`\n\nconst Components: FontAwesomeIconContext = {\n Root,\n FontAwesomeIcon,\n}\n\nexport default Components\n","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faSearch\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faCheck\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faBuilding\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faInfoCircle\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faQuestionCircle\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faTimes\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faTimesCircle\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faAngleDown\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faAngleUp\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faAngleRight\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faAngleLeft\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faAngleDoubleRight\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faAngleDoubleLeft\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faDownload\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faCircle\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faTrash\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faUserEdit\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faUserTie\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faCog\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faUser\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faCheckCircle\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faExclamationCircle\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faStar\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faExclamationTriangle\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faUsersCog\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faVideo\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faArrowDown\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faSpinnerThird\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faPlusCircle\");","module.exports = require(\"@fortawesome/pro-solid-svg-icons/faSquare\");","module.exports = require(\"@fortawesome/pro-regular-svg-icons/faAngleDown\");","module.exports = require(\"@fortawesome/pro-regular-svg-icons/faTimes\");","module.exports = require(\"@fortawesome/pro-regular-svg-icons/faSearch\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faBuilding\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faAngleDown\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faAngleUp\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faArrowUp\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faArrowDown\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faCog\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faPlusCircle\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faCheck\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faPencilAlt\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faTimes\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faTimesCircle\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faAngleLeft\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faAngleRight\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faAngleDoubleRight\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faAngleDoubleLeft\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faTrashAlt\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faSearch\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faUser\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faCircle\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faCopy\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faEdit\");","module.exports = require(\"@fortawesome/pro-light-svg-icons/faEye\");","module.exports = require(\"@fortawesome/react-fontawesome\");","import type { FontAwesomeIconStyleProps } from './DevFontAwesomeIcon.styles'\nimport { sizes } from '../../../../themes/Developer/DevIcon.utils'\n\n/** Size */\nexport const getSize = (props: FontAwesomeIconStyleProps) =>\n typeof props.styleProps.size === 'string' ? sizes[props.styleProps.size] : props.styleProps.size\n","export * from './models'\nexport * from './colours'\nexport * from './visuals'\nexport * from './spaces'\n","import type { FontAwesomeIconStyleProps } from '../DevFontAwesomeIcon.styles'\nimport * as theme from '../../../../../../themes/Developer/proxima-nova'\n\n/** Colour */\nexport const getColour = (props: FontAwesomeIconStyleProps, state?: theme.State) =>\n theme.getColour(props, props.theme.colours.tints.charcoal[50], state)\n\n/** Background colour */\nexport const getBgColour = (props: FontAwesomeIconStyleProps, state?: theme.State) =>\n theme.getBgColour(props, 'transparent', state)\n\n/** Background colour */\nexport const getBorderColour = (props: FontAwesomeIconStyleProps, state?: theme.State) =>\n theme.getBorderColour(props, 'transparent', state)\n","import type { FontAwesomeIconStyleProps } from '../DevFontAwesomeIcon.styles'\nimport * as theme from '../../../../../../themes/Developer/proxima-nova'\n\n/* Border */\nexport const getBorder = (props: FontAwesomeIconStyleProps) => {\n return theme.getBorder(props, 'none', 'border')\n}\n\nexport const getBorderRadius = (props: FontAwesomeIconStyleProps, defaultValue?: string | number) =>\n theme.getBorderRadius(props, theme.getValueAsPixel(defaultValue) || 0)\n","import { FontAwesomeIconStyleProps } from '../DevFontAwesomeIcon.styles'\nimport * as theme from '../../../../../../themes/Developer/proxima-nova'\n\n/** Padding */\nexport const getPadding = (props: FontAwesomeIconStyleProps, defaultValue?: theme.Spacing) =>\n theme.getPadding(props, defaultValue)\n","import type { FontAwesomeIconPublicProps } from '../../FontAwesomeIcon'\nimport type { FontAwesomeIconCustomisations } from './customisations'\n\nexport default (\n props: FontAwesomeIconPublicProps & FontAwesomeIconCustomisations,\n): FontAwesomeIconCustomisations => ({\n colour: props.colour,\n hoverColour: props.hoverColour,\n focusColour: props.focusColour,\n bgColour: props.bgColour,\n hoverBgColour: props.hoverBgColour,\n border: props.border,\n borderRadius: props.borderRadius,\n padding: props.padding,\n})\n","import { keyframes } from 'styled-components'\n\nexport const rotate = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n`\n","export * from './colours'\nexport * from './models'\nexport * from './typography'\n","import { ButtonStyleProps } from '../DevButton.styles'\nimport * as theme from '../../../../themes/Developer/proxima-nova'\n\n/**\n * func. which creates default colour\n * @param props button style props\n */\nconst defaultColour = (props: ButtonStyleProps) => ({\n primary: {\n colour: props.theme.colours.tertiary.neutral.white,\n hoverColour: props.theme.colours.tertiary.neutral.white,\n focusColour: props.theme.colours.tertiary.neutral.white,\n },\n secondary: {\n colour: props.theme.colours.tints.azure[80],\n hoverColour: props.theme.colours.tertiary.neutral.white,\n focusColour: props.theme.colours.tertiary.neutral.white,\n },\n tertiary: {\n colour: props.theme.colours.tints.azure[100],\n hoverColour: props.theme.colours.tints.kashmirBlue[100],\n focusColour: props.theme.colours.tints.azure[100],\n },\n})\n\n/**\n * Primary:\n * - Default: match the default colour\n * - Hover: match the hover colour\n * Secondary:\n * - Default: match the default colour\n * - Hover: white\n * Tertiary:\n * - Default: match the default colour\n * - Hover: match the hover colour\n * @param props\n * @param state\n */\nexport const getColour = (props: ButtonStyleProps, state?: theme.State) => {\n if (props.styleProps.type === 'secondary' && state === 'hover')\n return props.theme.colours.tertiary.neutral.white\n\n return theme.getColour(props, defaultColour(props)[props.styleProps.type], state)\n}\n\n/** Background colour */\nconst defaultBgColour = (props: ButtonStyleProps) => ({\n primary: {\n bgColour: props.theme.colours.tints.azure[100],\n hoverBgColour: props.theme.colours.tints.cloudBurst[80],\n focusBgColour: props.theme.colours.tints.cloudBurst[80],\n },\n secondary: {\n bgColour: 'transparent',\n hoverBgColour: 'transparent',\n focusBgColour: 'transparent',\n },\n tertiary: {\n bgColour: 'transparent',\n hoverBgColour: 'transparent',\n focusBgColour: 'transparent',\n },\n})\n\n/**\n * Primary:\n * - Default: match the default background colour\n * - Hover: match the hover background colour\n * Secondary:\n * - Default: transparent\n * - Hover: match the default colour\n * Tertiary: no background colour\n * @param props\n * @param state\n */\nexport const getBgColour = (props: ButtonStyleProps, state?: theme.State) => {\n if (props.styleProps.type === 'secondary' && state === 'hover') {\n const statesColour = defaultColour(props)[props.styleProps.type]\n return theme.getColour(props, statesColour.colour)\n }\n\n return theme.getBgColour(props, defaultBgColour(props)[props.styleProps.type], state)\n}\n\n/** Border colour */\nconst defaultBorderColour = (props: ButtonStyleProps) => ({\n primary: {\n colour: props.theme.colours.tints.azure[100],\n hoverColour: props.theme.colours.tints.cloudBurst[80],\n focusColour: props.theme.colours.tints.cloudBurst[80],\n },\n secondary: {\n colour: props.theme.colours.tints.azure[100],\n hoverColour: props.theme.colours.tertiary.neutral.white,\n focusColour: props.theme.colours.tertiary.neutral.white,\n },\n tertiary: {\n focusColour: props.theme.colours.tints.azure[100],\n },\n})\n\n/**\n * Primary: the border matches the background colour\n * Secondary: the border matches the colour\n * Tertiary: adds border on focus\n * @param props\n * @param state\n */\nexport const getBorderColour = (props: ButtonStyleProps, state?: theme.State) => {\n if (props.styleProps.type === 'tertiary') {\n if (state === 'focus') {\n return theme.getColour(props, defaultBorderColour(props)[props.styleProps.type], state)\n }\n\n return 'transparent'\n }\n\n if (props.styleProps.type === 'secondary') {\n return theme.getColour(props, defaultBorderColour(props)[props.styleProps.type], state)\n }\n\n return theme.getBgColour(props, defaultBgColour(props)[props.styleProps.type], state)\n}\n","import type { ButtonStyleProps } from '../DevButton.styles'\nimport * as theme from '../../../../themes/Developer/proxima-nova'\n\n/** Font size */\nexport const getFontSize = (props: ButtonStyleProps) => theme.getFontSize(props, 'bodyS')\n","export * from './Developer'\n","export * from './DevInput'\n","import Input, { InputPublicProps } from '../../Input'\nimport Theme from '../../../themes/Developer/theme'\nimport { withCustomisedStyle } from '../../../providers'\nimport Styles from './DevInput.styles'\nimport Customisations from './DevInput.customisations'\nimport type { InputContext } from '../../Input.composition'\nimport type { InputCustomisations } from './customisations/models'\n\nexport const DevInput = withCustomisedStyle(\n Input,\n Theme,\n Styles,\n Customisations,\n 'Input',\n)\n\nexport type DevInputCustomisations = InputCustomisations\nexport type DevInputProps = InputPublicProps & InputCustomisations\n","import * as React from 'react'\n\nimport { FormControlContext, useFormControl } from '../FormControl/FormControl.context'\nimport { InputContext } from './Input.composition'\n\nimport { StyledProps } from '../providers'\nimport { getPlaceholder, isInputtable } from './Input.utils'\nimport useResponsive from '../hooks/useResponsive'\nimport useCheckDirty from '../FormControl/hooks/useCheckDirty'\nimport useEnhancedEffect from '../hooks/useEnhancedEffect'\nimport getValue from '../utils/state'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\nimport { newId } from '../utils'\nimport { attachIf } from '../utils/event-handler'\nimport { getTestId } from '../utils/test'\n\nexport interface InputPublicProps {\n /**\n * The id of the `input` element.\n * Use this prop to make `label` and `helperText` accessible for screen readers.\n */\n id: string\n /**\n * The id of the element that describe the object.\n */\n describedBy?: string\n /**\n * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).\n */\n type?: string\n /**\n * The size of the text field.\n */\n size?: 'small' | 'medium' | 'large' | number\n /**\n * Name attribute of the `input` element.\n */\n name?: string\n /**\n * The value of the `input` element, required for a controlled component.\n */\n value?: any\n /**\n * The default `input` element value. Use when the component is not controlled.\n */\n defaultValue?: any\n /**\n * The short hint displayed in the input before the user enters a value.\n */\n placeholder?: string\n /**\n * If `true`, the input will take up the full width of its container.\n */\n fullWidth?: boolean\n /**\n * If `true`, the `input` element will be disabled.\n */\n disabled?: boolean\n /**\n * It prevents the user from changing the value of the field\n * (not from interacting with the field).\n */\n readOnly?: boolean\n /**\n * If `true`, the label will be displayed in an error state.\n */\n invalid?: boolean\n /**\n * If `true`, the component will be displayed in focused state.\n */\n focused?: boolean\n /**\n * If `true`, the component will be displayed in hovered state.\n */\n hovered?: boolean\n /**\n * If `true`, the label is displayed as required and the `input` element` will be required.\n */\n required?: boolean\n /**\n * Start `InputAdornment` for this component.\n */\n startAdornment?: React.ReactNode\n /**\n * End `InputAdornment` for this component.\n */\n endAdornment?: React.ReactNode\n /**\n * The component used for the `input` element.\n * Either a string to use a HTML element or a component.\n */\n component?: JSX.Element | string\n /**\n * True if the input's content is blur, false otherwise.\n */\n blurContent?: boolean\n /**\n * -1 if the input is not keyboard accessible, index in the sequential keyboard navigation otherwise\n */\n tabIndex?: number\n /**\n * Direction of the text\n */\n direction?: 'ltr' | 'rtl'\n /**\n * Handler when the value changes. The new value is passed as parameter.\n */\n onChange?: (event: React.ChangeEvent) => void\n /**\n * Handler when the input loses the focus. The new value is passed as parameter.\n */\n onBlur?: (event: React.FocusEvent) => void\n /**\n * Handler when the input gets the focus.\n */\n onFocus?: (event: React.FocusEvent) => void\n /**\n * Handler when the input is hovered\n */\n onHover?: (event: React.MouseEvent) => void\n /**\n * Handler when the input is not hovered\n */\n onLeave?: (event: React.MouseEvent) => void\n /**\n * Handler when the user clicks on the field\n */\n onClick?: (event: React.MouseEvent) => void\n}\n\nexport interface InputProps extends InputPublicProps, StyledProps {}\n\nexport interface InputCoreStyle {\n disabled: boolean\n readOnly: boolean\n invalid: boolean\n variant: string\n size: string\n filled: boolean\n focused: boolean\n hovered: boolean\n active: boolean\n hasFormControlUsed: boolean\n blurContent?: boolean\n}\n\nconst Input = React.forwardRef((props: InputProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const { current: isControlled } = React.useRef(props.value != null)\n\n const inputRef = React.useRef(null)\n\n const formControl = useFormControl(props)\n\n const checkDirty = useCheckDirty(formControl)\n\n const [hovered, setHovered] = React.useState(props.hovered)\n const [focused, setFocused] = React.useState(props.focused)\n const [active, setActive] = React.useState(false)\n\n const isActionable = isInputtable(formControl)\n\n // Check dirty once\n React.useEffect(() => {\n if (inputRef.current) {\n checkDirty(inputRef.current)\n }\n }, [])\n\n // Check dirty if the component is supposed to be filled but the input element has no value\n React.useEffect(() => {\n if (!isControlled && formControl.filled && !inputRef.current!.value) {\n checkDirty(inputRef.current)\n }\n }, [inputRef.current?.value])\n\n // Check dirty with the value is the input is controlled\n useEnhancedEffect(() => {\n if (isControlled) {\n checkDirty({ value: props.value })\n }\n }, [props.value, checkDirty, isControlled])\n\n // Remove the focus when the input is disabled/readOnly and has the focus\n React.useEffect(() => {\n if (!isInputtable(formControl) && props.focused) {\n inputRef.current!.blur()\n }\n }, [formControl, props.disabled, props.readOnly, props.focused])\n\n const generateId = React.useMemo(() => {\n return newId()\n }, [])\n\n const getCoreStyle = (): InputCoreStyle => ({\n disabled: formControl.disabled!,\n readOnly: formControl.readOnly!,\n invalid: formControl.invalid!,\n variant: formControl.variant!,\n size: formControl.size!,\n filled: formControl.filled!,\n focused: getValue(formControl.focused, focused),\n hovered: getValue(formControl.hovered, hovered),\n active,\n hasFormControlUsed: formControl !== props,\n blurContent: props.blurContent,\n })\n\n const handleFocus = (event: React.FocusEvent) => {\n if (!isInputtable(formControl)) {\n event.stopPropagation()\n return\n }\n\n if (inputRef.current) {\n inputRef.current.select()\n }\n\n if (props.onFocus) {\n props.onFocus(event)\n }\n\n if (formControl && formControl.onFocus) {\n formControl.onFocus(event)\n } else {\n setFocused(true)\n }\n }\n\n const handleBlur = (event: React.FocusEvent) => {\n if (!isControlled) {\n const element: HTMLInputElement = inputRef.current!\n\n checkDirty({\n value: element.value,\n })\n }\n\n if (props.onBlur) {\n props.onBlur(event)\n }\n\n if (formControl && formControl.onBlur) {\n formControl.onBlur(event)\n } else {\n setFocused(false)\n }\n }\n\n const handleHover = (event: React.MouseEvent) => {\n if (props.onHover) {\n props.onHover(event)\n }\n\n if (formControl && formControl.onHover) {\n formControl.onHover(event)\n } else {\n setHovered(true)\n }\n }\n\n const handleLeave = (event: React.MouseEvent) => {\n if (props.onLeave) {\n props.onLeave(event)\n }\n\n if (formControl && formControl.onLeave) {\n formControl.onLeave(event)\n } else {\n setHovered(false)\n }\n }\n\n const handleChange = (event: React.ChangeEvent) => {\n if (!isControlled) {\n const element: any = event.target || inputRef.current\n checkDirty({ value: element.value })\n }\n\n if (props.onChange) {\n props.onChange(event)\n }\n }\n\n const renderComponent = () => {\n const placeholder = getPlaceholder(props.placeholder, formControl.required)\n const tabIndex = formControl.readOnly || formControl.disabled ? -1 : props.tabIndex\n\n const { Input: InputCore } = props.styled!\n return (\n \n \n \n )\n }\n\n const { Root } = props.styled!\n return (\n \n {props.startAdornment}\n {renderComponent()}\n {props.endAdornment}\n \n )\n})\n\nInput.defaultProps = {\n disabled: false,\n readOnly: false,\n type: 'text',\n size: 'medium',\n component: 'input',\n direction: 'ltr',\n tabIndex: 0,\n}\n\nexport default Input\n","import styled, { css, ThemeProps } from '../../../themes/Developer/themed-component'\nimport {\n InputCustomisations,\n getBgColour,\n getBorder,\n getColour,\n getFontSize,\n getFontWeight,\n getHeight,\n getPlaceholderColour,\n} from './customisations'\nimport { DisabledState, ReadOnlyState } from '../../../themes/Developer/styles'\nimport type { InputCoreStyle } from '../../Input'\nimport type { InputContext } from '../../Input.composition'\nimport type { StyleProps } from '../../../types'\nimport * as themeStyles from '../../../themes/Developer/styles'\n\nexport type InputStyleProps = StyleProps & ThemeProps\n\nexport const shrink = (props: InputStyleProps) =>\n props.styleProps.focused || props.styleProps.filled\n\nexport const getFilledInputPadding = (props: InputStyleProps) =>\n ({\n // edge-case for small size\n small: '2px',\n medium: props.theme.spaces.xxs,\n large: props.theme.spaces.xs,\n }[props.styleProps.size])\n\nconst filledInputFontSize = {\n small: 'bodyXs',\n medium: 'bodyS',\n large: 'bodyS',\n}\n\nconst BlurInput = css`\n -webkit-filter: blur(3px);\n -moz-filter: blur(3px);\n -o-filter: blur(3px);\n -ms-filter: blur(3px);\n filter: blur(3px);\n`\n\nconst NumberInput = css`\n &[type='number'] {\n -moz-appearance: textfield;\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n`\n\nconst FilledRoot = css`\n ${(props) =>\n shrink(props) &&\n css`\n align-items: flex-end;\n `}\n`\n\nconst FilledInput = css`\n /* Typography */\n font-size: ${(props) => getFontSize(props, filledInputFontSize[props.styleProps.size])};\n\n /** Spacing */\n padding: ${(props) => `${getFilledInputPadding(props)} ${props.theme.spaces.xs}`};\n`\n\nconst Input = styled.input`\n box-sizing: border-box;\n position: relative;\n cursor: inherit;\n min-width: 0;\n border: none;\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n background-color: inherit;\n font-family: inherit;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n outline: none;\n width: 100%;\n\n /* Colour */\n ::placeholder {\n color: ${(props) => getPlaceholderColour(props)};\n }\n\n /** Spacing */\n padding: ${(props) => props.theme.spaces.xs};\n\n ${NumberInput};\n\n ${(props) => props.styleProps.blurContent && BlurInput};\n ${(props) => props.styleProps.variant === 'filled' && FilledInput};\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus {\n box-shadow: 0 0 0px 1000px #ffffff inset !important;\n }\n\n &:-webkit-autofill:disabled,\n &:-internal-autofill-selected {\n background-color: inherit !important;\n color: inherit !important;\n }\n`\n\nconst Root = styled.div`\n ${themeStyles.FontFamily}\n\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: stretch;\n flex-grow: 1;\n white-space: nowrap;\n box-sizing: border-box;\n\n /* Colours */\n color: ${(props) => getColour(props)};\n background-color: ${(props) => getBgColour(props)};\n\n /* Typography */\n font-size: ${(props) => getFontSize(props)};\n font-weight: ${(props) => getFontWeight(props)};\n\n /* Visual */\n height: ${(props) => getHeight(props)};\n border: ${(props) => getBorder(props)};\n\n ${(props) => props.styleProps.disabled && DisabledState};\n ${(props) => props.styleProps.readOnly && ReadOnlyState};\n\n ${(props) => props.styleProps.variant === 'filled' && FilledRoot};\n`\n\nconst Components: InputContext = {\n Root,\n Input,\n}\n\nexport default Components\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { InputStyleProps } from '../DevInput.styles'\n\nexport const fontSizes = {\n small: 'bodyXs',\n medium: 'bodyS',\n large: 'bodyM',\n}\n\n/** Font size */\nexport const getFontSize = (props: InputStyleProps, defaultValue?: keyof theme.FontSize) =>\n theme.getFontSize(props, defaultValue || fontSizes[props.styleProps.size])\n\n/** Font weight */\nexport const getFontWeight = (props: InputStyleProps, defaultValue?: keyof theme.FontWeight) =>\n theme.getFontWeight(props, defaultValue || 'regular')\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport { getBorderColour } from './colours'\nimport type { InputStyleProps } from '../DevInput.styles'\n\n/** Height */\nexport const getHeight = (props: InputStyleProps) => `${theme.inputSize[props.styleProps.size]}px`\n\n/** Border */\nexport const getBorder = (props: InputStyleProps) =>\n theme.getBorder(props, getBorderColour(props), 'border', theme.getState(props.styleProps))\n","import type { InputPublicProps } from '../../Input'\nimport type { InputCustomisations } from './customisations'\n\n/**\n * Extract the customisations from the TrueLayer component properties\n */\nexport default (props: InputPublicProps & InputCustomisations): InputCustomisations => ({\n colour: props.colour,\n bgColour: props.bgColour,\n fontSize: props.fontSize,\n fontWeight: props.fontWeight,\n border: props.border,\n})\n","export * from './themes'\n","export * from './Developer'\n","export * from './DevInputField'\n","import InputField, { InputFieldPublicProps } from '../../InputField'\nimport type { InputFieldContext } from '../../InputField.composition'\nimport Theme from '../../../themes/Developer/theme'\nimport { withCustomisedStyle } from '../../../providers'\nimport Styles from './DevInputField.styles'\nimport Customisations, { InputFieldCustomisations } from './DevInputField.customisations'\n\nexport const DevInputField = withCustomisedStyle<\n InputFieldPublicProps,\n InputFieldContext,\n InputFieldCustomisations\n>(InputField, Theme, Styles, Customisations, 'InputField')\n\nexport type DevInputFieldCustomisations = InputFieldCustomisations\nexport type DevInputFieldProps = InputFieldPublicProps & InputFieldCustomisations\n","import * as React from 'react'\nimport type { InputFieldContext } from './InputField.composition'\nimport type { InputPublicProps } from '../Input/Input'\nimport type { FieldPublicProps } from '../Field/Field'\nimport type { StyledProps } from '../providers'\nimport useResponsive from '../hooks/useResponsive'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\nimport { newId } from '../utils'\nimport { getTestId } from '../utils/test'\nimport { isEmpty } from '../utils/lodash'\n\nexport type InputFieldPublicProps = FieldPublicProps & Omit\n\ninterface InputFieldProps extends InputFieldPublicProps, StyledProps {}\n\nconst InputField = React.forwardRef((props: InputFieldProps, forwardRef: any) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const getCoreStyle = () => ({})\n\n const getPlaceholder = () => {\n if (props.variant === 'standard') {\n return props.placeholder\n }\n\n if (isEmpty(props.label)) {\n return props.placeholder\n }\n\n return undefined\n }\n\n const renderInput = () => {\n const { Input } = props.styled!\n return (\n \n )\n }\n\n const { Root } = props.styled!\n return (\n \n {renderInput()}\n \n )\n})\n\nInputField.defaultProps = {\n id: newId(),\n variant: 'standard',\n}\n\nexport default InputField\n","import styled, { ThemeProps } from '../../../themes/Developer/themed-component'\nimport { DevField } from '../../../Field'\nimport { DevInput } from '../../../Input'\nimport { Customisations, InputFieldCustomisations } from './DevInputField.customisations'\nimport type { InputFieldContext } from '../../InputField.composition'\nimport type { StyleProps } from '../../../types'\n\nexport type InputFieldStyleProps = StyleProps<{}, InputFieldCustomisations> & ThemeProps\n\nconst Input = styled(DevInput).attrs(Customisations.Input)``\n\nconst Root = styled(DevField).attrs(Customisations.Field)``\n\nconst Components: InputFieldContext = {\n Root,\n Input,\n}\n\nexport default Components\n","export * from './Developer'\n","export * from './DevField'\n","import Field, { FieldPublicProps } from '../../Field'\nimport Theme from '../../../themes/Developer/theme'\nimport type { FieldContext } from '../../Field.composition'\nimport { withCustomisedStyle } from '../../../providers'\nimport Styles from './DevField.styles'\nimport Customisations, { FieldCustomisations } from './DevField.customisations'\n\nexport const DevField = withCustomisedStyle(\n Field,\n Theme,\n Styles,\n Customisations,\n 'Field',\n)\n\nexport type DevFieldCustomisations = FieldCustomisations\nexport type DevFieldProps = FieldPublicProps & FieldCustomisations\n","import * as React from 'react'\nimport { faSolidCheck, faSolidQuestionCircle, faSolidTimes } from '../utils/fontawesome'\nimport { Grid } from '../Grid'\nimport type { FieldContext } from './Field.composition'\nimport type { FieldCustomisations } from './Field.customisations'\nimport type { StyledProps } from '../providers'\nimport useResponsive from '../hooks/useResponsive'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\nimport { getTestId } from '../utils/test'\n\nexport interface FieldPublicProps {\n /**\n * The id of the `input` element.\n * Use this prop to make `label` and `helperText` accessible for screen readers.\n */\n id: string\n /**\n * The label content.\n */\n label: string | React.ReactNode\n /**\n * The helper text content.\n */\n helperText?: string | React.ReactNode\n /**\n * If `true`, the `input` element will be disabled.\n */\n disabled?: boolean\n /**\n * If `true`, the label will be displayed in an error state.\n */\n invalid?: boolean\n /**\n * If `true`, the label is displayed as required and the `input` element` will be required.\n */\n required?: boolean\n /**\n * It prevents the user from changing the value of the field\n * (not from interacting with the field).\n */\n readOnly?: boolean\n /**\n * The variant to use.\n */\n variant?: 'filled' | 'outlined' | 'standard'\n /**\n * The size of the text field.\n */\n size?: 'small' | 'medium' | 'large'\n /**\n * Breakpoint the error and input components are displayed on the same line from\n */\n breakpoint?: string\n /**\n * Error message to display when the field is invalid\n */\n error?: string\n /**\n * Tooltip to display to the user\n */\n tooltip?: string | JSX.Element\n /**\n * True to display the validity status, false otherwise\n */\n withValidityStatus?: boolean\n /**\n * Attach a reference to the input component\n */\n inputRef?: React.RefObject\n /**\n * Component to display as input of the field\n */\n children?: React.ReactNode\n}\n\ninterface FieldProps extends FieldPublicProps, StyledProps {}\n\nexport interface FieldCoreStyle {\n invalid?: boolean\n displayValidityStatus: boolean\n}\n\nconst Field = React.forwardRef((props: FieldProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const isStandard = props.variant === 'standard'\n const displayValidityStatus = !props.readOnly && !props.disabled && props.withValidityStatus\n const hasIndicators = displayValidityStatus || props.tooltip\n\n const getCoreStyle = (): FieldCoreStyle => ({\n invalid: props.invalid,\n displayValidityStatus,\n })\n\n const renderLabel = () => {\n const { Label } = props.styled!\n return props.label ? (\n \n {props.label}\n \n ) : null\n }\n\n const renderHelperText = () => {\n const { Helper } = props.styled!\n return props.helperText ? (\n \n {props.helperText}\n \n ) : null\n }\n\n const renderTooltip = () => {\n if (!props.tooltip) {\n return null\n }\n\n const customisations = props.customisations?.Tooltip\n\n const { Tooltip } = props.styled!\n return typeof props.tooltip === 'string' ? (\n \n ) : (\n props.tooltip\n )\n }\n\n const renderValidityStatus = () => {\n const { ValidationStatus } = props.styled!\n return displayValidityStatus ? (\n \n ) : null\n }\n\n const renderIndicators = () => {\n const { Indicators } = props.styled!\n return (\n \n {renderTooltip()}\n {renderValidityStatus()}\n \n )\n }\n\n const renderInput = () => {\n const { Input } = props.styled!\n return (\n \n {!isStandard && renderLabel()}\n {props.children}\n \n )\n }\n\n const renderError = () => {\n const { Error } = props.styled!\n return props.error && props.invalid ? (\n \n {props.error}\n \n ) : null\n }\n\n const renderInputCell = () => {renderInput()}\n\n const renderIndicatorsCell = () => {\n return hasIndicators ? {renderIndicators()} : null\n }\n\n const { Root } = props.styled!\n return (\n \n {isStandard && renderLabel()}\n \n {renderInputCell()}\n {renderIndicatorsCell()}\n \n {renderHelperText()}\n {renderError()}\n \n )\n})\n\nField.defaultProps = {\n variant: 'standard',\n size: 'medium',\n breakpoint: 'md',\n withValidityStatus: true,\n}\n\nexport default Field\n","import * as React from 'react'\n\nimport useResponsive from '../hooks/useResponsive'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\nimport { getTestId } from '../utils/test'\nimport { includes } from '../utils/lodash'\n\nimport { GridContext } from './Grid.context'\nimport { ContainerContent, getStyle, Root } from './Grid.styles'\n\nexport interface GridPublicProps {\n className?: string\n /**\n * True if the component represent a Grid container, false for an Grid item\n */\n container?: boolean\n /**\n * True if the next items will start at the next line, false otherwise\n */\n break?: boolean\n /**\n * Spacing of the Grid\n */\n spacing?: number\n}\n\nexport interface GridContainerPublicProps {\n /**\n * Direction of the cells in the row\n */\n direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse'\n /**\n * Main alignment of the cells in the row\n */\n justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'\n /**\n * Secondary alignment of the container's cells in the row\n */\n alignContent?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'\n /**\n * Secondary alignment of the cells in the row\n */\n alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'\n /**\n * True if the child are not wrapped when reaching the width of the parent, false otherwise\n */\n noWrap?: boolean\n /**\n *\n */\n overflow?: boolean\n /**\n *\n */\n height?: string | number\n /**\n * Grid Item to display\n */\n children?: React.ReactNode\n}\n\nexport interface GridItemPublicProps {\n /**\n * Secondary alignment of the cells in the row\n */\n alignSelf?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'\n /**\n * Number of column a cell takes when its current breakpoint is xs\n */\n xs?: number | boolean\n /**\n * Number of column a cell takes when its current breakpoint is sm\n */\n sm?: number | boolean\n /**\n * Number of column a cell takes when its current breakpoint is md\n */\n md?: number | boolean\n /**\n * Number of column a cell takes when its current breakpoint is lg\n */\n lg?: number | boolean\n /**\n * Number of column a cell takes when its current breakpoint is xl\n */\n xl?: number | boolean\n /**\n * Number of offset column a cell takes when its current breakpoint is xs\n */\n xsOffset?: number\n /**\n * Number of offset column a cell takes when its current breakpoint is sm\n */\n smOffset?: number\n /**\n * Number of offset column a cell takes when its current breakpoint is sm\n */\n mdOffset?: number\n /**\n * Number of offset column a cell takes when its current breakpoint is md\n */\n lgOffset?: number\n /**\n * Number of offset column a cell takes when its current breakpoint is xl\n */\n xlOffset?: number\n /**\n * Direction of the offset columns\n */\n offsetDirection?: 'left' | 'right'\n /**\n * Type of the offset columns\n */\n offsetType?: 'numberOfColumn' | 'free'\n /**\n * True if the content has to fit the cell, false otherwise\n */\n fullWidth?: boolean\n /**\n * Component to display\n */\n children?: React.ReactNode\n}\n\nexport type GridItemProps = GridPublicProps & GridItemPublicProps\n\nexport type GridContainerProps = GridPublicProps & GridContainerPublicProps\n\nexport type GridProps = GridItemProps | GridContainerProps\n\nconst Grid = React.forwardRef((props: GridProps, forwardRef: React.Ref) => {\n const { ref, device } = useResponsive({ ref: forwardRef })\n\n const containerRef = React.useRef(null)\n const context = React.useContext(GridContext)\n\n const [containerSize, setContainerSize] = React.useState()\n const [nestedGrid, setNestedGrid] = React.useState(false)\n const [noWrapped, setNoWrapped] = React.useState(false)\n\n if (props.container) {\n // Check if the grid container is a nested one or not\n React.useEffect(() => {\n const rootElement: any = ref.current\n if (!rootElement) {\n return\n }\n\n const closestContainer = rootElement?.parentNode.closest(\"[data-type='container']\")\n setNestedGrid(closestContainer != null)\n\n const closestWrapContainer = rootElement?.parentNode.closest(\"[data-nowrap='true']\")\n let defaultNoWrap = (props as GridContainerPublicProps).noWrap\n if (closestContainer && defaultNoWrap == null) {\n defaultNoWrap = context?.noWrap || false\n }\n setNoWrapped(defaultNoWrap)\n }, [ref.current])\n\n React.useEffect(() => {\n const element = containerRef?.current\n if (!element) {\n return\n }\n\n const { direction } = props as GridContainerProps\n if (includes(['row', 'row-reverse'], direction)) {\n return\n }\n\n if (element.clientHeight === containerSize) {\n return\n }\n\n setContainerSize(element.clientHeight)\n }, [containerRef?.current])\n }\n\n const renderItem = (child: any, index: number) => {\n return React.cloneElement(child, {\n ...child.props,\n spacing: props.spacing,\n })\n }\n\n const renderContainer = () => {\n const children = React.Children.toArray(props.children)\n return (\n props.container && (\n \n \n {children.map(renderItem)}\n \n \n )\n )\n }\n\n const renderCell = () => {\n return (\n !props.container && {props.children}\n )\n }\n const gridExtra = props.container\n ? { nestedGrid, noWrap: noWrapped }\n : { containerHeight: containerRef.current?.clientHeight }\n\n return (\n \n {renderContainer()}\n {renderCell()}\n \n )\n})\n\nGrid.defaultProps = {\n direction: 'row',\n justify: 'flex-start',\n alignItems: 'flex-start',\n spacing: 10,\n offsetDirection: 'right',\n offsetType: 'numberOfColumn',\n overflow: false,\n height: 'inherit',\n}\n\nexport default Grid\n","import * as React from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { StyleProps } from '../types'\n\nimport { GridContainerPublicProps, GridItemPublicProps, GridProps } from './Grid'\nimport { getBreakpoint } from './Grid.utils'\nimport { getDevices } from '../devices'\nimport { GridContext } from './Grid.context'\nimport { Context as ResponsiveContext } from '../responsives'\nimport { find, keys, includes } from '../utils/lodash'\n\ninterface GridStyle {\n spacing: number\n container: boolean\n break?: boolean\n containerStyle?: GridContainerStyle\n itemStyle?: GridItemStyle\n}\n\ninterface GridContainerStyle {\n direction: string\n justify: string\n alignItems: string\n alignContent: string\n nestedGrid?: boolean\n // Used only for offset on grid with a column direction\n containerSize?: number\n noWrap: boolean\n overflow: boolean\n height: string | number\n}\n\ninterface GridItemStyle {\n numberOfColumn?: number | boolean\n offset: number\n offsetDirection: string\n offsetType: string\n spacing: number\n hasAtLeastOneBreakpoint: boolean\n isFirstRow?: boolean\n isLastRow?: boolean\n isFirstColumn?: boolean\n isLastColumn?: boolean\n fullWidth?: boolean\n direction: string\n alignItems: string\n // Used only for offset on grid with a column direction\n containerSize?: number\n noWrap: boolean\n overflow: boolean\n alignSelf?: string\n}\n\nexport type GridStyleProps = StyleProps\n\n// TODO: TO BE FIXED - Upper case on the first letter needed otherwise you get an exception when running cypress test\nexport const GetItemStyle = (props: GridItemPublicProps, extra?: any): GridItemStyle => {\n const responsiveContext = React.useContext(ResponsiveContext)\n const context: any = React.useContext(GridContext)\n\n const breakpoint = getBreakpoint({ ...props, ...responsiveContext }, extra.device)\n\n const hasAtLeastOneBreakpoint = !!find(\n keys(getDevices(props)),\n (currentBreakpoint: string) => props[currentBreakpoint] != null,\n )\n\n let numberOfColumn = breakpoint ? props[breakpoint] : undefined\n if (numberOfColumn == null && hasAtLeastOneBreakpoint) {\n numberOfColumn = 12\n }\n\n const offset = (breakpoint ? props[`${breakpoint}Offset`] : undefined) || 0\n\n return {\n numberOfColumn,\n offset,\n offsetDirection: props.offsetDirection!,\n offsetType: props.offsetType!,\n spacing: (props as GridProps).spacing!,\n hasAtLeastOneBreakpoint,\n isFirstRow: (props as any).isFirstRow,\n isLastRow: (props as any).isLastRow,\n isFirstColumn: (props as any).isFirstColumn,\n isLastColumn: (props as any).isLastColumn,\n fullWidth: props.fullWidth,\n direction: context.direction,\n alignItems: context.alignItems,\n containerSize: context.containerSize,\n noWrap: context.noWrap,\n overflow: context.overflow,\n alignSelf: props.alignSelf,\n }\n}\n\n// TODO: TO BE FIXED - Upper case on the first letter needed otherwise you get an exception when running cypress test\nexport const GetContainerStyle = (\n props: GridContainerPublicProps,\n extra: any = {},\n): GridContainerStyle => {\n return {\n direction: props.direction!,\n justify: props.justify!,\n alignItems: props.alignItems!,\n alignContent: props.alignContent!,\n nestedGrid: extra.nestedGrid,\n containerSize: extra.containerSize,\n noWrap: extra.noWrap,\n overflow: props.overflow,\n height: props.height!,\n }\n}\n\nexport const getStyle = (props: GridProps, extra?: any): GridStyle => {\n const containerStyle = props.container\n ? GetContainerStyle(props as GridContainerPublicProps, extra)\n : undefined\n const itemStyle = !props.container ? GetItemStyle(props as GridItemPublicProps, extra) : undefined\n\n return {\n spacing: props.spacing!,\n container: props.container!,\n break: props.break,\n containerStyle,\n itemStyle,\n }\n}\n\nconst containerStyle = (props: GridStyleProps): GridContainerStyle =>\n props.styleProps.containerStyle\nconst itemStyle = (props: GridStyleProps): GridItemStyle => props.styleProps.itemStyle!\n\nconst isAutoLayout = (props: GridItemStyle) =>\n typeof props.numberOfColumn === 'boolean' && props.numberOfColumn\nconst isWidthLayout = (props: GridItemStyle) =>\n props.hasAtLeastOneBreakpoint &&\n typeof props.numberOfColumn !== 'boolean' &&\n props.numberOfColumn !== undefined\nconst isEqualLayout = (props: GridItemStyle) =>\n !props.hasAtLeastOneBreakpoint && props.numberOfColumn === undefined\n\nconst isItemsIsStretchedAligned = (props: GridItemStyle) => props.alignItems === 'stretch'\n\nconst isRowDirection = (props: GridStyleProps) =>\n containerStyle(props).direction === 'row' || containerStyle(props).direction === 'row-reverse'\n\nconst isItemRowDirection = (props: GridStyleProps) =>\n itemStyle(props).direction === 'row' || itemStyle(props).direction === 'row-reverse'\n\nconst isFreeOffset = (props: GridItemStyle) => props.offsetType === 'free'\nconst isOffset = (value?: number) => typeof value !== 'undefined'\nconst getOffset = (props: GridItemStyle) => {\n if (props.offset === 0) {\n return 0\n }\n\n const rowDirection = includes(['row', 'row-reverse'], props.direction)\n const containerSize = !rowDirection && props.containerSize ? `${props.containerSize}px` : '100%'\n return isFreeOffset(props)\n ? `${props.offset}px`\n : `calc(calc(${containerSize} / calc(12 / ${props.offset})) + 0px)`\n}\n\nconst getAlignContent = (props: GridStyleProps) => {\n return containerStyle(props).alignContent || containerStyle(props).alignItems\n}\n\nconst HeightLayout = css`\n box-sizing: border-box;\n flex-grow: 0;\n max-height: ${(props) => `${(+itemStyle(props).numberOfColumn / 12) * 100}%`};\n flex-basis: ${(props) => `${(+itemStyle(props).numberOfColumn / 12) * 100}%`};\n`\n\nconst WidthLayout = css`\n box-sizing: border-box;\n flex-grow: 0;\n max-width: ${(props) => `${(+itemStyle(props).numberOfColumn / 12) * 100}%`};\n flex-basis: ${(props) => `${(+itemStyle(props).numberOfColumn / 12) * 100}%`};\n`\n\nconst RowOffset = css`\n ${(props) =>\n itemStyle(props).offsetDirection === 'left' &&\n css`\n margin-left: ${getOffset(itemStyle(props))};\n `}\n ${(props) =>\n itemStyle(props).offsetDirection === 'right' &&\n css`\n margin-right: ${getOffset(itemStyle(props))};\n `}\n`\n\nconst ColumnOffset = css`\n ${(props) =>\n itemStyle(props).offsetDirection === 'left' &&\n css`\n margin-top: ${getOffset(itemStyle(props))};\n `}\n ${(props) =>\n itemStyle(props).offsetDirection === 'right' &&\n css`\n margin-bottom: ${getOffset(itemStyle(props))};\n `}\n`\n\nconst GridBreak = css`\n flex-basis: 100%;\n height: 0;\n`\n\nexport const ContainerContent = styled.div`\n display: flex;\n flex: 0 1 auto;\n flex-direction: row;\n flex-wrap: wrap;\n flex-direction: ${(props) => containerStyle(props).direction};\n align-items: ${(props) => containerStyle(props).alignItems};\n align-content: ${(props) => getAlignContent(props)};\n justify-content: ${(props) => containerStyle(props).justify};\n margin: ${(props) => `calc(${props.styleProps.spacing * -1}px / 2)`};\n height: ${(props) => `calc(100% + ${props.styleProps.spacing}px)`};\n\n ${(props) =>\n containerStyle(props).noWrap &&\n css`\n flex-wrap: nowrap;\n `}\n\n ${(props) =>\n !isRowDirection(props) &&\n css`\n height: ${`calc(100% + ${props.styleProps.spacing}px)`};\n `}\n`\n\nexport const Root = styled.div`\n ${(props) =>\n props.styleProps.container &&\n css`\n display: flex;\n flex-flow: column;\n height: ${containerStyle(props).height};\n\n ${!isRowDirection(props) &&\n css`\n min-height: 100%;\n `}\n\n ${isRowDirection(props) &&\n css`\n min-width: 100%;\n `}\n `}\n\n ${(props) => props.styleProps.break && GridBreak}\n\n ${(props) =>\n !props.styleProps.container &&\n !props.styleProps.break &&\n css`\n padding: ${`calc(${props.styleProps.spacing}px / 2)`};\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n position: relative;\n align-self: ${itemStyle(props).alignSelf};\n\n ${isItemRowDirection(props) &&\n css`\n ${isWidthLayout(itemStyle(props)) && WidthLayout}\n ${isOffset(itemStyle(props).offset) && RowOffset}\n\n ${isEqualLayout(itemStyle(props)) &&\n css`\n flex: 1 1 0;\n max-width: 100%;\n box-sizing: border-box;\n `}\n `}\n\n ${!isItemRowDirection(props) &&\n css`\n max-width: 100%;\n\n ${isWidthLayout(itemStyle(props)) && HeightLayout}\n ${isOffset(itemStyle(props).offset) && ColumnOffset}\n\n ${isEqualLayout(itemStyle(props)) &&\n css`\n flex: 1 1 auto;\n max-height: 100%;\n box-sizing: border-box;\n `}\n `}\n\n & > * {\n flex-grow: 1;\n }\n `}\n`\n","import { getDevices } from '../devices'\nimport { head } from '../utils/lodash'\n\nexport const getBreakpoint = (props: any, device?: string) => {\n const devices = getDevices(props)\n const breakpoints = Object.keys(devices)\n\n const currentDevice = device || props.device\n let i = currentDevice ? breakpoints.indexOf(currentDevice) : breakpoints.length\n\n for (; i >= 0; i -= 1) {\n const key = breakpoints[i]\n if (props[key] !== undefined) {\n return key\n }\n }\n\n return head(breakpoints) || 'xs'\n}\n\nexport const getProperties = (child: any) => {\n const attributes = child.type ? child.type.attrs || [] : []\n if (attributes.length > 0) {\n let properties = {}\n\n attributes.forEach((x: any) => {\n properties = { ...properties, ...x(child.props) }\n })\n\n return properties\n }\n\n return child.props\n}\n","import styled, { css, ThemeProps } from '../../../themes/Developer/themed-component'\nimport type { FieldContext } from '../../Field.composition'\nimport type { FieldCoreStyle } from '../../Field'\nimport type { StyleProps } from '../../../types'\nimport { Customisations, DevFieldCustomisations } from './DevField.customisations'\nimport { DevFormHelperText } from '../../../FormHelperText'\nimport { DevFormControl } from '../../../FormControl'\nimport { DevFormValidityText } from '../../../FormValidityText'\nimport { DevFormLabel } from '../../../FormLabel'\nimport { DevFontAwesomeIcon } from '../../../Icon'\nimport { DevTooltip } from '../../../Tooltip'\n\nexport type FieldStyleProps = StyleProps & ThemeProps\n\nconst Tooltip = styled(DevTooltip).attrs(Customisations.Tooltip)`\n ${(props) =>\n props.styleProps.displayValidityStatus &&\n css`\n margin-right: ${props.theme.spaces.xs};\n `}\n`\n\nconst ValidationStatus = styled(DevFontAwesomeIcon).attrs(\n Customisations.ValidityStatus,\n)``\n\nconst Indicators = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-left: ${(props) => props.theme.spaces.xxs};\n`\n\nconst Error = styled(DevFormValidityText).attrs(Customisations.ValidityText)``\n\nconst Helper = styled(DevFormHelperText).attrs(Customisations.HelperText)``\n\nconst Label = styled(DevFormLabel).attrs(Customisations.Label)``\n\nconst Input = styled.div`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n`\n\nconst Root = styled(DevFormControl)``\n\nconst Components: FieldContext = {\n Root,\n Input,\n Label,\n Helper,\n Error,\n Indicators,\n ValidationStatus,\n Tooltip,\n}\n\nexport default Components as FieldContext\n","export * from './Developer'\n","export * from './DevFormHelperText'\n","import FormHelperText, { FormHelperTextPublicProps } from '../../FormHelperText'\nimport Theme from '../../../themes/Developer/theme'\nimport { withCustomisedStyle } from '../../../providers'\nimport Styles from './DevFormHelperText.styles'\nimport Customisations from './DevFormHelperText.customisations'\nimport type { FormHelperTextContext } from '../../FormHelperText.composition'\nimport type { FormHelperTextCustomisations } from './customisations'\n\nexport const DevFormHelperText = withCustomisedStyle<\n FormHelperTextPublicProps,\n FormHelperTextContext,\n FormHelperTextCustomisations\n>(FormHelperText, Theme, Styles, Customisations, 'FormHelperText')\n\nexport type DevFormHelperTextCustomisations = FormHelperTextCustomisations\nexport type DevFormHelperTextProps = FormHelperTextPublicProps & FormHelperTextCustomisations\n","import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport type { FormHelperTextContext } from './FormHelperText.composition'\nimport type { StyledProps } from '../providers'\nimport { useFormControl } from '../FormControl/FormControl.context'\nimport useResponsive from '../hooks/useResponsive'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\n\nexport interface FormHelperTextPublicProps {\n /**\n * The id of the `helper text` element.\n */\n id?: string\n /**\n * Component used as message for the helper text\n */\n children?: React.ReactNode\n}\n\nexport interface FormHelperTextProps\n extends FormHelperTextPublicProps,\n StyledProps {}\n\nexport interface FormHelperTextCoreStyle {\n size: string\n invalid: boolean\n}\n\nconst FormHelperText = React.forwardRef(\n (props: FormHelperTextProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const formControl = useFormControl(props)\n\n const getCoreStyle = (): FormHelperTextCoreStyle => ({\n size: formControl.size!,\n invalid: formControl.invalid!,\n })\n\n const { Root } = props.styled!\n return (\n \n {props.children}\n \n )\n },\n)\n\nFormHelperText.propTypes = {\n id: PropTypes.string,\n}\n\nFormHelperText.defaultProps = {}\n\nexport default FormHelperText\n","import styled, { ThemeProps } from '../../../themes/Developer/themed-component'\nimport type { FormHelperTextCoreStyle } from '../../FormHelperText'\nimport type { FormHelperTextContext } from '../../FormHelperText.composition'\nimport type { StyleProps } from '../../../types'\nimport {\n FormHelperTextCustomisations,\n getColour,\n getFontSize,\n getPaddingLeft,\n} from './customisations'\nimport * as themeStyles from '../../../themes/Developer/styles'\n\nexport interface FormHelperTextStyle {\n variant: string\n size: string\n invalid: boolean\n color?: string\n}\n\nexport type FormHelperTextStyleProps = StyleProps<\n FormHelperTextCoreStyle,\n FormHelperTextCustomisations\n> &\n ThemeProps\n\nconst Root = styled.p`\n display: block;\n text-align: start;\n pointer-events: none;\n margin: 0;\n\n /* Colour */\n color: ${(props) => getColour(props)};\n\n /* Typography */\n ${themeStyles.FontFamily}\n font-size: ${(props) => getFontSize(props)};\n`\n\nconst Components: FormHelperTextContext = {\n Root,\n}\n\nexport default Components\n","export * from './models'\nexport * from './colours'\nexport * from './typography'\nexport * from './spaces'\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { FormHelperTextStyleProps } from '../DevFormHelperText.styles'\n\n/** Colour */\nconst defaultColour = (props: FormHelperTextStyleProps) => ({\n colour: props.theme.colours.tertiary.neutral.grey,\n invalidColour: props.theme.colours.tertiary.semantic.red,\n})\n\nexport const getColour = (props: FormHelperTextStyleProps) =>\n theme.getColour(props, defaultColour(props), theme.getState(props.styleProps))\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { FormHelperTextStyleProps } from '../DevFormHelperText.styles'\n\n/** Font size */\nexport const getFontSize = (props: FormHelperTextStyleProps, defaultValue?: keyof theme.FontSize) =>\n theme.getFontSize(props, defaultValue || 'captionXs')\n","import * as theme from '../../../../themes/Common'\nimport { FormHelperTextStyleProps } from '../DevFormHelperText.styles'\n\n/** Padding */\nexport const getPaddingLeft = (props: FormHelperTextStyleProps) =>\n theme.getValueAsPixel(props.theme.spaces.xs)\n","import type { FormHelperTextPublicProps } from '../../FormHelperText'\nimport type { FormHelperTextCustomisations } from './customisations'\n\nexport default (\n props: FormHelperTextPublicProps & FormHelperTextCustomisations,\n): FormHelperTextCustomisations => ({\n colour: props.colour,\n fontSize: props.fontSize,\n})\n","export * from './Developer'\n","export * from './DevFormControl'\n","import FormControl, { FormControlPublicProps } from '../../FormControl'\nimport Theme from '../../../themes/Developer/theme'\nimport type { FormControlContext } from '../../FormControl.composition'\nimport { withStyle } from '../../../providers'\nimport Styles from './DevFormControl.styles'\n\nexport const DevFormControl = withStyle(\n FormControl,\n Theme,\n Styles,\n 'FormControl',\n)\n\nexport type DevFormControlProps = FormControlPublicProps\n","import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport type { FormControlContext as FormControlCoreContext } from './FormControl.composition'\nimport type { StyledProps } from '../providers'\nimport { FormControlContext, FormControlContextProps } from './FormControl.context'\nimport useResponsive from '../hooks/useResponsive'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\n\nexport interface FormControlPublicProps {\n /**\n * True if the field is required, false otherwise\n */\n required?: boolean\n /**\n * True if the field is disabled, false otherwise\n */\n disabled?: boolean\n /**\n * If `true`, the label, input and helper text should be displayed in a disabled state.\n */\n invalid?: boolean\n /**\n * True if the field is readonly, false otherwise\n */\n readOnly?: boolean\n /**\n * The variant to use.\n */\n variant?: 'filled' | 'outlined' | 'standard'\n /**\n * If `true`, the component will take up the full width of its container.\n */\n fullWidth?: boolean\n /**\n * The size of the text field.\n */\n size?: 'small' | 'medium' | 'large'\n /**\n * If `true`, the component will be displayed in focused state.\n */\n focused?: boolean\n /**\n * Component used as children\n */\n children?: React.ReactNode\n}\n\ninterface FormControlProps extends FormControlPublicProps, StyledProps {}\n\nconst FormControl = React.forwardRef(\n (props: FormControlProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const [filled, setFilled] = React.useState(false)\n const [focused, setFocused] = React.useState(false)\n const [hovered, setHovered] = React.useState(false)\n\n const onFilled = React.useCallback(() => setFilled(true), [])\n const onEmpty = React.useCallback(() => setFilled(false), [])\n\n const onFocus = () => setFocused(true)\n const onBlur = () => setFocused(false)\n const onHover = () => setHovered(true)\n const onLeave = () => setHovered(false)\n\n const context: FormControlContextProps = {\n required: props.required,\n disabled: props.disabled,\n invalid: props.invalid,\n readOnly: props.readOnly,\n variant: props.variant,\n filled,\n focused,\n hovered,\n size: props.size!,\n onEmpty,\n onFilled,\n onFocus,\n onBlur,\n onHover,\n onLeave,\n }\n\n const getCoreStyle = () => ({})\n\n const { Root } = props.styled!\n return (\n \n \n {props.children}\n \n \n )\n },\n)\n\nFormControl.propTypes = {\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n invalid: PropTypes.bool,\n readOnly: PropTypes.bool,\n variant: PropTypes.oneOf(['filled', 'outlined', 'standard']),\n fullWidth: PropTypes.bool,\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n focused: PropTypes.bool,\n}\n\nFormControl.defaultProps = {\n variant: 'standard',\n size: 'medium',\n}\n\nexport default FormControl\n","import styled from '../../../themes/Developer/themed-component'\nimport type { FormControlContext } from '../../FormControl.composition'\n\nconst Root = styled.div`\n & > *:not(:first-child) {\n margin: ${(props) => `${props.theme.spaces.xs} 0`};\n }\n`\n\nconst Components: FormControlContext = {\n Root,\n}\n\nexport default Components\n","export * from './Developer'\n","export * from './DevFormValidityText'\n","import FormValidityText, { FormValidityTextPublicProps } from '../../FormValidityText'\nimport Theme from '../../../themes/Developer/theme'\nimport { withCustomisedStyle } from '../../../providers'\nimport Styles from './DevFormValidityText.styles'\nimport type { FormValidityTextContext } from '../../FormValidityText.composition'\nimport Customisations from './DevFormValidityText.customisations'\nimport type { FormValidityTextCustomisations } from './customisations'\n\nexport const DevFormValidityText = withCustomisedStyle<\n FormValidityTextPublicProps,\n FormValidityTextContext,\n FormValidityTextCustomisations\n>(FormValidityText, Theme, Styles, Customisations, 'FormValidityText')\n\nexport type DevFormValidityTextCustomisations = FormValidityTextCustomisations\nexport type DevFormValidityTextProps = FormValidityTextPublicProps & FormValidityTextCustomisations\n","import * as React from 'react'\nimport type { StyledProps } from '../providers'\nimport type { FormValidityTextContext } from './FormValidityText.composition'\nimport { useFormControl } from '../FormControl/FormControl.context'\nimport useResponsive from '../hooks/useResponsive'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\n\nexport interface FormValidityTextPublicProps {\n /**\n * Component used as message for the validity text\n */\n children?: React.ReactNode\n}\n\nexport interface FormValidityTextProps\n extends FormValidityTextPublicProps,\n StyledProps {}\n\nexport interface FormValidityTextCoreStyle {\n size: string\n invalid: boolean\n}\n\nconst FormValidityText = React.forwardRef(\n (props: FormValidityTextProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const formControl = useFormControl(props)\n\n const getCoreStyle = (): FormValidityTextCoreStyle => ({\n size: formControl.size!,\n invalid: formControl.invalid!,\n })\n\n const { Root } = props.styled!\n return (\n \n {props.children}\n \n )\n },\n)\n\nexport default FormValidityText\n","import styled, { ThemeProps } from '../../../themes/Developer/themed-component'\nimport type { FormValidityTextCoreStyle } from '../../FormValidityText'\nimport type { FormValidityTextContext } from '../../FormValidityText.composition'\nimport {\n FormValidityTextCustomisations,\n getColour,\n getFontSize,\n getPaddingLeft,\n} from './customisations'\nimport { StyleProps } from '../../../types'\nimport * as themeStyles from '../../../themes/Developer/styles'\n\nexport type FormValidityTextStyleProps = StyleProps<\n FormValidityTextCoreStyle,\n FormValidityTextCustomisations\n> &\n ThemeProps\n\nconst Root = styled.p`\n display: block;\n text-align: start;\n pointer-events: none;\n margin: 0;\n\n /* Colour */\n color: ${(props) => getColour(props)};\n\n /* Typography */\n ${themeStyles.FontFamily}\n font-size: ${(props) => getFontSize(props)};\n`\n\nconst Components: FormValidityTextContext = {\n Root,\n}\n\nexport default Components\n","export * from './models'\nexport * from './colours'\nexport * from './typography'\nexport * from './spaces'\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { FormValidityTextStyleProps } from '../DevFormValidityText.styles'\n\n/** Colour */\nconst defaultColour = (props: FormValidityTextStyleProps) => ({\n colour: props.theme.colours.tertiary.semantic.green,\n invalidColour: props.theme.colours.tertiary.semantic.red,\n})\n\nexport const getColour = (props: FormValidityTextStyleProps) =>\n theme.getColour(props, defaultColour(props), theme.getState(props.styleProps))\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { FormValidityTextStyleProps } from '../DevFormValidityText.styles'\n\n/** Font size */\nexport const getFontSize = (\n props: FormValidityTextStyleProps,\n defaultValue?: keyof theme.FontSize,\n) => theme.getFontSize(props, defaultValue || 'bodyS')\n","import type { FormValidityTextStyleProps } from '../DevFormValidityText.styles'\nimport { getValueAsPixel } from '../../../../customisations'\n\n/** Padding */\nexport const getPaddingLeft = (props: FormValidityTextStyleProps) =>\n getValueAsPixel(props.theme.spaces.xs)\n","import type { FormValidityTextPublicProps } from '../../FormValidityText'\nimport type { FormValidityTextCustomisations } from './customisations'\n\nexport default (\n props: FormValidityTextPublicProps & FormValidityTextCustomisations,\n): FormValidityTextCustomisations => ({\n colour: props.colour,\n fontSize: props.fontSize,\n})\n","export * from './Developer'\n","export * from './DevFormLabel'\n","import FormLabel, { FormLabelPublicProps } from '../../FormLabel'\nimport Theme from '../../../themes/Developer/theme'\nimport { withCustomisedStyle } from '../../../providers'\nimport Styles from './DevFormLabel.styles'\nimport Customisations from './DevFormLabel.customisations'\nimport type { FormLabelContext } from '../../FormLabel.composition'\nimport type { FormLabelCustomisations } from './customisations'\n\nexport const DevFormLabel = withCustomisedStyle<\n FormLabelPublicProps,\n FormLabelContext,\n FormLabelCustomisations\n>(FormLabel, Theme, Styles, Customisations, 'FormLabel')\n\nexport type DevFormLabelCustomisations = FormLabelCustomisations\nexport type DevFormLabelProps = FormLabelPublicProps & FormLabelCustomisations\n","import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport type { StyledProps } from '../providers'\nimport type { FormLabelContext } from './FormLabel.composition'\nimport { useFormControl } from '../FormControl/FormControl.context'\nimport useResponsive from '../hooks/useResponsive'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\nimport { getTestId } from '../utils/test'\n\nexport interface FormLabelPublicProps {\n /**\n * The id of the `label` element.\n */\n id?: string\n /**\n * HTML tag or a custom component that will used as Root element\n */\n as?: any\n /**\n * The id of the element the label is bound to\n */\n htmlFor?: string\n /**\n * The size of the text field.\n */\n size?: 'small' | 'medium' | 'large'\n /**\n * If `true`, the `input` element will be disabled.\n */\n disabled?: boolean\n /**\n * It prevents the user from changing the value of the field\n * (not from interacting with the field).\n */\n readOnly?: boolean\n /**\n * If `true`, the label will be displayed in an error state.\n */\n invalid?: boolean\n /**\n * If `true`, the component will be displayed in focused state.\n */\n focused?: boolean\n /**\n * If `true`, the label is displayed as required and the `input` element` will be required.\n */\n required?: boolean\n /**\n * Component used as message for the label\n */\n children?: React.ReactNode\n}\n\ninterface FormLabelProps extends FormLabelPublicProps, StyledProps {}\n\nexport interface FormLabelCoreStyle {\n shrink: boolean\n variant: string\n size: string\n invalid: boolean\n}\n\nconst FormLabel = React.forwardRef(\n (props: FormLabelProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const formControl = useFormControl(props)\n\n const getCoreStyle = (): FormLabelCoreStyle => ({\n shrink: formControl.filled || formControl.focused || false,\n variant: formControl.variant!,\n size: formControl.size!,\n invalid: formControl.invalid!,\n })\n\n const renderRequireSymbol = () => {\n const { RequiredIndicator } = props.styled!\n return formControl.required ? (\n \n *\n \n ) : null\n }\n\n const { Root } = props.styled!\n return (\n \n {props.children}\n {renderRequireSymbol()}\n \n )\n },\n)\n\nFormLabel.propTypes = {\n id: PropTypes.string,\n as: PropTypes.any,\n htmlFor: PropTypes.string,\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n invalid: PropTypes.bool,\n focused: PropTypes.bool,\n required: PropTypes.bool,\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n}\n\nFormLabel.defaultProps = {\n as: 'label',\n size: 'medium',\n}\n\nexport default FormLabel\n","import styled, { css, ThemeProps } from '../../../themes/Developer/themed-component'\nimport type { FormLabelCoreStyle } from '../../FormLabel'\nimport type { FormLabelContext } from '../../FormLabel.composition'\nimport { FormLabelCustomisations, getFontSize, getBgColour, getColour } from './customisations'\nimport * as themeStyles from '../../../themes/Developer/styles'\nimport { StyleProps } from '../../../types'\n\nexport type FormLabelStyleProps = StyleProps &\n ThemeProps\n\nexport const getFilledShrinkLabelTop = (props: FormLabelStyleProps) =>\n ({\n // edge-case for small size\n small: '4px',\n medium: props.theme.spaces.xs,\n large: props.theme.spaces.xs,\n }[props.styleProps.size])\n\nconst StandardLabel = css`\n text-align: start;\n`\n\nconst FilledShrinkLabel = css`\n z-index: 1;\n position: absolute;\n top: ${(props) => getFilledShrinkLabelTop(props)};\n`\n\nconst DefaultFilledLabel = css`\n z-index: 1;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n`\n\nconst FilledLabel = css`\n /** Visuals */\n line-height: ${(props) => props.theme.typography.proximaNova.lineHeight.captionXxs};\n\n /** Spaces */\n left: ${(props) => props.theme.spaces.xs};\n\n ${(props) => !props.styleProps.shrink && DefaultFilledLabel}\n ${(props) => props.styleProps.shrink && FilledShrinkLabel}\n`\n\nconst OutlinedLabelPadding = css`\n padding-left: ${(props) => props.theme.spaces.xxs};\n padding-right: ${(props) => props.theme.spaces.xxs};\n`\n\nconst OutlinedShrinkLabel = css`\n z-index: 1;\n position: absolute;\n left: ${(props) => props.theme.spaces.xxs};\n top: 0;\n transform: translateY(-50%);\n\n ${OutlinedLabelPadding}\n`\n\nconst DefaultOutlinedLabel = css`\n z-index: 1;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n`\n\nconst OutlinedLabel = css`\n /** Spaces */\n left: ${(props) => props.theme.spaces.xs};\n\n ${(props) => !props.styleProps.shrink && DefaultOutlinedLabel};\n ${(props) => props.styleProps.shrink && OutlinedShrinkLabel};\n`\n\nconst RequiredIndicator = styled.span``\n\nconst Root = styled.label`\n display: block;\n text-align: start;\n\n /* Colour */\n color: ${(props) => getColour(props)};\n background-color: ${(props) => getBgColour(props)};\n\n /* Typography */\n ${themeStyles.FontFamily}\n font-size: ${(props) => getFontSize(props)};\n\n /* Variant */\n ${(props) => props.styleProps.variant === 'standard' && StandardLabel}\n ${(props) => props.styleProps.variant === 'filled' && FilledLabel}\n ${(props) => props.styleProps.variant === 'outlined' && OutlinedLabel}\n`\n\nconst Components: FormLabelContext = {\n Root,\n RequiredIndicator,\n}\n\nexport default Components\n","export * from './models'\nexport * from './colours'\nexport * from './typography'\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { FormLabelStyleProps } from '../DevFormLabel.styles'\n\n/** Colour */\nconst defaultColour = (props: FormLabelStyleProps) => ({\n colour: props.theme.colours.tints.charcoal[100],\n invalidColour: props.theme.colours.tertiary.semantic.red,\n})\n\nexport const getColour = (props: FormLabelStyleProps) =>\n theme.getColour(props, defaultColour(props), theme.getState(props.styleProps))\n\n/** Background colour */\nexport const getBgColour = (props: FormLabelStyleProps) => {\n if (props.styleProps.variant === 'outlined')\n if (props.styleProps.shrink) return props.theme.colours.tertiary.neutral.white\n\n return 'initial'\n}\n","import * as theme from '../../../../themes/Developer/proxima-nova'\nimport type { FormLabelStyleProps } from '../DevFormLabel.styles'\nimport { fontSizes } from '../../../../Input/themes/Developer/customisations'\n\nconst shrinkFontSize = {\n small: 'captionXs',\n medium: 'bodyXs',\n large: 'bodyS',\n}\n\n/** Font size */\nconst getFilledFontSize = (props: FormLabelStyleProps) => {\n const value = props.styleProps.shrink\n ? shrinkFontSize[props.styleProps.size]\n : fontSizes[props.styleProps.size]\n\n return theme.getFontSize(props, value)\n}\n\nconst defaultFontSize = {\n small: 'bodyXs',\n medium: 'bodyS',\n large: 'bodyM',\n}\n\nconst defaultFilledFontSize = {\n small: 'captionXs',\n medium: 'captionXs',\n large: 'captionS',\n}\n\nexport const getDefaultFontSize = (props: FormLabelStyleProps) => {\n return theme.getFontSize(props, defaultFontSize[props.styleProps.size])\n}\n\nexport const getFontSize = (props: FormLabelStyleProps) => {\n switch (props.styleProps.variant) {\n case 'filled':\n return theme.getFontSize(props, defaultFilledFontSize[props.styleProps.size])\n case 'outlined':\n return getFilledFontSize(props)\n default:\n return getDefaultFontSize(props)\n }\n}\n","import type { FormLabelPublicProps } from '../../FormLabel'\nimport type { FormLabelCustomisations } from './customisations'\n\nexport default (\n props: FormLabelPublicProps & FormLabelCustomisations,\n): FormLabelCustomisations => ({\n colour: props.colour,\n fontSize: props.fontSize,\n})\n","export * from './Developer'\n","export * from './DevTooltip'\n","import Tooltip, { TooltipPublicProps } from '../../Tooltip'\nimport Theme from '../../../themes/Developer/theme'\nimport { withCustomisedStyle } from '../../../providers'\nimport Styles from './DevTooltip.styles'\nimport Customisations from './DevTooltip.customisations'\nimport type { TooltipContext } from '../../Tooltip.composition'\nimport type { TooltipCustomisations } from './customisations'\n\nexport const DevTooltip = withCustomisedStyle<\n TooltipPublicProps,\n TooltipContext,\n TooltipCustomisations\n>(Tooltip, Theme, Styles, Customisations, 'Tooltip')\n\nexport type DevTooltipCustomisations = TooltipCustomisations\nexport type DevTooltipProps = TooltipPublicProps & TooltipCustomisations\n","import * as React from 'react'\nimport { usePopper } from 'react-popper'\nimport { faSolidQuestionCircle, IconDefinition } from '../utils/fontawesome'\nimport Portal from '../Portal/Portal'\nimport useResponsive from '../hooks/useResponsive'\nimport useHover from '../hooks/useHover'\nimport getAttributes from '../attributes'\nimport { DataAttributesPrefix } from '../constants'\nimport { getTestId } from '../utils/test'\nimport type { StyledProps } from '../providers'\nimport type { TooltipContext } from './Tooltip.composition'\n\nexport interface TooltipPublicProps {\n /**\n * @ignore\n */\n className?: string\n /**\n * Icon of the tooltip\n */\n icon?: IconDefinition\n /**\n * Tooltip message.\n */\n message?: string | React.ReactNode\n /**\n * Placement of the tooltip\n */\n placement?:\n | 'top'\n | 'right'\n | 'left'\n | 'bottom'\n | 'top-start'\n | 'top-end'\n | 'bottom-start'\n | 'bottom-end'\n | 'right-start'\n | 'right-end'\n | 'left-start'\n | 'left-end'\n /**\n * True to display the arrow, false otherwise\n */\n withArrow?: boolean\n /**\n * Max width of the tooltip\n */\n maxWidth?: number\n /**\n * The stack order of an element\n */\n zIndex?: number\n /**\n * Message to display in the tooltip\n */\n children?: React.ReactNode\n}\n\nexport interface TooltipProps extends TooltipPublicProps, StyledProps {}\n\nexport interface TooltipCoreStyle {\n placement: string\n withArrow?: boolean\n maxWidth: number\n zIndex?: number\n}\n\nconst Tooltip = React.forwardRef((props: TooltipProps, forwardRef: React.Ref) => {\n const { ref } = useResponsive({ ref: forwardRef })\n\n const [iconRef, hovered] = useHover()\n\n const [popperElement, setPopperElement] = React.useState(null)\n const [arrowElement, setArrowElement] = React.useState(null)\n\n const { styles, attributes } = usePopper(iconRef.current, popperElement, {\n placement: props.placement!,\n modifiers: [\n {\n name: 'arrow',\n options: {\n element: arrowElement,\n padding: 8,\n },\n },\n {\n name: 'offset',\n options: {\n offset: [0, 10],\n },\n },\n ],\n })\n\n const getCoreStyle = (): TooltipCoreStyle => ({\n placement: props.placement!,\n withArrow: props.withArrow,\n maxWidth: props.maxWidth!,\n zIndex: props.zIndex,\n })\n\n const renderIcon = () => {\n const children = React.Children.toArray(props.children)\n if (children.length > 0) {\n const child: any = children[0]\n return React.cloneElement(child, {\n ...child.props,\n ref: iconRef,\n })\n }\n\n const { Icon } = props.styled!\n return (\n \n )\n }\n\n const renderArrow = () => {\n const { Arrow } = props.styled!\n return props.withArrow ? (\n \n ) : null\n }\n\n const renderMessage = () => {\n const { Message } = props.styled!\n return hovered ? (\n \n \n {props.message}\n {renderArrow()}\n \n \n ) : null\n }\n\n const { Root } = props.styled!\n return (\n \n {renderIcon()}\n {renderMessage()}\n \n )\n})\n\nTooltip.defaultProps = {\n placement: 'bottom',\n withArrow: true,\n maxWidth: 300,\n}\n\nexport default Tooltip\n","module.exports = require(\"react-popper\");","const getContainer = (container: any) => (typeof container === 'function' ? container() : container)\n\nexport default getContainer\n","const HTMLElementType = (\n props: { [key: string]: unknown },\n propName: string,\n componentName: string,\n location: string,\n propFullName: string,\n): Error | null => {\n if (process.env.NODE_ENV === 'production') {\n return null\n }\n\n const { [propName]: propValue } = props\n const safePropName = propFullName || propName\n\n if (propValue == null) {\n return null\n }\n\n if (propValue && (propValue as any).nodeType !== 1) {\n return new Error(\n `Invalid ${location} \\`${safePropName}\\` supplied to \\`${componentName}\\`. ` +\n `Expected an HTMLElement.`,\n )\n }\n\n return null\n}\n\nexport default HTMLElementType\n","import styled, { css, ThemeProps } from '../../../themes/Developer/themed-component'\nimport { DevFontAwesomeIcon } from '../../../Icon'\nimport {\n getBgColour,\n getBorder,\n getColour,\n getFontSize,\n getIconColour,\n getIconBorder,\n getIconPadding,\n getIconBorderColour,\n getIconBorderRadius,\n TooltipCustomisations,\n} from './customisations'\nimport { Customisations } from './DevTooltip.customisations'\nimport { includes } from '../../../utils/lodash'\nimport type { TooltipContext } from '../../Tooltip.composition'\nimport type { StyleProps } from '../../../types'\nimport type { TooltipCoreStyle } from '../../Tooltip'\nimport * as themeStyles from '../../../themes/Developer/styles'\n\nexport type TooltipStyleProps = StyleProps & ThemeProps\n\nconst arrowSize = 8\n\nconst ArrowRight = css`\n right: -${arrowSize / 2}px;\n`\n\nconst ArrowBottom = css`\n bottom: -${arrowSize / 2}px;\n`\n\nconst ArrowLeft = css`\n left: -${arrowSize / 2}px;\n`\n\nconst ArrowTop = css`\n top: -${arrowSize / 2}px;\n`\n\nconst FocusedIconState = css`\n :focus {\n color: ${(props) => getIconColour(props, 'focus')};\n border-color: ${(props) => getIconBorderColour(props, 'focus')};\n padding: ${(props) => getIconPadding(props)};\n border-radius: ${(props) => getIconBorderRadius(props)};\n }\n`\n\nconst HoveredIconState = css`\n :hover {\n color: ${(props) => getIconColour(props, 'hover')};\n }\n`\n\nconst Icon = styled(DevFontAwesomeIcon).attrs(Customisations.Icon)