@ag.ds-next/core
Advanced tools
Comparing version 3.0.0 to 3.0.1
# @ag.ds-next/core | ||
## 3.0.1 | ||
### Patch Changes | ||
- d43864f0e: Updated documentation | ||
- 27b6ef36b: Added comments to each prop to improve documentation | ||
- b67fa1685: Fixed bug in the `Core` component where if no theme was supplied, the default theme (GOLD) was not being applied. | ||
- 042fb9e8c: Added `@babel/runtime` as a package dependency. | ||
## 3.0.0 | ||
@@ -4,0 +13,0 @@ |
@@ -5,4 +5,7 @@ 'use strict'; | ||
var _defineProperty = require('@babel/runtime/helpers/defineProperty'); | ||
var react$1 = require('@emotion/react'); | ||
var react = require('react'); | ||
var jsxRuntime = require('@emotion/react/jsx-runtime'); | ||
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray'); | ||
var facepaint = require('facepaint'); | ||
@@ -15,3 +18,3 @@ | ||
// Default theme from GOLD. | ||
const goldTheme = { | ||
var goldTheme = { | ||
lightForegroundText: '#313131', | ||
@@ -52,46 +55,31 @@ lightForegroundAction: '#00698f', | ||
function _extends() { | ||
_extends = Object.assign || function (target) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
var source = arguments[i]; | ||
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
for (var key in source) { | ||
if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
target[key] = source[key]; | ||
} | ||
} | ||
} | ||
return target; | ||
}; | ||
return _extends.apply(this, arguments); | ||
} | ||
const DefaultLinkComponent = react.forwardRef(function DefaultLinkComponent(props, ref) { | ||
return react$1.jsx("a", _extends({ | ||
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
var DefaultLinkComponent = /*#__PURE__*/react.forwardRef(function DefaultLinkComponent(props, ref) { | ||
return jsxRuntime.jsx("a", _objectSpread$3({ | ||
ref: ref | ||
}, props)); | ||
}); | ||
const coreContext = react.createContext({ | ||
var coreContext = /*#__PURE__*/react.createContext({ | ||
linkComponent: DefaultLinkComponent | ||
}); | ||
function CoreProvider({ | ||
linkComponent, | ||
children | ||
}) { | ||
return react$1.jsx(coreContext.Provider, { | ||
function CoreProvider(_ref) { | ||
var linkComponent = _ref.linkComponent, | ||
children = _ref.children; | ||
return jsxRuntime.jsx(coreContext.Provider, { | ||
value: { | ||
linkComponent: linkComponent ?? DefaultLinkComponent | ||
} | ||
}, children); | ||
linkComponent: linkComponent !== null && linkComponent !== void 0 ? linkComponent : DefaultLinkComponent | ||
}, | ||
children: children | ||
}); | ||
} | ||
function useLinkComponent() { | ||
const { | ||
linkComponent | ||
} = react.useContext(coreContext); | ||
var _useContext = react.useContext(coreContext), | ||
linkComponent = _useContext.linkComponent; | ||
return linkComponent; | ||
} | ||
const themeVars = { | ||
var themeVars = { | ||
// Light | ||
@@ -133,6 +121,16 @@ lightForegroundText: '--agds-light-foreground-text', | ||
function mergeTheme(defaultTheme, theme) { | ||
return Object.fromEntries(Object.entries(themeVars).map(([key, variableName]) => [variableName, theme[key] ?? defaultTheme[key]])); | ||
return Object.fromEntries(Object.entries(themeVars).map(function (_ref) { | ||
var _ref3; | ||
var _ref2 = _slicedToArray(_ref, 2), | ||
key = _ref2[0], | ||
variableName = _ref2[1]; | ||
return [variableName, (_ref3 = theme && theme[key]) !== null && _ref3 !== void 0 ? _ref3 : defaultTheme[key]]; | ||
})); | ||
} | ||
const boxPaletteVars = { | ||
var _css, _css2; | ||
var boxPaletteVars = { | ||
foregroundText: '--agds-foreground-text', | ||
@@ -150,46 +148,30 @@ foregroundAction: '--agds-foreground-action', | ||
}; | ||
const boxPalettes = { | ||
light: /*#__PURE__*/react$1.css({ | ||
[boxPaletteVars.foregroundText]: `var(${themeVars.lightForegroundText})`, | ||
[boxPaletteVars.foregroundAction]: `var(${themeVars.lightForegroundAction})`, | ||
[boxPaletteVars.foregroundFocus]: `var(${themeVars.lightForegroundFocus})`, | ||
[boxPaletteVars.foregroundMuted]: `var(${themeVars.lightForegroundMuted})`, | ||
[boxPaletteVars.backgroundBody]: `var(${themeVars.lightBackgroundBody})`, | ||
[boxPaletteVars.backgroundShade]: `var(${themeVars.lightBackgroundShade})`, | ||
[boxPaletteVars.backgroundBodyAlt]: `var(${themeVars.lightBackgroundBodyAlt})`, | ||
[boxPaletteVars.backgroundShadeAlt]: `var(${themeVars.lightBackgroundShadeAlt})`, | ||
[boxPaletteVars.border]: `var(${themeVars.lightBorder})`, | ||
[boxPaletteVars.borderMuted]: `var(${themeVars.lightBorderMuted})`, | ||
[boxPaletteVars.borderInput]: `var(${themeVars.lightBorderInput})` | ||
}, process.env.NODE_ENV === "production" ? "" : ";label:light;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JRIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */"), | ||
dark: /*#__PURE__*/react$1.css({ | ||
[boxPaletteVars.foregroundText]: `var(${themeVars.darkForegroundText})`, | ||
[boxPaletteVars.foregroundAction]: `var(${themeVars.darkForegroundAction})`, | ||
[boxPaletteVars.foregroundFocus]: `var(${themeVars.darkForegroundFocus})`, | ||
[boxPaletteVars.foregroundMuted]: `var(${themeVars.darkForegroundMuted})`, | ||
[boxPaletteVars.backgroundBody]: `var(${themeVars.darkBackgroundBody})`, | ||
[boxPaletteVars.backgroundShade]: `var(${themeVars.darkBackgroundShade})`, | ||
[boxPaletteVars.backgroundBodyAlt]: `var(${themeVars.darkBackgroundBodyAlt})`, | ||
[boxPaletteVars.backgroundShadeAlt]: `var(${themeVars.darkBackgroundShadeAlt})`, | ||
[boxPaletteVars.border]: `var(${themeVars.darkBorder})`, | ||
[boxPaletteVars.borderMuted]: `var(${themeVars.darkBorderMuted})`, | ||
[boxPaletteVars.borderInput]: `var(${themeVars.darkBorderInput})` | ||
}, process.env.NODE_ENV === "production" ? "" : ";label:dark;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNPIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */") | ||
var boxPalettes = { | ||
light: | ||
/*#__PURE__*/ | ||
/*#__PURE__*/ | ||
react$1.css((_css = {}, _defineProperty(_css, boxPaletteVars.foregroundText, "var(".concat(themeVars.lightForegroundText, ")")), _defineProperty(_css, boxPaletteVars.foregroundAction, "var(".concat(themeVars.lightForegroundAction, ")")), _defineProperty(_css, boxPaletteVars.foregroundFocus, "var(".concat(themeVars.lightForegroundFocus, ")")), _defineProperty(_css, boxPaletteVars.foregroundMuted, "var(".concat(themeVars.lightForegroundMuted, ")")), _defineProperty(_css, boxPaletteVars.backgroundBody, "var(".concat(themeVars.lightBackgroundBody, ")")), _defineProperty(_css, boxPaletteVars.backgroundShade, "var(".concat(themeVars.lightBackgroundShade, ")")), _defineProperty(_css, boxPaletteVars.backgroundBodyAlt, "var(".concat(themeVars.lightBackgroundBodyAlt, ")")), _defineProperty(_css, boxPaletteVars.backgroundShadeAlt, "var(".concat(themeVars.lightBackgroundShadeAlt, ")")), _defineProperty(_css, boxPaletteVars.border, "var(".concat(themeVars.lightBorder, ")")), _defineProperty(_css, boxPaletteVars.borderMuted, "var(".concat(themeVars.lightBorderMuted, ")")), _defineProperty(_css, boxPaletteVars.borderInput, "var(".concat(themeVars.lightBorderInput, ")")), _css), process.env.NODE_ENV === "production" ? "" : ";label:light;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JRIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:light;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JRIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */"), | ||
dark: | ||
/*#__PURE__*/ | ||
/*#__PURE__*/ | ||
react$1.css((_css2 = {}, _defineProperty(_css2, boxPaletteVars.foregroundText, "var(".concat(themeVars.darkForegroundText, ")")), _defineProperty(_css2, boxPaletteVars.foregroundAction, "var(".concat(themeVars.darkForegroundAction, ")")), _defineProperty(_css2, boxPaletteVars.foregroundFocus, "var(".concat(themeVars.darkForegroundFocus, ")")), _defineProperty(_css2, boxPaletteVars.foregroundMuted, "var(".concat(themeVars.darkForegroundMuted, ")")), _defineProperty(_css2, boxPaletteVars.backgroundBody, "var(".concat(themeVars.darkBackgroundBody, ")")), _defineProperty(_css2, boxPaletteVars.backgroundShade, "var(".concat(themeVars.darkBackgroundShade, ")")), _defineProperty(_css2, boxPaletteVars.backgroundBodyAlt, "var(".concat(themeVars.darkBackgroundBodyAlt, ")")), _defineProperty(_css2, boxPaletteVars.backgroundShadeAlt, "var(".concat(themeVars.darkBackgroundShadeAlt, ")")), _defineProperty(_css2, boxPaletteVars.border, "var(".concat(themeVars.darkBorder, ")")), _defineProperty(_css2, boxPaletteVars.borderMuted, "var(".concat(themeVars.darkBorderMuted, ")")), _defineProperty(_css2, boxPaletteVars.borderInput, "var(".concat(themeVars.darkBorderInput, ")")), _css2), process.env.NODE_ENV === "production" ? "" : ";label:dark;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNPIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:dark;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNPIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */") | ||
}; | ||
const boxPalette = { | ||
foregroundText: `var(${boxPaletteVars.foregroundText})`, | ||
foregroundAction: `var(${boxPaletteVars.foregroundAction})`, | ||
foregroundFocus: `var(${boxPaletteVars.foregroundFocus})`, | ||
foregroundMuted: `var(${boxPaletteVars.foregroundMuted})`, | ||
backgroundBody: `var(${boxPaletteVars.backgroundBody})`, | ||
backgroundShade: `var(${boxPaletteVars.backgroundShade})`, | ||
backgroundBodyAlt: `var(${boxPaletteVars.backgroundBodyAlt})`, | ||
backgroundShadeAlt: `var(${boxPaletteVars.backgroundShadeAlt})`, | ||
border: `var(${boxPaletteVars.border})`, | ||
borderMuted: `var(${boxPaletteVars.borderMuted})`, | ||
borderInput: `var(${boxPaletteVars.borderInput})` | ||
var boxPalette = { | ||
foregroundText: "var(".concat(boxPaletteVars.foregroundText, ")"), | ||
foregroundAction: "var(".concat(boxPaletteVars.foregroundAction, ")"), | ||
foregroundFocus: "var(".concat(boxPaletteVars.foregroundFocus, ")"), | ||
foregroundMuted: "var(".concat(boxPaletteVars.foregroundMuted, ")"), | ||
backgroundBody: "var(".concat(boxPaletteVars.backgroundBody, ")"), | ||
backgroundShade: "var(".concat(boxPaletteVars.backgroundShade, ")"), | ||
backgroundBodyAlt: "var(".concat(boxPaletteVars.backgroundBodyAlt, ")"), | ||
backgroundShadeAlt: "var(".concat(boxPaletteVars.backgroundShadeAlt, ")"), | ||
border: "var(".concat(boxPaletteVars.border, ")"), | ||
borderMuted: "var(".concat(boxPaletteVars.borderMuted, ")"), | ||
borderInput: "var(".concat(boxPaletteVars.borderInput, ")") | ||
}; | ||
// Tokens | ||
const breakpoint = { | ||
var breakpoint = { | ||
xs: 0, | ||
@@ -201,22 +183,22 @@ sm: 576, | ||
}; | ||
const mediaQuery = { | ||
var mediaQuery = { | ||
min: { | ||
xs: `@media(min-width: ${breakpoint.xs}px)`, | ||
sm: `@media(min-width: ${breakpoint.sm}px)`, | ||
md: `@media(min-width: ${breakpoint.md}px)`, | ||
lg: `@media(min-width: ${breakpoint.lg}px)`, | ||
xl: `@media(min-width: ${breakpoint.xl}px)` | ||
xs: "@media(min-width: ".concat(breakpoint.xs, "px)"), | ||
sm: "@media(min-width: ".concat(breakpoint.sm, "px)"), | ||
md: "@media(min-width: ".concat(breakpoint.md, "px)"), | ||
lg: "@media(min-width: ".concat(breakpoint.lg, "px)"), | ||
xl: "@media(min-width: ".concat(breakpoint.xl, "px)") | ||
}, | ||
max: { | ||
xs: `@media(max-width: ${breakpoint.sm - 1}px)`, | ||
sm: `@media(max-width: ${breakpoint.md - 1}px)`, | ||
md: `@media(max-width: ${breakpoint.lg - 1}px)`, | ||
lg: `@media(max-width: ${breakpoint.xl - 1}px)` | ||
xs: "@media(max-width: ".concat(breakpoint.sm - 1, "px)"), | ||
sm: "@media(max-width: ".concat(breakpoint.md - 1, "px)"), | ||
md: "@media(max-width: ".concat(breakpoint.lg - 1, "px)"), | ||
lg: "@media(max-width: ".concat(breakpoint.xl - 1, "px)") | ||
} | ||
}; | ||
const rem = 16; | ||
var rem = 16; | ||
/** "unit" used for all type and grid calculations */ | ||
const unit = 4; | ||
const font = { | ||
var unit = 4; | ||
var font = { | ||
body: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", | ||
@@ -227,3 +209,3 @@ monospace: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace" | ||
/** Use as rem values */ | ||
const fontSize = { | ||
var fontSize = { | ||
xs: { | ||
@@ -248,3 +230,3 @@ xs: 0.875, | ||
}; | ||
const fontWeight = { | ||
var fontWeight = { | ||
normal: 'normal', | ||
@@ -255,15 +237,15 @@ bold: 'bold' | ||
/** lineHeight-map - Predetermined line-height mapped to keyword */ | ||
const lineHeight = { | ||
var lineHeight = { | ||
nospace: 1, | ||
heading: 1.25, | ||
default: 1.5 | ||
"default": 1.5 | ||
}; | ||
function mapSpacing(v) { | ||
return `${v}rem`; | ||
return "".concat(v, "rem"); | ||
} | ||
const containerPadding = { | ||
var containerPadding = { | ||
xs: 0.75, | ||
md: 2 | ||
}; | ||
const maxWidth = { | ||
var maxWidth = { | ||
bodyText: '42em', | ||
@@ -275,4 +257,4 @@ container: '80rem', | ||
}; | ||
const borderRadius = unit; | ||
const borderWidth = { | ||
var borderRadius = unit; | ||
var borderWidth = { | ||
sm: 1, | ||
@@ -283,20 +265,29 @@ md: 2, | ||
}; | ||
const tokens = { | ||
breakpoint, | ||
mediaQuery, | ||
rem, | ||
unit, | ||
font, | ||
fontSize, | ||
fontWeight, | ||
lineHeight, | ||
containerPadding, | ||
maxWidth, | ||
borderRadius, | ||
borderWidth | ||
var tokens = { | ||
breakpoint: breakpoint, | ||
mediaQuery: mediaQuery, | ||
rem: rem, | ||
unit: unit, | ||
font: font, | ||
fontSize: fontSize, | ||
fontWeight: fontWeight, | ||
lineHeight: lineHeight, | ||
containerPadding: containerPadding, | ||
maxWidth: maxWidth, | ||
borderRadius: borderRadius, | ||
borderWidth: borderWidth | ||
}; | ||
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; } | ||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
/** Ensures that font-size and line-height snaps to the 4px grid. */ | ||
const fontGridVars = { | ||
var fontGridVars = { | ||
xs: { | ||
@@ -306,3 +297,3 @@ size: '--typography-xs', | ||
heading: '--typography-xs-heading', | ||
default: '--typography-xs-default' | ||
"default": '--typography-xs-default' | ||
}, | ||
@@ -313,3 +304,3 @@ sm: { | ||
heading: '--typography-sm-heading', | ||
default: '--typography-sm-default' | ||
"default": '--typography-sm-default' | ||
}, | ||
@@ -320,3 +311,3 @@ md: { | ||
heading: '--typography-md-heading', | ||
default: '--typography-md-default' | ||
"default": '--typography-md-default' | ||
}, | ||
@@ -327,3 +318,3 @@ lg: { | ||
heading: '--typography-lg-heading', | ||
default: '--typography-lg-default' | ||
"default": '--typography-lg-default' | ||
}, | ||
@@ -334,3 +325,3 @@ xl: { | ||
heading: '--typography-xl-heading', | ||
default: '--typography-xl-default' | ||
"default": '--typography-xl-default' | ||
}, | ||
@@ -341,3 +332,3 @@ xxl: { | ||
heading: '--typography-xxl-heading', | ||
default: '--typography-xxl-default' | ||
"default": '--typography-xxl-default' | ||
}, | ||
@@ -348,30 +339,49 @@ xxxl: { | ||
heading: '--typography-xxxl-heading', | ||
default: '--typography-xxxl-default' | ||
"default": '--typography-xxxl-default' | ||
} | ||
}; | ||
const fontScales = Object.keys(tokens.fontSize); | ||
const lineHeights = Object.keys(tokens.lineHeight); | ||
var fontScales = Object.keys(tokens.fontSize); | ||
var lineHeights = Object.keys(tokens.lineHeight); | ||
function generateFontGrid() { | ||
let cssVars = {}; | ||
var cssVars = {}; | ||
for (const scale of fontScales) { | ||
const scaleVars = []; | ||
const fontSizes = Object.keys(tokens.fontSize[scale]); | ||
var _iterator = _createForOfIteratorHelper(fontScales), | ||
_step; | ||
for (const size of fontSizes) { | ||
scaleVars.push([fontGridVars[size]['size'], `${tokens.fontSize[scale][size]}rem`]); | ||
try { | ||
for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
var scale = _step.value; | ||
var scaleVars = []; | ||
var fontSizes = Object.keys(tokens.fontSize[scale]); | ||
for (const lineHeight of lineHeights) { | ||
scaleVars.push([fontGridVars[size][lineHeight], calculateLineHeight(scale, size, lineHeight)]); | ||
for (var _i = 0, _fontSizes = fontSizes; _i < _fontSizes.length; _i++) { | ||
var size = _fontSizes[_i]; | ||
scaleVars.push([fontGridVars[size]['size'], "".concat(tokens.fontSize[scale][size], "rem")]); | ||
var _iterator2 = _createForOfIteratorHelper(lineHeights), | ||
_step2; | ||
try { | ||
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { | ||
var _lineHeight = _step2.value; | ||
scaleVars.push([fontGridVars[size][_lineHeight], calculateLineHeight(scale, size, _lineHeight)]); | ||
} | ||
} catch (err) { | ||
_iterator2.e(err); | ||
} finally { | ||
_iterator2.f(); | ||
} | ||
} | ||
} | ||
if (tokens.breakpoint[scale] === 0) { | ||
cssVars = { ...cssVars, | ||
...Object.fromEntries(scaleVars) | ||
}; | ||
} else { | ||
const key = tokens.mediaQuery.min[scale]; | ||
cssVars[key] = Object.fromEntries(scaleVars); | ||
if (tokens.breakpoint[scale] === 0) { | ||
cssVars = _objectSpread$2(_objectSpread$2({}, cssVars), Object.fromEntries(scaleVars)); | ||
} else { | ||
var key = tokens.mediaQuery.min[scale]; | ||
cssVars[key] = Object.fromEntries(scaleVars); | ||
} | ||
} | ||
} catch (err) { | ||
_iterator.e(err); | ||
} finally { | ||
_iterator.f(); | ||
} | ||
@@ -381,6 +391,6 @@ | ||
} | ||
const fontGrid = (fontSize, lineHeight) => { | ||
var fontGrid = function fontGrid(fontSize, lineHeight) { | ||
if (typeof fontSize === 'number') { | ||
return { | ||
fontSize: `${fontSize}rem`, | ||
fontSize: "".concat(fontSize, "rem"), | ||
lineHeight: calculateLineHeight('sm', fontSize, lineHeight) | ||
@@ -391,17 +401,17 @@ }; | ||
return { | ||
fontSize: `var(${fontGridVars[fontSize]['size']})`, | ||
lineHeight: `var(${fontGridVars[fontSize][lineHeight]})` | ||
fontSize: "var(".concat(fontGridVars[fontSize]['size'], ")"), | ||
lineHeight: "var(".concat(fontGridVars[fontSize][lineHeight], ")") | ||
}; | ||
}; | ||
const calculateLineHeight = (scale, fontSize, lineHeight) => { | ||
const fSizeRem = typeof fontSize === 'number' ? fontSize : tokens.fontSize[scale][fontSize]; | ||
const fSizePx = fSizeRem * tokens.rem; | ||
const lHeight = tokens.lineHeight[lineHeight]; | ||
const totalHeight = Math.round(fSizePx * lHeight / tokens.unit) * tokens.unit; | ||
const calcLineHeight = totalHeight / fSizePx; | ||
var calculateLineHeight = function calculateLineHeight(scale, fontSize, lineHeight) { | ||
var fSizeRem = typeof fontSize === 'number' ? fontSize : tokens.fontSize[scale][fontSize]; | ||
var fSizePx = fSizeRem * tokens.rem; | ||
var lHeight = tokens.lineHeight[lineHeight]; | ||
var totalHeight = Math.round(fSizePx * lHeight / tokens.unit) * tokens.unit; | ||
var calcLineHeight = totalHeight / fSizePx; | ||
return calcLineHeight; | ||
}; | ||
const printTheme = { | ||
var printTheme = { | ||
lightForegroundText: 'black', | ||
@@ -441,33 +451,35 @@ lightForegroundAction: 'black', | ||
function Core({ | ||
children, | ||
applyReset = true, | ||
theme, | ||
linkComponent | ||
}) { | ||
return react$1.jsx(CoreProvider, { | ||
linkComponent: linkComponent | ||
}, react$1.jsx(react$1.Global, { | ||
styles: [{ | ||
':root': { ...(theme ? mergeTheme(goldTheme, theme) : goldTheme), | ||
...generateFontGrid() | ||
}, | ||
// Reset the global theme in print mode to black & white | ||
// Note: Components can also contain print specific styles | ||
'@media print': { | ||
':root': mergeTheme(goldTheme, printTheme) | ||
} | ||
}, { | ||
// Apply the light pallet by default | ||
'body,html': boxPalettes.light | ||
}, applyReset && { | ||
// FIXME: apply the css reset | ||
'body, html': { | ||
margin: 0, | ||
padding: 0, | ||
background: boxPalette.backgroundBody, | ||
fontFamily: tokens.font.body | ||
} | ||
}, process.env.NODE_ENV === "production" ? "" : ";label:Core;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCSSIsImZpbGUiOiJDb3JlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFByb3BzV2l0aENoaWxkcmVuIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ29sZFRoZW1lIH0gZnJvbSAnLi9nb2xkVGhlbWUnO1xuaW1wb3J0IHsgQ29yZVByb3ZpZGVyLCBDb3JlUHJvdmlkZXJQcm9wcyB9IGZyb20gJy4vQ29yZVByb3ZpZGVyJztcbmltcG9ydCB7IG1lcmdlVGhlbWUsIFRoZW1lIH0gZnJvbSAnLi90aGVtZSc7XG5pbXBvcnQgeyBib3hQYWxldHRlcywgYm94UGFsZXR0ZSB9IGZyb20gJy4vYm94UGFsZXR0ZSc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL3Rva2Vucyc7XG5pbXBvcnQgeyBnZW5lcmF0ZUZvbnRHcmlkIH0gZnJvbSAnLi91dGlscy9mb250R3JpZCc7XG5pbXBvcnQgeyBwcmludFRoZW1lIH0gZnJvbSAnLi9wcmludFRoZW1lJztcblxuZXhwb3J0IHR5cGUgQ29yZVByb3BzID0gUHJvcHNXaXRoQ2hpbGRyZW48XG5cdHtcblx0XHR0aGVtZT86IFRoZW1lO1xuXHRcdGFwcGx5UmVzZXQ/OiBib29sZWFuO1xuXHR9ICYgQ29yZVByb3ZpZGVyUHJvcHNcbj47XG5cbmV4cG9ydCBmdW5jdGlvbiBDb3JlKHtcblx0Y2hpbGRyZW4sXG5cdGFwcGx5UmVzZXQgPSB0cnVlLFxuXHR0aGVtZSxcblx0bGlua0NvbXBvbmVudCxcbn06IENvcmVQcm9wcykge1xuXHRyZXR1cm4gKFxuXHRcdDxDb3JlUHJvdmlkZXIgbGlua0NvbXBvbmVudD17bGlua0NvbXBvbmVudH0+XG5cdFx0XHQ8R2xvYmFsXG5cdFx0XHRcdHN0eWxlcz17W1xuXHRcdFx0XHRcdHtcblx0XHRcdFx0XHRcdCc6cm9vdCc6IHtcblx0XHRcdFx0XHRcdFx0Li4uKHRoZW1lID8gbWVyZ2VUaGVtZShnb2xkVGhlbWUsIHRoZW1lKSA6IGdvbGRUaGVtZSksXG5cdFx0XHRcdFx0XHRcdC4uLmdlbmVyYXRlRm9udEdyaWQoKSxcblx0XHRcdFx0XHRcdH0sXG5cdFx0XHRcdFx0XHQvLyBSZXNldCB0aGUgZ2xvYmFsIHRoZW1lIGluIHByaW50IG1vZGUgdG8gYmxhY2sgJiB3aGl0ZVxuXHRcdFx0XHRcdFx0Ly8gTm90ZTogQ29tcG9uZW50cyBjYW4gYWxzbyBjb250YWluIHByaW50IHNwZWNpZmljIHN0eWxlc1xuXHRcdFx0XHRcdFx0J0BtZWRpYSBwcmludCc6IHtcblx0XHRcdFx0XHRcdFx0Jzpyb290JzogbWVyZ2VUaGVtZShnb2xkVGhlbWUsIHByaW50VGhlbWUpLFxuXHRcdFx0XHRcdFx0fSxcblx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdHtcblx0XHRcdFx0XHRcdC8vIEFwcGx5IHRoZSBsaWdodCBwYWxsZXQgYnkgZGVmYXVsdFxuXHRcdFx0XHRcdFx0J2JvZHksaHRtbCc6IGJveFBhbGV0dGVzLmxpZ2h0LFxuXHRcdFx0XHRcdH0sXG5cdFx0XHRcdFx0YXBwbHlSZXNldCAmJiB7XG5cdFx0XHRcdFx0XHQvLyBGSVhNRTogYXBwbHkgdGhlIGNzcyByZXNldFxuXHRcdFx0XHRcdFx0J2JvZHksIGh0bWwnOiB7XG5cdFx0XHRcdFx0XHRcdG1hcmdpbjogMCxcblx0XHRcdFx0XHRcdFx0cGFkZGluZzogMCxcblx0XHRcdFx0XHRcdFx0YmFja2dyb3VuZDogYm94UGFsZXR0ZS5iYWNrZ3JvdW5kQm9keSxcblx0XHRcdFx0XHRcdFx0Zm9udEZhbWlseTogdG9rZW5zLmZvbnQuYm9keSxcblx0XHRcdFx0XHRcdH0sXG5cdFx0XHRcdFx0fSxcblx0XHRcdFx0XX1cblx0XHRcdC8+XG5cdFx0XHR7Y2hpbGRyZW59XG5cdFx0PC9Db3JlUHJvdmlkZXI+XG5cdCk7XG59XG4iXX0= */"] | ||
}), children); | ||
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
function Core(_ref) { | ||
var children = _ref.children, | ||
_ref$applyReset = _ref.applyReset, | ||
applyReset = _ref$applyReset === void 0 ? true : _ref$applyReset, | ||
theme = _ref.theme, | ||
linkComponent = _ref.linkComponent; | ||
return jsxRuntime.jsxs(CoreProvider, { | ||
linkComponent: linkComponent, | ||
children: [jsxRuntime.jsx(react$1.Global, { | ||
styles: [{ | ||
':root': _objectSpread$1(_objectSpread$1({}, mergeTheme(goldTheme, theme)), generateFontGrid()), | ||
// Reset the global theme in print mode to black & white | ||
// Note: Components can also contain print specific styles | ||
'@media print': { | ||
':root': mergeTheme(goldTheme, printTheme) | ||
} | ||
}, { | ||
// Apply the light pallet by default | ||
'body,html': boxPalettes.light | ||
}, applyReset && { | ||
// FIXME: apply the css reset | ||
'body, html': { | ||
margin: 0, | ||
padding: 0, | ||
background: boxPalette.backgroundBody, | ||
fontFamily: tokens.font.body | ||
} | ||
}, process.env.NODE_ENV === "production" ? "" : ";label:Core;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCSSIsImZpbGUiOiJDb3JlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFByb3BzV2l0aENoaWxkcmVuIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ29sZFRoZW1lIH0gZnJvbSAnLi9nb2xkVGhlbWUnO1xuaW1wb3J0IHsgQ29yZVByb3ZpZGVyLCBDb3JlUHJvdmlkZXJQcm9wcyB9IGZyb20gJy4vQ29yZVByb3ZpZGVyJztcbmltcG9ydCB7IG1lcmdlVGhlbWUsIFRoZW1lIH0gZnJvbSAnLi90aGVtZSc7XG5pbXBvcnQgeyBib3hQYWxldHRlcywgYm94UGFsZXR0ZSB9IGZyb20gJy4vYm94UGFsZXR0ZSc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL3Rva2Vucyc7XG5pbXBvcnQgeyBnZW5lcmF0ZUZvbnRHcmlkIH0gZnJvbSAnLi91dGlscy9mb250R3JpZCc7XG5pbXBvcnQgeyBwcmludFRoZW1lIH0gZnJvbSAnLi9wcmludFRoZW1lJztcblxuZXhwb3J0IHR5cGUgQ29yZVByb3BzID0gUHJvcHNXaXRoQ2hpbGRyZW48XG5cdHtcblx0XHQvKiogSWYgdHJ1ZSwgYSBDU1MgcmVzZXQgd2lsbCBiZSBhcHBsaWVkLiAqL1xuXHRcdGFwcGx5UmVzZXQ/OiBib29sZWFuO1xuXHRcdC8qKiBFbmFibGVzIG92ZXJ3cml0aW5nIG9mIHRoZSBkZWZhdWx0IHRoZW1lLiAqL1xuXHRcdHRoZW1lPzogVGhlbWU7XG5cdH0gJiBDb3JlUHJvdmlkZXJQcm9wc1xuPjtcblxuZXhwb3J0IGZ1bmN0aW9uIENvcmUoe1xuXHRjaGlsZHJlbixcblx0YXBwbHlSZXNldCA9IHRydWUsXG5cdHRoZW1lLFxuXHRsaW5rQ29tcG9uZW50LFxufTogQ29yZVByb3BzKSB7XG5cdHJldHVybiAoXG5cdFx0PENvcmVQcm92aWRlciBsaW5rQ29tcG9uZW50PXtsaW5rQ29tcG9uZW50fT5cblx0XHRcdDxHbG9iYWxcblx0XHRcdFx0c3R5bGVzPXtbXG5cdFx0XHRcdFx0e1xuXHRcdFx0XHRcdFx0Jzpyb290Jzoge1xuXHRcdFx0XHRcdFx0XHQuLi5tZXJnZVRoZW1lKGdvbGRUaGVtZSwgdGhlbWUpLFxuXHRcdFx0XHRcdFx0XHQuLi5nZW5lcmF0ZUZvbnRHcmlkKCksXG5cdFx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdFx0Ly8gUmVzZXQgdGhlIGdsb2JhbCB0aGVtZSBpbiBwcmludCBtb2RlIHRvIGJsYWNrICYgd2hpdGVcblx0XHRcdFx0XHRcdC8vIE5vdGU6IENvbXBvbmVudHMgY2FuIGFsc28gY29udGFpbiBwcmludCBzcGVjaWZpYyBzdHlsZXNcblx0XHRcdFx0XHRcdCdAbWVkaWEgcHJpbnQnOiB7XG5cdFx0XHRcdFx0XHRcdCc6cm9vdCc6IG1lcmdlVGhlbWUoZ29sZFRoZW1lLCBwcmludFRoZW1lKSxcblx0XHRcdFx0XHRcdH0sXG5cdFx0XHRcdFx0fSxcblx0XHRcdFx0XHR7XG5cdFx0XHRcdFx0XHQvLyBBcHBseSB0aGUgbGlnaHQgcGFsbGV0IGJ5IGRlZmF1bHRcblx0XHRcdFx0XHRcdCdib2R5LGh0bWwnOiBib3hQYWxldHRlcy5saWdodCxcblx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdGFwcGx5UmVzZXQgJiYge1xuXHRcdFx0XHRcdFx0Ly8gRklYTUU6IGFwcGx5IHRoZSBjc3MgcmVzZXRcblx0XHRcdFx0XHRcdCdib2R5LCBodG1sJzoge1xuXHRcdFx0XHRcdFx0XHRtYXJnaW46IDAsXG5cdFx0XHRcdFx0XHRcdHBhZGRpbmc6IDAsXG5cdFx0XHRcdFx0XHRcdGJhY2tncm91bmQ6IGJveFBhbGV0dGUuYmFja2dyb3VuZEJvZHksXG5cdFx0XHRcdFx0XHRcdGZvbnRGYW1pbHk6IHRva2Vucy5mb250LmJvZHksXG5cdFx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdH0sXG5cdFx0XHRcdF19XG5cdFx0XHQvPlxuXHRcdFx0e2NoaWxkcmVufVxuXHRcdDwvQ29yZVByb3ZpZGVyPlxuXHQpO1xufVxuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:Core;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCSSIsImZpbGUiOiJDb3JlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFByb3BzV2l0aENoaWxkcmVuIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ29sZFRoZW1lIH0gZnJvbSAnLi9nb2xkVGhlbWUnO1xuaW1wb3J0IHsgQ29yZVByb3ZpZGVyLCBDb3JlUHJvdmlkZXJQcm9wcyB9IGZyb20gJy4vQ29yZVByb3ZpZGVyJztcbmltcG9ydCB7IG1lcmdlVGhlbWUsIFRoZW1lIH0gZnJvbSAnLi90aGVtZSc7XG5pbXBvcnQgeyBib3hQYWxldHRlcywgYm94UGFsZXR0ZSB9IGZyb20gJy4vYm94UGFsZXR0ZSc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL3Rva2Vucyc7XG5pbXBvcnQgeyBnZW5lcmF0ZUZvbnRHcmlkIH0gZnJvbSAnLi91dGlscy9mb250R3JpZCc7XG5pbXBvcnQgeyBwcmludFRoZW1lIH0gZnJvbSAnLi9wcmludFRoZW1lJztcblxuZXhwb3J0IHR5cGUgQ29yZVByb3BzID0gUHJvcHNXaXRoQ2hpbGRyZW48XG5cdHtcblx0XHQvKiogSWYgdHJ1ZSwgYSBDU1MgcmVzZXQgd2lsbCBiZSBhcHBsaWVkLiAqL1xuXHRcdGFwcGx5UmVzZXQ/OiBib29sZWFuO1xuXHRcdC8qKiBFbmFibGVzIG92ZXJ3cml0aW5nIG9mIHRoZSBkZWZhdWx0IHRoZW1lLiAqL1xuXHRcdHRoZW1lPzogVGhlbWU7XG5cdH0gJiBDb3JlUHJvdmlkZXJQcm9wc1xuPjtcblxuZXhwb3J0IGZ1bmN0aW9uIENvcmUoe1xuXHRjaGlsZHJlbixcblx0YXBwbHlSZXNldCA9IHRydWUsXG5cdHRoZW1lLFxuXHRsaW5rQ29tcG9uZW50LFxufTogQ29yZVByb3BzKSB7XG5cdHJldHVybiAoXG5cdFx0PENvcmVQcm92aWRlciBsaW5rQ29tcG9uZW50PXtsaW5rQ29tcG9uZW50fT5cblx0XHRcdDxHbG9iYWxcblx0XHRcdFx0c3R5bGVzPXtbXG5cdFx0XHRcdFx0e1xuXHRcdFx0XHRcdFx0Jzpyb290Jzoge1xuXHRcdFx0XHRcdFx0XHQuLi5tZXJnZVRoZW1lKGdvbGRUaGVtZSwgdGhlbWUpLFxuXHRcdFx0XHRcdFx0XHQuLi5nZW5lcmF0ZUZvbnRHcmlkKCksXG5cdFx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdFx0Ly8gUmVzZXQgdGhlIGdsb2JhbCB0aGVtZSBpbiBwcmludCBtb2RlIHRvIGJsYWNrICYgd2hpdGVcblx0XHRcdFx0XHRcdC8vIE5vdGU6IENvbXBvbmVudHMgY2FuIGFsc28gY29udGFpbiBwcmludCBzcGVjaWZpYyBzdHlsZXNcblx0XHRcdFx0XHRcdCdAbWVkaWEgcHJpbnQnOiB7XG5cdFx0XHRcdFx0XHRcdCc6cm9vdCc6IG1lcmdlVGhlbWUoZ29sZFRoZW1lLCBwcmludFRoZW1lKSxcblx0XHRcdFx0XHRcdH0sXG5cdFx0XHRcdFx0fSxcblx0XHRcdFx0XHR7XG5cdFx0XHRcdFx0XHQvLyBBcHBseSB0aGUgbGlnaHQgcGFsbGV0IGJ5IGRlZmF1bHRcblx0XHRcdFx0XHRcdCdib2R5LGh0bWwnOiBib3hQYWxldHRlcy5saWdodCxcblx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdGFwcGx5UmVzZXQgJiYge1xuXHRcdFx0XHRcdFx0Ly8gRklYTUU6IGFwcGx5IHRoZSBjc3MgcmVzZXRcblx0XHRcdFx0XHRcdCdib2R5LCBodG1sJzoge1xuXHRcdFx0XHRcdFx0XHRtYXJnaW46IDAsXG5cdFx0XHRcdFx0XHRcdHBhZGRpbmc6IDAsXG5cdFx0XHRcdFx0XHRcdGJhY2tncm91bmQ6IGJveFBhbGV0dGUuYmFja2dyb3VuZEJvZHksXG5cdFx0XHRcdFx0XHRcdGZvbnRGYW1pbHk6IHRva2Vucy5mb250LmJvZHksXG5cdFx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdH0sXG5cdFx0XHRcdF19XG5cdFx0XHQvPlxuXHRcdFx0e2NoaWxkcmVufVxuXHRcdDwvQ29yZVByb3ZpZGVyPlxuXHQpO1xufVxuIl19 */"] | ||
}), children] | ||
}); | ||
} | ||
@@ -486,7 +498,10 @@ | ||
function useTernaryState(initialValue) { | ||
const [state, setState] = react.useState(initialValue); | ||
const setTrue = react.useCallback(function setTrue() { | ||
var _useState = react.useState(initialValue), | ||
state = _useState[0], | ||
setState = _useState[1]; | ||
var setTrue = react.useCallback(function setTrue() { | ||
return setState(true); | ||
}, []); | ||
const setFalse = react.useCallback(function setTrue() { | ||
var setFalse = react.useCallback(function setTrue() { | ||
return setState(false); | ||
@@ -506,7 +521,12 @@ }, []); | ||
function useToggleState(initialValue, alternateValue) { | ||
const [state, setState] = react.useState(initialValue); | ||
const toggle = react.useCallback(function toggle() { | ||
const __orig = typeof initialValue === 'function' ? initialValue() : initialValue; | ||
var _useState = react.useState(initialValue), | ||
state = _useState[0], | ||
setState = _useState[1]; | ||
setState(s => s === __orig ? alternateValue : __orig); | ||
var toggle = react.useCallback(function toggle() { | ||
var __orig = typeof initialValue === 'function' ? initialValue() : initialValue; | ||
setState(function (s) { | ||
return s === __orig ? alternateValue : __orig; | ||
}); | ||
}, [initialValue, alternateValue]); | ||
@@ -517,16 +537,23 @@ return [state, toggle]; | ||
function useElementSize(ref) { | ||
const [size, setSize] = react.useState({ | ||
var _useState = react.useState({ | ||
width: 0, | ||
height: 0 | ||
}); | ||
const handleSize = react.useCallback(() => { | ||
}), | ||
size = _useState[0], | ||
setSize = _useState[1]; | ||
var handleSize = react.useCallback(function () { | ||
var _ref$current, _ref$current2; | ||
setSize({ | ||
width: ref.current?.offsetWidth || 0, | ||
height: ref.current?.offsetHeight || 0 | ||
width: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) || 0, | ||
height: ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetHeight) || 0 | ||
}); | ||
}, [ref]); | ||
react.useEffect(() => { | ||
react.useEffect(function () { | ||
handleSize(); | ||
window.addEventListener('resize', handleSize); | ||
return () => window.removeEventListener('resize', handleSize); | ||
return function () { | ||
return window.removeEventListener('resize', handleSize); | ||
}; | ||
}, [handleSize]); | ||
@@ -537,4 +564,7 @@ return size; | ||
function usePrefersReducedMotion() { | ||
const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false); | ||
react.useEffect(() => { | ||
var _useState = react.useState(false), | ||
prefersReducedMotion = _useState[0], | ||
setPrefersReducedMotion = _useState[1]; | ||
react.useEffect(function () { | ||
if (!window.matchMedia) { | ||
@@ -545,9 +575,13 @@ setPrefersReducedMotion(false); | ||
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); | ||
var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); | ||
setPrefersReducedMotion(mediaQuery.matches); | ||
const listener = event => setPrefersReducedMotion(event.matches); | ||
var listener = function listener(event) { | ||
return setPrefersReducedMotion(event.matches); | ||
}; | ||
mediaQuery.addEventListener('change', listener); | ||
return () => mediaQuery.removeEventListener('change', listener); | ||
return function () { | ||
return mediaQuery.removeEventListener('change', listener); | ||
}; | ||
}, []); | ||
@@ -558,15 +592,22 @@ return prefersReducedMotion; | ||
function useWindowSize() { | ||
const [windowSize, setWindowSize] = react.useState({ | ||
var _useState = react.useState({ | ||
windowWidth: undefined, | ||
windowHeight: undefined | ||
}); | ||
react.useEffect(() => { | ||
const handleResize = () => setWindowSize({ | ||
windowWidth: window.innerWidth, | ||
windowHeight: window.innerHeight | ||
}); | ||
}), | ||
windowSize = _useState[0], | ||
setWindowSize = _useState[1]; | ||
react.useEffect(function () { | ||
var handleResize = function handleResize() { | ||
return setWindowSize({ | ||
windowWidth: window.innerWidth, | ||
windowHeight: window.innerHeight | ||
}); | ||
}; | ||
handleResize(); | ||
window.addEventListener('resize', handleResize); | ||
return () => window.removeEventListener('resize', handleResize); | ||
return function () { | ||
return window.removeEventListener('resize', handleResize); | ||
}; | ||
}, []); | ||
@@ -577,5 +618,5 @@ return windowSize; | ||
function useClickOutside(ref, handler) { | ||
react.useEffect(() => { | ||
const listener = event => { | ||
const el = ref?.current; // Do nothing if clicking ref's element or descendent elements | ||
react.useEffect(function () { | ||
var listener = function listener(event) { | ||
var el = ref === null || ref === void 0 ? void 0 : ref.current; // Do nothing if clicking ref's element or descendent elements | ||
@@ -590,3 +631,5 @@ if (!el || el.contains(event.target)) { | ||
window.addEventListener('mousedown', listener); | ||
return () => window.removeEventListener('mousedown', listener); | ||
return function () { | ||
return window.removeEventListener('mousedown', listener); | ||
}; | ||
}, [handler, ref]); | ||
@@ -601,5 +644,5 @@ } | ||
const forwardRefWithAs = render => { | ||
var forwardRefWithAs = function forwardRefWithAs(render) { | ||
// @ts-ignore | ||
return react.forwardRef(render); | ||
return /*#__PURE__*/react.forwardRef(render); | ||
}; | ||
@@ -615,4 +658,4 @@ | ||
function mergeRefs(refs) { | ||
return value => { | ||
refs.forEach(ref => { | ||
return function (value) { | ||
refs.forEach(function (ref) { | ||
if (typeof ref === 'function') { | ||
@@ -627,3 +670,7 @@ ref(value); | ||
const control = { | ||
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
var control = { | ||
sm: { | ||
@@ -640,13 +687,13 @@ width: mapSpacing(1.5), | ||
}; | ||
const input = { | ||
sm: { ...fontGrid('xs', 'nospace'), | ||
var input = { | ||
sm: _objectSpread(_objectSpread({}, fontGrid('xs', 'nospace')), {}, { | ||
height: '2.125rem' // 34 px | ||
}, | ||
md: { ...fontGrid('sm', 'nospace'), | ||
}), | ||
md: _objectSpread(_objectSpread({}, fontGrid('sm', 'nospace')), {}, { | ||
height: '2.875rem' // 46 px | ||
} | ||
}) | ||
}; | ||
const outline = { | ||
var outline = { | ||
outlineWidth: '3px', | ||
@@ -657,7 +704,7 @@ outlineStyle: 'solid', | ||
}; | ||
const underline = { | ||
var underline = { | ||
textDecoration: 'underline', | ||
textDecorationSkipInk: 'auto' | ||
}; | ||
const print = { | ||
var print = { | ||
hidden: { | ||
@@ -675,39 +722,39 @@ '@media print': { | ||
}; | ||
const packs = { | ||
control, | ||
input, | ||
outline, | ||
underline, | ||
var packs = { | ||
control: control, | ||
input: input, | ||
outline: outline, | ||
underline: underline, | ||
print: print | ||
}; | ||
const globalPalette = { | ||
lightForegroundText: `var(${themeVars.lightForegroundText})`, | ||
lightForegroundAction: `var(${themeVars.lightForegroundAction})`, | ||
lightForegroundFocus: `var(${themeVars.lightForegroundFocus})`, | ||
lightForegroundMuted: `var(${themeVars.lightForegroundMuted})`, | ||
lightBackgroundBody: `var(${themeVars.lightBackgroundBody})`, | ||
lightBackgroundShade: `var(${themeVars.lightBackgroundShade})`, | ||
lightBackgroundBodyAlt: `var(${themeVars.lightBackgroundBodyAlt})`, | ||
lightBackgroundShadeAlt: `var(${themeVars.lightBackgroundShadeAlt})`, | ||
lightBorder: `var(${themeVars.lightBorder})`, | ||
darkForegroundText: `var(${themeVars.darkForegroundText})`, | ||
darkForegroundAction: `var(${themeVars.darkForegroundAction})`, | ||
darkForegroundFocus: `var(${themeVars.darkForegroundFocus})`, | ||
darkForegroundMuted: `var(${themeVars.darkForegroundMuted})`, | ||
darkBackgroundBody: `var(${themeVars.darkBackgroundBody})`, | ||
darkBackgroundShade: `var(${themeVars.darkBackgroundShade})`, | ||
darkBackgroundBodyAlt: `var(${themeVars.darkBackgroundBodyAlt})`, | ||
darkBackgroundShadeAlt: `var(${themeVars.darkBackgroundShadeAlt})`, | ||
darkBorder: `var(${themeVars.darkBorder})`, | ||
accent: `var(${themeVars.accent}, ${themeVars.lightForegroundAction})`, | ||
var globalPalette = { | ||
lightForegroundText: "var(".concat(themeVars.lightForegroundText, ")"), | ||
lightForegroundAction: "var(".concat(themeVars.lightForegroundAction, ")"), | ||
lightForegroundFocus: "var(".concat(themeVars.lightForegroundFocus, ")"), | ||
lightForegroundMuted: "var(".concat(themeVars.lightForegroundMuted, ")"), | ||
lightBackgroundBody: "var(".concat(themeVars.lightBackgroundBody, ")"), | ||
lightBackgroundShade: "var(".concat(themeVars.lightBackgroundShade, ")"), | ||
lightBackgroundBodyAlt: "var(".concat(themeVars.lightBackgroundBodyAlt, ")"), | ||
lightBackgroundShadeAlt: "var(".concat(themeVars.lightBackgroundShadeAlt, ")"), | ||
lightBorder: "var(".concat(themeVars.lightBorder, ")"), | ||
darkForegroundText: "var(".concat(themeVars.darkForegroundText, ")"), | ||
darkForegroundAction: "var(".concat(themeVars.darkForegroundAction, ")"), | ||
darkForegroundFocus: "var(".concat(themeVars.darkForegroundFocus, ")"), | ||
darkForegroundMuted: "var(".concat(themeVars.darkForegroundMuted, ")"), | ||
darkBackgroundBody: "var(".concat(themeVars.darkBackgroundBody, ")"), | ||
darkBackgroundShade: "var(".concat(themeVars.darkBackgroundShade, ")"), | ||
darkBackgroundBodyAlt: "var(".concat(themeVars.darkBackgroundBodyAlt, ")"), | ||
darkBackgroundShadeAlt: "var(".concat(themeVars.darkBackgroundShadeAlt, ")"), | ||
darkBorder: "var(".concat(themeVars.darkBorder, ")"), | ||
accent: "var(".concat(themeVars.accent, ", ").concat(themeVars.lightForegroundAction, ")"), | ||
// NOTE: accent is optional | ||
error: `var(${themeVars.error})`, | ||
errorMuted: `var(${themeVars.errorMuted})`, | ||
success: `var(${themeVars.success})`, | ||
successMuted: `var(${themeVars.successMuted})`, | ||
warning: `var(${themeVars.warning})`, | ||
warningMuted: `var(${themeVars.warningMuted})`, | ||
info: `var(${themeVars.info})`, | ||
infoMuted: `var(${themeVars.infoMuted})` | ||
error: "var(".concat(themeVars.error, ")"), | ||
errorMuted: "var(".concat(themeVars.errorMuted, ")"), | ||
success: "var(".concat(themeVars.success, ")"), | ||
successMuted: "var(".concat(themeVars.successMuted, ")"), | ||
warning: "var(".concat(themeVars.warning, ")"), | ||
warningMuted: "var(".concat(themeVars.warningMuted, ")"), | ||
info: "var(".concat(themeVars.info, ")"), | ||
infoMuted: "var(".concat(themeVars.infoMuted, ")") | ||
}; | ||
@@ -725,5 +772,9 @@ | ||
const mq = facepaint__default["default"]([tokens.mediaQuery.min.sm, tokens.mediaQuery.min.md, tokens.mediaQuery.min.lg, tokens.mediaQuery.min.xl]); | ||
const breakpointNames = ['xs', 'sm', 'md', 'lg', 'xl']; | ||
function mapResponsiveProp(value, valueMapper = t => t) { | ||
var mq = facepaint__default["default"]([tokens.mediaQuery.min.sm, tokens.mediaQuery.min.md, tokens.mediaQuery.min.lg, tokens.mediaQuery.min.xl]); | ||
var breakpointNames = ['xs', 'sm', 'md', 'lg', 'xl']; | ||
function mapResponsiveProp(value) { | ||
var valueMapper = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (t) { | ||
return t; | ||
}; | ||
if (!isNonNullable(value)) { | ||
@@ -734,9 +785,11 @@ return undefined; | ||
if (Array.isArray(value)) { | ||
return value.map(t => isNonNullable(t) ? valueMapper(t) : null); | ||
return value.map(function (t) { | ||
return isNonNullable(t) ? valueMapper(t) : null; | ||
}); | ||
} | ||
if (typeof value === 'object') { | ||
const resValue = value; | ||
return breakpointNames.map(key => { | ||
const token = key in resValue ? resValue[key] : undefined; | ||
var resValue = value; | ||
return breakpointNames.map(function (key) { | ||
var token = key in resValue ? resValue[key] : undefined; | ||
@@ -743,0 +796,0 @@ if (isNonNullable(token)) { |
@@ -5,4 +5,7 @@ 'use strict'; | ||
var _defineProperty = require('@babel/runtime/helpers/defineProperty'); | ||
var react$1 = require('@emotion/react'); | ||
var react = require('react'); | ||
var jsxRuntime = require('@emotion/react/jsx-runtime'); | ||
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray'); | ||
var facepaint = require('facepaint'); | ||
@@ -15,3 +18,3 @@ | ||
// Default theme from GOLD. | ||
const goldTheme = { | ||
var goldTheme = { | ||
lightForegroundText: '#313131', | ||
@@ -52,46 +55,31 @@ lightForegroundAction: '#00698f', | ||
function _extends() { | ||
_extends = Object.assign || function (target) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
var source = arguments[i]; | ||
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
for (var key in source) { | ||
if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
target[key] = source[key]; | ||
} | ||
} | ||
} | ||
return target; | ||
}; | ||
return _extends.apply(this, arguments); | ||
} | ||
const DefaultLinkComponent = react.forwardRef(function DefaultLinkComponent(props, ref) { | ||
return react$1.jsx("a", _extends({ | ||
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
var DefaultLinkComponent = /*#__PURE__*/react.forwardRef(function DefaultLinkComponent(props, ref) { | ||
return jsxRuntime.jsx("a", _objectSpread$3({ | ||
ref: ref | ||
}, props)); | ||
}); | ||
const coreContext = react.createContext({ | ||
var coreContext = /*#__PURE__*/react.createContext({ | ||
linkComponent: DefaultLinkComponent | ||
}); | ||
function CoreProvider({ | ||
linkComponent, | ||
children | ||
}) { | ||
return react$1.jsx(coreContext.Provider, { | ||
function CoreProvider(_ref) { | ||
var linkComponent = _ref.linkComponent, | ||
children = _ref.children; | ||
return jsxRuntime.jsx(coreContext.Provider, { | ||
value: { | ||
linkComponent: linkComponent ?? DefaultLinkComponent | ||
} | ||
}, children); | ||
linkComponent: linkComponent !== null && linkComponent !== void 0 ? linkComponent : DefaultLinkComponent | ||
}, | ||
children: children | ||
}); | ||
} | ||
function useLinkComponent() { | ||
const { | ||
linkComponent | ||
} = react.useContext(coreContext); | ||
var _useContext = react.useContext(coreContext), | ||
linkComponent = _useContext.linkComponent; | ||
return linkComponent; | ||
} | ||
const themeVars = { | ||
var themeVars = { | ||
// Light | ||
@@ -133,6 +121,16 @@ lightForegroundText: '--agds-light-foreground-text', | ||
function mergeTheme(defaultTheme, theme) { | ||
return Object.fromEntries(Object.entries(themeVars).map(([key, variableName]) => [variableName, theme[key] ?? defaultTheme[key]])); | ||
return Object.fromEntries(Object.entries(themeVars).map(function (_ref) { | ||
var _ref3; | ||
var _ref2 = _slicedToArray(_ref, 2), | ||
key = _ref2[0], | ||
variableName = _ref2[1]; | ||
return [variableName, (_ref3 = theme && theme[key]) !== null && _ref3 !== void 0 ? _ref3 : defaultTheme[key]]; | ||
})); | ||
} | ||
const boxPaletteVars = { | ||
var _css, _css2; | ||
var boxPaletteVars = { | ||
foregroundText: '--agds-foreground-text', | ||
@@ -150,46 +148,30 @@ foregroundAction: '--agds-foreground-action', | ||
}; | ||
const boxPalettes = { | ||
light: /*#__PURE__*/react$1.css({ | ||
[boxPaletteVars.foregroundText]: `var(${themeVars.lightForegroundText})`, | ||
[boxPaletteVars.foregroundAction]: `var(${themeVars.lightForegroundAction})`, | ||
[boxPaletteVars.foregroundFocus]: `var(${themeVars.lightForegroundFocus})`, | ||
[boxPaletteVars.foregroundMuted]: `var(${themeVars.lightForegroundMuted})`, | ||
[boxPaletteVars.backgroundBody]: `var(${themeVars.lightBackgroundBody})`, | ||
[boxPaletteVars.backgroundShade]: `var(${themeVars.lightBackgroundShade})`, | ||
[boxPaletteVars.backgroundBodyAlt]: `var(${themeVars.lightBackgroundBodyAlt})`, | ||
[boxPaletteVars.backgroundShadeAlt]: `var(${themeVars.lightBackgroundShadeAlt})`, | ||
[boxPaletteVars.border]: `var(${themeVars.lightBorder})`, | ||
[boxPaletteVars.borderMuted]: `var(${themeVars.lightBorderMuted})`, | ||
[boxPaletteVars.borderInput]: `var(${themeVars.lightBorderInput})` | ||
}, "" , "" ), | ||
dark: /*#__PURE__*/react$1.css({ | ||
[boxPaletteVars.foregroundText]: `var(${themeVars.darkForegroundText})`, | ||
[boxPaletteVars.foregroundAction]: `var(${themeVars.darkForegroundAction})`, | ||
[boxPaletteVars.foregroundFocus]: `var(${themeVars.darkForegroundFocus})`, | ||
[boxPaletteVars.foregroundMuted]: `var(${themeVars.darkForegroundMuted})`, | ||
[boxPaletteVars.backgroundBody]: `var(${themeVars.darkBackgroundBody})`, | ||
[boxPaletteVars.backgroundShade]: `var(${themeVars.darkBackgroundShade})`, | ||
[boxPaletteVars.backgroundBodyAlt]: `var(${themeVars.darkBackgroundBodyAlt})`, | ||
[boxPaletteVars.backgroundShadeAlt]: `var(${themeVars.darkBackgroundShadeAlt})`, | ||
[boxPaletteVars.border]: `var(${themeVars.darkBorder})`, | ||
[boxPaletteVars.borderMuted]: `var(${themeVars.darkBorderMuted})`, | ||
[boxPaletteVars.borderInput]: `var(${themeVars.darkBorderInput})` | ||
}, "" , "" ) | ||
var boxPalettes = { | ||
light: | ||
/*#__PURE__*/ | ||
/*#__PURE__*/ | ||
react$1.css((_css = {}, _defineProperty(_css, boxPaletteVars.foregroundText, "var(".concat(themeVars.lightForegroundText, ")")), _defineProperty(_css, boxPaletteVars.foregroundAction, "var(".concat(themeVars.lightForegroundAction, ")")), _defineProperty(_css, boxPaletteVars.foregroundFocus, "var(".concat(themeVars.lightForegroundFocus, ")")), _defineProperty(_css, boxPaletteVars.foregroundMuted, "var(".concat(themeVars.lightForegroundMuted, ")")), _defineProperty(_css, boxPaletteVars.backgroundBody, "var(".concat(themeVars.lightBackgroundBody, ")")), _defineProperty(_css, boxPaletteVars.backgroundShade, "var(".concat(themeVars.lightBackgroundShade, ")")), _defineProperty(_css, boxPaletteVars.backgroundBodyAlt, "var(".concat(themeVars.lightBackgroundBodyAlt, ")")), _defineProperty(_css, boxPaletteVars.backgroundShadeAlt, "var(".concat(themeVars.lightBackgroundShadeAlt, ")")), _defineProperty(_css, boxPaletteVars.border, "var(".concat(themeVars.lightBorder, ")")), _defineProperty(_css, boxPaletteVars.borderMuted, "var(".concat(themeVars.lightBorderMuted, ")")), _defineProperty(_css, boxPaletteVars.borderInput, "var(".concat(themeVars.lightBorderInput, ")")), _css), "" , "" , "" , "" ), | ||
dark: | ||
/*#__PURE__*/ | ||
/*#__PURE__*/ | ||
react$1.css((_css2 = {}, _defineProperty(_css2, boxPaletteVars.foregroundText, "var(".concat(themeVars.darkForegroundText, ")")), _defineProperty(_css2, boxPaletteVars.foregroundAction, "var(".concat(themeVars.darkForegroundAction, ")")), _defineProperty(_css2, boxPaletteVars.foregroundFocus, "var(".concat(themeVars.darkForegroundFocus, ")")), _defineProperty(_css2, boxPaletteVars.foregroundMuted, "var(".concat(themeVars.darkForegroundMuted, ")")), _defineProperty(_css2, boxPaletteVars.backgroundBody, "var(".concat(themeVars.darkBackgroundBody, ")")), _defineProperty(_css2, boxPaletteVars.backgroundShade, "var(".concat(themeVars.darkBackgroundShade, ")")), _defineProperty(_css2, boxPaletteVars.backgroundBodyAlt, "var(".concat(themeVars.darkBackgroundBodyAlt, ")")), _defineProperty(_css2, boxPaletteVars.backgroundShadeAlt, "var(".concat(themeVars.darkBackgroundShadeAlt, ")")), _defineProperty(_css2, boxPaletteVars.border, "var(".concat(themeVars.darkBorder, ")")), _defineProperty(_css2, boxPaletteVars.borderMuted, "var(".concat(themeVars.darkBorderMuted, ")")), _defineProperty(_css2, boxPaletteVars.borderInput, "var(".concat(themeVars.darkBorderInput, ")")), _css2), "" , "" , "" , "" ) | ||
}; | ||
const boxPalette = { | ||
foregroundText: `var(${boxPaletteVars.foregroundText})`, | ||
foregroundAction: `var(${boxPaletteVars.foregroundAction})`, | ||
foregroundFocus: `var(${boxPaletteVars.foregroundFocus})`, | ||
foregroundMuted: `var(${boxPaletteVars.foregroundMuted})`, | ||
backgroundBody: `var(${boxPaletteVars.backgroundBody})`, | ||
backgroundShade: `var(${boxPaletteVars.backgroundShade})`, | ||
backgroundBodyAlt: `var(${boxPaletteVars.backgroundBodyAlt})`, | ||
backgroundShadeAlt: `var(${boxPaletteVars.backgroundShadeAlt})`, | ||
border: `var(${boxPaletteVars.border})`, | ||
borderMuted: `var(${boxPaletteVars.borderMuted})`, | ||
borderInput: `var(${boxPaletteVars.borderInput})` | ||
var boxPalette = { | ||
foregroundText: "var(".concat(boxPaletteVars.foregroundText, ")"), | ||
foregroundAction: "var(".concat(boxPaletteVars.foregroundAction, ")"), | ||
foregroundFocus: "var(".concat(boxPaletteVars.foregroundFocus, ")"), | ||
foregroundMuted: "var(".concat(boxPaletteVars.foregroundMuted, ")"), | ||
backgroundBody: "var(".concat(boxPaletteVars.backgroundBody, ")"), | ||
backgroundShade: "var(".concat(boxPaletteVars.backgroundShade, ")"), | ||
backgroundBodyAlt: "var(".concat(boxPaletteVars.backgroundBodyAlt, ")"), | ||
backgroundShadeAlt: "var(".concat(boxPaletteVars.backgroundShadeAlt, ")"), | ||
border: "var(".concat(boxPaletteVars.border, ")"), | ||
borderMuted: "var(".concat(boxPaletteVars.borderMuted, ")"), | ||
borderInput: "var(".concat(boxPaletteVars.borderInput, ")") | ||
}; | ||
// Tokens | ||
const breakpoint = { | ||
var breakpoint = { | ||
xs: 0, | ||
@@ -201,22 +183,22 @@ sm: 576, | ||
}; | ||
const mediaQuery = { | ||
var mediaQuery = { | ||
min: { | ||
xs: `@media(min-width: ${breakpoint.xs}px)`, | ||
sm: `@media(min-width: ${breakpoint.sm}px)`, | ||
md: `@media(min-width: ${breakpoint.md}px)`, | ||
lg: `@media(min-width: ${breakpoint.lg}px)`, | ||
xl: `@media(min-width: ${breakpoint.xl}px)` | ||
xs: "@media(min-width: ".concat(breakpoint.xs, "px)"), | ||
sm: "@media(min-width: ".concat(breakpoint.sm, "px)"), | ||
md: "@media(min-width: ".concat(breakpoint.md, "px)"), | ||
lg: "@media(min-width: ".concat(breakpoint.lg, "px)"), | ||
xl: "@media(min-width: ".concat(breakpoint.xl, "px)") | ||
}, | ||
max: { | ||
xs: `@media(max-width: ${breakpoint.sm - 1}px)`, | ||
sm: `@media(max-width: ${breakpoint.md - 1}px)`, | ||
md: `@media(max-width: ${breakpoint.lg - 1}px)`, | ||
lg: `@media(max-width: ${breakpoint.xl - 1}px)` | ||
xs: "@media(max-width: ".concat(breakpoint.sm - 1, "px)"), | ||
sm: "@media(max-width: ".concat(breakpoint.md - 1, "px)"), | ||
md: "@media(max-width: ".concat(breakpoint.lg - 1, "px)"), | ||
lg: "@media(max-width: ".concat(breakpoint.xl - 1, "px)") | ||
} | ||
}; | ||
const rem = 16; | ||
var rem = 16; | ||
/** "unit" used for all type and grid calculations */ | ||
const unit = 4; | ||
const font = { | ||
var unit = 4; | ||
var font = { | ||
body: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", | ||
@@ -227,3 +209,3 @@ monospace: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace" | ||
/** Use as rem values */ | ||
const fontSize = { | ||
var fontSize = { | ||
xs: { | ||
@@ -248,3 +230,3 @@ xs: 0.875, | ||
}; | ||
const fontWeight = { | ||
var fontWeight = { | ||
normal: 'normal', | ||
@@ -255,15 +237,15 @@ bold: 'bold' | ||
/** lineHeight-map - Predetermined line-height mapped to keyword */ | ||
const lineHeight = { | ||
var lineHeight = { | ||
nospace: 1, | ||
heading: 1.25, | ||
default: 1.5 | ||
"default": 1.5 | ||
}; | ||
function mapSpacing(v) { | ||
return `${v}rem`; | ||
return "".concat(v, "rem"); | ||
} | ||
const containerPadding = { | ||
var containerPadding = { | ||
xs: 0.75, | ||
md: 2 | ||
}; | ||
const maxWidth = { | ||
var maxWidth = { | ||
bodyText: '42em', | ||
@@ -275,4 +257,4 @@ container: '80rem', | ||
}; | ||
const borderRadius = unit; | ||
const borderWidth = { | ||
var borderRadius = unit; | ||
var borderWidth = { | ||
sm: 1, | ||
@@ -283,20 +265,29 @@ md: 2, | ||
}; | ||
const tokens = { | ||
breakpoint, | ||
mediaQuery, | ||
rem, | ||
unit, | ||
font, | ||
fontSize, | ||
fontWeight, | ||
lineHeight, | ||
containerPadding, | ||
maxWidth, | ||
borderRadius, | ||
borderWidth | ||
var tokens = { | ||
breakpoint: breakpoint, | ||
mediaQuery: mediaQuery, | ||
rem: rem, | ||
unit: unit, | ||
font: font, | ||
fontSize: fontSize, | ||
fontWeight: fontWeight, | ||
lineHeight: lineHeight, | ||
containerPadding: containerPadding, | ||
maxWidth: maxWidth, | ||
borderRadius: borderRadius, | ||
borderWidth: borderWidth | ||
}; | ||
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; } | ||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
/** Ensures that font-size and line-height snaps to the 4px grid. */ | ||
const fontGridVars = { | ||
var fontGridVars = { | ||
xs: { | ||
@@ -306,3 +297,3 @@ size: '--typography-xs', | ||
heading: '--typography-xs-heading', | ||
default: '--typography-xs-default' | ||
"default": '--typography-xs-default' | ||
}, | ||
@@ -313,3 +304,3 @@ sm: { | ||
heading: '--typography-sm-heading', | ||
default: '--typography-sm-default' | ||
"default": '--typography-sm-default' | ||
}, | ||
@@ -320,3 +311,3 @@ md: { | ||
heading: '--typography-md-heading', | ||
default: '--typography-md-default' | ||
"default": '--typography-md-default' | ||
}, | ||
@@ -327,3 +318,3 @@ lg: { | ||
heading: '--typography-lg-heading', | ||
default: '--typography-lg-default' | ||
"default": '--typography-lg-default' | ||
}, | ||
@@ -334,3 +325,3 @@ xl: { | ||
heading: '--typography-xl-heading', | ||
default: '--typography-xl-default' | ||
"default": '--typography-xl-default' | ||
}, | ||
@@ -341,3 +332,3 @@ xxl: { | ||
heading: '--typography-xxl-heading', | ||
default: '--typography-xxl-default' | ||
"default": '--typography-xxl-default' | ||
}, | ||
@@ -348,30 +339,49 @@ xxxl: { | ||
heading: '--typography-xxxl-heading', | ||
default: '--typography-xxxl-default' | ||
"default": '--typography-xxxl-default' | ||
} | ||
}; | ||
const fontScales = Object.keys(tokens.fontSize); | ||
const lineHeights = Object.keys(tokens.lineHeight); | ||
var fontScales = Object.keys(tokens.fontSize); | ||
var lineHeights = Object.keys(tokens.lineHeight); | ||
function generateFontGrid() { | ||
let cssVars = {}; | ||
var cssVars = {}; | ||
for (const scale of fontScales) { | ||
const scaleVars = []; | ||
const fontSizes = Object.keys(tokens.fontSize[scale]); | ||
var _iterator = _createForOfIteratorHelper(fontScales), | ||
_step; | ||
for (const size of fontSizes) { | ||
scaleVars.push([fontGridVars[size]['size'], `${tokens.fontSize[scale][size]}rem`]); | ||
try { | ||
for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
var scale = _step.value; | ||
var scaleVars = []; | ||
var fontSizes = Object.keys(tokens.fontSize[scale]); | ||
for (const lineHeight of lineHeights) { | ||
scaleVars.push([fontGridVars[size][lineHeight], calculateLineHeight(scale, size, lineHeight)]); | ||
for (var _i = 0, _fontSizes = fontSizes; _i < _fontSizes.length; _i++) { | ||
var size = _fontSizes[_i]; | ||
scaleVars.push([fontGridVars[size]['size'], "".concat(tokens.fontSize[scale][size], "rem")]); | ||
var _iterator2 = _createForOfIteratorHelper(lineHeights), | ||
_step2; | ||
try { | ||
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { | ||
var _lineHeight = _step2.value; | ||
scaleVars.push([fontGridVars[size][_lineHeight], calculateLineHeight(scale, size, _lineHeight)]); | ||
} | ||
} catch (err) { | ||
_iterator2.e(err); | ||
} finally { | ||
_iterator2.f(); | ||
} | ||
} | ||
} | ||
if (tokens.breakpoint[scale] === 0) { | ||
cssVars = { ...cssVars, | ||
...Object.fromEntries(scaleVars) | ||
}; | ||
} else { | ||
const key = tokens.mediaQuery.min[scale]; | ||
cssVars[key] = Object.fromEntries(scaleVars); | ||
if (tokens.breakpoint[scale] === 0) { | ||
cssVars = _objectSpread$2(_objectSpread$2({}, cssVars), Object.fromEntries(scaleVars)); | ||
} else { | ||
var key = tokens.mediaQuery.min[scale]; | ||
cssVars[key] = Object.fromEntries(scaleVars); | ||
} | ||
} | ||
} catch (err) { | ||
_iterator.e(err); | ||
} finally { | ||
_iterator.f(); | ||
} | ||
@@ -381,6 +391,6 @@ | ||
} | ||
const fontGrid = (fontSize, lineHeight) => { | ||
var fontGrid = function fontGrid(fontSize, lineHeight) { | ||
if (typeof fontSize === 'number') { | ||
return { | ||
fontSize: `${fontSize}rem`, | ||
fontSize: "".concat(fontSize, "rem"), | ||
lineHeight: calculateLineHeight('sm', fontSize, lineHeight) | ||
@@ -391,17 +401,17 @@ }; | ||
return { | ||
fontSize: `var(${fontGridVars[fontSize]['size']})`, | ||
lineHeight: `var(${fontGridVars[fontSize][lineHeight]})` | ||
fontSize: "var(".concat(fontGridVars[fontSize]['size'], ")"), | ||
lineHeight: "var(".concat(fontGridVars[fontSize][lineHeight], ")") | ||
}; | ||
}; | ||
const calculateLineHeight = (scale, fontSize, lineHeight) => { | ||
const fSizeRem = typeof fontSize === 'number' ? fontSize : tokens.fontSize[scale][fontSize]; | ||
const fSizePx = fSizeRem * tokens.rem; | ||
const lHeight = tokens.lineHeight[lineHeight]; | ||
const totalHeight = Math.round(fSizePx * lHeight / tokens.unit) * tokens.unit; | ||
const calcLineHeight = totalHeight / fSizePx; | ||
var calculateLineHeight = function calculateLineHeight(scale, fontSize, lineHeight) { | ||
var fSizeRem = typeof fontSize === 'number' ? fontSize : tokens.fontSize[scale][fontSize]; | ||
var fSizePx = fSizeRem * tokens.rem; | ||
var lHeight = tokens.lineHeight[lineHeight]; | ||
var totalHeight = Math.round(fSizePx * lHeight / tokens.unit) * tokens.unit; | ||
var calcLineHeight = totalHeight / fSizePx; | ||
return calcLineHeight; | ||
}; | ||
const printTheme = { | ||
var printTheme = { | ||
lightForegroundText: 'black', | ||
@@ -441,33 +451,35 @@ lightForegroundAction: 'black', | ||
function Core({ | ||
children, | ||
applyReset = true, | ||
theme, | ||
linkComponent | ||
}) { | ||
return react$1.jsx(CoreProvider, { | ||
linkComponent: linkComponent | ||
}, react$1.jsx(react$1.Global, { | ||
styles: [{ | ||
':root': { ...(theme ? mergeTheme(goldTheme, theme) : goldTheme), | ||
...generateFontGrid() | ||
}, | ||
// Reset the global theme in print mode to black & white | ||
// Note: Components can also contain print specific styles | ||
'@media print': { | ||
':root': mergeTheme(goldTheme, printTheme) | ||
} | ||
}, { | ||
// Apply the light pallet by default | ||
'body,html': boxPalettes.light | ||
}, applyReset && { | ||
// FIXME: apply the css reset | ||
'body, html': { | ||
margin: 0, | ||
padding: 0, | ||
background: boxPalette.backgroundBody, | ||
fontFamily: tokens.font.body | ||
} | ||
}, "" , "" ] | ||
}), children); | ||
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
function Core(_ref) { | ||
var children = _ref.children, | ||
_ref$applyReset = _ref.applyReset, | ||
applyReset = _ref$applyReset === void 0 ? true : _ref$applyReset, | ||
theme = _ref.theme, | ||
linkComponent = _ref.linkComponent; | ||
return jsxRuntime.jsxs(CoreProvider, { | ||
linkComponent: linkComponent, | ||
children: [jsxRuntime.jsx(react$1.Global, { | ||
styles: [{ | ||
':root': _objectSpread$1(_objectSpread$1({}, mergeTheme(goldTheme, theme)), generateFontGrid()), | ||
// Reset the global theme in print mode to black & white | ||
// Note: Components can also contain print specific styles | ||
'@media print': { | ||
':root': mergeTheme(goldTheme, printTheme) | ||
} | ||
}, { | ||
// Apply the light pallet by default | ||
'body,html': boxPalettes.light | ||
}, applyReset && { | ||
// FIXME: apply the css reset | ||
'body, html': { | ||
margin: 0, | ||
padding: 0, | ||
background: boxPalette.backgroundBody, | ||
fontFamily: tokens.font.body | ||
} | ||
}, "" , "" , "" , "" ] | ||
}), children] | ||
}); | ||
} | ||
@@ -486,7 +498,10 @@ | ||
function useTernaryState(initialValue) { | ||
const [state, setState] = react.useState(initialValue); | ||
const setTrue = react.useCallback(function setTrue() { | ||
var _useState = react.useState(initialValue), | ||
state = _useState[0], | ||
setState = _useState[1]; | ||
var setTrue = react.useCallback(function setTrue() { | ||
return setState(true); | ||
}, []); | ||
const setFalse = react.useCallback(function setTrue() { | ||
var setFalse = react.useCallback(function setTrue() { | ||
return setState(false); | ||
@@ -506,7 +521,12 @@ }, []); | ||
function useToggleState(initialValue, alternateValue) { | ||
const [state, setState] = react.useState(initialValue); | ||
const toggle = react.useCallback(function toggle() { | ||
const __orig = typeof initialValue === 'function' ? initialValue() : initialValue; | ||
var _useState = react.useState(initialValue), | ||
state = _useState[0], | ||
setState = _useState[1]; | ||
setState(s => s === __orig ? alternateValue : __orig); | ||
var toggle = react.useCallback(function toggle() { | ||
var __orig = typeof initialValue === 'function' ? initialValue() : initialValue; | ||
setState(function (s) { | ||
return s === __orig ? alternateValue : __orig; | ||
}); | ||
}, [initialValue, alternateValue]); | ||
@@ -517,16 +537,23 @@ return [state, toggle]; | ||
function useElementSize(ref) { | ||
const [size, setSize] = react.useState({ | ||
var _useState = react.useState({ | ||
width: 0, | ||
height: 0 | ||
}); | ||
const handleSize = react.useCallback(() => { | ||
}), | ||
size = _useState[0], | ||
setSize = _useState[1]; | ||
var handleSize = react.useCallback(function () { | ||
var _ref$current, _ref$current2; | ||
setSize({ | ||
width: ref.current?.offsetWidth || 0, | ||
height: ref.current?.offsetHeight || 0 | ||
width: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) || 0, | ||
height: ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetHeight) || 0 | ||
}); | ||
}, [ref]); | ||
react.useEffect(() => { | ||
react.useEffect(function () { | ||
handleSize(); | ||
window.addEventListener('resize', handleSize); | ||
return () => window.removeEventListener('resize', handleSize); | ||
return function () { | ||
return window.removeEventListener('resize', handleSize); | ||
}; | ||
}, [handleSize]); | ||
@@ -537,4 +564,7 @@ return size; | ||
function usePrefersReducedMotion() { | ||
const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false); | ||
react.useEffect(() => { | ||
var _useState = react.useState(false), | ||
prefersReducedMotion = _useState[0], | ||
setPrefersReducedMotion = _useState[1]; | ||
react.useEffect(function () { | ||
if (!window.matchMedia) { | ||
@@ -545,9 +575,13 @@ setPrefersReducedMotion(false); | ||
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); | ||
var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); | ||
setPrefersReducedMotion(mediaQuery.matches); | ||
const listener = event => setPrefersReducedMotion(event.matches); | ||
var listener = function listener(event) { | ||
return setPrefersReducedMotion(event.matches); | ||
}; | ||
mediaQuery.addEventListener('change', listener); | ||
return () => mediaQuery.removeEventListener('change', listener); | ||
return function () { | ||
return mediaQuery.removeEventListener('change', listener); | ||
}; | ||
}, []); | ||
@@ -558,15 +592,22 @@ return prefersReducedMotion; | ||
function useWindowSize() { | ||
const [windowSize, setWindowSize] = react.useState({ | ||
var _useState = react.useState({ | ||
windowWidth: undefined, | ||
windowHeight: undefined | ||
}); | ||
react.useEffect(() => { | ||
const handleResize = () => setWindowSize({ | ||
windowWidth: window.innerWidth, | ||
windowHeight: window.innerHeight | ||
}); | ||
}), | ||
windowSize = _useState[0], | ||
setWindowSize = _useState[1]; | ||
react.useEffect(function () { | ||
var handleResize = function handleResize() { | ||
return setWindowSize({ | ||
windowWidth: window.innerWidth, | ||
windowHeight: window.innerHeight | ||
}); | ||
}; | ||
handleResize(); | ||
window.addEventListener('resize', handleResize); | ||
return () => window.removeEventListener('resize', handleResize); | ||
return function () { | ||
return window.removeEventListener('resize', handleResize); | ||
}; | ||
}, []); | ||
@@ -577,5 +618,5 @@ return windowSize; | ||
function useClickOutside(ref, handler) { | ||
react.useEffect(() => { | ||
const listener = event => { | ||
const el = ref?.current; // Do nothing if clicking ref's element or descendent elements | ||
react.useEffect(function () { | ||
var listener = function listener(event) { | ||
var el = ref === null || ref === void 0 ? void 0 : ref.current; // Do nothing if clicking ref's element or descendent elements | ||
@@ -590,3 +631,5 @@ if (!el || el.contains(event.target)) { | ||
window.addEventListener('mousedown', listener); | ||
return () => window.removeEventListener('mousedown', listener); | ||
return function () { | ||
return window.removeEventListener('mousedown', listener); | ||
}; | ||
}, [handler, ref]); | ||
@@ -601,5 +644,5 @@ } | ||
const forwardRefWithAs = render => { | ||
var forwardRefWithAs = function forwardRefWithAs(render) { | ||
// @ts-ignore | ||
return react.forwardRef(render); | ||
return /*#__PURE__*/react.forwardRef(render); | ||
}; | ||
@@ -615,4 +658,4 @@ | ||
function mergeRefs(refs) { | ||
return value => { | ||
refs.forEach(ref => { | ||
return function (value) { | ||
refs.forEach(function (ref) { | ||
if (typeof ref === 'function') { | ||
@@ -627,3 +670,7 @@ ref(value); | ||
const control = { | ||
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
var control = { | ||
sm: { | ||
@@ -640,13 +687,13 @@ width: mapSpacing(1.5), | ||
}; | ||
const input = { | ||
sm: { ...fontGrid('xs', 'nospace'), | ||
var input = { | ||
sm: _objectSpread(_objectSpread({}, fontGrid('xs', 'nospace')), {}, { | ||
height: '2.125rem' // 34 px | ||
}, | ||
md: { ...fontGrid('sm', 'nospace'), | ||
}), | ||
md: _objectSpread(_objectSpread({}, fontGrid('sm', 'nospace')), {}, { | ||
height: '2.875rem' // 46 px | ||
} | ||
}) | ||
}; | ||
const outline = { | ||
var outline = { | ||
outlineWidth: '3px', | ||
@@ -657,7 +704,7 @@ outlineStyle: 'solid', | ||
}; | ||
const underline = { | ||
var underline = { | ||
textDecoration: 'underline', | ||
textDecorationSkipInk: 'auto' | ||
}; | ||
const print = { | ||
var print = { | ||
hidden: { | ||
@@ -675,39 +722,39 @@ '@media print': { | ||
}; | ||
const packs = { | ||
control, | ||
input, | ||
outline, | ||
underline, | ||
var packs = { | ||
control: control, | ||
input: input, | ||
outline: outline, | ||
underline: underline, | ||
print: print | ||
}; | ||
const globalPalette = { | ||
lightForegroundText: `var(${themeVars.lightForegroundText})`, | ||
lightForegroundAction: `var(${themeVars.lightForegroundAction})`, | ||
lightForegroundFocus: `var(${themeVars.lightForegroundFocus})`, | ||
lightForegroundMuted: `var(${themeVars.lightForegroundMuted})`, | ||
lightBackgroundBody: `var(${themeVars.lightBackgroundBody})`, | ||
lightBackgroundShade: `var(${themeVars.lightBackgroundShade})`, | ||
lightBackgroundBodyAlt: `var(${themeVars.lightBackgroundBodyAlt})`, | ||
lightBackgroundShadeAlt: `var(${themeVars.lightBackgroundShadeAlt})`, | ||
lightBorder: `var(${themeVars.lightBorder})`, | ||
darkForegroundText: `var(${themeVars.darkForegroundText})`, | ||
darkForegroundAction: `var(${themeVars.darkForegroundAction})`, | ||
darkForegroundFocus: `var(${themeVars.darkForegroundFocus})`, | ||
darkForegroundMuted: `var(${themeVars.darkForegroundMuted})`, | ||
darkBackgroundBody: `var(${themeVars.darkBackgroundBody})`, | ||
darkBackgroundShade: `var(${themeVars.darkBackgroundShade})`, | ||
darkBackgroundBodyAlt: `var(${themeVars.darkBackgroundBodyAlt})`, | ||
darkBackgroundShadeAlt: `var(${themeVars.darkBackgroundShadeAlt})`, | ||
darkBorder: `var(${themeVars.darkBorder})`, | ||
accent: `var(${themeVars.accent}, ${themeVars.lightForegroundAction})`, | ||
var globalPalette = { | ||
lightForegroundText: "var(".concat(themeVars.lightForegroundText, ")"), | ||
lightForegroundAction: "var(".concat(themeVars.lightForegroundAction, ")"), | ||
lightForegroundFocus: "var(".concat(themeVars.lightForegroundFocus, ")"), | ||
lightForegroundMuted: "var(".concat(themeVars.lightForegroundMuted, ")"), | ||
lightBackgroundBody: "var(".concat(themeVars.lightBackgroundBody, ")"), | ||
lightBackgroundShade: "var(".concat(themeVars.lightBackgroundShade, ")"), | ||
lightBackgroundBodyAlt: "var(".concat(themeVars.lightBackgroundBodyAlt, ")"), | ||
lightBackgroundShadeAlt: "var(".concat(themeVars.lightBackgroundShadeAlt, ")"), | ||
lightBorder: "var(".concat(themeVars.lightBorder, ")"), | ||
darkForegroundText: "var(".concat(themeVars.darkForegroundText, ")"), | ||
darkForegroundAction: "var(".concat(themeVars.darkForegroundAction, ")"), | ||
darkForegroundFocus: "var(".concat(themeVars.darkForegroundFocus, ")"), | ||
darkForegroundMuted: "var(".concat(themeVars.darkForegroundMuted, ")"), | ||
darkBackgroundBody: "var(".concat(themeVars.darkBackgroundBody, ")"), | ||
darkBackgroundShade: "var(".concat(themeVars.darkBackgroundShade, ")"), | ||
darkBackgroundBodyAlt: "var(".concat(themeVars.darkBackgroundBodyAlt, ")"), | ||
darkBackgroundShadeAlt: "var(".concat(themeVars.darkBackgroundShadeAlt, ")"), | ||
darkBorder: "var(".concat(themeVars.darkBorder, ")"), | ||
accent: "var(".concat(themeVars.accent, ", ").concat(themeVars.lightForegroundAction, ")"), | ||
// NOTE: accent is optional | ||
error: `var(${themeVars.error})`, | ||
errorMuted: `var(${themeVars.errorMuted})`, | ||
success: `var(${themeVars.success})`, | ||
successMuted: `var(${themeVars.successMuted})`, | ||
warning: `var(${themeVars.warning})`, | ||
warningMuted: `var(${themeVars.warningMuted})`, | ||
info: `var(${themeVars.info})`, | ||
infoMuted: `var(${themeVars.infoMuted})` | ||
error: "var(".concat(themeVars.error, ")"), | ||
errorMuted: "var(".concat(themeVars.errorMuted, ")"), | ||
success: "var(".concat(themeVars.success, ")"), | ||
successMuted: "var(".concat(themeVars.successMuted, ")"), | ||
warning: "var(".concat(themeVars.warning, ")"), | ||
warningMuted: "var(".concat(themeVars.warningMuted, ")"), | ||
info: "var(".concat(themeVars.info, ")"), | ||
infoMuted: "var(".concat(themeVars.infoMuted, ")") | ||
}; | ||
@@ -725,5 +772,9 @@ | ||
const mq = facepaint__default["default"]([tokens.mediaQuery.min.sm, tokens.mediaQuery.min.md, tokens.mediaQuery.min.lg, tokens.mediaQuery.min.xl]); | ||
const breakpointNames = ['xs', 'sm', 'md', 'lg', 'xl']; | ||
function mapResponsiveProp(value, valueMapper = t => t) { | ||
var mq = facepaint__default["default"]([tokens.mediaQuery.min.sm, tokens.mediaQuery.min.md, tokens.mediaQuery.min.lg, tokens.mediaQuery.min.xl]); | ||
var breakpointNames = ['xs', 'sm', 'md', 'lg', 'xl']; | ||
function mapResponsiveProp(value) { | ||
var valueMapper = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (t) { | ||
return t; | ||
}; | ||
if (!isNonNullable(value)) { | ||
@@ -734,9 +785,11 @@ return undefined; | ||
if (Array.isArray(value)) { | ||
return value.map(t => isNonNullable(t) ? valueMapper(t) : null); | ||
return value.map(function (t) { | ||
return isNonNullable(t) ? valueMapper(t) : null; | ||
}); | ||
} | ||
if (typeof value === 'object') { | ||
const resValue = value; | ||
return breakpointNames.map(key => { | ||
const token = key in resValue ? resValue[key] : undefined; | ||
var resValue = value; | ||
return breakpointNames.map(function (key) { | ||
var token = key in resValue ? resValue[key] : undefined; | ||
@@ -743,0 +796,0 @@ if (isNonNullable(token)) { |
@@ -1,7 +0,10 @@ | ||
import { jsx, css, Global } from '@emotion/react'; | ||
import { forwardRef, createContext, useContext, useState, useCallback, useEffect } from 'react'; | ||
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty'; | ||
import { css, Global } from '@emotion/react'; | ||
import { createContext, useContext, forwardRef, useState, useCallback, useEffect } from 'react'; | ||
import { jsx, jsxs } from '@emotion/react/jsx-runtime'; | ||
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray'; | ||
import facepaint from 'facepaint'; | ||
// Default theme from GOLD. | ||
const goldTheme = { | ||
var goldTheme = { | ||
lightForegroundText: '#313131', | ||
@@ -42,46 +45,31 @@ lightForegroundAction: '#00698f', | ||
function _extends() { | ||
_extends = Object.assign || function (target) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
var source = arguments[i]; | ||
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
for (var key in source) { | ||
if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
target[key] = source[key]; | ||
} | ||
} | ||
} | ||
return target; | ||
}; | ||
return _extends.apply(this, arguments); | ||
} | ||
const DefaultLinkComponent = forwardRef(function DefaultLinkComponent(props, ref) { | ||
return jsx("a", _extends({ | ||
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
var DefaultLinkComponent = /*#__PURE__*/forwardRef(function DefaultLinkComponent(props, ref) { | ||
return jsx("a", _objectSpread$3({ | ||
ref: ref | ||
}, props)); | ||
}); | ||
const coreContext = createContext({ | ||
var coreContext = /*#__PURE__*/createContext({ | ||
linkComponent: DefaultLinkComponent | ||
}); | ||
function CoreProvider({ | ||
linkComponent, | ||
children | ||
}) { | ||
function CoreProvider(_ref) { | ||
var linkComponent = _ref.linkComponent, | ||
children = _ref.children; | ||
return jsx(coreContext.Provider, { | ||
value: { | ||
linkComponent: linkComponent ?? DefaultLinkComponent | ||
} | ||
}, children); | ||
linkComponent: linkComponent !== null && linkComponent !== void 0 ? linkComponent : DefaultLinkComponent | ||
}, | ||
children: children | ||
}); | ||
} | ||
function useLinkComponent() { | ||
const { | ||
linkComponent | ||
} = useContext(coreContext); | ||
var _useContext = useContext(coreContext), | ||
linkComponent = _useContext.linkComponent; | ||
return linkComponent; | ||
} | ||
const themeVars = { | ||
var themeVars = { | ||
// Light | ||
@@ -123,6 +111,16 @@ lightForegroundText: '--agds-light-foreground-text', | ||
function mergeTheme(defaultTheme, theme) { | ||
return Object.fromEntries(Object.entries(themeVars).map(([key, variableName]) => [variableName, theme[key] ?? defaultTheme[key]])); | ||
return Object.fromEntries(Object.entries(themeVars).map(function (_ref) { | ||
var _ref3; | ||
var _ref2 = _slicedToArray(_ref, 2), | ||
key = _ref2[0], | ||
variableName = _ref2[1]; | ||
return [variableName, (_ref3 = theme && theme[key]) !== null && _ref3 !== void 0 ? _ref3 : defaultTheme[key]]; | ||
})); | ||
} | ||
const boxPaletteVars = { | ||
var _css, _css2; | ||
var boxPaletteVars = { | ||
foregroundText: '--agds-foreground-text', | ||
@@ -140,46 +138,30 @@ foregroundAction: '--agds-foreground-action', | ||
}; | ||
const boxPalettes = { | ||
light: /*#__PURE__*/css({ | ||
[boxPaletteVars.foregroundText]: `var(${themeVars.lightForegroundText})`, | ||
[boxPaletteVars.foregroundAction]: `var(${themeVars.lightForegroundAction})`, | ||
[boxPaletteVars.foregroundFocus]: `var(${themeVars.lightForegroundFocus})`, | ||
[boxPaletteVars.foregroundMuted]: `var(${themeVars.lightForegroundMuted})`, | ||
[boxPaletteVars.backgroundBody]: `var(${themeVars.lightBackgroundBody})`, | ||
[boxPaletteVars.backgroundShade]: `var(${themeVars.lightBackgroundShade})`, | ||
[boxPaletteVars.backgroundBodyAlt]: `var(${themeVars.lightBackgroundBodyAlt})`, | ||
[boxPaletteVars.backgroundShadeAlt]: `var(${themeVars.lightBackgroundShadeAlt})`, | ||
[boxPaletteVars.border]: `var(${themeVars.lightBorder})`, | ||
[boxPaletteVars.borderMuted]: `var(${themeVars.lightBorderMuted})`, | ||
[boxPaletteVars.borderInput]: `var(${themeVars.lightBorderInput})` | ||
}, process.env.NODE_ENV === "production" ? "" : ";label:light;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JRIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */"), | ||
dark: /*#__PURE__*/css({ | ||
[boxPaletteVars.foregroundText]: `var(${themeVars.darkForegroundText})`, | ||
[boxPaletteVars.foregroundAction]: `var(${themeVars.darkForegroundAction})`, | ||
[boxPaletteVars.foregroundFocus]: `var(${themeVars.darkForegroundFocus})`, | ||
[boxPaletteVars.foregroundMuted]: `var(${themeVars.darkForegroundMuted})`, | ||
[boxPaletteVars.backgroundBody]: `var(${themeVars.darkBackgroundBody})`, | ||
[boxPaletteVars.backgroundShade]: `var(${themeVars.darkBackgroundShade})`, | ||
[boxPaletteVars.backgroundBodyAlt]: `var(${themeVars.darkBackgroundBodyAlt})`, | ||
[boxPaletteVars.backgroundShadeAlt]: `var(${themeVars.darkBackgroundShadeAlt})`, | ||
[boxPaletteVars.border]: `var(${themeVars.darkBorder})`, | ||
[boxPaletteVars.borderMuted]: `var(${themeVars.darkBorderMuted})`, | ||
[boxPaletteVars.borderInput]: `var(${themeVars.darkBorderInput})` | ||
}, process.env.NODE_ENV === "production" ? "" : ";label:dark;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNPIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */") | ||
var boxPalettes = { | ||
light: | ||
/*#__PURE__*/ | ||
/*#__PURE__*/ | ||
css((_css = {}, _defineProperty(_css, boxPaletteVars.foregroundText, "var(".concat(themeVars.lightForegroundText, ")")), _defineProperty(_css, boxPaletteVars.foregroundAction, "var(".concat(themeVars.lightForegroundAction, ")")), _defineProperty(_css, boxPaletteVars.foregroundFocus, "var(".concat(themeVars.lightForegroundFocus, ")")), _defineProperty(_css, boxPaletteVars.foregroundMuted, "var(".concat(themeVars.lightForegroundMuted, ")")), _defineProperty(_css, boxPaletteVars.backgroundBody, "var(".concat(themeVars.lightBackgroundBody, ")")), _defineProperty(_css, boxPaletteVars.backgroundShade, "var(".concat(themeVars.lightBackgroundShade, ")")), _defineProperty(_css, boxPaletteVars.backgroundBodyAlt, "var(".concat(themeVars.lightBackgroundBodyAlt, ")")), _defineProperty(_css, boxPaletteVars.backgroundShadeAlt, "var(".concat(themeVars.lightBackgroundShadeAlt, ")")), _defineProperty(_css, boxPaletteVars.border, "var(".concat(themeVars.lightBorder, ")")), _defineProperty(_css, boxPaletteVars.borderMuted, "var(".concat(themeVars.lightBorderMuted, ")")), _defineProperty(_css, boxPaletteVars.borderInput, "var(".concat(themeVars.lightBorderInput, ")")), _css), process.env.NODE_ENV === "production" ? "" : ";label:light;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JRIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:light;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JRIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */"), | ||
dark: | ||
/*#__PURE__*/ | ||
/*#__PURE__*/ | ||
css((_css2 = {}, _defineProperty(_css2, boxPaletteVars.foregroundText, "var(".concat(themeVars.darkForegroundText, ")")), _defineProperty(_css2, boxPaletteVars.foregroundAction, "var(".concat(themeVars.darkForegroundAction, ")")), _defineProperty(_css2, boxPaletteVars.foregroundFocus, "var(".concat(themeVars.darkForegroundFocus, ")")), _defineProperty(_css2, boxPaletteVars.foregroundMuted, "var(".concat(themeVars.darkForegroundMuted, ")")), _defineProperty(_css2, boxPaletteVars.backgroundBody, "var(".concat(themeVars.darkBackgroundBody, ")")), _defineProperty(_css2, boxPaletteVars.backgroundShade, "var(".concat(themeVars.darkBackgroundShade, ")")), _defineProperty(_css2, boxPaletteVars.backgroundBodyAlt, "var(".concat(themeVars.darkBackgroundBodyAlt, ")")), _defineProperty(_css2, boxPaletteVars.backgroundShadeAlt, "var(".concat(themeVars.darkBackgroundShadeAlt, ")")), _defineProperty(_css2, boxPaletteVars.border, "var(".concat(themeVars.darkBorder, ")")), _defineProperty(_css2, boxPaletteVars.borderMuted, "var(".concat(themeVars.darkBorderMuted, ")")), _defineProperty(_css2, boxPaletteVars.borderInput, "var(".concat(themeVars.darkBorderInput, ")")), _css2), process.env.NODE_ENV === "production" ? "" : ";label:dark;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNPIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:dark;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNPIiwiZmlsZSI6ImJveFBhbGV0dGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0aGVtZVZhcnMgfSBmcm9tICcuL3RoZW1lJztcblxuLy8gQm94IFBhbGV0dGVcblxuY29uc3QgYm94UGFsZXR0ZVZhcnMgPSB7XG5cdGZvcmVncm91bmRUZXh0OiAnLS1hZ2RzLWZvcmVncm91bmQtdGV4dCcsXG5cdGZvcmVncm91bmRBY3Rpb246ICctLWFnZHMtZm9yZWdyb3VuZC1hY3Rpb24nLFxuXHRmb3JlZ3JvdW5kRm9jdXM6ICctLWFnZHMtZm9yZWdyb3VuZC1mb2N1cycsXG5cdGZvcmVncm91bmRNdXRlZDogJy0tYWdkcy1mb3JlZ3JvdW5kLW11dGVkJyxcblx0YmFja2dyb3VuZEJvZHk6ICctLWFnZHMtYmFja2dyb3VuZC1ib2R5Jyxcblx0YmFja2dyb3VuZFNoYWRlOiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUnLFxuXHRiYWNrZ3JvdW5kQm9keUFsdDogJy0tYWdkcy1iYWNrZ3JvdW5kLWJvZHktYWx0Jyxcblx0YmFja2dyb3VuZFNoYWRlQWx0OiAnLS1hZ2RzLWJhY2tncm91bmQtc2hhZGUtYWx0Jyxcblx0Ym9yZGVyOiAnLS1hZ2RzLWJvcmRlcicsXG5cdGJvcmRlck11dGVkOiAnLS1hZ2RzLWJvcmRlci1tdXRlZCcsXG5cdGJvcmRlcklucHV0OiAnLS1hZ2RzLWJvcmRlci1pbnB1dCcsXG59O1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZXMgPSB7XG5cdGxpZ2h0OiBjc3Moe1xuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kVGV4dH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZEFjdGlvbl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZEZvY3VzfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0Rm9yZWdyb3VuZE11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keV06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5saWdodEJhY2tncm91bmRTaGFkZX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmxpZ2h0QmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJ9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkXTogYHZhcigke3RoZW1lVmFycy5saWdodEJvcmRlck11dGVkfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5ib3JkZXJJbnB1dF06IGB2YXIoJHt0aGVtZVZhcnMubGlnaHRCb3JkZXJJbnB1dH0pYCxcblx0fSksXG5cdGRhcms6IGNzcyh7XG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRUZXh0XTogYHZhcigke3RoZW1lVmFycy5kYXJrRm9yZWdyb3VuZFRleHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb25dOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kQWN0aW9ufSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kRm9jdXNdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtGb3JlZ3JvdW5kRm9jdXN9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRNdXRlZF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0ZvcmVncm91bmRNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHldOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kQm9keX0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZFNoYWRlXTogYHZhcigke3RoZW1lVmFycy5kYXJrQmFja2dyb3VuZFNoYWRlfSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kQm9keUFsdF06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JhY2tncm91bmRCb2R5QWx0fSlgLFxuXHRcdFtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGVBbHRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCYWNrZ3JvdW5kU2hhZGVBbHR9KWAsXG5cdFx0W2JveFBhbGV0dGVWYXJzLmJvcmRlcl06IGB2YXIoJHt0aGVtZVZhcnMuZGFya0JvcmRlcn0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVyTXV0ZWRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJNdXRlZH0pYCxcblx0XHRbYm94UGFsZXR0ZVZhcnMuYm9yZGVySW5wdXRdOiBgdmFyKCR7dGhlbWVWYXJzLmRhcmtCb3JkZXJJbnB1dH0pYCxcblx0fSksXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBCb3hQYWxldHRlID0ga2V5b2YgdHlwZW9mIGJveFBhbGV0dGVzO1xuXG5leHBvcnQgY29uc3QgYm94UGFsZXR0ZSA9IHtcblx0Zm9yZWdyb3VuZFRleHQ6IGB2YXIoJHtib3hQYWxldHRlVmFycy5mb3JlZ3JvdW5kVGV4dH0pYCxcblx0Zm9yZWdyb3VuZEFjdGlvbjogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRBY3Rpb259KWAsXG5cdGZvcmVncm91bmRGb2N1czogYHZhcigke2JveFBhbGV0dGVWYXJzLmZvcmVncm91bmRGb2N1c30pYCxcblx0Zm9yZWdyb3VuZE11dGVkOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuZm9yZWdyb3VuZE11dGVkfSlgLFxuXHRiYWNrZ3JvdW5kQm9keTogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRCb2R5fSlgLFxuXHRiYWNrZ3JvdW5kU2hhZGU6IGB2YXIoJHtib3hQYWxldHRlVmFycy5iYWNrZ3JvdW5kU2hhZGV9KWAsXG5cdGJhY2tncm91bmRCb2R5QWx0OiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYmFja2dyb3VuZEJvZHlBbHR9KWAsXG5cdGJhY2tncm91bmRTaGFkZUFsdDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJhY2tncm91bmRTaGFkZUFsdH0pYCxcblx0Ym9yZGVyOiBgdmFyKCR7Ym94UGFsZXR0ZVZhcnMuYm9yZGVyfSlgLFxuXHRib3JkZXJNdXRlZDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlck11dGVkfSlgLFxuXHRib3JkZXJJbnB1dDogYHZhcigke2JveFBhbGV0dGVWYXJzLmJvcmRlcklucHV0fSlgLFxufTtcbiJdfQ== */") | ||
}; | ||
const boxPalette = { | ||
foregroundText: `var(${boxPaletteVars.foregroundText})`, | ||
foregroundAction: `var(${boxPaletteVars.foregroundAction})`, | ||
foregroundFocus: `var(${boxPaletteVars.foregroundFocus})`, | ||
foregroundMuted: `var(${boxPaletteVars.foregroundMuted})`, | ||
backgroundBody: `var(${boxPaletteVars.backgroundBody})`, | ||
backgroundShade: `var(${boxPaletteVars.backgroundShade})`, | ||
backgroundBodyAlt: `var(${boxPaletteVars.backgroundBodyAlt})`, | ||
backgroundShadeAlt: `var(${boxPaletteVars.backgroundShadeAlt})`, | ||
border: `var(${boxPaletteVars.border})`, | ||
borderMuted: `var(${boxPaletteVars.borderMuted})`, | ||
borderInput: `var(${boxPaletteVars.borderInput})` | ||
var boxPalette = { | ||
foregroundText: "var(".concat(boxPaletteVars.foregroundText, ")"), | ||
foregroundAction: "var(".concat(boxPaletteVars.foregroundAction, ")"), | ||
foregroundFocus: "var(".concat(boxPaletteVars.foregroundFocus, ")"), | ||
foregroundMuted: "var(".concat(boxPaletteVars.foregroundMuted, ")"), | ||
backgroundBody: "var(".concat(boxPaletteVars.backgroundBody, ")"), | ||
backgroundShade: "var(".concat(boxPaletteVars.backgroundShade, ")"), | ||
backgroundBodyAlt: "var(".concat(boxPaletteVars.backgroundBodyAlt, ")"), | ||
backgroundShadeAlt: "var(".concat(boxPaletteVars.backgroundShadeAlt, ")"), | ||
border: "var(".concat(boxPaletteVars.border, ")"), | ||
borderMuted: "var(".concat(boxPaletteVars.borderMuted, ")"), | ||
borderInput: "var(".concat(boxPaletteVars.borderInput, ")") | ||
}; | ||
// Tokens | ||
const breakpoint = { | ||
var breakpoint = { | ||
xs: 0, | ||
@@ -191,22 +173,22 @@ sm: 576, | ||
}; | ||
const mediaQuery = { | ||
var mediaQuery = { | ||
min: { | ||
xs: `@media(min-width: ${breakpoint.xs}px)`, | ||
sm: `@media(min-width: ${breakpoint.sm}px)`, | ||
md: `@media(min-width: ${breakpoint.md}px)`, | ||
lg: `@media(min-width: ${breakpoint.lg}px)`, | ||
xl: `@media(min-width: ${breakpoint.xl}px)` | ||
xs: "@media(min-width: ".concat(breakpoint.xs, "px)"), | ||
sm: "@media(min-width: ".concat(breakpoint.sm, "px)"), | ||
md: "@media(min-width: ".concat(breakpoint.md, "px)"), | ||
lg: "@media(min-width: ".concat(breakpoint.lg, "px)"), | ||
xl: "@media(min-width: ".concat(breakpoint.xl, "px)") | ||
}, | ||
max: { | ||
xs: `@media(max-width: ${breakpoint.sm - 1}px)`, | ||
sm: `@media(max-width: ${breakpoint.md - 1}px)`, | ||
md: `@media(max-width: ${breakpoint.lg - 1}px)`, | ||
lg: `@media(max-width: ${breakpoint.xl - 1}px)` | ||
xs: "@media(max-width: ".concat(breakpoint.sm - 1, "px)"), | ||
sm: "@media(max-width: ".concat(breakpoint.md - 1, "px)"), | ||
md: "@media(max-width: ".concat(breakpoint.lg - 1, "px)"), | ||
lg: "@media(max-width: ".concat(breakpoint.xl - 1, "px)") | ||
} | ||
}; | ||
const rem = 16; | ||
var rem = 16; | ||
/** "unit" used for all type and grid calculations */ | ||
const unit = 4; | ||
const font = { | ||
var unit = 4; | ||
var font = { | ||
body: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", | ||
@@ -217,3 +199,3 @@ monospace: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace" | ||
/** Use as rem values */ | ||
const fontSize = { | ||
var fontSize = { | ||
xs: { | ||
@@ -238,3 +220,3 @@ xs: 0.875, | ||
}; | ||
const fontWeight = { | ||
var fontWeight = { | ||
normal: 'normal', | ||
@@ -245,15 +227,15 @@ bold: 'bold' | ||
/** lineHeight-map - Predetermined line-height mapped to keyword */ | ||
const lineHeight = { | ||
var lineHeight = { | ||
nospace: 1, | ||
heading: 1.25, | ||
default: 1.5 | ||
"default": 1.5 | ||
}; | ||
function mapSpacing(v) { | ||
return `${v}rem`; | ||
return "".concat(v, "rem"); | ||
} | ||
const containerPadding = { | ||
var containerPadding = { | ||
xs: 0.75, | ||
md: 2 | ||
}; | ||
const maxWidth = { | ||
var maxWidth = { | ||
bodyText: '42em', | ||
@@ -265,4 +247,4 @@ container: '80rem', | ||
}; | ||
const borderRadius = unit; | ||
const borderWidth = { | ||
var borderRadius = unit; | ||
var borderWidth = { | ||
sm: 1, | ||
@@ -273,20 +255,29 @@ md: 2, | ||
}; | ||
const tokens = { | ||
breakpoint, | ||
mediaQuery, | ||
rem, | ||
unit, | ||
font, | ||
fontSize, | ||
fontWeight, | ||
lineHeight, | ||
containerPadding, | ||
maxWidth, | ||
borderRadius, | ||
borderWidth | ||
var tokens = { | ||
breakpoint: breakpoint, | ||
mediaQuery: mediaQuery, | ||
rem: rem, | ||
unit: unit, | ||
font: font, | ||
fontSize: fontSize, | ||
fontWeight: fontWeight, | ||
lineHeight: lineHeight, | ||
containerPadding: containerPadding, | ||
maxWidth: maxWidth, | ||
borderRadius: borderRadius, | ||
borderWidth: borderWidth | ||
}; | ||
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; } | ||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
/** Ensures that font-size and line-height snaps to the 4px grid. */ | ||
const fontGridVars = { | ||
var fontGridVars = { | ||
xs: { | ||
@@ -296,3 +287,3 @@ size: '--typography-xs', | ||
heading: '--typography-xs-heading', | ||
default: '--typography-xs-default' | ||
"default": '--typography-xs-default' | ||
}, | ||
@@ -303,3 +294,3 @@ sm: { | ||
heading: '--typography-sm-heading', | ||
default: '--typography-sm-default' | ||
"default": '--typography-sm-default' | ||
}, | ||
@@ -310,3 +301,3 @@ md: { | ||
heading: '--typography-md-heading', | ||
default: '--typography-md-default' | ||
"default": '--typography-md-default' | ||
}, | ||
@@ -317,3 +308,3 @@ lg: { | ||
heading: '--typography-lg-heading', | ||
default: '--typography-lg-default' | ||
"default": '--typography-lg-default' | ||
}, | ||
@@ -324,3 +315,3 @@ xl: { | ||
heading: '--typography-xl-heading', | ||
default: '--typography-xl-default' | ||
"default": '--typography-xl-default' | ||
}, | ||
@@ -331,3 +322,3 @@ xxl: { | ||
heading: '--typography-xxl-heading', | ||
default: '--typography-xxl-default' | ||
"default": '--typography-xxl-default' | ||
}, | ||
@@ -338,30 +329,49 @@ xxxl: { | ||
heading: '--typography-xxxl-heading', | ||
default: '--typography-xxxl-default' | ||
"default": '--typography-xxxl-default' | ||
} | ||
}; | ||
const fontScales = Object.keys(tokens.fontSize); | ||
const lineHeights = Object.keys(tokens.lineHeight); | ||
var fontScales = Object.keys(tokens.fontSize); | ||
var lineHeights = Object.keys(tokens.lineHeight); | ||
function generateFontGrid() { | ||
let cssVars = {}; | ||
var cssVars = {}; | ||
for (const scale of fontScales) { | ||
const scaleVars = []; | ||
const fontSizes = Object.keys(tokens.fontSize[scale]); | ||
var _iterator = _createForOfIteratorHelper(fontScales), | ||
_step; | ||
for (const size of fontSizes) { | ||
scaleVars.push([fontGridVars[size]['size'], `${tokens.fontSize[scale][size]}rem`]); | ||
try { | ||
for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
var scale = _step.value; | ||
var scaleVars = []; | ||
var fontSizes = Object.keys(tokens.fontSize[scale]); | ||
for (const lineHeight of lineHeights) { | ||
scaleVars.push([fontGridVars[size][lineHeight], calculateLineHeight(scale, size, lineHeight)]); | ||
for (var _i = 0, _fontSizes = fontSizes; _i < _fontSizes.length; _i++) { | ||
var size = _fontSizes[_i]; | ||
scaleVars.push([fontGridVars[size]['size'], "".concat(tokens.fontSize[scale][size], "rem")]); | ||
var _iterator2 = _createForOfIteratorHelper(lineHeights), | ||
_step2; | ||
try { | ||
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { | ||
var _lineHeight = _step2.value; | ||
scaleVars.push([fontGridVars[size][_lineHeight], calculateLineHeight(scale, size, _lineHeight)]); | ||
} | ||
} catch (err) { | ||
_iterator2.e(err); | ||
} finally { | ||
_iterator2.f(); | ||
} | ||
} | ||
} | ||
if (tokens.breakpoint[scale] === 0) { | ||
cssVars = { ...cssVars, | ||
...Object.fromEntries(scaleVars) | ||
}; | ||
} else { | ||
const key = tokens.mediaQuery.min[scale]; | ||
cssVars[key] = Object.fromEntries(scaleVars); | ||
if (tokens.breakpoint[scale] === 0) { | ||
cssVars = _objectSpread$2(_objectSpread$2({}, cssVars), Object.fromEntries(scaleVars)); | ||
} else { | ||
var key = tokens.mediaQuery.min[scale]; | ||
cssVars[key] = Object.fromEntries(scaleVars); | ||
} | ||
} | ||
} catch (err) { | ||
_iterator.e(err); | ||
} finally { | ||
_iterator.f(); | ||
} | ||
@@ -371,6 +381,6 @@ | ||
} | ||
const fontGrid = (fontSize, lineHeight) => { | ||
var fontGrid = function fontGrid(fontSize, lineHeight) { | ||
if (typeof fontSize === 'number') { | ||
return { | ||
fontSize: `${fontSize}rem`, | ||
fontSize: "".concat(fontSize, "rem"), | ||
lineHeight: calculateLineHeight('sm', fontSize, lineHeight) | ||
@@ -381,17 +391,17 @@ }; | ||
return { | ||
fontSize: `var(${fontGridVars[fontSize]['size']})`, | ||
lineHeight: `var(${fontGridVars[fontSize][lineHeight]})` | ||
fontSize: "var(".concat(fontGridVars[fontSize]['size'], ")"), | ||
lineHeight: "var(".concat(fontGridVars[fontSize][lineHeight], ")") | ||
}; | ||
}; | ||
const calculateLineHeight = (scale, fontSize, lineHeight) => { | ||
const fSizeRem = typeof fontSize === 'number' ? fontSize : tokens.fontSize[scale][fontSize]; | ||
const fSizePx = fSizeRem * tokens.rem; | ||
const lHeight = tokens.lineHeight[lineHeight]; | ||
const totalHeight = Math.round(fSizePx * lHeight / tokens.unit) * tokens.unit; | ||
const calcLineHeight = totalHeight / fSizePx; | ||
var calculateLineHeight = function calculateLineHeight(scale, fontSize, lineHeight) { | ||
var fSizeRem = typeof fontSize === 'number' ? fontSize : tokens.fontSize[scale][fontSize]; | ||
var fSizePx = fSizeRem * tokens.rem; | ||
var lHeight = tokens.lineHeight[lineHeight]; | ||
var totalHeight = Math.round(fSizePx * lHeight / tokens.unit) * tokens.unit; | ||
var calcLineHeight = totalHeight / fSizePx; | ||
return calcLineHeight; | ||
}; | ||
const printTheme = { | ||
var printTheme = { | ||
lightForegroundText: 'black', | ||
@@ -431,33 +441,35 @@ lightForegroundAction: 'black', | ||
function Core({ | ||
children, | ||
applyReset = true, | ||
theme, | ||
linkComponent | ||
}) { | ||
return jsx(CoreProvider, { | ||
linkComponent: linkComponent | ||
}, jsx(Global, { | ||
styles: [{ | ||
':root': { ...(theme ? mergeTheme(goldTheme, theme) : goldTheme), | ||
...generateFontGrid() | ||
}, | ||
// Reset the global theme in print mode to black & white | ||
// Note: Components can also contain print specific styles | ||
'@media print': { | ||
':root': mergeTheme(goldTheme, printTheme) | ||
} | ||
}, { | ||
// Apply the light pallet by default | ||
'body,html': boxPalettes.light | ||
}, applyReset && { | ||
// FIXME: apply the css reset | ||
'body, html': { | ||
margin: 0, | ||
padding: 0, | ||
background: boxPalette.backgroundBody, | ||
fontFamily: tokens.font.body | ||
} | ||
}, process.env.NODE_ENV === "production" ? "" : ";label:Core;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCSSIsImZpbGUiOiJDb3JlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFByb3BzV2l0aENoaWxkcmVuIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ29sZFRoZW1lIH0gZnJvbSAnLi9nb2xkVGhlbWUnO1xuaW1wb3J0IHsgQ29yZVByb3ZpZGVyLCBDb3JlUHJvdmlkZXJQcm9wcyB9IGZyb20gJy4vQ29yZVByb3ZpZGVyJztcbmltcG9ydCB7IG1lcmdlVGhlbWUsIFRoZW1lIH0gZnJvbSAnLi90aGVtZSc7XG5pbXBvcnQgeyBib3hQYWxldHRlcywgYm94UGFsZXR0ZSB9IGZyb20gJy4vYm94UGFsZXR0ZSc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL3Rva2Vucyc7XG5pbXBvcnQgeyBnZW5lcmF0ZUZvbnRHcmlkIH0gZnJvbSAnLi91dGlscy9mb250R3JpZCc7XG5pbXBvcnQgeyBwcmludFRoZW1lIH0gZnJvbSAnLi9wcmludFRoZW1lJztcblxuZXhwb3J0IHR5cGUgQ29yZVByb3BzID0gUHJvcHNXaXRoQ2hpbGRyZW48XG5cdHtcblx0XHR0aGVtZT86IFRoZW1lO1xuXHRcdGFwcGx5UmVzZXQ/OiBib29sZWFuO1xuXHR9ICYgQ29yZVByb3ZpZGVyUHJvcHNcbj47XG5cbmV4cG9ydCBmdW5jdGlvbiBDb3JlKHtcblx0Y2hpbGRyZW4sXG5cdGFwcGx5UmVzZXQgPSB0cnVlLFxuXHR0aGVtZSxcblx0bGlua0NvbXBvbmVudCxcbn06IENvcmVQcm9wcykge1xuXHRyZXR1cm4gKFxuXHRcdDxDb3JlUHJvdmlkZXIgbGlua0NvbXBvbmVudD17bGlua0NvbXBvbmVudH0+XG5cdFx0XHQ8R2xvYmFsXG5cdFx0XHRcdHN0eWxlcz17W1xuXHRcdFx0XHRcdHtcblx0XHRcdFx0XHRcdCc6cm9vdCc6IHtcblx0XHRcdFx0XHRcdFx0Li4uKHRoZW1lID8gbWVyZ2VUaGVtZShnb2xkVGhlbWUsIHRoZW1lKSA6IGdvbGRUaGVtZSksXG5cdFx0XHRcdFx0XHRcdC4uLmdlbmVyYXRlRm9udEdyaWQoKSxcblx0XHRcdFx0XHRcdH0sXG5cdFx0XHRcdFx0XHQvLyBSZXNldCB0aGUgZ2xvYmFsIHRoZW1lIGluIHByaW50IG1vZGUgdG8gYmxhY2sgJiB3aGl0ZVxuXHRcdFx0XHRcdFx0Ly8gTm90ZTogQ29tcG9uZW50cyBjYW4gYWxzbyBjb250YWluIHByaW50IHNwZWNpZmljIHN0eWxlc1xuXHRcdFx0XHRcdFx0J0BtZWRpYSBwcmludCc6IHtcblx0XHRcdFx0XHRcdFx0Jzpyb290JzogbWVyZ2VUaGVtZShnb2xkVGhlbWUsIHByaW50VGhlbWUpLFxuXHRcdFx0XHRcdFx0fSxcblx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdHtcblx0XHRcdFx0XHRcdC8vIEFwcGx5IHRoZSBsaWdodCBwYWxsZXQgYnkgZGVmYXVsdFxuXHRcdFx0XHRcdFx0J2JvZHksaHRtbCc6IGJveFBhbGV0dGVzLmxpZ2h0LFxuXHRcdFx0XHRcdH0sXG5cdFx0XHRcdFx0YXBwbHlSZXNldCAmJiB7XG5cdFx0XHRcdFx0XHQvLyBGSVhNRTogYXBwbHkgdGhlIGNzcyByZXNldFxuXHRcdFx0XHRcdFx0J2JvZHksIGh0bWwnOiB7XG5cdFx0XHRcdFx0XHRcdG1hcmdpbjogMCxcblx0XHRcdFx0XHRcdFx0cGFkZGluZzogMCxcblx0XHRcdFx0XHRcdFx0YmFja2dyb3VuZDogYm94UGFsZXR0ZS5iYWNrZ3JvdW5kQm9keSxcblx0XHRcdFx0XHRcdFx0Zm9udEZhbWlseTogdG9rZW5zLmZvbnQuYm9keSxcblx0XHRcdFx0XHRcdH0sXG5cdFx0XHRcdFx0fSxcblx0XHRcdFx0XX1cblx0XHRcdC8+XG5cdFx0XHR7Y2hpbGRyZW59XG5cdFx0PC9Db3JlUHJvdmlkZXI+XG5cdCk7XG59XG4iXX0= */"] | ||
}), children); | ||
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
function Core(_ref) { | ||
var children = _ref.children, | ||
_ref$applyReset = _ref.applyReset, | ||
applyReset = _ref$applyReset === void 0 ? true : _ref$applyReset, | ||
theme = _ref.theme, | ||
linkComponent = _ref.linkComponent; | ||
return jsxs(CoreProvider, { | ||
linkComponent: linkComponent, | ||
children: [jsx(Global, { | ||
styles: [{ | ||
':root': _objectSpread$1(_objectSpread$1({}, mergeTheme(goldTheme, theme)), generateFontGrid()), | ||
// Reset the global theme in print mode to black & white | ||
// Note: Components can also contain print specific styles | ||
'@media print': { | ||
':root': mergeTheme(goldTheme, printTheme) | ||
} | ||
}, { | ||
// Apply the light pallet by default | ||
'body,html': boxPalettes.light | ||
}, applyReset && { | ||
// FIXME: apply the css reset | ||
'body, html': { | ||
margin: 0, | ||
padding: 0, | ||
background: boxPalette.backgroundBody, | ||
fontFamily: tokens.font.body | ||
} | ||
}, process.env.NODE_ENV === "production" ? "" : ";label:Core;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCSSIsImZpbGUiOiJDb3JlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFByb3BzV2l0aENoaWxkcmVuIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ29sZFRoZW1lIH0gZnJvbSAnLi9nb2xkVGhlbWUnO1xuaW1wb3J0IHsgQ29yZVByb3ZpZGVyLCBDb3JlUHJvdmlkZXJQcm9wcyB9IGZyb20gJy4vQ29yZVByb3ZpZGVyJztcbmltcG9ydCB7IG1lcmdlVGhlbWUsIFRoZW1lIH0gZnJvbSAnLi90aGVtZSc7XG5pbXBvcnQgeyBib3hQYWxldHRlcywgYm94UGFsZXR0ZSB9IGZyb20gJy4vYm94UGFsZXR0ZSc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL3Rva2Vucyc7XG5pbXBvcnQgeyBnZW5lcmF0ZUZvbnRHcmlkIH0gZnJvbSAnLi91dGlscy9mb250R3JpZCc7XG5pbXBvcnQgeyBwcmludFRoZW1lIH0gZnJvbSAnLi9wcmludFRoZW1lJztcblxuZXhwb3J0IHR5cGUgQ29yZVByb3BzID0gUHJvcHNXaXRoQ2hpbGRyZW48XG5cdHtcblx0XHQvKiogSWYgdHJ1ZSwgYSBDU1MgcmVzZXQgd2lsbCBiZSBhcHBsaWVkLiAqL1xuXHRcdGFwcGx5UmVzZXQ/OiBib29sZWFuO1xuXHRcdC8qKiBFbmFibGVzIG92ZXJ3cml0aW5nIG9mIHRoZSBkZWZhdWx0IHRoZW1lLiAqL1xuXHRcdHRoZW1lPzogVGhlbWU7XG5cdH0gJiBDb3JlUHJvdmlkZXJQcm9wc1xuPjtcblxuZXhwb3J0IGZ1bmN0aW9uIENvcmUoe1xuXHRjaGlsZHJlbixcblx0YXBwbHlSZXNldCA9IHRydWUsXG5cdHRoZW1lLFxuXHRsaW5rQ29tcG9uZW50LFxufTogQ29yZVByb3BzKSB7XG5cdHJldHVybiAoXG5cdFx0PENvcmVQcm92aWRlciBsaW5rQ29tcG9uZW50PXtsaW5rQ29tcG9uZW50fT5cblx0XHRcdDxHbG9iYWxcblx0XHRcdFx0c3R5bGVzPXtbXG5cdFx0XHRcdFx0e1xuXHRcdFx0XHRcdFx0Jzpyb290Jzoge1xuXHRcdFx0XHRcdFx0XHQuLi5tZXJnZVRoZW1lKGdvbGRUaGVtZSwgdGhlbWUpLFxuXHRcdFx0XHRcdFx0XHQuLi5nZW5lcmF0ZUZvbnRHcmlkKCksXG5cdFx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdFx0Ly8gUmVzZXQgdGhlIGdsb2JhbCB0aGVtZSBpbiBwcmludCBtb2RlIHRvIGJsYWNrICYgd2hpdGVcblx0XHRcdFx0XHRcdC8vIE5vdGU6IENvbXBvbmVudHMgY2FuIGFsc28gY29udGFpbiBwcmludCBzcGVjaWZpYyBzdHlsZXNcblx0XHRcdFx0XHRcdCdAbWVkaWEgcHJpbnQnOiB7XG5cdFx0XHRcdFx0XHRcdCc6cm9vdCc6IG1lcmdlVGhlbWUoZ29sZFRoZW1lLCBwcmludFRoZW1lKSxcblx0XHRcdFx0XHRcdH0sXG5cdFx0XHRcdFx0fSxcblx0XHRcdFx0XHR7XG5cdFx0XHRcdFx0XHQvLyBBcHBseSB0aGUgbGlnaHQgcGFsbGV0IGJ5IGRlZmF1bHRcblx0XHRcdFx0XHRcdCdib2R5LGh0bWwnOiBib3hQYWxldHRlcy5saWdodCxcblx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdGFwcGx5UmVzZXQgJiYge1xuXHRcdFx0XHRcdFx0Ly8gRklYTUU6IGFwcGx5IHRoZSBjc3MgcmVzZXRcblx0XHRcdFx0XHRcdCdib2R5LCBodG1sJzoge1xuXHRcdFx0XHRcdFx0XHRtYXJnaW46IDAsXG5cdFx0XHRcdFx0XHRcdHBhZGRpbmc6IDAsXG5cdFx0XHRcdFx0XHRcdGJhY2tncm91bmQ6IGJveFBhbGV0dGUuYmFja2dyb3VuZEJvZHksXG5cdFx0XHRcdFx0XHRcdGZvbnRGYW1pbHk6IHRva2Vucy5mb250LmJvZHksXG5cdFx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdH0sXG5cdFx0XHRcdF19XG5cdFx0XHQvPlxuXHRcdFx0e2NoaWxkcmVufVxuXHRcdDwvQ29yZVByb3ZpZGVyPlxuXHQpO1xufVxuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:Core;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCSSIsImZpbGUiOiJDb3JlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFByb3BzV2l0aENoaWxkcmVuIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ29sZFRoZW1lIH0gZnJvbSAnLi9nb2xkVGhlbWUnO1xuaW1wb3J0IHsgQ29yZVByb3ZpZGVyLCBDb3JlUHJvdmlkZXJQcm9wcyB9IGZyb20gJy4vQ29yZVByb3ZpZGVyJztcbmltcG9ydCB7IG1lcmdlVGhlbWUsIFRoZW1lIH0gZnJvbSAnLi90aGVtZSc7XG5pbXBvcnQgeyBib3hQYWxldHRlcywgYm94UGFsZXR0ZSB9IGZyb20gJy4vYm94UGFsZXR0ZSc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL3Rva2Vucyc7XG5pbXBvcnQgeyBnZW5lcmF0ZUZvbnRHcmlkIH0gZnJvbSAnLi91dGlscy9mb250R3JpZCc7XG5pbXBvcnQgeyBwcmludFRoZW1lIH0gZnJvbSAnLi9wcmludFRoZW1lJztcblxuZXhwb3J0IHR5cGUgQ29yZVByb3BzID0gUHJvcHNXaXRoQ2hpbGRyZW48XG5cdHtcblx0XHQvKiogSWYgdHJ1ZSwgYSBDU1MgcmVzZXQgd2lsbCBiZSBhcHBsaWVkLiAqL1xuXHRcdGFwcGx5UmVzZXQ/OiBib29sZWFuO1xuXHRcdC8qKiBFbmFibGVzIG92ZXJ3cml0aW5nIG9mIHRoZSBkZWZhdWx0IHRoZW1lLiAqL1xuXHRcdHRoZW1lPzogVGhlbWU7XG5cdH0gJiBDb3JlUHJvdmlkZXJQcm9wc1xuPjtcblxuZXhwb3J0IGZ1bmN0aW9uIENvcmUoe1xuXHRjaGlsZHJlbixcblx0YXBwbHlSZXNldCA9IHRydWUsXG5cdHRoZW1lLFxuXHRsaW5rQ29tcG9uZW50LFxufTogQ29yZVByb3BzKSB7XG5cdHJldHVybiAoXG5cdFx0PENvcmVQcm92aWRlciBsaW5rQ29tcG9uZW50PXtsaW5rQ29tcG9uZW50fT5cblx0XHRcdDxHbG9iYWxcblx0XHRcdFx0c3R5bGVzPXtbXG5cdFx0XHRcdFx0e1xuXHRcdFx0XHRcdFx0Jzpyb290Jzoge1xuXHRcdFx0XHRcdFx0XHQuLi5tZXJnZVRoZW1lKGdvbGRUaGVtZSwgdGhlbWUpLFxuXHRcdFx0XHRcdFx0XHQuLi5nZW5lcmF0ZUZvbnRHcmlkKCksXG5cdFx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdFx0Ly8gUmVzZXQgdGhlIGdsb2JhbCB0aGVtZSBpbiBwcmludCBtb2RlIHRvIGJsYWNrICYgd2hpdGVcblx0XHRcdFx0XHRcdC8vIE5vdGU6IENvbXBvbmVudHMgY2FuIGFsc28gY29udGFpbiBwcmludCBzcGVjaWZpYyBzdHlsZXNcblx0XHRcdFx0XHRcdCdAbWVkaWEgcHJpbnQnOiB7XG5cdFx0XHRcdFx0XHRcdCc6cm9vdCc6IG1lcmdlVGhlbWUoZ29sZFRoZW1lLCBwcmludFRoZW1lKSxcblx0XHRcdFx0XHRcdH0sXG5cdFx0XHRcdFx0fSxcblx0XHRcdFx0XHR7XG5cdFx0XHRcdFx0XHQvLyBBcHBseSB0aGUgbGlnaHQgcGFsbGV0IGJ5IGRlZmF1bHRcblx0XHRcdFx0XHRcdCdib2R5LGh0bWwnOiBib3hQYWxldHRlcy5saWdodCxcblx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdGFwcGx5UmVzZXQgJiYge1xuXHRcdFx0XHRcdFx0Ly8gRklYTUU6IGFwcGx5IHRoZSBjc3MgcmVzZXRcblx0XHRcdFx0XHRcdCdib2R5LCBodG1sJzoge1xuXHRcdFx0XHRcdFx0XHRtYXJnaW46IDAsXG5cdFx0XHRcdFx0XHRcdHBhZGRpbmc6IDAsXG5cdFx0XHRcdFx0XHRcdGJhY2tncm91bmQ6IGJveFBhbGV0dGUuYmFja2dyb3VuZEJvZHksXG5cdFx0XHRcdFx0XHRcdGZvbnRGYW1pbHk6IHRva2Vucy5mb250LmJvZHksXG5cdFx0XHRcdFx0XHR9LFxuXHRcdFx0XHRcdH0sXG5cdFx0XHRcdF19XG5cdFx0XHQvPlxuXHRcdFx0e2NoaWxkcmVufVxuXHRcdDwvQ29yZVByb3ZpZGVyPlxuXHQpO1xufVxuIl19 */"] | ||
}), children] | ||
}); | ||
} | ||
@@ -476,7 +488,10 @@ | ||
function useTernaryState(initialValue) { | ||
const [state, setState] = useState(initialValue); | ||
const setTrue = useCallback(function setTrue() { | ||
var _useState = useState(initialValue), | ||
state = _useState[0], | ||
setState = _useState[1]; | ||
var setTrue = useCallback(function setTrue() { | ||
return setState(true); | ||
}, []); | ||
const setFalse = useCallback(function setTrue() { | ||
var setFalse = useCallback(function setTrue() { | ||
return setState(false); | ||
@@ -496,7 +511,12 @@ }, []); | ||
function useToggleState(initialValue, alternateValue) { | ||
const [state, setState] = useState(initialValue); | ||
const toggle = useCallback(function toggle() { | ||
const __orig = typeof initialValue === 'function' ? initialValue() : initialValue; | ||
var _useState = useState(initialValue), | ||
state = _useState[0], | ||
setState = _useState[1]; | ||
setState(s => s === __orig ? alternateValue : __orig); | ||
var toggle = useCallback(function toggle() { | ||
var __orig = typeof initialValue === 'function' ? initialValue() : initialValue; | ||
setState(function (s) { | ||
return s === __orig ? alternateValue : __orig; | ||
}); | ||
}, [initialValue, alternateValue]); | ||
@@ -507,16 +527,23 @@ return [state, toggle]; | ||
function useElementSize(ref) { | ||
const [size, setSize] = useState({ | ||
var _useState = useState({ | ||
width: 0, | ||
height: 0 | ||
}); | ||
const handleSize = useCallback(() => { | ||
}), | ||
size = _useState[0], | ||
setSize = _useState[1]; | ||
var handleSize = useCallback(function () { | ||
var _ref$current, _ref$current2; | ||
setSize({ | ||
width: ref.current?.offsetWidth || 0, | ||
height: ref.current?.offsetHeight || 0 | ||
width: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) || 0, | ||
height: ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetHeight) || 0 | ||
}); | ||
}, [ref]); | ||
useEffect(() => { | ||
useEffect(function () { | ||
handleSize(); | ||
window.addEventListener('resize', handleSize); | ||
return () => window.removeEventListener('resize', handleSize); | ||
return function () { | ||
return window.removeEventListener('resize', handleSize); | ||
}; | ||
}, [handleSize]); | ||
@@ -527,4 +554,7 @@ return size; | ||
function usePrefersReducedMotion() { | ||
const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); | ||
useEffect(() => { | ||
var _useState = useState(false), | ||
prefersReducedMotion = _useState[0], | ||
setPrefersReducedMotion = _useState[1]; | ||
useEffect(function () { | ||
if (!window.matchMedia) { | ||
@@ -535,9 +565,13 @@ setPrefersReducedMotion(false); | ||
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); | ||
var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); | ||
setPrefersReducedMotion(mediaQuery.matches); | ||
const listener = event => setPrefersReducedMotion(event.matches); | ||
var listener = function listener(event) { | ||
return setPrefersReducedMotion(event.matches); | ||
}; | ||
mediaQuery.addEventListener('change', listener); | ||
return () => mediaQuery.removeEventListener('change', listener); | ||
return function () { | ||
return mediaQuery.removeEventListener('change', listener); | ||
}; | ||
}, []); | ||
@@ -548,15 +582,22 @@ return prefersReducedMotion; | ||
function useWindowSize() { | ||
const [windowSize, setWindowSize] = useState({ | ||
var _useState = useState({ | ||
windowWidth: undefined, | ||
windowHeight: undefined | ||
}); | ||
useEffect(() => { | ||
const handleResize = () => setWindowSize({ | ||
windowWidth: window.innerWidth, | ||
windowHeight: window.innerHeight | ||
}); | ||
}), | ||
windowSize = _useState[0], | ||
setWindowSize = _useState[1]; | ||
useEffect(function () { | ||
var handleResize = function handleResize() { | ||
return setWindowSize({ | ||
windowWidth: window.innerWidth, | ||
windowHeight: window.innerHeight | ||
}); | ||
}; | ||
handleResize(); | ||
window.addEventListener('resize', handleResize); | ||
return () => window.removeEventListener('resize', handleResize); | ||
return function () { | ||
return window.removeEventListener('resize', handleResize); | ||
}; | ||
}, []); | ||
@@ -567,5 +608,5 @@ return windowSize; | ||
function useClickOutside(ref, handler) { | ||
useEffect(() => { | ||
const listener = event => { | ||
const el = ref?.current; // Do nothing if clicking ref's element or descendent elements | ||
useEffect(function () { | ||
var listener = function listener(event) { | ||
var el = ref === null || ref === void 0 ? void 0 : ref.current; // Do nothing if clicking ref's element or descendent elements | ||
@@ -580,3 +621,5 @@ if (!el || el.contains(event.target)) { | ||
window.addEventListener('mousedown', listener); | ||
return () => window.removeEventListener('mousedown', listener); | ||
return function () { | ||
return window.removeEventListener('mousedown', listener); | ||
}; | ||
}, [handler, ref]); | ||
@@ -591,5 +634,5 @@ } | ||
const forwardRefWithAs = render => { | ||
var forwardRefWithAs = function forwardRefWithAs(render) { | ||
// @ts-ignore | ||
return forwardRef(render); | ||
return /*#__PURE__*/forwardRef(render); | ||
}; | ||
@@ -605,4 +648,4 @@ | ||
function mergeRefs(refs) { | ||
return value => { | ||
refs.forEach(ref => { | ||
return function (value) { | ||
refs.forEach(function (ref) { | ||
if (typeof ref === 'function') { | ||
@@ -617,3 +660,7 @@ ref(value); | ||
const control = { | ||
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
var control = { | ||
sm: { | ||
@@ -630,13 +677,13 @@ width: mapSpacing(1.5), | ||
}; | ||
const input = { | ||
sm: { ...fontGrid('xs', 'nospace'), | ||
var input = { | ||
sm: _objectSpread(_objectSpread({}, fontGrid('xs', 'nospace')), {}, { | ||
height: '2.125rem' // 34 px | ||
}, | ||
md: { ...fontGrid('sm', 'nospace'), | ||
}), | ||
md: _objectSpread(_objectSpread({}, fontGrid('sm', 'nospace')), {}, { | ||
height: '2.875rem' // 46 px | ||
} | ||
}) | ||
}; | ||
const outline = { | ||
var outline = { | ||
outlineWidth: '3px', | ||
@@ -647,7 +694,7 @@ outlineStyle: 'solid', | ||
}; | ||
const underline = { | ||
var underline = { | ||
textDecoration: 'underline', | ||
textDecorationSkipInk: 'auto' | ||
}; | ||
const print = { | ||
var print = { | ||
hidden: { | ||
@@ -665,39 +712,39 @@ '@media print': { | ||
}; | ||
const packs = { | ||
control, | ||
input, | ||
outline, | ||
underline, | ||
var packs = { | ||
control: control, | ||
input: input, | ||
outline: outline, | ||
underline: underline, | ||
print: print | ||
}; | ||
const globalPalette = { | ||
lightForegroundText: `var(${themeVars.lightForegroundText})`, | ||
lightForegroundAction: `var(${themeVars.lightForegroundAction})`, | ||
lightForegroundFocus: `var(${themeVars.lightForegroundFocus})`, | ||
lightForegroundMuted: `var(${themeVars.lightForegroundMuted})`, | ||
lightBackgroundBody: `var(${themeVars.lightBackgroundBody})`, | ||
lightBackgroundShade: `var(${themeVars.lightBackgroundShade})`, | ||
lightBackgroundBodyAlt: `var(${themeVars.lightBackgroundBodyAlt})`, | ||
lightBackgroundShadeAlt: `var(${themeVars.lightBackgroundShadeAlt})`, | ||
lightBorder: `var(${themeVars.lightBorder})`, | ||
darkForegroundText: `var(${themeVars.darkForegroundText})`, | ||
darkForegroundAction: `var(${themeVars.darkForegroundAction})`, | ||
darkForegroundFocus: `var(${themeVars.darkForegroundFocus})`, | ||
darkForegroundMuted: `var(${themeVars.darkForegroundMuted})`, | ||
darkBackgroundBody: `var(${themeVars.darkBackgroundBody})`, | ||
darkBackgroundShade: `var(${themeVars.darkBackgroundShade})`, | ||
darkBackgroundBodyAlt: `var(${themeVars.darkBackgroundBodyAlt})`, | ||
darkBackgroundShadeAlt: `var(${themeVars.darkBackgroundShadeAlt})`, | ||
darkBorder: `var(${themeVars.darkBorder})`, | ||
accent: `var(${themeVars.accent}, ${themeVars.lightForegroundAction})`, | ||
var globalPalette = { | ||
lightForegroundText: "var(".concat(themeVars.lightForegroundText, ")"), | ||
lightForegroundAction: "var(".concat(themeVars.lightForegroundAction, ")"), | ||
lightForegroundFocus: "var(".concat(themeVars.lightForegroundFocus, ")"), | ||
lightForegroundMuted: "var(".concat(themeVars.lightForegroundMuted, ")"), | ||
lightBackgroundBody: "var(".concat(themeVars.lightBackgroundBody, ")"), | ||
lightBackgroundShade: "var(".concat(themeVars.lightBackgroundShade, ")"), | ||
lightBackgroundBodyAlt: "var(".concat(themeVars.lightBackgroundBodyAlt, ")"), | ||
lightBackgroundShadeAlt: "var(".concat(themeVars.lightBackgroundShadeAlt, ")"), | ||
lightBorder: "var(".concat(themeVars.lightBorder, ")"), | ||
darkForegroundText: "var(".concat(themeVars.darkForegroundText, ")"), | ||
darkForegroundAction: "var(".concat(themeVars.darkForegroundAction, ")"), | ||
darkForegroundFocus: "var(".concat(themeVars.darkForegroundFocus, ")"), | ||
darkForegroundMuted: "var(".concat(themeVars.darkForegroundMuted, ")"), | ||
darkBackgroundBody: "var(".concat(themeVars.darkBackgroundBody, ")"), | ||
darkBackgroundShade: "var(".concat(themeVars.darkBackgroundShade, ")"), | ||
darkBackgroundBodyAlt: "var(".concat(themeVars.darkBackgroundBodyAlt, ")"), | ||
darkBackgroundShadeAlt: "var(".concat(themeVars.darkBackgroundShadeAlt, ")"), | ||
darkBorder: "var(".concat(themeVars.darkBorder, ")"), | ||
accent: "var(".concat(themeVars.accent, ", ").concat(themeVars.lightForegroundAction, ")"), | ||
// NOTE: accent is optional | ||
error: `var(${themeVars.error})`, | ||
errorMuted: `var(${themeVars.errorMuted})`, | ||
success: `var(${themeVars.success})`, | ||
successMuted: `var(${themeVars.successMuted})`, | ||
warning: `var(${themeVars.warning})`, | ||
warningMuted: `var(${themeVars.warningMuted})`, | ||
info: `var(${themeVars.info})`, | ||
infoMuted: `var(${themeVars.infoMuted})` | ||
error: "var(".concat(themeVars.error, ")"), | ||
errorMuted: "var(".concat(themeVars.errorMuted, ")"), | ||
success: "var(".concat(themeVars.success, ")"), | ||
successMuted: "var(".concat(themeVars.successMuted, ")"), | ||
warning: "var(".concat(themeVars.warning, ")"), | ||
warningMuted: "var(".concat(themeVars.warningMuted, ")"), | ||
info: "var(".concat(themeVars.info, ")"), | ||
infoMuted: "var(".concat(themeVars.infoMuted, ")") | ||
}; | ||
@@ -715,5 +762,9 @@ | ||
const mq = facepaint([tokens.mediaQuery.min.sm, tokens.mediaQuery.min.md, tokens.mediaQuery.min.lg, tokens.mediaQuery.min.xl]); | ||
const breakpointNames = ['xs', 'sm', 'md', 'lg', 'xl']; | ||
function mapResponsiveProp(value, valueMapper = t => t) { | ||
var mq = facepaint([tokens.mediaQuery.min.sm, tokens.mediaQuery.min.md, tokens.mediaQuery.min.lg, tokens.mediaQuery.min.xl]); | ||
var breakpointNames = ['xs', 'sm', 'md', 'lg', 'xl']; | ||
function mapResponsiveProp(value) { | ||
var valueMapper = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (t) { | ||
return t; | ||
}; | ||
if (!isNonNullable(value)) { | ||
@@ -724,9 +775,11 @@ return undefined; | ||
if (Array.isArray(value)) { | ||
return value.map(t => isNonNullable(t) ? valueMapper(t) : null); | ||
return value.map(function (t) { | ||
return isNonNullable(t) ? valueMapper(t) : null; | ||
}); | ||
} | ||
if (typeof value === 'object') { | ||
const resValue = value; | ||
return breakpointNames.map(key => { | ||
const token = key in resValue ? resValue[key] : undefined; | ||
var resValue = value; | ||
return breakpointNames.map(function (key) { | ||
var token = key in resValue ? resValue[key] : undefined; | ||
@@ -733,0 +786,0 @@ if (isNonNullable(token)) { |
@@ -5,5 +5,7 @@ import { PropsWithChildren } from 'react'; | ||
export declare type CoreProps = PropsWithChildren<{ | ||
/** If true, a CSS reset will be applied. */ | ||
applyReset?: boolean; | ||
/** Enables overwriting of the default theme. */ | ||
theme?: Theme; | ||
applyReset?: boolean; | ||
} & CoreProviderProps>; | ||
export declare function Core({ children, applyReset, theme, linkComponent, }: CoreProps): import("@emotion/react/jsx-runtime").JSX.Element; |
import { PropsWithChildren, AnchorHTMLAttributes } from 'react'; | ||
declare const DefaultLinkComponent: import("react").ForwardRefExoticComponent<LinkProps & { | ||
declare const DefaultLinkComponent: import("react").ForwardRefExoticComponent<{ | ||
/** Describes the anchor element to assistive technologies. */ | ||
'aria-label'?: string | undefined; | ||
/** The CSS class name, typically generated from the `css` prop. */ | ||
className?: string | undefined; | ||
/** Causes the browser to treat the linked URL as a download. */ | ||
download?: NativeLinkProps['download']; | ||
/** The URL that the hyperlink points to. */ | ||
href?: string | undefined; | ||
/** The ID of the hyperlink. */ | ||
id?: string | undefined; | ||
/** How much of the referrer to send when following the link. */ | ||
referrerPolicy?: NativeLinkProps['referrerPolicy']; | ||
/** The relationship of the linked URL as space-separated link types. */ | ||
rel?: string | undefined; | ||
/** Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). */ | ||
target?: NativeLinkProps['target']; | ||
} & { | ||
children?: import("react").ReactNode; | ||
} & { | ||
href?: any; | ||
} & import("react").RefAttributes<HTMLAnchorElement>>; | ||
export declare type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'>; | ||
declare type NativeLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>; | ||
export declare type LinkProps = PropsWithChildren<{ | ||
/** Describes the anchor element to assistive technologies. */ | ||
'aria-label'?: string; | ||
/** The CSS class name, typically generated from the `css` prop. */ | ||
className?: string; | ||
/** Causes the browser to treat the linked URL as a download. */ | ||
download?: NativeLinkProps['download']; | ||
/** The URL that the hyperlink points to. */ | ||
href?: string; | ||
/** The ID of the hyperlink. */ | ||
id?: string; | ||
/** How much of the referrer to send when following the link. */ | ||
referrerPolicy?: NativeLinkProps['referrerPolicy']; | ||
/** The relationship of the linked URL as space-separated link types. */ | ||
rel?: string; | ||
/** Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). */ | ||
target?: NativeLinkProps['target']; | ||
}>; | ||
export declare const coreContext: import("react").Context<{ | ||
linkComponent: import("react").ForwardRefExoticComponent<LinkProps & { | ||
linkComponent: import("react").ForwardRefExoticComponent<{ | ||
/** Describes the anchor element to assistive technologies. */ | ||
'aria-label'?: string | undefined; | ||
/** The CSS class name, typically generated from the `css` prop. */ | ||
className?: string | undefined; | ||
/** Causes the browser to treat the linked URL as a download. */ | ||
download?: NativeLinkProps['download']; | ||
/** The URL that the hyperlink points to. */ | ||
href?: string | undefined; | ||
/** The ID of the hyperlink. */ | ||
id?: string | undefined; | ||
/** How much of the referrer to send when following the link. */ | ||
referrerPolicy?: NativeLinkProps['referrerPolicy']; | ||
/** The relationship of the linked URL as space-separated link types. */ | ||
rel?: string | undefined; | ||
/** Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). */ | ||
target?: NativeLinkProps['target']; | ||
} & { | ||
children?: import("react").ReactNode; | ||
} & { | ||
href?: any; | ||
@@ -13,8 +69,28 @@ } & import("react").RefAttributes<HTMLAnchorElement>>; | ||
export declare type CoreProviderProps = PropsWithChildren<{ | ||
/** The global link component which can be configured for different routing libraries. Defaults to standard `a` tag. */ | ||
linkComponent?: LinkComponent; | ||
}>; | ||
export declare function CoreProvider({ linkComponent, children }: CoreProviderProps): import("@emotion/react/jsx-runtime").JSX.Element; | ||
export declare function useLinkComponent(): import("react").ForwardRefExoticComponent<LinkProps & { | ||
export declare function useLinkComponent(): import("react").ForwardRefExoticComponent<{ | ||
/** Describes the anchor element to assistive technologies. */ | ||
'aria-label'?: string | undefined; | ||
/** The CSS class name, typically generated from the `css` prop. */ | ||
className?: string | undefined; | ||
/** Causes the browser to treat the linked URL as a download. */ | ||
download?: any; | ||
/** The URL that the hyperlink points to. */ | ||
href?: string | undefined; | ||
/** The ID of the hyperlink. */ | ||
id?: string | undefined; | ||
/** How much of the referrer to send when following the link. */ | ||
referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined; | ||
/** The relationship of the linked URL as space-separated link types. */ | ||
rel?: string | undefined; | ||
/** Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). */ | ||
target?: import("react").HTMLAttributeAnchorTarget | undefined; | ||
} & { | ||
children?: import("react").ReactNode; | ||
} & { | ||
href?: any; | ||
} & import("react").RefAttributes<HTMLAnchorElement>>; | ||
export {}; |
@@ -35,4 +35,4 @@ export declare const themeVars: { | ||
export declare type Theme = Partial<Record<keyof typeof themeVars, string>>; | ||
export declare function mergeTheme(defaultTheme: Theme, theme: Theme): { | ||
export declare function mergeTheme(defaultTheme: Theme, theme?: Theme): { | ||
[k: string]: string | undefined; | ||
}; |
{ | ||
"name": "@ag.ds-next/core", | ||
"version": "3.0.0", | ||
"version": "3.0.1", | ||
"main": "dist/ag.ds-next-core.cjs.js", | ||
"module": "dist/ag.ds-next-core.esm.js", | ||
"license": "MIT", | ||
"dependencies": { | ||
"@babel/runtime": "^7.4.5" | ||
}, | ||
"peerDependencies": { | ||
@@ -8,0 +11,0 @@ "@emotion/react": "^11.7.0", |
153
README.md
@@ -1,152 +0,3 @@ | ||
--- | ||
title: Core | ||
description: Core includes a range of styles, variables and code that form the foundation of how the Design System works, including colour, typography and spacing. | ||
group: Foundations | ||
storybookPath: /story/foundations-core--usage | ||
--- | ||
## @ag.ds-next/core | ||
The `Core` component should wrap your entire application, which will enable our CSS variables reset styles. | ||
### Theming | ||
The `Core` component accepts a `theme` prop that enables overwriting of the default theme. | ||
```jsx | ||
import { Core } from '@ag.ds-next/core'; | ||
export default function MyApp({ Component, pageProps }) { | ||
return ( | ||
<Core theme={theme}> | ||
<Component {...pageProps} /> | ||
</Core> | ||
); | ||
} | ||
``` | ||
### Routing / Linking | ||
Our component library has been designed to work with any react routing library. For an example of configuring routing/links in AgDS for a Next.js application, please see [our example site](https://github.com/steelthreads/agds-next/tree/main/example-site/components/LinkComponent.tsx). | ||
```jsx | ||
import { Core } from '@ag.ds-next/core'; | ||
export default function MyApp({ Component, pageProps }) { | ||
return ( | ||
<Core theme={theme} linkComponent={LinkComponent}> | ||
<Component {...pageProps} /> | ||
</Core> | ||
); | ||
} | ||
``` | ||
## Design Tokens | ||
Core includes a range of styles, variables and code that form the foundation of how the Design System works, including colour, typography and spacing. | ||
### Colour | ||
The colour palette is designed and tested to provide colour pairings that pass accessibility contrast ratios while still being easy to implement. This means that designers and developers using the system do not need to be concerned about if a colour will pass WCAG requirements in a particular circumstance. | ||
#### Colour names imply their use | ||
We use semantic naming so that all colours labeled as foreground colours in a theme. These colours are manually tested to pass accessibility contrast ratios when used with all background colours within a theme and vice versa. | ||
#### Tips | ||
- **Do** pair foreground and background colours. | ||
- **Don't** mix light and dark variables. | ||
- **Don't** pair foreground with foreground or background with background. | ||
```jsx live | ||
<Flex flexDirection="column" gap={1}> | ||
<Flex palette="light"> | ||
{['body', 'shade', 'bodyAlt', 'shadeAlt'].map((bg) => ( | ||
<Flex | ||
key={bg} | ||
flexDirection="column" | ||
gap={1} | ||
background={bg} | ||
paddingY={1} | ||
paddingX={2} | ||
> | ||
{['text', 'muted', 'action', 'focus'].map((fg) => ( | ||
<Text key={fg} color={fg}> | ||
{fg} | ||
</Text> | ||
))} | ||
</Flex> | ||
))} | ||
</Flex> | ||
<Flex palette="dark"> | ||
{['body', 'shade', 'bodyAlt', 'shadeAlt'].map((bg) => ( | ||
<Flex | ||
key={bg} | ||
flexDirection="column" | ||
gap={1} | ||
background={bg} | ||
paddingY={1} | ||
paddingX={2} | ||
> | ||
{['text', 'muted', 'action', 'focus'].map((fg) => ( | ||
<Text key={fg} color={fg}> | ||
{fg} | ||
</Text> | ||
))} | ||
<Text color="focus"> | ||
<hr /> | ||
</Text> | ||
</Flex> | ||
))} | ||
</Flex> | ||
</Flex> | ||
``` | ||
### Typography | ||
A typographic scale was used to create a set of font-size and line-height values which have been designed for legibility and can be easily be implemented by designers or developers with a predictable output. | ||
Using the design system's typography values means any object containing text is more likely to align with another element. This appearance of a baseline grid is created by automatically rounding the line-heights to the nearest grid value 4px, then converting them back to a unit-less value. | ||
To ensure consistency with other components in the system: | ||
- Designers can use font-size and line-height values from the typographic scale. | ||
- Developers can use the `fontSize` and `lineHeight` props available on typographic components which use of the `fontGrid` function. | ||
```jsx live | ||
<Flex palette="light" background="body" gap={1}> | ||
<Flex flexDirection="column" gap={1}> | ||
<Text fontSize="sm" fontWeight="bold"> | ||
Default | ||
</Text> | ||
{['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'].map((size) => ( | ||
<Box key={size} background="shade"> | ||
<Text fontSize={size}>{size.toUpperCase()}</Text> | ||
</Box> | ||
))} | ||
</Flex> | ||
<Flex flexDirection="column" palette="light" background="body" gap={1}> | ||
<Text fontSize="sm" fontWeight="bold"> | ||
Heading | ||
</Text> | ||
{['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'].map((size) => ( | ||
<Box key={size} background="shade"> | ||
<Text fontSize={size} lineHeight="heading"> | ||
{size.toUpperCase()} | ||
</Text> | ||
</Box> | ||
))} | ||
</Flex> | ||
<Flex flexDirection="column" palette="light" background="body" gap={1}> | ||
<Text fontSize="sm" fontWeight="bold"> | ||
Nospace | ||
</Text> | ||
{['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'].map((size) => ( | ||
<Box key={size} background="shade"> | ||
<Text fontSize={size} lineHeight="nospace"> | ||
{size.toUpperCase()} | ||
</Text> | ||
</Box> | ||
))} | ||
</Flex> | ||
</Flex> | ||
``` | ||
Documentation for this package can be found here: https://steelthreads.github.io/agds-next/packages/foundations/core |
@@ -80,3 +80,2 @@ // Tokens | ||
// FIXME... it's unclear how spacing should work at the moment. | ||
export type Spacing = 0 | 0.25 | 0.5 | 0.75 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6; | ||
@@ -83,0 +82,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
198863
54
3939
4
4
38
+ Added@babel/runtime@^7.4.5
+ Added@babel/runtime@7.26.0(transitive)
+ Addedregenerator-runtime@0.14.1(transitive)