"use strict";
// The require scope
var __webpack_require__ = {};
/************************************************************************/ // webpack/runtime/define_property_getters
(()=>{
    __webpack_require__.d = function(exports1, definition) {
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
// webpack/runtime/has_own_property
(()=>{
    __webpack_require__.o = function(obj, prop) {
        return Object.prototype.hasOwnProperty.call(obj, prop);
    };
})();
// webpack/runtime/make_namespace_object
(()=>{
    // define __esModule on exports
    __webpack_require__.r = function(exports1) {
        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
/************************************************************************/ var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
    default: ()=>/* binding */ Colors_stories_rslib_entry_,
    Default: ()=>/* binding */ Default
});
const react_namespaceObject = require("@chakra-ui/react");
const icons_namespaceObject = require("@chakra-ui/icons");
const meta = {
    title: 'Theme/Colors',
    component: react_namespaceObject.Box,
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=3%3A4600&mode=design&t=tBiDQLpDwZmQqOWV-1'
        }
    }
};
/* ESM default export */ const Colors_stories_rslib_entry_ = meta;
const ColorBox = ({ color, name })=>{
    const { onCopy, hasCopied } = (0, react_namespaceObject.useClipboard)(color);
    name = name || color;
    return /*#__PURE__*/ React.createElement(react_namespaceObject.Flex, {
        alignItems: 'center',
        gap: "3"
    }, /*#__PURE__*/ React.createElement(react_namespaceObject.Box, {
        bg: color,
        boxSize: "3rem",
        borderRadius: 'md'
    }), /*#__PURE__*/ React.createElement(react_namespaceObject.Box, null, /*#__PURE__*/ React.createElement(react_namespaceObject.Text, {
        as: "b",
        textTransform: 'capitalize'
    }, name), /*#__PURE__*/ React.createElement(react_namespaceObject.Box, null, /*#__PURE__*/ React.createElement(react_namespaceObject.chakra.span, null, color), /*#__PURE__*/ React.createElement(react_namespaceObject.Button, {
        size: "xs",
        variant: 'link',
        onClick: onCopy
    }, hasCopied ? 'Copied!' : 'Copy'))));
};
const Default = {
    render: (args)=>/*#__PURE__*/ React.createElement(react_namespaceObject.Box, null, /*#__PURE__*/ React.createElement(react_namespaceObject.Text, {
            mb: "4"
        }, "Out of the box, Chakra provides a default color palette that we automatically inherit. For a list of available colors and their respective color tokens (ie:", ' ', /*#__PURE__*/ React.createElement(react_namespaceObject.Text, {
            as: "code"
        }, /*#__PURE__*/ React.createElement(react_namespaceObject.Mark, {
            bg: "yellow.200"
        }, "blue.500")), "), refer to the Chakra", ' ', /*#__PURE__*/ React.createElement(react_namespaceObject.Link, {
            href: "https://chakra-ui.com/docs/styled-system/theme#colors",
            isExternal: true
        }, "Colors page ", /*#__PURE__*/ React.createElement(icons_namespaceObject.ExternalLinkIcon, {
            mx: "2px"
        }))), /*#__PURE__*/ React.createElement(react_namespaceObject.Text, {
            mb: "4"
        }, "The Redpanda UI Library offers additional colors that coincide with the Redpanda Design System:"), /*#__PURE__*/ React.createElement(react_namespaceObject.Heading, {
            as: "h2",
            mb: "4"
        }, "Brand"), /*#__PURE__*/ React.createElement(react_namespaceObject.Grid, {
            gap: 2,
            templateColumns: 'repeat( auto-fit, minmax(25%, 1fr) )'
        }, /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.50",
            name: "brand 50"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.100",
            name: "brand 100"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.200",
            name: "brand 200"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.300",
            name: "brand 300"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.400",
            name: "brand 400"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.500",
            name: "brand 500"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.600",
            name: "brand 600"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.700",
            name: "brand 700"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.800",
            name: "brand 800"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.900",
            name: "brand 900"
        })), /*#__PURE__*/ React.createElement(react_namespaceObject.Divider, {
            my: "8"
        }), /*#__PURE__*/ React.createElement(react_namespaceObject.Heading, {
            as: "h2",
            mb: "4"
        }, "Dark Blue"), /*#__PURE__*/ React.createElement(react_namespaceObject.Grid, {
            gap: 2,
            templateColumns: 'repeat( auto-fit, minmax(25%, 1fr) )'
        }, /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.50"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.100"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.200"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.300"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.400"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.500"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.600"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.700"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.800"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.900"
        })), /*#__PURE__*/ React.createElement(react_namespaceObject.Divider, {
            my: "8"
        }), /*#__PURE__*/ React.createElement(react_namespaceObject.Heading, {
            as: "h2",
            mb: "4"
        }, "Gray vs. Grey"), /*#__PURE__*/ React.createElement(react_namespaceObject.Text, null, "We support both variations of the spelling of Gray (or Grey):"), /*#__PURE__*/ React.createElement(react_namespaceObject.Grid, {
            mt: "4",
            gap: 2,
            templateColumns: 'repeat( auto-fit, minmax(25%, 1fr) )'
        }, /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.50"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.100"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.200"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.300"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.400"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.500"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.600"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.700"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.800"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.900"
        })), /*#__PURE__*/ React.createElement(react_namespaceObject.Divider, {
            my: "6"
        }), /*#__PURE__*/ React.createElement(react_namespaceObject.Grid, {
            gap: 2,
            templateColumns: 'repeat( auto-fit, minmax(25%, 1fr) )'
        }, /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.50"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.100"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.200"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.300"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.400"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.500"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.600"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.700"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.800"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.900"
        })))
};
var __webpack_export_target__ = exports;
for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
    value: true
});
