design-zystem 1.0.186 → 1.0.187
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -92,7 +92,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
92
92
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
93
93
|
|
|
94
94
|
"use strict";
|
|
95
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Button: () => (/* binding */ Button),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\n/* harmony import */ var _Row_Row__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Row/Row */ \"./src/Components/Row/Row.jsx\");\nvar _excluded = [\"label\", \"children\", \"iconLeft\", \"iconRight\", \"iconColor\", \"variant\", \"outline\", \"size\", \"width\", \"isLoading\", \"fontWeight\", \"onClick\", \"disabled\"];\nvar _templateObject, _templateObject2;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\n\n\nvar defaultSizes = {\n xs: {\n height: 32,\n paddingX: 16,\n textSize: \"xs\"\n },\n s: {\n height: 36,\n paddingX: 16,\n textSize: \"s\"\n },\n m: {\n height: 40,\n paddingX: 20,\n textSize: \"s\"\n },\n l: {\n height: 44,\n paddingX: 24,\n textSize: \"m\"\n }\n};\nvar darken = function darken(hex) {\n var amt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.12;\n var n = hex.replace(\"#\", \"\");\n var v = n.length === 3 ? n.split(\"\").map(function (c) {\n return c + c;\n }).join(\"\") : n;\n var bi = parseInt(v, 16);\n var r = bi >> 16 & 255,\n g = bi >> 8 & 255,\n b = bi & 255;\n r = Math.max(0, Math.round(r * (1 - amt)));\n g = Math.max(0, Math.round(g * (1 - amt)));\n b = Math.max(0, Math.round(b * (1 - amt)));\n return \"#\".concat([r, g, b].map(function (x) {\n return x.toString(16).padStart(2, \"0\");\n }).join(\"\"));\n};\nvar getColor = function getColor(keyOrHex, fb) {\n return _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors[keyOrHex] || keyOrHex || fb;\n};\nvar shouldForwardProp = function shouldForwardProp(p) {\n return ![\"variant\", \"outline\", \"size\", \"width\", \"isLoading\", \"sizeConfig\", \"iconOnly\"].includes(p);\n};\nvar StyledButton = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].button.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n position: relative;\\n appearance: none;\\n border: 0;\\n -webkit-tap-highlight-color: transparent;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n cursor: \", \";\\n user-select: none;\\n white-space: nowrap;\\n overflow: hidden;\\n transition: background-color 150ms, color 150ms, border-color 150ms,\\n transform 150ms;\\n will-change: transform;\\n outline: none;\\n\\n height: \", \"px;\\n padding: 0 \", \"px;\\n border-radius: 6px;\\n font-weight: 700;\\n\\n font-family: \\\"Open Sans\\\", sans-serif;\\n\\n width: \", \";\\n\\n \", \"\\n\\n &:focus-visible {\\n outline: 2px solid \", \";\\n outline-offset: 2px;\\n }\\n\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n background: var(--hover-overlay, transparent);\\n opacity: 0;\\n transform: scale(0.98);\\n transition: opacity 150ms ease, transform 150ms ease;\\n pointer-events: none;\\n }\\n\\n &:hover:not(:disabled) {\\n transform: scale(1.02);\\n }\\n &:hover:not(:disabled)::before {\\n opacity: 1;\\n transform: scale(1);\\n }\\n\\n \", \"\\n\"])), function (p) {\n return p.disabled || p.isLoading ? \"not-allowed\" : \"pointer\";\n}, function (p) {\n return p.sizeConfig.height;\n}, function (p) {\n return p.sizeConfig.paddingX;\n}, function (props) {\n return props.width || \"fit-content\";\n}, function (p) {\n var base = getColor(p.variant, _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.blue_700);\n var hover = darken(base, 0.12);\n var pressed = darken(base, 0.22);\n if (p.outline) {\n return \"\\n background-color: \".concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.transparent, \";\\n color: \").concat(base, \";\\n border: 1px solid \").concat(base, \";\\n --hover-overlay: rgba(0,0,0,.06);\\n &:hover:not(:disabled){ color:\").concat(hover, \"; border-color:\").concat(hover, \"; }\\n &:active:not(:disabled){ color:\").concat(pressed, \"; border-color:\").concat(pressed, \"; transform: scale(0.98); }\\n &:disabled{ opacity:.6; cursor:not-allowed; }\\n \");\n }\n return \"\\n background-color: \".concat(base, \";\\n color: \").concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.white, \";\\n border: 1px solid transparent;\\n --hover-overlay: rgba(255,255,255,.12);\\n &:hover:not(:disabled){ background-color:\").concat(hover, \"; }\\n &:active:not(:disabled){ background-color:\").concat(pressed, \"; transform: scale(0.98); }\\n &:disabled{ background-color:\").concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.blue_200, \"; opacity:.6; cursor:not-allowed; }\\n \");\n}, _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.pastel_blue, function (p) {\n return p.iconOnly && \"\\n width: 26px !important;\\n height: 26px !important;\\n padding: 0 !important;\\n border-radius: 6px;\\n \";\n});\nvar Loader = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n border: 3px solid transparent;\\n border-top: 3px solid currentColor;\\n border-radius: 50%;\\n width: 1.25em;\\n height: 1.25em;\\n animation: spin 0.6s linear infinite;\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n transform: translate(-50%, -50%);\\n @keyframes spin {\\n to {\\n transform: translate(-50%, -50%) rotate(360deg);\\n }\\n }\\n\"])));\nvar Button = function Button(_ref) {\n var label = _ref.label,\n children = _ref.children,\n iconLeft = _ref.iconLeft,\n iconRight = _ref.iconRight,\n iconColor = _ref.iconColor,\n _ref$variant = _ref.variant,\n variant = _ref$variant === void 0 ? \"blue_700\" : _ref$variant,\n _ref$outline = _ref.outline,\n outline = _ref$outline === void 0 ? false : _ref$outline,\n _ref$size = _ref.size,\n size = _ref$size === void 0 ? \"m\" : _ref$size,\n width = _ref.width,\n _ref$isLoading = _ref.isLoading,\n isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,\n fontWeight = _ref.fontWeight,\n onClick = _ref.onClick,\n disabled = _ref.disabled,\n rest = _objectWithoutProperties(_ref, _excluded);\n var ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var sizeConfig = defaultSizes[size];\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledButton, _extends({\n ref: ref,\n onClick: onClick,\n variant: variant,\n outline: outline,\n width: width,\n isLoading: isLoading,\n fontWeight: fontWeight,\n sizeConfig: sizeConfig,\n disabled: disabled || isLoading,\n \"aria-busy\": isLoading ? \"true\" : undefined,\n iconOnly: (iconLeft || iconRight) && !label\n }, rest), isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Loader, null), !isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Row_Row__WEBPACK_IMPORTED_MODULE_4__.Row, {\n gap: \"8\",\n fullwidth: true,\n justifyContent: \"center\",\n alignItems: \"center\"\n }, iconLeft && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, {\n name: iconLeft,\n size: size,\n family: \"regular\",\n color: outline ? variant : iconColor\n }), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, {\n size: sizeConfig.textSize,\n variant: outline ? variant : \"white\",\n align: \"center\"\n }, label), iconRight && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, {\n name: iconRight,\n size: size,\n family: \"regular\",\n color: outline ? variant : iconColor\n }), !label && children));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Button);\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Button/Button.jsx?");
|
|
95
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Button: () => (/* binding */ Button),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\n/* harmony import */ var _Row_Row__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Row/Row */ \"./src/Components/Row/Row.jsx\");\nvar _excluded = [\"label\", \"children\", \"iconLeft\", \"iconRight\", \"iconColor\", \"variant\", \"outline\", \"size\", \"width\", \"isLoading\", \"fontWeight\", \"onClick\", \"disabled\"];\nvar _templateObject, _templateObject2;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\n\n\nvar defaultSizes = {\n xs: {\n height: 32,\n paddingX: 16,\n textSize: \"xs\"\n },\n s: {\n height: 36,\n paddingX: 16,\n textSize: \"s\"\n },\n m: {\n height: 40,\n paddingX: 20,\n textSize: \"s\"\n },\n l: {\n height: 44,\n paddingX: 24,\n textSize: \"m\"\n }\n};\nvar darken = function darken(hex) {\n var amt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.12;\n var n = hex.replace(\"#\", \"\");\n var v = n.length === 3 ? n.split(\"\").map(function (c) {\n return c + c;\n }).join(\"\") : n;\n var bi = parseInt(v, 16);\n var r = bi >> 16 & 255,\n g = bi >> 8 & 255,\n b = bi & 255;\n r = Math.max(0, Math.round(r * (1 - amt)));\n g = Math.max(0, Math.round(g * (1 - amt)));\n b = Math.max(0, Math.round(b * (1 - amt)));\n return \"#\".concat([r, g, b].map(function (x) {\n return x.toString(16).padStart(2, \"0\");\n }).join(\"\"));\n};\nvar getColor = function getColor(keyOrHex, fb) {\n return _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors[keyOrHex] || keyOrHex || fb;\n};\nvar shouldForwardProp = function shouldForwardProp(p) {\n return ![\"variant\", \"outline\", \"size\", \"width\", \"isLoading\", \"sizeConfig\", \"iconOnly\"].includes(p);\n};\nvar StyledButton = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].button.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n position: relative;\\n appearance: none;\\n border: 0;\\n -webkit-tap-highlight-color: transparent;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n cursor: \", \";\\n user-select: none;\\n white-space: nowrap;\\n overflow: hidden;\\n transition: background-color 150ms, color 150ms, border-color 150ms,\\n transform 150ms;\\n will-change: transform;\\n outline: none;\\n\\n height: \", \"px;\\n padding: 0 \", \"px;\\n border-radius: 6px;\\n font-weight: 700;\\n\\n font-family: \\\"Open Sans\\\", sans-serif;\\n\\n width: \", \";\\n\\n \", \"\\n\\n &:focus-visible {\\n outline: 2px solid \", \";\\n outline-offset: 2px;\\n }\\n\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n background: var(--hover-overlay, transparent);\\n opacity: 0;\\n transform: scale(0.98);\\n transition: opacity 150ms ease, transform 150ms ease;\\n pointer-events: none;\\n }\\n\\n &:hover:not(:disabled) {\\n transform: scale(1.02);\\n }\\n &:hover:not(:disabled)::before {\\n opacity: 1;\\n transform: scale(1);\\n }\\n\\n \", \"\\n\"])), function (p) {\n return p.disabled || p.isLoading ? \"not-allowed\" : \"pointer\";\n}, function (p) {\n return p.sizeConfig.height;\n}, function (p) {\n return p.sizeConfig.paddingX;\n}, function (props) {\n return props.width || \"fit-content\";\n}, function (p) {\n var base = getColor(p.variant, _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.blue_700);\n var hover = darken(base, 0.12);\n var pressed = darken(base, 0.22);\n if (p.outline) {\n return \"\\n background-color: \".concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.transparent, \";\\n color: \").concat(base, \";\\n border: 1px solid \").concat(base, \";\\n --hover-overlay: rgba(0,0,0,.06);\\n &:hover:not(:disabled){ color:\").concat(hover, \"; border-color:\").concat(hover, \"; }\\n &:active:not(:disabled){ color:\").concat(pressed, \"; border-color:\").concat(pressed, \"; transform: scale(0.98); }\\n &:disabled{ opacity:.6; cursor:not-allowed; }\\n \");\n }\n return \"\\n background-color: \".concat(base, \";\\n color: \").concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.white, \";\\n border: 1px solid transparent;\\n --hover-overlay: rgba(255,255,255,.12);\\n &:hover:not(:disabled){ background-color:\").concat(hover, \"; }\\n &:active:not(:disabled){ background-color:\").concat(pressed, \"; transform: scale(0.98); }\\n &:disabled{ background-color:\").concat(_data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.blue_200, \"; opacity:.6; cursor:not-allowed; }\\n \");\n}, _data_colors__WEBPACK_IMPORTED_MODULE_1__.colors.pastel_blue, function (p) {\n return p.iconOnly && \"\\n width: 36px !important;\\n height: 36px !important;\\n padding: 0 !important;\\n border-radius: 6px;\\n \";\n});\nvar Loader = styled_components__WEBPACK_IMPORTED_MODULE_5__[\"default\"].span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n border: 3px solid transparent;\\n border-top: 3px solid currentColor;\\n border-radius: 50%;\\n width: 1.25em;\\n height: 1.25em;\\n animation: spin 0.6s linear infinite;\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n transform: translate(-50%, -50%);\\n @keyframes spin {\\n to {\\n transform: translate(-50%, -50%) rotate(360deg);\\n }\\n }\\n\"])));\nvar Button = function Button(_ref) {\n var label = _ref.label,\n children = _ref.children,\n iconLeft = _ref.iconLeft,\n iconRight = _ref.iconRight,\n iconColor = _ref.iconColor,\n _ref$variant = _ref.variant,\n variant = _ref$variant === void 0 ? \"blue_700\" : _ref$variant,\n _ref$outline = _ref.outline,\n outline = _ref$outline === void 0 ? false : _ref$outline,\n _ref$size = _ref.size,\n size = _ref$size === void 0 ? \"m\" : _ref$size,\n width = _ref.width,\n _ref$isLoading = _ref.isLoading,\n isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,\n fontWeight = _ref.fontWeight,\n onClick = _ref.onClick,\n disabled = _ref.disabled,\n rest = _objectWithoutProperties(_ref, _excluded);\n var ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var sizeConfig = defaultSizes[size];\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledButton, _extends({\n ref: ref,\n onClick: onClick,\n variant: variant,\n outline: outline,\n width: width,\n isLoading: isLoading,\n fontWeight: fontWeight,\n sizeConfig: sizeConfig,\n disabled: disabled || isLoading,\n \"aria-busy\": isLoading ? \"true\" : undefined,\n iconOnly: (iconLeft || iconRight) && !label\n }, rest), isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Loader, null), !isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Row_Row__WEBPACK_IMPORTED_MODULE_4__.Row, {\n gap: \"8\",\n fullwidth: true,\n justifyContent: \"center\",\n alignItems: \"center\"\n }, iconLeft && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, {\n name: iconLeft,\n size: size,\n family: \"regular\",\n color: outline ? variant : iconColor\n }), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, {\n size: sizeConfig.textSize,\n variant: outline ? variant : \"white\",\n align: \"center\"\n }, label), iconRight && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, {\n name: iconRight,\n size: size,\n family: \"regular\",\n color: outline ? variant : iconColor\n }), !label && children));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Button);\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Button/Button.jsx?");
|
|
96
96
|
|
|
97
97
|
/***/ }),
|
|
98
98
|
|